网站建设
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言
CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入,就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册,或登录W3C官网(http://www.w3c.org)。
使用CSS,要了解常用的各种选择器。
1.标记选择器:
一个HTML页面由很多不同的标记组成,而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例:
<style>
h1 {
color: red;
font-size:25px;
}
</style>
每一个选择器都包含选择器本身、属性和值,其中属性和值可以设置多个,从而实现对同一标记名称声明多种样式。
CSS语言对于所有属性和值都有相对严格的要求,如果声明的属性在CSS规范中没有,或者某个属性的值不符合该属性的要求,都不能使该CSS语句生效。
还有一种通配选择器“*”,表示其中设置的样式会应用于所有的网页元素。示例:
* {
font-family:Verdada,Arial,sans-serif;
}
2.类选择器:
类选择器的名称可以由用户自定义,属性和值与标记选择器一样,必须符合CSS规范。示例:
<html><head><title>class选择器</title>
<style type="text/css">
.red{
color: red;
font-size:18px;
}
.green{
color: green;
font-size:20px;
}
</style></head>
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3使用class</h3>
</body></html>
任何一个class选择器都适用于所有HTML标记,只需要用HTML标记的class属性即可。
3.ID选择器:
ID选择器只能在HTML页面中使用一次,利用HTML标记中的ID属性,有更强的针对性。示例:
<html><head><title>ID选择器</title>
<style type="text/css">
#bold{
font-weight: bold;
}
#green{
font-size:30px;
color:#009900;
}
</style></head>
<body>
<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
</body></html>
ID选择器也可以用于多个标记,但因为JavaScript等脚本语言也使用id,如果一个HTML中有两个相同的id标记,会导致查找id时出错,所以一个id最好只能赋予一个HTML标记。ID选择器不支持像class那样的多风格同时使用。
4.交集选择器:
交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第1个必须是标记选择器,第2个必须是类别选择器或者ID选择器。交集选择器是两个选择器连续书写,之间不能有空格。示例:
<html><head><title>交集选择器</title>
<style type="text/css">
p{ /*标记选择器*/
color: blue;
}
p.special{ /*标记.类别选择器*/
color: red;
}
.special{ /*类别选择器*/
color: green;
}
</style></head>
<body>
<p >普通段落文本(蓝色)……</p>
<h3 >普通标题文本(黑色)……</h3>
<p class="special">指定了.special类别的段落文本(红色)……</p>
<h3 class="special">指定了.special类别的标题文本(绿色)……</h3>
</body></html>
上面的代码中,定义了<p>标记的样式,也定义了.special类别的样式,此外还单独定义了p.special用于特殊的控制,而这个p.special中定义的风格样式仅仅适用于 <p class="special">标记,而不会影响使用了.special样式的其他标记。
5.并集选择器:
并集选择器,也称为集体声明,是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。示例:
<html><head><title>并集选择器</title>
<style type="text/css">
h1,h2,h3,h4,h5,p{ /*并集选择器*/
color: purple;
font-size:15px;
}
h2.special,.special,#one{ /*集体声明*/
text-decoration:underline;
}
</style></head>
<body>
<h1 >示例文字h1……</h1>
<h2 class=”special” >示例文字h2……</h2>
<h3 >示例文字h3……</h3>
<p >示例文字p1……</p>
<p class="special">示例文字p2……</p>
<p id="one">示例文字p3……</p>
</body></html>
显示结果中,所有颜色都是紫色purple,字体大小都为15px。
对于网站中的一些小页面,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有标记都使用同一种CSS样式,可以使用全局选择器“*”,就不用逐个声明了。
6.后代选择器:
可以通过嵌套的方式对特殊位置的HTML标记进行声明,把外层标记写在前面,内层标记写在后面,之间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。嵌套示例:
<p>最外层文字<span>中间层文字<b>最内层文字</b></span></p>
后代选择器示例:
<html><head><title>后代选择器</title>
<style type=”text/css”>
p span{ /*嵌套声明*/
color: red;
}
span{
color:blue;
}
</style></head>
<body>
<p >嵌套使<span>用CSS(红色)</span>标记的方法</p>
嵌套之外的<span>标记(黑色)</span>不生效
</body></html>
通过将span选择器嵌套在p选择器中进行声明,显示效果只适用于<p>和</p>之间的<span>标记,而其外的<span>标记并不产生任何效果。
后代选择器的使用很广泛,不仅标记选择器可以这样组合,类别选择器和ID选择器都可以进行嵌套。示例:
.special i{color:red;}
#one li{padding-left:5px;}
td.out .inside strong{font-size:16px;}
三层嵌套的对应HTML为:
<td class="out">
<p class="inside">
其他内容<strong>CSS控制的部分</strong>其他内容
</p>
</td>
选择器的嵌套在CSS编写中可以大大减小对class和id的声明,因此在构建页面HTML框架时通常只给外层标记定义class或者id,内层标记能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明。例如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用“ul li{...}”的嵌套方式设置。
7.子选择器:
后代选择器产生的影响不仅限于元素的直接后代,而且会影响到它的各级后代。因此,CSS还规定了子选择器,也就是只对直接后代有影响的选择器,而对以后的多个层的后代不产生作用。子选择器是用>连接。示例:
p>span{
color:blue;
}
8. 相邻兄弟选择器:
相邻选择器描述的是页面标记里两个元素左右相邻的关系。示例:
li+li {
color:blue;
}
相邻选择器用+来连接。
9. 属性选择器:
a[link]{
text-decoration:none;
}
input[type="text"]{
width:33%;
}
10.伪类:
常用的伪类是基于超链接的a:link、a:visited、a:hover和a:active,分别表示平常的超链接、以点击过的超链接、鼠标移动经过的超链接和激活的超链接样式。
还有3个伪类,分别是first-child、:focus和:lang(n)。
11.伪元素:
开发者还可以使用伪元素,而不必依赖元素标记来样式化Web文档里的某个项目。示例:
p:first-letter{
font-size:200%;
font-weight:bold;
}
伪元素包括:first-letter、:first-line、:before和:after。可以使用“:first-line”样式化第1行元素:
p:first-line{
font-size:200%;
font-weight:bold;
}
以上选择器可以总结为下表:
基本选择符 |
名称 |
说明 |
版本 |
* |
通配选择符 |
匹配所有元素 |
CSS2 |
E |
类型选择符 |
匹配指定标记的元素 |
CSS1 |
E#myid |
ID选择符 |
匹配唯一标识id属性为myid的E元素 |
CSS1 |
e.myclass |
类选择符 |
匹配class属性为myclass的所有E元素 |
CSS1 |
关系选择符 |
名称 |
说明 |
版本 |
E F |
包含选择符 |
选择所有被E元素包含的F元素 |
CSS1 |
E,F,G |
选择符分组 |
选择所有的E元素、F元素和G元素 |
CSS1 |
E>F |
子对象选择符 |
选择所有作为E元素的子元素F |
CSS2 |
E+F |
相邻选择符 |
选择紧贴在E元素之后的F元素 |
CSS2 |
CSS新增了很多选择符,并兼容CSS1和CSS2中的选择符。
1.属性选择符:
CSS3中,属性选择符已经构成了非常强大的标记属性过滤体系:
属性选择符 |
说明 |
版本 |
E[attr] |
选择具有attr属性的E元素 |
CSS2 |
E[attr="val"] |
选择具有attr属性且属性值等于value的E元素 |
CSS2 |
E[attr~="val"] |
选择具有attr属性且属性的空格分隔的字词列表中其中一个等于val的E元素 |
CSS2 |
E[attr|="val"] |
选择具有attr属性且属性值的连字符分隔的字词列表中由val开始的E元素 |
CSS2 |
E[attr^="val"] |
选择具有attr属性且属性值以val开头的字符串的E元素 |
CSS3 |
E[attr$="val"] |
选择具有attr属性且属性值以val结尾的字符串的E元素 |
CSS3 |
E[attr*="val"] |
选择具有attr属性且属性值包含val的字符串的E元素 |
CSS3 |
2.结构伪类选择符:
可以通过文档结构的相互关系来匹配特定的元素。对于有规律的文档结构,可以减少class属性和id属性的定义。
伪类选择符 |
说明 |
版本 |
E:root |
选择匹配E所在文档的根元素 |
CSS3 |
E:not(s) |
选择匹配所有不匹配简单选择符s的E元素 |
CSS3 |
E:empty |
匹配没有任何子元素(包括text节点)的元素E |
CSS3 |
E:target |
匹配当前链接地址指向的E元素 |
CSS3 |
E:first-child |
匹配父元素的第一个子元素E |
CSS2 |
E:last-child |
匹配父元素的最后一个子元素E |
CSS3 |
E:nth-child(n) |
匹配父元素的第n个子元素E |
CSS3 |
E:nth-last-child(n) |
匹配父元素的倒数第n个子元素E |
CSS3 |
E:only-child |
匹配父元素仅有的一个子元素E |
CSS3 |
E:first-of-type |
匹配同类型中的第一个同级兄弟元素E |
CSS3 |
E:last-of-type |
匹配同类型中的最后一个同级兄弟元素E |
CSS3 |
E:only-of-type |
匹配同类型中的唯一一个同级兄弟元素E |
CSS3 |
E:nth-of-type(n) |
匹配同类型中的第n个同级兄弟元素E |
CSS3 |
E:nth-last-of-type(n) |
匹配同类型中的倒数第n个同级兄弟元素E |
CSS3 |
其中,E:nth-child(n)中的参数n,可以是一个数字,可以是关键字odd或even,可以是公式2n或2n-1等,n的索引起始值为1。
3.状态伪类选择符:
可以设置元素处在某种状态下的样式:
伪类选择符 |
说明 |
版本 |
E:link |
设置超链接a在未被访问前的样式 |
CSS1 |
E:visited |
设置超链接a在其地址已被访问过的样式 |
CSS1 |
E:hover |
设置元素在鼠标悬停其上的样式 |
CSS1/CSS2 |
E:active |
设置元素在被用户激活(在鼠标单击与释放之间)时的样式 |
CSS1/CSS2 |
E:focus |
设置元素在成为焦点(onfocus事件发生)时的样式 |
CSS1/CSS2 |
E:checked |
匹配表单元素上处于选中状态的元素E(radio和checkbox) |
CSS3 |
E:enabled |
匹配表单上处于可以状态的元素E |
CSS3 |
E:disabled |
匹配表单上处于禁用状态的元素E |
CSS3 |
4.伪元素选择符:
CSS3还有一种伪元素选择符,针对CSS已经定义好的伪元素使用:
伪元素选择符 |
说明 |
版本 |
E:first-letter |
设置对象内的第一个字符的样式 |
CSS1/CSS3 |
E:first-line |
设置对象内的第一行的样式 |
CSS1/CSS3 |
E:before/E::before |
设置在对象前发生的内容,与content属性一起用 |
CSS2/CSS3 |
E:after/E::after |
设置在对象后发生的内容,与content属性一起用 |
CSS2/CSS3 |
E::selection |
设置对象被选择时的颜色 |
CSS3 |
CSS3中的伪元素选择符,冒号都改成了双冒号。