p { color: red; font-size: 16px; } 什么是CSS？CSS是Cascading Style Sheets的缩写，中文翻译为层叠样式表。它是一种用于描述网页文档外观样式的语言，可以控制网页中的字体、颜色、布局、背景等各种视觉效果。CSS与HTML和JavaScript一样，是Web前端开发中必不可少的技术之一。
什么是CSS？
CSS是Cascading Style Sheets的缩写，中文翻译为层叠样式表。它是一种用于描述网页文档外观样式的语言，可以控制网页中的字体、颜色、布局、背景等各种视觉效果。CSS与HTML和JavaScript一样，是Web前端开发中必不可少的技术之一。
CSS的优势
1. 分离样式和内容：CSS将网页的样式与内容分离开来，使得网页的结构更加清晰，易于维护和修改。
2. 可重用性：CSS样式可以在多个网页中重复使用，从而减少了代码量，提高了开发效率。
3. 网页加载速度快：CSS可以将网页的样式文件单独进行缓存，从而减少了网页加载的时间。
CSS的基本语法
CSS的基本语法由三部分组成：选择器、属性和值。其中，选择器用于选择要应用样式的HTML元素，属性用于指定要修改的样式，值用于指定修改后的样式值。
例如：
p {
color: red;
font-size: 16px;
}
上述代码中，p为选择器，color和font-size为属性，red和16px为值。这段代码的意思是将所有的p元素的字体颜色设置为红色，字体大小设置为16像素。
CSS的三种应用方式
CSS有三种应用方式：内部样式表、外部样式表和内联样式。
1. 内部样式表：将CSS样式直接嵌入到HTML文档中的head标签中，适用于单个页面的样式控制。
2. 外部样式表：将CSS样式保存在一个独立的CSS文件中，通过link标签引入到HTML文档中，适用于多个页面共享相同样式的情况。
3. 内联样式：将CSS样式直接写在HTML元素的style属性中，适用于单个元素的样式控制。
这是一段红色的16像素大小的文字。
CSS的选择器
CSS的选择器用于选择要应用样式的HTML元素，常见的选择器有：
1. 标签选择器：选择指定标签的所有元素。
p {
color: red;
}
2. 类选择器：选择指定class属性的所有元素。
.red {
color: red;
}
3. ID选择器：选择指定id属性的元素。
#header {
background-color: gray;
}
4. 后代选择器：选择指定元素的后代元素。
div p {
color: red;
}
5. 子元素选择器：选择指定元素的子元素。
ul > li {
list-style: none;
}
6. 属性选择器：选择指定属性的元素。
a[href="https://www.google.com"] {
color: blue;
}
7. 伪类选择器：选择指定状态的元素，如:hover、:active等。
a:hover {
text-decoration: underline;
}
CSS的盒模型
CSS中的盒模型是指每个HTML元素都被看作一个盒子，包括内容区域、内边距、边框和外边距四个部分。
1. 内容区域：元素的实际内容。
2. 内边距：内容区域与边框之间的空白区域。
3. 边框：内边距与外边距之间的边框，可以设置宽度、样式和颜色。
4. 外边距：边框与相邻元素之间的空白区域。
盒模型的大小可以通过width和height属性来设置。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
上述代码中，div元素的实际宽度为222px（200px + 2 * 10px + 2 * 1px + 2 * 20px），实际高度为142px（100px + 2 * 10px + 2 * 1px + 2 * 20px）。
总结
CSS是一种用于描述网页文档外观样式的语言，它具有分离样式和内容、可重用性和网页加载速度快等优势。CSS的基本语法由选择器、属性和值三部分组成，常见的选择器有标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、属性选择器和伪类选择器。CSS中的盒模型是指每个HTML元素都被看作一个盒子，包括内容区域、内边距、边框和外边距四个部分。
