css层叠样式表以及选择器
css层叠样式表
简介
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS 是开放网络的核心语言之一,由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。
分类
行内样式
写在标签style属性里面的样式
1
| <span style="color:#ooo"></span>
|
内联样式
写在一般位于头部内style标签里的样式
1 2 3 4 5
| <head> <style> *{margin:0;padding:0;} </style> </head>
|
外联样式
写在.css文件里的样式,通过link标签在头部引入
1 2 3 4
| <head> <link rel="stylesheet" type="text/css" href="./css/common.css"> </head>
|
css选择器
(1)通配符选择器 对网页中所有的标签有用 ;
1 2 3 4 5
| <style> *{ } </style>
|
(2)类选择器 在标签里取一个类名,对有此类名的元素有效有效 ;
1 2 3 4 5 6 7
| <style> .box{ } </style> …… <div class="box"></div>
|
(3)id选择器 命名一个id,该id一定是唯一的 ;
1 2 3 4 5 6 7
| <style> #box{ } </style> …… <div id="box"></div>
|
(4)元素/节点选择器 直接选择标签符;
1 2 3 4 5 6 7
| <style> div{ } </style> …… <div></div>
|
(5)属性选择器 根据元素的属性和属性值来匹配元素;
1 2 3 4 5 6 7
| <style> input[type="text"]{ } </style> ---------- <input type="text">
|
(6)派生选择器
(1)后代选择器
1 2 3 4 5 6 7 8 9 10 11
| <style> .grandpa .son{ } </style> …… <div class="grandpa"> <div class="father"> <div class="son"></div> </div> </div>
|
(2)子元素选择器 只能选择下一代
1 2 3 4 5 6 7 8 9 10 11
| <style> .grandpa>.father>.son{ } </style> …… <div class="grandpa"> <div class="father"> <div class="son"></div> </div> </div>
|
(3)相邻兄弟选择器
1 2 3 4 5 6 7 8 9 10 11 12
| <style> h1+p{ } </style> …… <h1></h1> <p></p> <p></p> <h1></h1> <p></p> <p></p>
|
(7)群组选择器 .box1,.box2;
1 2 3 4 5 6 7 8
| <style> .box1{ } </style> …… <div class="box1"></div> <div class="box2"></div>
|
over