CSS 层叠样式表

结构，表现，行为要分离

1.内联样式 ：写在标签内部的style属性里 （不便于复用）
<p style=color ：red></p>

2.内部样式 ：写在头部的style标签里 <style type="text/css">

3.外联样式：使用link标签引入<link rel="stylesheet" type="text/css" href="路径" />

CSS注释 /* 选择器 声明块 */
块和内联
块元素 独占一行的元素
div(对页面进行布局) p h1~h6 ul(无序列表) li
设置背景元素 background-color

内联元素(行内元素)：span(包裹内容 单独设置字体颜色) a img iframe
超链接可以包含任意一个元素
a标签可以包含任何元素，但不能包含它本身

CSS选择器

id选择器：id是唯一标识 #
类选择器：class 可以重复 .
选择器分组(并集选择器)：共同使用一个样式 #p1,h1,p2 逗号隔开
通配选择器：* 选中页面上所有元素
复合选择器(交集选择器)：同时满足两个条件
子元素和后代元素选择器：空格表示

伪类选择器：给链接定义样式

正常链接 a:link
访问过的链接 a:visited（只能定义字体颜色）
鼠标滑过的链接 a:hover
正在点击的链接 a:active
1.获取焦点 :focus 文本框背景
2.指定元素前 :before
3.指定元素后 :after
4.选中的元素 ::selection
首字母 :first-letter
首行 :first-line
before 最前面 after 最后面

属性选择器

title 会在网页中作为一个提示文字
例：
p[title] 同时选中title属性得标签
p[title="hello"] 选中title等于hello得标签
p[title^="ab"] 以ab开头
3.子元素选择器
：first-child 既得满足是第一个p标签又得满足是第一个标签
：body>p:first-child 表示body标签下得第一个p标签
：last-child 选择最后一个子标签
：nth-child 选择指定位置的子元素可以写数字或者even（偶数）odd（单数）
：first-of-tytpe 选择指定位置得子元素 所有p标签里第一个就可以
：last-of-tytpe

兄弟元素选择器

span+p{} 紧挨着span下面得p 后一个兄弟选择器
span~p{} span下面得所有p元素 后边所有兄弟
否定伪类
p：not(.hello) 除了hello以为得改

样式继承

背景边框和定位不会被继承

6.选择器得优先级（权重）
1.内联样式
2.id选择器
3.类和伪类选择器
4.元素选择器
5.通配*，优先级0
6.继承的样式没有优先级
7.文本标签
em一段内容的着重点（斜体）
strong一段的重要性（加粗）
i 斜体 在H5中 i代表 icon（图标）
b 加粗
small 小 表示细则或版权声明等小字
big 大
cite 书名号 表示参考的内容
blockquote（块）论坛引用某个人的评论
sup 设置上标
sub 设置下标
p标签不能用块
ins 插入内容 自动加下划线
del 删除 划掉内容
code 表示一段代码
pre 保留格式

列表

网页中的三种列表

1.无序列表ul li（块）
2.有序列表ol li（块）
3.定义列表dl dt（被定义的内容） dd（对定义内容的描述）
去掉项目符号 list-style：none

单位

px 像素
% 根据父元素的大小计算子元素多大（根据父元素发生变化子元素也跟着改变）
em 1em=1font-size