css样式
css样式有三种
外部样式
<link rel="stylesheet" href="路径">
@import url("路径")
不同点 1 link导入的css文件在加载网页的时候和html同时加载 而@import加载网页的时候先加载html结构
2 link 是 html标签的一种 而@import 是css提供的一种方法
3 link 的兼容性较好
4 link 导入的css文件 可以通过js DOM样式更改动画效果 @import 则不行
内部样式
<style>
选择符{属性:属性值;}
</style>
内联样式
<标签 style="属性:属性值;"></标签>
css的权重
当三种样式同时出现时 内联样式的权重大 则优先
当外部样式和内部样式同时出现时 按照书写顺序 后面的会覆盖前面的样式 (层叠样式)
如果出现!important 哪里出现哪里权重最大
css选择器
CSS选择符
1 类型选择符(也叫标签选择符)
语法 : 选择符{属性:属性值;}
常用的类型选择符 有哪些
div / p / span / h1-h6 / ... 等等
2 id选择符
语法 #名称{属性:属性值;}
<div id="名称"></div>
特点 唯一性 一个id 只能有一个名称
用法 用于搭建网页的结构
3 类选择器(class选择器)
语法 .名称{属性:属性值;}
<div class="名称"></div>
特点 一个class可以有多个名字
4 群组选择符
语法 选择符,选择符,选择符{属性:属性值;}
选择符与选择符之间用逗号隔开
用来表示不同标签的相同样式
5 包含选择符
语法 父元素 子元素{属性:属性值;}
父元素与子元素之间用空格隔开
6 伪类选择符
a link: 表示未点击链接的样式
a visited 表示点击后链接的样式
a hover 表示鼠标滑过的样式
a active 表示鼠标点击时的样式
7 通配符
*{
margin:0;
padding:0;
}
可以改变整个网页的所有元素的样式
选择符的命名规范
1 不能使用中文 和 特殊字符
2 尽量小写字母开头 可以使用 数字 字母 下划线
3 命名的名称 要 语义化
4 不能使用关键字 (标签)
驼峰式命名
news
newsLeft newsCenter newRight
-式命名
warp
warp-left warp-center warp-right
下划线式命名
foot
foot_left foot_center foot_right
伪类选择符的练习