标签：href 叠加 imp cad dom 其他 改变 关键字 col
CSS概述
css：层叠样式表（Cascading Style Sheets），由于多个选择器的样式可以叠加在一起，所有叫层叠样式表，主要是用来美化界面。
css可放在页面head的<style></style>内、行内、外部css文件中
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <!-- 外链样式 --> 8 <link rel="stylesheet" href="a.css" /> 9 <!-- 页面css --> 10 <style> 11 div{ 12 color:#fff; 13 background:#333; 14 } 15 </style> 16 </head> 17 18 <body> 19 <!-- 行内样式 --> 20 <div style="font-size:18px;text-align:center;">文字文字文字</div> 21 </body> 22 </html>
也可用@import url()方式引入
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 @import url("a.css"); 9 </style> 10 </head> 11 12 <body> 13 <div>文字文字文字</div> 14 </body> 15 </html>
link和import都是引入外部的css样式，其区别如下：
1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
2、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
4、ink支持使用Javascript控制DOM去改变样式；而@import不支持
5、a.css文件中可以用import导入b.css文件，但是link不用在css文件内部
CSS选择器
css选择器就是一个关联记号，方便我们操作。
常用选择器：ID选择器、class选择器、标签选择器、后代选择器、属性选择器、多元素选择器
1 <style> 2 /* id选择器 #id名{} */ 3 #app{ 4 height: 50px; 5 width: 50px; 6 } 7 8 /* class选择器 .class名 */ 9 .test{ 10 color: #333; 11 text-align: center; 12 } 13 14 /* 标签选择器 标签名 */ 15 div{ 16 color: #fff; 17 background: #333; 18 } 19 20 /* 后代选择器 */ 21 #app div{ /* id为app元素内所有div，包括子子孙孙 */ 22 color: #fff; 23 background: #333; 24 } 25 #app > div{ /* id为app元素内为儿子辈的div，只含儿子辈 */ 26 color: #fff; 27 background: #333; 28 } 29 30 /* 属性选择器 */ 31 input[type]{ /* 带type属性的input元素 */ 32 padding: 5px; 33 } 34 35 /* 多元素选择器 选择器子间用英文逗号分隔 */ 36 div,p,#app,.test{ 37 font-size: 20px; 38 } 39 </style>
选择器优先级（由高到低）：
1、!important 关键字优先级最高
2、行内css优先级
3、id选择器
4、类选择器
5、标签选择器
其他选择器：兄弟选择器（div + p、div ~ p）、伪类选择器（div:first-child、p:before等）
标签：href 叠加 imp cad dom 其他 改变 关键字 col
原文地址：http://www.cnblogs.com/iyunpeng/p/7597398.html
