CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表
用于 HTML 文档中元素的样式定义
实现了将内容与表现分离
提高代码的可重用性和可维护性
body
{
background-color:silver;
color:blue;
}
h2
{
background-color:orange;
color:green;
}
hr { color:red; }
HTML 用于构建网页的结构
CSS 用于构建 HTML 元素的样式
HTML 是页面的内容组成，CSS 是页面的表现
W3C 建议尽量使用 CSS 样式取代 HTML 属性
实现内容和表现的分离
如果为 HTML 所特有的属性，则使用 HTML 属性
内联方式
样式定义在单个的 HTML元素中
样式定义在 HTML 元素的标准属性 style 里
CSS 语法
只需要将分号隔开的一个或者多个属性/值对作为元素的style 属性的值
属性和属性值之间用：连接
多对属性之间用；隔开
文本
内部样式表
样式定义在 HTML 页的头元素中
样式表规则位于文档头元素中的 元素内
在文档的 元素内添加 元素
在 元素中添加样式规则
h1 { color : blue ; }
文本1
文本2
在 元素中添加样式规则
可以定义多个样式规则
每个样式规则有两个部分：选择器和样式声明
选择器：决定哪些元素使用这些规则
样式声明：一对大括号，包含一个或者多个属性/值对
外部样式表
将样式定义在一个外部的 CSS 文件中（.css 文件）
由 HTML 页面引用样式表文件
第一步：创建一个单独的样式表文件用来保存样式规则
一个纯文本文件，文件后缀为 .css
该文件中只能包含样式规则
样式规则由选择器和样式声明组成
第二步：在需要使用该样式表文件的页面上，使用 元素链接需要的外部样式表文件
在文档的 元素内添加 元素
1号标题
段落
其他文本
继承性
大多数 CSS 的样式规则可以被继承
层叠性
可以定义多个样式
不冲突时，多个样式表中的样式可层叠为一个
优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
浏览器缺省设置
外部样式表或者内部样式表
就近优先
内联样式
相同样式重复定义以最后一次为准
!important 可以调整样式规则的优先级
将 !important 添加在样式规则之后，中间用空格隔开
选择器 {属性 : 属性值 !important; }
谨慎使用
通用选择器，通配符，显示为一个星号（*）
可以与任何元素匹配
常用于设置一些默认样式，比如设置整个文档的文本的默认字体和大小
html 文档的元素就是选择器
比如
、
等
语法为：.className { color:red;}
类名称不能以数字开头
所有能够附带class属性的元素都可以使用此样式声明
将元素的 class属性的值设置为样式类名
css中
myClass
{
background-color : Pink;
font-size : 35pt;
}
html中
h2文本
段落文本
分类选择器：加important的p
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
id 选择器以一种独立于文档元素的方式来指定样式
它仅作用于 id 属性的值
语法为：
选择器前面需要有一个 # 号
选择器本身则为文档中某个元素的 id 属性的值
选择器声明为以逗号隔开的选择器列表
将一些相同的规则作用于多个元素
css中
h2, p.important
{
color:green;
font-size:20pt;
border:1px solid red;
}
html中
p text
h2 text
依据元素在其位置的上下文关系来定义样式
又称为包含选择器，用于选择作为某元素后代的元素
选择器一端包括两个或多个用空格分隔的选择器
css中
h1 span
{
color:red;
}
html中
An important question.
other
子选择器
div>span
{
color : red;
font-size:20pt;
}
伪类用于向某些选择器添加特殊的效果
使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类
选择器 : 伪类选择器
CSS 伪类选择器可以分为
链接伪类
动态伪类
目标伪类
元素状态伪类
结构伪类
否定伪类
链接伪类
: link ，适用于尚未访问的链接
: visited ，适用于访问过的链接
动态伪类，用于呈现用户操作
:hover，适用于鼠标悬停在 HTML 元素时
:active，适用于 HTML 元素被激活时
:focus，适用于 HTML 元素获取焦点时
a:link {
color: black;
font-size:15pt;
}
a:visited {
color: pink;
font-size:15pt;
}
a:hover {
font-size : 20pt;
}
a:active {
color : red;
}
css中
.txt {
color : gray;
font-size : 9pt;
}
.txt:focus {
color : black;
font-size: 11pt;
注意：动态伪类在链接伪类之后，顺序为LVHA
}
html中
input class="txt" type="text" value="用户名" />
选择器优先级：
尺寸和边框
尺寸单位
%：百分比
in：英寸
cm：厘米
mm：毫米
pt：磅(1pt等于1/72英寸)
px：像素(计算机屏幕上的一个点)
em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍
颜色单位
rgb(x,x,x)：RGB 值，如 rgb(255,0,0)
rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)
#rrggbb：十六进制数，如#ff0000
#rgb：简写的十六进制数，如#f00
表示颜色的英文单词，如 red
与尺寸有关的属性
宽度：width，max-width，min-width
高度：height，max-height，min-height
p {border:1px solid red;} // borde：宽度，形状，颜色
边框属性
简写方式
border:width style color;
具体方式border-left/right/top/bottom:width style color;
border-width
border-left/right/top/bottom-width
border-style
border-left/right/top/bottom-style
border-color
border-left/right/top/bottom-color
边框倒角
border-radius 顺时针设置四个倒角
具体：border-top-left-radius：边框左上角
border-top-right-radius：边框右上角
border-bottom-left-radius：边框左下角
border-bottom-right-radius：边框右下角
css中
div
{
border:2px solid red;
width:200px;
height:50px;
}
#d1
{
border-radius:10px 15px 20px 25px;
}
#d2
{
border-radius:5px;
}
html中
边框阴影 box-shadow
box- shadow：h-shadow v-shadow blur spread color inset
h-shadow：必需，为水平阴影的位置
v-shadow：必需，为垂直阴影的位置
blur：可选，为模糊距离
spread：可选，为阴影的尺寸
color：可选，为阴影的颜色
inset：可选，将外部阴影 (outset) 改为内部阴影
图片边框
border-image：source width repeat
border-image-source：图片的路径
border-image-width：图片边框的宽度
border-image-repeat：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
轮廓
outline：color style width
p.first {
min-width:300px;
max-width:500px;
}
溢出处理
overflow visible hidden scroll auto
overflow-x
overflow-y
那些html元素可以设置尺寸属性
1，块级元素如div p hn ul ol li dl dt dd
2，存在width和height的元素如：img table