css应用

java风

浏览: 57577 次
来自: 北京

最近访客更多访客>>

bdpy9864

bemchou89

CRH2016

cqdtb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

css

CSS

本章目标

1、CSS的定义、优势

2、css的基本语法

3、引入css的方式

4、css的选择器

重点与难点

1、 Css的引用方式和选择器

要讲的内容

1. 基本的语法

选择器的名称{

属性名:属性值（有些情况要加上引号）;

}

比如标记选择器的语法：

div{

color:red;

font-size:20px;

}

2. 三种选择器的命名方式，引用方式以及适用的范围

a) 标记选择器

命名方式：

tagname{

color:red;

font-size:20px;

}

Tagname指的是已有标签的名称所以该选择器只能采用已有标签作为选择器的名称

适用范围：页面中所有该标签的元素都适用页面中的标签不需要引用即可实现效果

b) 类型选择器

命名方式：

.anyname{

color:red;

font-size:20px;

}

Anyname指的是任意的名称不受命名的限制

适用范围：页面中某些class属性值等于该选择器的名称的元素起作用适用于单个的元素

只需在需要用到该选择器的元素加上class属性使其值等于该名称即可可以在页面中多次使用同一个类型选择器

c) ID选择器

命名方式

#anyname{

color:red;

font-size:20px;

}

其中anyname可以是任意的名称

适用范围：页面中的id属性值为该选择器名称的元素起作用使用于单个的元素

注意：与类型选择器的区别

1. 定义和引用方式不同

2. 类型选择器可以在页面中重复使用而id选择器在页面中只使用一次

3. 引用css的三种方式

1. 第一种引用方式定义内部样式块对象

在head中写<style type="text/css"></style> 然后再改style标签中写css的代码

2. 内联定义

在制定的标签的style属性直接写该标签的css的样式

比如 <h3 style="color: orange;font-size: 40px">专题扫描用户硬盘文件股票1日缩水百亿 </h3>

3．引入外部css文件真正意义上实现表现形式和表现内容完全相分离推荐使用的方式。

如何将CSS样式加入网页：{

1、定义内部样式块对象；<style type=”text/css”>……</style>

2、内联定义；<h1 style=”font-size:20px;color:blue”>Hello</h1>

3、链入外部样式文件。<link rel=”stylesheet” href=”03.css” type=”text/css”>

例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>firstcss.html</title>

input {

width: 170px;

height: 25px;

color: red;

}

</style>

</head>

<body>

<tr>

<td>

邮箱 :

</td>

<td>

</td>

</tr>

<tr>

<td>

密码 :

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

}

选择器：{

<!-- css的第一种选择器标记选择器要选取已有标签作为该选择器的名称{}

使用方式：无需引用

适用范围：对于页面中所有的该选择器对应的标签都起作用

css的第二种选择器类型选择器定义的语法：.任意的名称 {}

使用方式：需要用到类型选择器的元素的class属性值等于该选择器的名称即可

适用范围：对于页面中所有的class属性等于该名称的元素都起作用可以重复使用

css的第三种选择器 ID选择器定义的语法 #任意的名称 {}

使用方式：需要使用到id选择器的元素的id属性值等于该选择器的名称即可

适用范围：对于页面中所有的id属性等于该名称的元素都起作用但是由于id是代表该元素在页面的唯一标示所有id选择器使用只建议使用一次

通常情况下id选择器用类型选择器代替

-->

h1{

color: red;

font-size: 50px;

font-weight: lighter;

}

h2{

color: green;

font-size: 25px;

}

div {

text-align : right;

layout-flow:vertical-ideographic;

color: orange;

font-size: 20px;

font-weight: bold;

background-image: url("../images/555.jpg");

}

input {

height: 25px;

width: 170px;

}

* 类型选择器

.first{

color: blue;

font-size: 100px;

}

* ID选择器

#second{

color: olive;

font-size: 50px;

}

</style>

}

下拉列表分组：{

<option value="002">您母亲的姓名？</option>

<option value="003">您父亲的姓名？</option>

</optgroup>

<option value="002">您母亲的生日？</option>

<option value="003">您父亲的生日？</option>

</optgroup>

<option value="002">您母亲的职业？</option>

<option value="003">您父亲的职业？</option>

</optgroup>

}

级联菜单：{

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>testcity.html</title>

function createSecondLevel(obj){

var city = document.getElementById("city");

city.options.length = 1;//清空option的方式

var option1;

var option2;

var option3;

var option4;

if(obj == "001"){

option1 = new Option("石家庄市","001001");//创建option的方式

option2 = new Option("保定市","001002");

option3 = new Option("沧州市","001003");

option4 = new Option("承德市","001004");

}

if(obj == "002"){

option1 = new Option("郑州市","002001");

option2 = new Option("洛阳市","002002");

option3 = new Option("开封市","002003");

option4 = new Option("南阳市","002004");

}

if(obj == "003"){

option1 = new Option("济南市","003001");

option2 = new Option("青岛市","003002");

option3 = new Option("潍坊市","003003");

option4 = new Option("威海市","003004");

}

city.options.add(option1);//添加option的方式

city.options.add(option2);

city.options.add(option3);

city.options.add(option4);

}

</script>

</head>

<body>

</select>

</select>

</select>

</body>

</html>

}

背景图片：{

}

实例计算器：{

input{

width: 55px;

height: 36px;

font-size: 15px;

font-weight: bold;

}

.first {

width: 55px;

height: 80px;

font-size: 17px;

font-weight: bold;

}

#total{

width: 290px;

height: 40px;

font-size: 30px;

font-weight: bolder;

color: green;

text-align: right;

}

</style>

</head>

<body>

<tr>

</td>

</tr>

<tr>

算式提示:

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</body>

}

分享到：

javascript应用1 | Html

2011-09-10 14:59
浏览 902
评论(1)
分类:Web前端
查看更多

1 楼 wanxkl 2011-09-16

哇！总结的太好了。。凤哥哥，你好强大啊。。请问您跟凤姐什么关系啊？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css应用

评论

发表评论

相关推荐

lucene3.0 例一

lucene3.0

分布式存储(转载)

java设计原则

java静态、动态代理

Hibernate声明事务

javascript应用3

javascript应用2

javascript应用1

Html

jsp、el、jstl.doc

Jdbc

文件上传步骤

中文乱码问题解决

事务传播特性与隔离级别

监听器

过滤器

web编程常用配置2

web编程常用配置1

sql练习

最近访客更多访客>>