为网页添加样式
术语解释
h1 {
color: red;
background-color: pink;
text-align: center;
}
这种叫做css规则： 规则 = 选择器 + 生命块
css选择器
选择器：选中html元素
写法：
- ID选择器：选中的是带有相应的ID值得html元素。(注意：id值是唯一的)
- 元素选择器：直接书写html标签的名称，会选择页面上所有同名的元素。
- 类选择器：选中得是带有相应class值得html元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 元素选择器 */
h1 {
color: red;
background-color: pink;
text-align: center;
}
/* ID选择器 */
#name {
color: blue;
}
/* 类选择器 */
.name {
color: green;
}
</style>
</head>
<body>
<h1>为网页添加样式</h1>
<div id="name">id选择器</div>
<div class="name">类选择器</div>
</body>
</html>
声明块
出现在大括号中，声明块包含很多得声明（属性），每一个声明（属性）表达了某一方面得样式。
CSS代码书写的位置
- 内部样式表：书写在style元素中，通常将这个元素放在网页的 heaer标签中。
- 内联样式（元素样式）：通过style属性将声明块书写在元素身上。
<h1 style="color:red;background-color:green;">内联样式</h1>
-
外部样式表：将样式书写在独立的css文件中。通过通过link标签的href属性将样式表引入到html文档中。(推荐使用)
-外部样式表，浏览器会进行缓存，当下次再读取的时候，就不会重新下载，提高了页面的执行效率。
.big{
color:red;
font-size:18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="big">外部样式</div>
</body>
</html>
常见样式声明
-
color
元素内部的文字颜色
预设值： 定义好的单词。
三原色，色值： 光学三原色（红，绿，蓝），每个颜色可以使用0 ~ 255之间的数字来表达，色值。
rgb表示法： rgb(0,255,0) //绿色 rgb(0,0,0) //黑色 rgba(255,255,255) //白色 HEX（十六进制）表示法： #0f0f0f 常见的颜色： 淘宝红：#ff4400 #f40 黑色：#000000 #000 白色：#ffffff #fff 灰色：#ccc -
background-color
元素的背景颜色
-
font-size
元素内部的文字尺寸大小
-
px：像素，绝对单位，简单理解为文字的高度占多少个像素点。
-
em：相对单位，相对于于父元素的字体大小。
每个元素必须要有字体大小，如果没有则使用父元素的，如果没有父元素，则使用浏览器的基准字号。
user agent UA 用户代理 （浏览器）
-
-
font-weight
文字粗细程度：可以取值为数字，预设值（normal bold）
strong（表示重要得，不能忽略的内容）元素，默认加粗得效果
-
font-famify
文字类型：必须用户计算机中存在得字体才可以。
sans-serif，非衬线字体。
-
font-style
字体样式：通常用它设置斜体。
i元素和em元素默认样式为斜体，实际使用中，通常用它表示一个图标（icon）
-
text-decoration
文本修饰：给文本加线。
del元素：表示错误的内容 s元素：表示过期的内容
-
text-indent
首行文本缩进：可以设置为em表示缩进几个字符，也可以设置为像素值。
-
line-hegiht
行高：每行文字的行高，改值越大，每行文本的距离越大。
设置行高为元素的高度，可以让单行文本垂直居中。
行高可以设置为纯数字，表示当前元素的字体大小。
-
width
元素的宽度：取值可以是像素值，也可以是百分比（如果设置为百分比是相对于他的包含块的宽度）。
-
height
元素的高度。
-
letter-space
设置文本字符的间距。
-
text-align
元素内部文字水平排列方式。
选择器
帮助你精准的选择到想要的元素
简单选择器
- ID选择器
#页面中唯一的id值{
}
2. 元素选择器
元素标签{
}
3. 类选择器
.元素的class名{
}
4. 通配符选择器
*{
}
5. 属性选择器
根据属性名和属性值选择元素
//选择所有带有href属性的元素
[href]{
}
//选中属性和元素
[href=value]{
}
-
伪类选择器
选中某些元素的某种状态
//鼠标移入过后，：前面加选择器，如果不加，默认选中所有元素
:hover{
}
//鼠标按下时的状态
:active{
}
//超链接未被访问过的状态
:link{
}
//超链接访问过后的状态
:visited{
}
//入股全部书写要按照
link > visited > hover > active
结构伪类：
1. :first-child 兄弟元素中的第一个
2. :last-child 所有兄弟元素中最后一个
3. :nth-child(n) 所有兄弟元素中的第n个
4. :first-of-type 所有同类型兄弟元素中的第一个。
5. :last-of-type 所有同类型兄弟元素中的最后一个。
6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
对于n的取值：
1. 0 或不写：什么都选不中 —— 几乎不用。
2. n ：选中所有子元素 —— 几乎不用。
3. 1~正无穷的整数 ：选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2n+1 或 odd ：选中序号为奇数的子元素。
6. -n+3 ：选中的是前3 个。
- 伪元素选择器
//会在元素里面生成第一个子元素
元素::before {
content:''; //表示元素的内容
}
//会在元素里面生成最后一个子元素
元素::after{
content:'';
}
否定伪类：
否定伪类就是排除满足条件的选择器
:nit(选择器){
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./2024.4.14.css">
<style>
/* 在div标签中排除.text3类 */
div:not(.text3) {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<div>这是第1行文字</div>
<div>这是第2行文字</div>
<div class="text3">这是第3行文字</div>
<div>这是第4行文字</div>
</body>
选择器的组合
- 并且
元素1{
}
// 元素2应用了元素的样式
元素1元素2{
}
2. 后代元素 —— 空格
元素 后代元素{
}
3. 子元素 ——>
//只能选中子元素，子元素的子元素不能选中
元素>子元素{
}
4. 相邻元素 —— +
//表示这个元素的下一个元素
元素+元素{
}
5.后面出现的所有兄弟元素 —— ~
元素~元素{
}
选择器的并列
多个选择器用逗号分隔
选择器1,选择器2,选择器3{
}
层叠
声明冲突：同一个样式，多次应用到了一个元素。
层叠：解决声明冲突的过程。浏览器自动处理（权重计算）
1.比较重要性
重要性从高到低：
- 作者样式表中的 !important 样式。
- 作者样式表中的普通样式。
- 浏览器默认样式表中的样式。
2.比较特殊性
看选择器
总体规则：选择器的范围越窄，特殊性越大
具体规则：通过选择器，计算出一个四位数（xxxx）
- 千位：如果是内联样式，记作1，否则记作0。
- 百位：等于页面中所有id选择器得数量。
- 十位：等于选择器中所有类选择器，属性选择器，伪类选择器得数量。
- 个位：等一选择器中所有元素选择器，伪元素选择器得数量。
3.比较源次序
代码书写靠后得胜出
应用
- 重置样式表
书写一些作者样式，覆盖浏览器得默样式。新建一个css文件将浏览器得默认样式重置。
常见得重置样式表：noemalize.css , reset.css , meyer.css
- 爱恨法则
link > visited > hover >active
继承
子元素会继承父元素某些css属性。
通常跟文字内容相关的属性都能被继承
属性值的计算过程
一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行。
渲染每个元素的前提条件：该元素的所有css属性，必须有值。
一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值的计算过程。
属性值计算过程简介
- 确定声明值：参考样式表中没有冲突的声明，作为css属性值。
- 层叠冲突：对样式表有冲突的声明，使用层叠规则，确定CSS属性值。
- 使用继承：对仍然没有值的属性，若可以继承，则使用父元素的值。
- 使用默认值：对仍然没有值的属性，使用默认值。（属性默认值可以在MDN官网上查看）
特殊的两个CSS取值：
- inherit：强制继承，将父元素的值去除强制应用到改元素上。
- initial：初始值，将该属性设置为默认值。
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）。
盒子类型：
- 行盒：display 等于 inline的元素。
- 块盒：display 等于 block的元素。
行盒在页面中不换行，块盒独占一行。display默认值为inline。
盒子的组成部分
无论是行盒还是块盒，都由以下几个部分组成，从内到外分别是：
- 内容 content
width，height，设置的是盒子内容的宽高。内容部分通常叫做整个盒子的 内容盒 content-box
- 填充（内边距） padding
可以通过 padding-left，padding-right，padding-top，padding-bottom，属性设置边距的大小。 简写属性，padding:上 右 下 左;
填充区 + 内容区 = 填充盒（padding-box）
- 边框 border
边框 = 边框样式 + 边框粗细 + 边框颜色。
边框样式：border-style。边框粗细：border-width。边框颜色：border-color。他们也是复合属性。
边框 + 填充区 + 内容区 = 边框盒（border-box）
- 外边距 margin
边框到其他元素的距离。
设置 margin 的方式跟 padding 一样。
