CSS 语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
影响:
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
#red {color:red;}
<p id="red">这个段落是红色。</p>
CSS 类选择器
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
CSS 属性选择器
对带有指定属性的 HTML 元素设置样式。
<style type="text/css">
[title]
{
color:red;
}
</style>
<h2 title="Hello world">Hello world</h2>
包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
[title~=hello] { color:red; }
包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; }
插入css的三种方式:
<!-- 添加css样式的三种方式 --> <!-- 1.在style标签@import --> <!-- 2.直接写入div的style属性 --> <!-- 3.".ceshi {font-size:14px; color:#FF0000;}"写在style里 注意!1.3.方法会冲突! --> <!-- 4.使用link标签(最常用,最好用) --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="zTree_v3/Wcss.css" type="text/css" /> <style> @import url(zTree_v3/Wcss.css); .ceshi {font-size:14px; color:#FF0000;} </style> </head> <body> <div class="ceshi1">我是div css测试内容www.divcss5.com支持</div> <div class="ceshi">我是div css测试内容www.divcss5.com支持</div> <div style="font-size:14px; color:#FF0000;">我是div css测试内容www.divcss5.com支持</div> </body> </html>