一、CSS介绍
CSS概念：CSS代表级联样式表（Cascading Style Sheets）。CSS是一种标准样式表语言，用于描述网页的表示形式（即布局和格式）。万维网联盟（W3C）于1996年引入了CSS，CSS旨在将表示和内容分开。现在，web设计人员可以将网页的格式设置信息移动到单独的样式表中，从而大大简化HTML标记并提高可维护性。
使用CSS的优点：
- 可以将样式和布局与文档的内容分开；
- CSS节省大量时间，CSS提供了很多灵活性来设置元素的样式属性。您可以编写一次CSS，然后相同的代码可以应用于HTML元素组，也可以在多个HTML页面中重复使用。
- 易于维护,CSS提供了一种简便的方法来更新文档的格式，并在多个文档之间保持一致性。因为可以使用一个或多个样式表轻松控制整个网页的内容。
- 页面加载速度更快，CSS使多个页面可以共享格式信息，从而降低了文档结构内容的复杂性和重复性。它显着减小了文件传输大小，从而加快了页面的加载速度。
- 多种设备兼容性，CSS还允许针对多种类型的设备或媒体优化网页。使用CSS，可以针对不同的呈现设备（如台式机、手机等）以不同的查看样式呈现同一HTML文档。
二、在HTML文档中包含CSS
CSS可以作为单独的文档附加，也可以嵌入HTML文档本身。在HTML文档中包括CSS的三种方法：
- 内联样式-使用
styleHTML开始标记中的属性； - 嵌入式样式-使用
<style>文档头部的元素； - 外部样式表-使用
<link>元素，指向外部CSS文件。
注意：内联样式的优先级最高，而外部样式表的优先级最低。这意味着，如果在嵌入式样式表和外部样式表中都为元素指定样式，则嵌入式样式表中冲突的样式规则将覆盖外部样式表。
①内联样式
<p style="color:green; font-size:22px;">This is a paragraph.</p>②嵌入式样式
嵌入或内部样式表仅影响嵌入它们的文档。
嵌入式样式表在<head>HTML文档的部分中使用<style>元素定义。您可以<style>在HTML文档中定义任意数量的元素，但是它们必须出现在<head>和</head>标记之间。
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>③外部样式表
外部样式表将所有样式规则保存在一个单独的文档中。您可以通过两种方式附加外部样式表-链接和导入。
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body>
</html>@import可以在文档的标题内，也可以使用@import规则在另一个样式表中导入样式表
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>@import url("css/layout.css");
@import url("css/color.css");body {
color: blue;
font-size: 14px;}注意： 所有@import规则都必须在样式表的开头出现。样式表中定义的任何样式规则本身都会覆盖导入的样式表中的冲突规则。但是，由于性能问题，不建议在另一个样式表中导入样式表。
三、CSS语法
①CSS属性可以组织成CSS规则。CSS规则将一组CSS属性组合在一起，并将所有属性应用于CSS规则匹配的HTML元素上。
②CSS样式表由一组规则组成，这些规则由Web浏览器解释，然后应用于文档中的相应元素，如段落、标题等。
③CSS规则有两个主要部分，一个选择器和一个或多个声明：
- 选择器指定CSS规则适用于HTML页面中的哪个元素。
- 块内的声明决定了元素在网页上的格式。每个声明都包含一个属性和一个值，这些值和值之间用冒号（:）分隔并以分号（;）结尾，并且声明组用花括号括起来
{}。 - 注意：CSS声明始终以分号
;结尾，并且声明组始终被大括号{}包围。
④用CSS编写注释，CSS注释以/*开头，以*/结尾。
⑤CSS属性名称和许多属性值都不区分大小写，但是CSS选择器区分大小写。因此为了安全起见，应该假定CSS规则的所有组件都区分大小写。
四、CSS选择器
CSS选择器是一种用于匹配HTML文档中元素的模式。关联的样式规则将应用于与选择器模式匹配的元素。
①通用选择器
通用选择器（用* 星号表示）与页面上的每个单个元素匹配。*选择器内的样式规则将应用于文档中的每个元素。此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。
* {
margin: 0;
padding: 0;
}②元素类型选择器
元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。
p {
color: blue;
}③ID选择器
ID选择器用于为单个或唯一元素定义样式规则。ID选择器的定义是一个井号（#），后跟ID值。
#error {
color: red;
}④class类选择器
类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。用一个句号（.）紧随其后的类值定义类选择器。
.blue {
color: blue;
}⑤后代选择器
当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。
ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
}⑥子选择器
子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号（即>）隔开。
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}⑦相邻兄弟选择器
相邻的同级选择器可用于选择同级元素。该选择器的语法类似于：E1 + E2，其中E2是选择器的目标。
h1 + p {
color: blue;
font-size: 18px;
}只有每个<h1>标题之后的段落才具有关联的样式规则。
⑧通用兄弟选择器
div ∼ p {
color: blue;
font-size: 18px;
}div ~ p {}选择div下面所有兄弟p元素。
⑨分组选择器
样式表中的多个选择器通常共享相同的样式规则声明。可以将它们分组为一个逗号分隔的列表，以最大程度地减少样式表中的代码。
h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}注意： 还有其他选择器，例如属性选择器、伪类、伪元素等等。
五、CSS盒子模型
- 当我们使用width和height属性设置元素的宽度和高度时，实际上，我们只设置了内容区域的宽度和高度。而不是元素的实际高度和实际宽度。
- 总宽度 = 宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 总高度 = 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
参考资料：文章内容都摘自于网上教程，教程链接：https://www.cainiaojc.com/css/css-tutorial.html
One thought on “CSS基础知识”
强啊！