CSS 的作用是:1)修饰HTML元素;2)选择器:将样式进行合理的管理。于是乎进一步提供了一种将样式文件独立出来的技术,就是从HTML文件中将样式修饰内容独立成一个文本文件,那么在需要的HTML文件中就可以反复将这个样式文件引入。
CSS 文件的创建
CSS 文件就是一种普通的文本文件,其文件名称标准情况下是以.css作为后缀名结尾的。CSS文件的内容就是style标签中所书写的内容。
CSS 文件的引入,需要使用Link标签。
<link rel=”stylesheet” type=”text/css” href=”URL地址”/>
css选择器分类
一、基础选择器
css基础选择器有标签选择器、类选择器、id选择器、通用选择器
1.标签选择器
每个html页面都由很多个标签组成,通过标签选择器可以对某类标签应用相应的样式,如对p标签应用下面的样式,则页面中所有的p标签都会生效。
p{ font-size:12px; color:red; background:blue; }
2.类选择器
类选择器是css非常常用的选择器,在html中可以为某个标签增加class属性,如
<div class="error"> </div>
则可以为对应的class设置样式
error{ width:200px; padding:5px; color:red;}
类选择器可以复用,如对页面中的p标签也可以应用此样式 。
另外,一个标签可以有多个类选择器,不同的值用空格隔开,这样多个样式便可以应用的一个标签上。
3.id选择器
id选择器和类选择器一样,用的也很频繁,但是id在每个html页面的值必须是唯一的,所以它不可以复用,如:
<div id="content"> </div>
这里补充说明下id与class的命名规范,命名时尽可能的保持名称与表现形式无关,如 某段提示文字显示为红色,可以命名为red,但是若日后改成蓝色,则red名与之不对应,更好的选择如error或tips。所以应该根据它是什么来命名 而不是 根据 它的外观如何来命名。
4.通用选择器
不同于上面的三种选择器,通用选择器要强大的多,它可以对页面中的所有html标签应用样式,当然也正是因为如此强大,反而限制了它的灵活性,在实际应用中用的较少。一般简单的css reset会用到,如:
*{ margin:0; padding:0;}
二、组合选择器
1.群主选择器
在使用选择器时,有的元素样式是一样的,每次都为不同的选择器单独定义样式的话太繁琐,这时我们便可以使用群主选择器集中定义样式。不同标签或类以逗号隔开。如:
div, h2, .error{ font-size:14px; color:red;}
这样我们便同时给div, h2, .error一起定义了样式。
2.子选择器
当我们想让父元素下的某个子元素表现为特定的样式时,我们可以用子选择器,如
div>a{ color:blue; text-decoration:none;}
此时,div下的子元素a都将变成蓝色字体,无下划线。
3.后代选择器
在上面的例子中,利用子选择器,只可以设置div下的子元素a,但是若想改变div下的所有a标签的样式,就需要用到后代选择器。代码如下:
div a{ color:blue; text-decoration:none;}
4.同胞选择器
除了上面的子选择器与后代选择器,我们可能还希望找到兄弟两个当中的一个,如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码:
h1 + p{font-size:14px; background:#ccc; }
三、属性选择器说明:以下提到的E表示元素,attr表示属性,val表示属性的值
1.E[attr]选择器
匹配所有具有attr属性的E元素,不考虑它的值。如以下代码可以匹配所有含有title属性的p元素。
p[title]{font-size:12px; color:#666;}
2.E[attr=val]
匹配所有attr属性值为val的E元素。如匹配所有class值为test的p元素
p[class="test"]{color:red;}
3.E[attr~=val]
匹配具有attr属性且属性值为用空格分隔的字符列表,其中一个值等于val的E元素。如:
p[class~="name"]{font-size:12px; color:red;}
<div class="test name">111111</div>
<div class="name">111111</div>
则第一个div会应用上面的样式。
4.E[attr|=val]
匹配具有attr属性且属性值为用连接符分隔的字符串,并以val开头的E元素。
p[class|="test"]{font-size:12px; color:red;}
<div class="test">111111</div>
<div class="test-123">111111</div>
则第二个div会应用上面的样式。
最后不得不提的是IE6不支持子选择器、同胞选择器和属性选择器,因此使用时需注意。
css优先级
优先级算是css中的一个非常重要的知识点,也是笔试面试中经常会考到的知识点。
一、什么是css优先级
css优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、css优先级规则
比较简单易记的一种方法就是给不同选择器分配不同的值:
1.id选择器默认优先级最高,其权值为100
2.class选择器、属性选择器和伪类选择器的权值为10
3.标签选择器的优先级较低,其权值为1
所以在比较样式的优先级时,只需统计选择符中的id、class、标签名个数,然后把对应的权值相加即可。根据结果便可得出优先级高低。
1.结果较大的优先级较高
2.结果相同,则后定义的样式优先级较高
3.如果样式值中含有!important,则该值优先级最高
举例:
h2{color:blue;}//其权值为1
#content{color:#666;}//其权值为100p
.test{color:#ccc;}//其权值为1+10=11
#main div .test{color:red;}//其权值为100+1+10=111div
#main .left #nav{color:#000}//其权值为1+100+10+100=211
css1-css3提供非常丰富的选择器。
1.基础的选择器
选择器 | 含义 | 示例 |
* | 通用元素选择器,匹配任何元素 | * { margin:0; padding:0; } |
E | 标签选择器,匹配所有使用E标签的元素 | p { font-size:2em; } |
.info和E.info | class选择器,匹配所有class属性中包含info的元素 | .info { background:#ff0; } p.info { background:#ff0; } |
#info和E#info | id选择器,匹配所有id属性等于footer的元素 | #info { background:#ff0; } p#info { background:#ff0; } |
2.组合选择器
选择器 | 含义 | 示例 |
E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 | Div,p { color:#f00; } |
E F | 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 | #nav li { display:inline; } li a { font-weight:bold; } |
E > F | 子元素选择器,匹配所有E元素的子元素F | div > strong { color:#f00; } |
E + F | 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F | p + p { color:#f00; } |
3.CSS 2.1 属性选择器
选择器 | 含义 | 示例 |
E[att] | 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) | p[title] { color:#f00; } |
E[att=val] | 匹配所有att属性等于“val”的E元素 | div[class=”error”] { color:#f00; } |
E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 | td[class~=”name”] { color:#f00; } |
E[att|=val] | 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等 | p[lang|=en] { color:#f00; } |
注:CSS 2.1 属性选择器还有一个特点就是使用多个选择器,同事满足这多个选择器:blockquote[class=quote][cite] { color:#f00; }
4.CSS 2.1 中的伪类
选择器 | 含义 | 示例 |
E:first-child | 匹配父元素的第一个子元素 | p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; } |
E:link | 匹配所有未被点击的链接 | |
E:visited | 匹配所有已被点击的链接 | |
E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | |
E:hover | 匹配鼠标悬停其上的E元素 | |
E:focus | 匹配获得当前焦点的E元素 | |
E:lang(c) | 匹配lang属性等于c的E元素 |
5.CSS 2.1中的伪元素
选择器 | 含义 | 示例 |
E:first-line | 匹配E元素的第一行 | p:first-line { font-weight:bold; color;#600; } .preamble:first-letter { font-size:1.5em; font-weight:bold; } .cbb:before { content:”"; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } a:link:after { content: ” (” attr(href) “) “; } |
E:first-letter | 匹配E元素的第一个字母 | |
E:before | 在E元素之前插入生成的内容 | |
E:after | 在E元素之后插入生成的内容 |
6.CSS 3的同级元素通用选择器
选择器 | 含义 | 示例 |
E ~ F | 匹配任何在E元素之后的同级F元素 | p ~ ul { background:#ff0; } |
7.CSS 3 属性选择器
选择器 | 含义 | 示例 |
E[att^=”val”] | 属性att的值以”val”开头的元素 | div[id^="nav"] { background:#ff0; } |
E[att$=”val”] | 属性att的值以”val”结尾的元素 | |
E[att*=”val”] | 属性att的值包含”val”字符串的元素 |
8. CSS 3中与用户界面有关的伪类
选择器 | 含义 | 示例 |
E:enabled | 匹配表单中激活的元素 | input[type="text"]:disabled { background:#ddd;} |
E:disabled | 匹配表单中禁用的元素 | |
E:checked | 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 | |
E::selection | 匹配用户当前选中的元素 |
9. CSS 3中的结构性伪类
选择器 | 含义 | 示例 |
E:root | 匹配文档的根元素,对于HTML文档,就是HTML元素 | p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child { background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; } |
E:nth-child(n) | 匹配其父元素的第n个子元素,第一个编号为1 | |
E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素,第一个编号为1 | |
E:nth-of-type(n) | 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 | |
E:nth-last-of-type(n) | 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 | |
E:last-child | 匹配父元素的最后一个子元素,等同于:nth-last-child(1) | |
E:first-of-type | 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) | |
E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) | |
E:only-child | 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) | |
E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) | |
E:empty | 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 |
10.CSS 3的反选伪类
选择器 | 含义 | 示例 |
E:not(s) | 匹配不符合当前选择器的任何元素 | :not(p) { border:1px solid #ccc; } |
11. CSS 3中的 :target 伪类
选择器 | 含义 | |
E:target | 匹配文档中特定”id”点击后的效果 | |