<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
样式的三种写法:
1: 内部样式
<head>
<style type="text/css">
选择器{属性:值;}
</style>
</head>
2: 内联样式
在标签中添加属性
<div style="属性:值;"></div>
3: 外部样式
1: 创建页面
2: 创建外部css文件
3: 建立关系
方式一:(推荐使用)
<link rel="stylesheet" href="css文件地址">
方式二:(作为了解)
@import url(css文件地址);
样式权重:
内联样式 > 内部样式 外部样式 (谁后面写,显示谁)
就近原则
选择器:
类型选择器(元素选择器 标签选择器): div span p h1...
类选择器(class选择器):选中指定的标签
1: 给标签添加属性 class="name"
2: 选择器为 .name{}
在一个页面中可以多次出现,提高样式的重用性,通常用来设置样式
id选择器:选中指定的标签
1: 给标签添加属性 id="name"
2: 选择器为 #name{}
在一个页面中相同的id值只允许出现一次,不能多次使用
哎呀,你掉进井里了 id #
伪类选择器:
:link{} 未访问的状态
:visited{} 访问过后的状态
:hover{} 鼠标移入的状态
:active{} 鼠标按下的状态
通配符 *{} 匹配页面中所有的元素
群组选择器 选择器1,选择器2,选择器3{} 都被选中
包含选择器(后代选择器)
选择器1 选择器2 选择器3{} 选中指定这个
选择器权重对比:
加载顺序由上至下,相同权重值的选择器,加载最后写的
id > class > 类型选择器
100 10 1
包含选择器权重值为 各个选择器权重值之和
css层叠
指的是优先加载权重值高的
除非有添加 !important
</body>
</html>
