<head>
<style type="text/css">
/*
选择器： 选择器的作用就是找到对应的数据进行样式化。
1.标签选择器： 就是找到所有指定的标签进行样式化。
格式：
标签名{
样式1；样式2....
}
例子：
div{
color:#F00;
font-size:24px;
}（对所有的div且只对div起作用）
2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。
格式：
.class的属性值{
样式1；样式2...
}
例子：
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
}（对同样的class的属性值起作用）
类选择器要注意的事项：
1. html元素的class属性值一定不能以数字开头.
2. 类选择器的样式是要优先于标签选择器的样式。
3. ID选择器： 使用ID选择器首先要给html元素添加一个id的属性值。
格式： ID选择器的格式：
#id属性值{
样式1；样式2...
}
例子：
#one{
background-color:#FF9;
color:#999;
font-size:18px;
}
id选择器要注意的事项：
1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
2. ID的属性值也是不能以数字开头的。
3. ID的属性值在一个html页面中只能出现一次。
样式1，样式2....
}
例子：
.two span{
background-color:#999;
font-size:24px;
}
5. 并集选择器： 对指定的选择器进行统一的样式化。
格式：
选择器1,选择器2..{
样式1；样式2...
}
例子：
span,a{
border-style:solid;
border-color:#F00;
}
6. 通过选择器:
格式：
*{
样式1；样式2...
}
例子：
*{
text-decoration:line-through;
background-color:#CCC;
}
*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="one" class="two">这个是第一个div标签...</div>
<div id="one" class="two">这个是<span>第二个div标签</span>...</div>
<span>这个是一个span标签</span><br/>
<a class="two" href="#">新闻标题</a>
1. a:hover 必须被置于 a:link 和 a:visited 之后
2. a:active 必须被置于 a:hover 之后
*/
a:link{color:#F00} /* 没有被点击过---红色 */
a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */
a:hover{color:#00F;} /* 鼠标经过的状态---蓝色 */
a:active{color:#FF0;}/*鼠标点击着的状态颜色--黄色*/
</style>
</head>
<body>
<a href="#">百度</a>
</body>
<style type="text/css">
/*
选择器： 选择器的作用就是找到对应的数据进行样式化。
1.标签选择器： 就是找到所有指定的标签进行样式化。
格式：
标签名{
样式1；样式2....
}
例子：
div{
color:#F00;
font-size:24px;
}（对所有的div且只对div起作用）
2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。
格式：
.class的属性值{
样式1；样式2...
}
例子：
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
}（对同样的class的属性值起作用）
类选择器要注意的事项：
1. html元素的class属性值一定不能以数字开头.
2. 类选择器的样式是要优先于标签选择器的样式。
3. ID选择器： 使用ID选择器首先要给html元素添加一个id的属性值。
格式： ID选择器的格式：
#id属性值{
样式1；样式2...
}
例子：
#one{
background-color:#FF9;
color:#999;
font-size:18px;
}
id选择器要注意的事项：
1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
2. ID的属性值也是不能以数字开头的。
3. ID的属性值在一个html页面中只能出现一次。
4. 交集选择器： 就是对选择器1中的选择器2里面的数据进行样式化。
格式：
选择器1 选择器2{样式1，样式2....
}
例子：
.two span{
background-color:#999;
font-size:24px;
}
5. 并集选择器： 对指定的选择器进行统一的样式化。
格式：
选择器1,选择器2..{
样式1；样式2...
}
例子：
span,a{
border-style:solid;
border-color:#F00;
}
6. 通过选择器:
格式：
*{
样式1；样式2...
}
例子：
*{
text-decoration:line-through;
background-color:#CCC;
}
*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="one" class="two">这个是第一个div标签...</div>
<div id="one" class="two">这个是<span>第二个div标签</span>...</div>
<span>这个是一个span标签</span><br/>
<a class="two" href="#">新闻标题</a>
</body>
附：伪类选择器
<head>
<style type="text/css">
/*
伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。
a:link 指值元素没有被访问过的状态。
a:visited指元素已经访问的状态。
a:hover 指鼠标经过元素的状态。
a:active指鼠标按下激活元素的状态
注意：
1. a:hover 必须被置于 a:link 和 a:visited 之后
2. a:active 必须被置于 a:hover 之后
*/
a:link{color:#F00} /* 没有被点击过---红色 */
a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */
a:hover{color:#00F;} /* 鼠标经过的状态---蓝色 */
a:active{color:#FF0;}/*鼠标点击着的状态颜色--黄色*/
</style>
</head>
<body>
<a href="#">百度</a>
</body>
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
