CSS基础知识，盒子模型，选择器
文章目录
一、CSS基础
1.1、CSS是什么？
CSS是一种描述HTML文档样式的语言，它定义网页的样式，描述应该如何显示HTML元素。
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
1.2、CSS语法
CSS规则集有选择器和声明块组成：
例：
p {text-align: center}
p 选择器 它指向HTM中的<p>元素
声明块：
text-align 属性
center 值
- 选择器指向您需要设置样式的 HTML 元素。
- 声明块包含一条或多条用分号分隔的声明。
- 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
- 多条 CSS 声明用分号分隔，声明块用花括号括起来。
1.3、三种使用CSS（插入样式表）的方法
- 外部CSS
- 内部CSS
- 行内CSS
一般而言随着适用范围逐渐精确，优先级逐渐升高（仅个人看法）
具体的优先级排序如下
1.行内样式
2.外部和内部样式（在具体的元素中）
3.浏览器默认样式（在head部分内）
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式
外部CSS
效果：
通过使用外部样式表，只需修改一个文件即可以改变整网站的外观。
使用方式：
用HTML页面的 head 部分的 <link>元素引用外部样式表文件。
注意：
- 外部样式表可以在任何文件文本中编写，但必须以.css扩展名保存！
- 外部.cc文件不应该包含任何HTML标签。
内部CSS
效果：
使得每一HTML网页有属于自己唯一的样式。
使用方式：
在 HTML文档的head部分内用<style>元素进行定义
更多详细的使用，在下面介绍选择器时，会给出具体的实例！
行内CSS
效果：
行内样式也可称内联样式，对某一确定元素应用。
使用方式：对于作用的元素，在其标签内借助 style 属性来添加样式
注意：
行内样式失去了样式表的许多优点（通过将内容（即HTML语言）与呈现（即CSS样式）混合在一起）。需谨慎使用
二、盒子模型
我们常可以看到各种制作精美的网页，一个网页的制作该如何开始呢？对于初学者的简单的网页设计来说你只需考虑填充页面内容。而那些复杂的网页则需要我们从一开始就要考虑布局和顺序，在这时人们就想到了盒子这个概念，把网页的制作看作各种盒子的摆放问题，同时对每个盒子进行修缮设计，最终我们搭出了结构合适且外观精美的网页！
首先我们来介绍一个盒子模型的结构如下
2.1、盒子组成
margin外边距
它是完全透明的，相对于其父元素（即其父盒子）而言的，不可看到的。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
margin: 20px; 上，左，右，下外边距均是
margin: 10px 20px 30px 40px; 从左到右依次是 上，右，下，左外边距（按照顺时针顺序）
margin: 10px 20px; 从左到右依次是 上下，左右外边距
margin: 10px 20px 30 px 从左到右依次是上，左右，下 外边距
margin的auto属性：会使元素在容器中水平居中。
可以为外边距设置百分数值，而其百分数值是相对其父元素的width计算的，则若父元素的width改变，它也会改变！
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
border边框
border表示盒子的边界，它可以设置成可见的，样式多样的。
可设置边框的样式，颜色和宽度
border-style属性
定义了边框的样式（可以对上下左右边各个定义）
当这些属性值在一个语句中出现时定义的顺序同上margin。
以下的这些属性若无边框样式将都不再存在！
border-color属性
定义了边框颜色(可以对上下左右边框各个定义）
当这些属性值在一个语句中出现时定义的顺序同上margin。
border-width属性
定义边框宽度（可以对上下左右边框各个定义）
当这些属性值在一个语句中出现时定义的顺序同上margin。
padding内边距
padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片！
（可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样）
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
（要对这四个边分别设置边距时同上margin）
content则是HTML元素的内容
2.2、盒子大小的计算
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
这对于设计时碰到盒子叠加时具有重要意义！
2.3、圆角边框border-radius
相当于在某一角处根据所给水平值，垂直值，找出原点画圆取所得图形为边框。
2.4、阴影box-shadow
inset 水平偏移 垂直偏移 模糊距离 颜色；
outset 默认值，外部阴影
inset 可选，内部阴影
三、 选择器
| 选择器的分类 | 分类的依据 |
|---|---|
| 简单选择器 | 根据名称、id、类来选取元素 |
| 组合选择器 | 根据它们之间特定的关系来选取元素 |
| 伪类选择器 | 根据特定状态选取元素 |
| 伪元素选择器 | 选取元素的一部分并设置其样式 |
| 属性选择器 | 根据属性或属性值来选取元素 |
3.1、简单选择器
CSS元素选择器（根据HTLML元素名称）
格式：
元素{}
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>本段不受样式的影响。</p>
</body>
CSS id 选择器（根据HTML元素的id属性）
格式：
#所设的id属性{}
<head>
<style>
#lp1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="lp1">本段受样式影响</p>
<p>本段不受样式的影响。</p>
</body>
注意 id名不能以数字开头。
CSS 类选择器（选择有特定class属性的HTML元素）
格式：
.class属性{}
<head>
<style>
.lp1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="lp1">本段受样式影响</p>
<h1 class="lp1">本标题受样式影响 </h1>
<p>本段不受样式的影响。</p>
</body>
注意 类名不能以数字开头。
由上我们可以发现class属性可以对各个元素使用，而id属性仅针对某一元素（即用于选择一个唯一元素）。
CSS通用选择器 （选择页面上的所有HTML元素）
格式：
*{}
<head>
<style>
* {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p >本段受样式影响</p>
<h1 >本标题受样式影响 </h1>
</body>
3.2、组合选择器
后代选择器
匹配指定元素后代的所有元素
这里所有元素指操作某一元素在后代范围（范围即指定元素）内都生效。
格式：
指定元素（空格）选定的要作用的元素
子选择器
匹配指定元素子元素的所有元素
这里的指定元素的子元素为作用范围。
格式：
指定元素（>）选定的要作用的元素
相邻兄弟选择器
匹配所有指定元素的相邻同级元素
注意对相邻的理解！！！，相邻即紧随其后！
作用范围 指定元素的相邻同级元素
在这里，兄弟即要有相同的父亲（父元素）
格式：
指定元素（+）选定的要作用的元素
通用兄弟选择器
匹配属于指定元素的同级元素的所有元素
与相邻选择器相比不在考虑相邻的问题，同级即可！
3.3、属性选择器
可以设置带有特定属性或属性值的HTML元素
格式：
1、CSS[attribute]选择器
用于选取带有指定属性的元素。
2、CSS[attribute=“value”]选择器
选取带有指定属性和值的元素。
3、CSS[attribute~=“value”]选择器
选取属性值包含指定词的元素。
4、CSS[attribute|=“value”]选择器
选取指定属性以指定值开头的元素。
在这里指定值必须是完整或单独的单词
如：top-header可以，而topcontent不可。
5、CSS[attribute^=“value”]选择器
选取指定属性以指定值开头的元素。
在这里指定值不必是完整单词
6、CSS[attribute$=“value”]选择器
选取指定属性以指定值结尾的元素。
在这里指定值不必是完整单词
7、CSS[attribute=“value”]选择器*
选取属性值包含指定词的元素。
在这里指定值不必是完整单词
总结
有关以上内容不动手是没办法真正掌握的，要在学习过程中注意实践，慢慢优化自己的作品会受益更多!
扫一扫
7615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
