css指层叠样式表
样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和样式。
-
多重样式层叠的规则：
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）————拥有最高的优先权
CSS 规则由两个主要的部分构成：（选择器）+（一条或多条声明）
-
声明 = 属性+值，样式属性有一个值，属性和值被冒号分开。
761554735112_.pic.jpg
<!--多重声明-->
h1,h2,h3,h4,h5,h6 {
text-align: center;
color: black;
font-family: arial;
}
-
颜色属性和值
<!--十六进制颜色值--> p { color: #ff0000; } <!--CSS缩写的形式--> p { color: #f00; } <!--两种方法使用RGB值--> p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }
子元素从父元素继承属性
-
创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则
选择器
1⃣️派生选择器（上下文选择器）
li 元素中的 strong 元素的样式为斜体字；在p元素中是粗体字
2⃣️ id选择器
id 属性只能在每个 HTML 文档中出现一次
id选择器以 # 来定义
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>建立派生选择器
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }3⃣️类选择器
类选择器以一个点号显示
.fancy td { color: #f60; background: #666; }4⃣️属性选择器
<head> <style type="text/css"> <!--重要部分--> [title] { color:red; } </style> </head> <body> <h2 title="Hello world">Hello world</h2> </body>
-
创建css
如何插入样式表
-
外部样式表
当样式需要应用于很多页面时，每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部
外部样式表可以在任何文本编辑器中进行编辑，以 .css 扩展名进行保存。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
-
-
内部样式表
当单个文档需要特殊的样式时
你可以使用 <style> 标签在文档头部定义内部样式表
<head> <style type="text/css"> hr {color: Sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
-
内联样式表
样式仅需要在一个元素上应用一次时。
在相关的标签内使用样式（style）属性。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
