选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔。
从CSS样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。
内联式css样式表就是把css代码直接写在现有的HTML标签中。
嵌入式css样式,就是可以把css样式代码写在<styletype="text/css"></style>标签之间。
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,eg:<linkhref="style.css"rel="stylesheet"type="text/css"/>
优先级:内联式>嵌入式>外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。即<linkhref="style.css"...>代码在<styletype="text/css">...</style>代码的前面(实际开发中也是这么写的)。其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。
什么是选择器?
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
标签选择器:标签选择器其实就是html代码中的标签。p{font-size:12px;line-height:1.6em;}
类选择器:.类选器名称{css样式代码;}//用(.)
ID选择器:#setGreen{color:green;}//用(#)
类和ID选择器的区别相同点:可以应用于任何元素;不同点:1、ID选择器只能在文档中使用一次。2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
子选择器:即大于符号(>),用于选择指定标签元素的第一代子元素。.food>li{border:1pxsolidred;}
包含(后代)选择器:包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。.firstspan{color:red;}
子选择器和包含选择器区别:>作用于元素的第一代后代,空格作用于元素的所有后代。
通用选择器:使用一个(*)号指定,它的作用是匹配html中所有标签元素。*{color:red;}
伪类选择器:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色,a:hover{color:red;}
关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用:hover了(其实伪类选择符还有很多,尤其是css3中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实:hover可以放在任意的标签上,比如说p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是a:hover的组合。
分类选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:h1,span{color:red;}


如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c54514.shtml