为网页添加样式
术语解释
h1{
color:red;
background-color:green;
text-align:center;
}
CSS规则=选择器+声明块
选择器
选择器：选中元素
1.ID选择器：选中的是对应id值的元素
<head>
···
<style>
#test{
color:seagreen;
}
</style>
<body>
<p id="test">Explicabo veniam omnis nobis quae, animi asperiores amet consequuntur porro sapiente at assumenda repellat dolor consectetur tenetur est sed pariatur nisi! Sed aliquid minus suscipit ipsa fugit, porro totam earum?</p>
</body>
2.元素选择器
<head>
···
<style>
h1{
color:red;
background-color:green;
text-align:center;
}
</style>
</head>
<body>
<h1 class="red">
为网页添加合适的样式！
</h1>
</body>
3.类选择器（最广泛使用）
<head>
···
<style>
.red{
color:seagreen;
background-color: pink;
}
</style>
</head>
<body>
<h1 class="red">
为网页添加合适的样式！
</h1>
<p class="red"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam atque ab labore vitae minima nihil magnam, officia soluta, iusto laboriosam molestiae beatae modi quidem veniam officiis debitis. Amet, eius veniam!</p>
<p id="test">Explicabo veniam omnis nobis quae, animi asperiores amet consequuntur porro sapiente at assumenda repellat dolor consectetur tenetur est sed pariatur nisi! Sed aliquid minus suscipit ipsa fugit, porro totam earum?</p>
<p>Sapiente atque, odio consequuntur quas nam repellat dolor nostrum obcaecati harum repellendus enim explicabo commodi eligendi ratione asperiores nihil reprehenderit facilis suscipit ipsum temporibus! Doloribus cum enim modi assumenda veritatis.</p>
</body>
声明块
出现在大括号中。
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面额样式。
CSS代码书写位置
1.内部样式表
书写在style元素中
2.内联样式表，元素样式表
直接书写在元素的style属性中
3.外部样式表【推荐使用】
将样式书写到独立的css文件中
推荐使用的原因：
1）外部样式可以解决多页面样式重复问题
2）有利于浏览器缓存，从而提高页面响应速度
3）有利于代码分离（HTML与CSS），更容易阅读和维护
常见样式声明
color
元素内部的文字颜色
预设值：定义好的单词
三原色，色值：光学三原色（红、绿、蓝）每个颜色可以使用0-255之间的数字来表达
rgb表示法
rgb(00，255，0)
hex（16进制）表示法
#红绿蓝
淘宝红：#ff4400，f40
黑色：#000000，#000
白色：#ffffff，#fff
红：#ff0000，#f00
绿：#00ff00，#0f0
蓝：#0000ff，#00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc
background-color
元素背景颜色
font-size
元素内部文字的尺寸大小
1）px；像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。
user agent，UA，用户代理（浏览器）
font-weight
文字粗细程度，可以取值数值，可以取值为预设值
strong元素，默认加粗
font-family
文字类型
必须用户计算机中存在的字体才会有效
使用多个字体，以匹配不同环境
sans-serif，非衬线字体
font-style
字体样式，通常用它设置斜体
i元素，em元素，默认样式，是倾斜字体；实际使用中，通常用它表示一个图标（icon）
text-decoration
文本修饰，给文本加线。
a元素
del元素：错误内容
s元素：过期内容
text-indent
首行文本缩进
line-height
每行文字的高度，该值越大，每行文本的距离越大
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
width
宽度
height
高度
letter-sapce
文字间隙
text-align
元素内部文字的水平排列方式
选择器
选择器：帮助你精准的选中想要的元素
简单选择器
ID选择器
元素选择器
类选择器
通配符选择器
*，选中所有元素
属性选择器
根据属性名和属性值选择元素
伪类选择器
选中某些元素的某种状态
link：超链接未访问时的状态
visited：超链接访问过后的状态
hover：鼠标悬停状态
active：激活状态，鼠标拿下状态
如果四个都要书写，必须安装上面的顺序
爱恨法则：love hate
伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
<p>
老师的<span>HTML和CSS</span>课程真不错！
</p>
before
span::before{
content:"《";
color: tomato;
}
after
span::after{
content: "》";
color:violet;
}
选择器的组合
并且
后代元素- 空格
子元素 - >
相邻兄弟元素 - +
后面出现的所有兄弟元素 - ~
选择器的并列
多个选择器，用逗号分隔
语法糖
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1.比较重要性
作者样式表：开发者书写的样式
重要性从高到低
1）作者样式表中的！important样式
2）作者样式表中的普通样式
3）浏览器默认样式表中的样式
2.比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（xxxx）
1.千位：如果是内联样式，记作1，否则为0
2.百位：等于选择其中所有ID选择器的数量
3.十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4.个位：等于选择器重所有元素选择器、伪元素选择器的数量
3.比较源次序
代码书写靠后的胜出
应用
1、重置样式表
书写一些作者样式表，覆盖浏览器的默认样式表
重置样式表 -> 浏览器的默认样式表
常见的重置样式表：normalize.css、reset.css、meyer.css
2、爱恨法则
link > visited > hover > active
继承
子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承
属性值的计算过程
浏览器渲染页面，是一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有质
一个元素，从所有属性都没有值，道所有的属性都有值，这个计算过程，叫做属性值计算过程
1.确定声明值
参考样式表中没有冲突的声明，作为CSS属性值
2、层叠冲突
对样式表中有冲突的声明使用层叠规则，确定CSS属性值
3、使用继承
对仍然没有值的属性，若可以继承，则继承父元素的值
4、使用默认值：
对任然没有值的属性，使用默认值
特殊的两个CSS取值：
-inherit：手动（强制）继承，将父元素的值取出应用到该元素
-initial：初始值，将该属性设置为默认值
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1、行盒，display等于inline的元素
2、块盒，display等于block的元素
行盒在页面中不换行、快盒独占一行
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：
1.内容 content
2.填充 padding
3.边框 border
4.外边框 margin
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
