1、CSS定义和作用
定义：层叠样式表，页面可以看作由不同层次叠加的效果，上层元素会覆盖底部元素。元素默认在最底层，被成为“文档流”
1、确定元素在页面中的位置（页面布局）
（浮动、定位、盒子模型）
2、修饰页面样式（颜色，大小，背景）
（文本样式、字体样式、背景样式）
2、语法
选择器{样式名称：样式值}
CSS引入方式
行内样式：样式位置标签内，使用style属性引入CSS样式（当前标签起作用）
<标签 style="样式名称：样式值；">
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>内部样式：CSS代码写在<head>的<style>标签中（当前页面起作用）
<style> h1{color: green; } </style>外部样式表:（被引用的页面）
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，
有两种方式
链接式：link
导入式： @import
链接样：连接外部样式表
<link href="style.css" rel="stylesheet"type="text/css" />导入式：导入外部样式表
<style>
@import url(./style.css);
<style> 样式优先级
行内样式 > 内部样式表 > 外部样式表
3、选择器
基本选择器
1、标签选择器：html标签作为CSS的选择器，选择范围：当前页面选择所匹配的标签
h1{color:red;}对标签进行逻辑分组
class值相同为一组
2、类选择器： . + class值
每个标签都有class属性，该属性可以将标签进行逻辑分组，值相同可以分为一组。
.值{样式}
<h1 class="值">文本</h1>3、id选择器：每个标签都有id属性，id属性值在当前页面中不能重复，
#值{样式}
<p id="值">文本</p>#id值
id值不能重复
层次选择器：7个
后 代：选择器 空格 选择器
子元素选择器：选择器 > 选择器
相邻后兄弟：选择器 + 选择器
通用选择器：选择器 ~ 选择器
并集选择器：选择器 ，选择器
交集选择器：选择器选择器
*选择器：通配符选择器
结构伪类选择器：6个
选择器
-
：first-child
1、先确定层次关系
2、确定位置
3、确定选择器类型
如果没有明确的层次，则每一层都需要选择，等价于（body+空格+选择器）
含义：选择当前层次下的第一个指定选择器类型的元素
：last-child
和first结构类似，只是选择当前层的最后一个
：nth-child(2)：和first结构类似，只是选择当前层的指定第n个位置（n可为特殊值）
odd：奇数
even：偶数
也可以写公式：例如：2n-1，3n-2
特点：先位置，再类型
选择器：first-of-type：
选择器：last-of-type：
选择器：nth-of-type(数字)
这几个选择器和：first-child，：last-child： nth-child(2)类似
特点：先类型，再位置
属性选择器
选择器[属性]：带指定属性的元素。
选择器[属性="属性值"]：带指定属性等于指定值（完全匹配）的元素。
选择器[属性*=]：带指定属性且包含指定值的元素。（模糊匹配）
选择器[属性^="属性值"]：带属性且指定属性值开头的元素。
选择器[属性$="属性值"]：带指定属性且指定属性值结尾的元素。
伪元素选择器
伪元素表示标签中的内容，不是状态
first-letter：第一个字符
first-line：第一行
：：before {content：”“
样式名称：样式列表}
-在选定的标签内之前添加"内容"和”样式“
content:添加的内容
：：after {content：”“
样式名称：样式列表}
-在选定的标签内之添后加"内容"和”样式“
content:添加的内容
否定伪类选择器
从已经选择的元素中排除某些元素：
语法：选择器：not（选择器）{样式名称：样式值}
p:not(.p2){ }
4、样式继承
-如果标签之间存在层次关系，则CSS的某些样式会从祖先元素传递给后代元素，称为样式继承。
-边框，定位，浮动，背景等样式不能继承
样式的优先级
当使用不同的选择器选中同一个标签，使用相同的样式，不同的值修饰时，则产生样式冲突，最终会采用哪一个样式，则由样式的优先级决定。
-优先级：
选择器类型 优先级
行内元素 1000
id选择器 100
类/伪类选择器 10
标签选择器 1
通配符选择器* 0
继承没有优先级
交集选择器优先级累加
优先级累加不超过当前层级，比如：类选择器累加不会超过99
并集选择器，各个选择器优先级单独计算，不进行累加。
！important：级别最高
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
