来源:自学PHP网 时间:2015-04-14 14:51 作者: 阅读:次
[导读] 第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善。*************注释...
第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善。 *************注释************ 1.CSS也是需要注释的,注释中的内容不会被解释执行,它也和C语言一样,用/*开头,用*/结尾,其中的内容会被当做注释,我们想怎么写就怎么写。 2.下面给个例子: p{ color: green; /* 我们在这里书写注释 * 辛星CSS,与博客园共同成长 */ font-size: 14px; text-align: center;}
****************选择器************** 1.我们第一节就介绍了CSS的基础语法了,其中就说到了选择器,在CSS中有两类稍微特殊点的选择器,我们称之为id选择器和class选择器。 2.先说id选择器,我们在HTML的元素中,每一个元素都可以设置一个属性,该属性就是id,然后我们在CSS中使用#号外加这个id的数值型来作为选择器,后面的声明就和普通的写法一样。 3.光说是有点抽象的,我们下面给个例子: 首先新建一个my.html文件,书写内容如下:
然后我们在my.css中这么写就可以了: #para{ color: green; font-size: 14px; text-align: center;} 上面我们就通过在HTML文件中指定了p标签的id,然后在css文件中根据id来设置了它的属性。 4.所谓id,那就是唯一的,在同一个HTML文件中,不能有两个id都是para,这样会导致混乱,我们可以用下面的class来解决。 5.如果说id是用来描述单个的样式,那么,class则用于描述一组标签的样式,class可以用在多个元素中使用。 6.id使用#号来加上属性值,而class则使用.号加上属性值,由于两者的使用及其的类似,我就不赘述了,想必聪明的读者已经可以仿造出来了。
*************伪类*************** 1.CSS中的选择器是比较灵活的,比较常用的还有伪类的说法,下面我来解释一下,伪类的使用官方给出的语法格式是这样的: selector:pseudo-class {property:value;} 2.什么意思呢,就是selector就是选择器嘛,而pseudo-class就是相应的伪类了,后面跟的就是它的属性和值。 3.其实伪类的最经典的例子之一就是超链接,比如我们可以书写如下代码: 首先是创建一个my.html文件,代码如下:
然后就是my.css文件,代码如下: a:link{color:red;} a:visited{color: green;} a:hover{color:blue;} a:active{color:black;} 4.上面的css文件中我们就设置了当我们没有点击超链接的时候是红色的,当我们的鼠标经过的时候是蓝色的,当我们的鼠标点击它而又没有松开的时候,它是黑色的,当我们访问过的连接,它会呈现绿色。 5.而且a:hover必须被放到a:link和a:visited之后,才会有效。 6.而a:active必须被当道a:hover之后,才有效。 7.我们还可以让伪类与上面提到的class选择器一起用,我感觉不是很常用,就不介绍了。 8.还有一个child伪类,但是对浏览器的兼容性上不好,因此也不介绍了。 9.此外还有伪元素的说法,如果大家做的事英文网站,还是比较重要的,但是对于汉语网站来说,意义不大,因此也就不说了。
*************其他选择器********* 1.CSS还支持几种其他的选择器类型,第一种就是后代选择器,比如我们把a插入到一个div里面去,那么可以用div a这样的选择器来表示a的样式。 2.第二种就是子元素选择器,它会选择父元素中的所有子元素,比如div>a,即它和第一个的区别就是把空格换成了大于号。 3.另外的相邻兄弟选择器和普通相邻兄弟选择器,总体感觉意义不大,只会增加记忆量和学习的难度,实用性并不高。 4.CSS还支持属性选择器,但是由于也是对浏览器的兼容性上不好,也就不介绍了。 5.还有所谓的群组选择器的说法,是指几个选择器使用同一个样式,它用逗号把各个选择器进行区分,并且连接起来,就像我们C语言中函数的参数列表中的多个参数一样,示例: p,td,li{color: red;}
6.还有通用选择器的说法,就是用一个*表示,如下代码: p*{color: red;} 会把所有的段落的颜色都设置为红色。
***************小结************ 1.本小节我们讲述了CSS选择器和注释。 2.CSS常用的选择器就是标签选择器、id选择器、class选择器和伪类选择器,其他选择器的方式都可以用上面这几种方式来搞定。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com