css的书写形式
- 内嵌式
- 外链式
可以将css单独存为.css文件,然后用标签引入
<link rel="stylesheet" href="css/css.css">
优点:可以有多个css文件
3. 导入式
会过几秒才看见有样式的网页
4. 行内式
直接通过style写在标签身上
css3的基本语法
css选择器
标签选择器
- 选中所有的标签
- 通常用于标签初始化
例如去掉列表小圆点
效果：
id选择器
- id只能有一个
- 书写：#xx{}
例子：
效果：
class选择器
- class选择器就是类选择器
- 多个标签可以有多个内容
- 同一个标签，可以有多个class属性值
- 书写：.xxx{}
例子：
效果：
原子类
- 在做网页之前可以将各种字号字体；文字颜色等，设置为一个class选择器，用的时候直接调用即可
复合选择器
后代选择器
- .box .xx
- 注意，中间有空格
- 选择box里面的spec标签
交集选择器
- li.xx(没有空格)
- 选择既是li的也是xx类的标签
并集选择器
- ul，ol
- 选择ul，ol所有标签
伪类
：link
- 没有被访问的
：visited
- 已经被访问的
：honer
- 正被鼠标悬停的
：active
- 鼠标按下还没松开的
书写顺序
- link》visited》honer》active
- 注意，必须是这个顺序，否则会有伪类不生效
元素关系选择器
- 子选择器，没有空格，而且只选儿子
- 相邻兄弟选择器，紧跟在img之后的p会被选择，而且需要同级
- 通用兄弟选择器，会选择p之后的所有同层级的选择器
序号选择器
:first-child
- 表示选择第一个子元素
:last-child
- 表示选择最后一个子元素
：nth-child()
- 里面写几就表示选择第几个子元素
- nth-child(2n+1)代表选择奇数
- nth-child(2n)代表选择偶数
-
注意：p标签分别是为：1，2，5，6
:nth-of-type()
- 选择同种标签指定序号的子元素
：nth-last-child（）
- 倒数子元素选择器
：nth-last-of-type（）
- 倒数某元素的子元素选择器
注意:first-child兼容到ie7，其他兼容到ie9
属性选择器
css3新增伪类
:empty
- 选择空标签
:focus
- 选择当前获得焦点的表单元素
用户切换输入，来影响的
但是加上disabled就会被锁死，不能被锁定
:enabled
- 选择当前有效的表单元素
:disabled
- 选择当前无效的表单元素
:checked
- 选择当前已经勾选的单选按钮或者复选框
勾选会变色，也可以有其他操作根据你的要求
:root
- 选择根元素，html标签
等于 html{}
伪元素
::before
- 在所有内部元素之前添加内容，必须设置conect表示内容
- 可以用于在超链接中插入某图标
::after
在所有内部元素最后添加内容，必须设置conect表示内容
::selection
- 被用户选中的部分
::first-letter
- 选择某元素中第一行的第一个字（必须是块级元素）
::first-line
- 选择某元素中第一行全部文字（必须是块级元素）
选择器权重
id>class>标签
如果很复杂
- 选择器加起来看谁多
- ！important（权重最大）