css的概念
CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用于描述网页样式的语言，包含了文本、布局、颜色、字体、图像等方面的样式。通过CSS，可以将网页的表现和内容分离开来，从而使网页更容易进行维护和修改。
CSS包括以下几个主要概念：
-
选择器：用于选择要应用样式的HTML元素。可以根据元素的标签名、类名、ID等属性来进行选择。
-
样式规则：包括一个选择器和一组属性-值对，用于描述要应用的样式。例如，可以使用样式规则来定义元素的字体、颜色、边框等属性。
-
层叠和继承：CSS中的样式可以通过层叠和继承来影响一个元素的最终样式。层叠是指当有多个样式规则应用到同一个元素时，如何决定最终的样式；继承是指某些样式属性可以被子元素继承，因此可以减少样式规则的数量。
-
盒子模型：CSS中的每个元素都是一个矩形盒子，包含内容、内边距、边框和外边距。可以使用CSS来控制这些盒子的大小、位置和样式。
-
布局：CSS可以用于控制页面的布局，包括块级元素和行内元素的排列方式、浮动、定位等。
这些概念组合在一起，可以帮助开发人员设计出漂亮、可维护和易于使用的网页。
CSS 代码书写位置
CSS 代码可以书写在 HTML 文档的 <head> 标签中的 <style> 标签内，也可以将 CSS 代码写在外部的 CSS 文件中，然后在 HTML 中通过 <link> 标签引用该文件。
在 <head> 标签内的 <style> 标签中书写 CSS 代码的示例：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
font-size: 36px;
}
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is some sample text.</p>
</body>
</html>
将 CSS 代码写在外部的 CSS 文件中，并通过 <link> 标签引用的示例：
HTML 文件：
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is some sample text.</p>
</body>
</html>
CSS 文件（styles.css）：
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
font-size: 36px;
}
p {
color: green;
font-size: 18px;
}
CSS样式规则
CSS样式规则指定如何将一个HTML元素显示为样式。每个CSS样式规则都由一个选择器和一组规则构成。选择器指定要应用样式的HTML元素，规则指定要应用的样式。
例如，以下CSS样式规则将设置所有段落元素的文本颜色为红色：
p {
color: red;
}
在上面的规则中，“p”是选择器，它选择所有段落元素。大括号内的“color: red;”是规则，它指定要应用的样式是文本颜色为红色。
可以指定多个规则，分别用分号分隔：
p {
color: red;
font-size: 16px;
}
上面的规则设置了段落元素的文本颜色为红色，字体大小为16像素。
CSS样式规则 使用注意事项
使用CSS样式规则时需要注意以下几点：
-
语法正确： CSS样式规则应该按照正确的语法书写，包括使用正确的选择器、属性和值等。
-
选择器合理： 选择器应该根据需要选择正确的元素。不要使用冗余的选择器，这会影响性能。
-
属性值正确： 属性值应该根据需要选择正确的值。不要使用无意义的或错误的属性值。
-
兼容性考虑： 在编写CSS样式规则时需要考虑浏览器的兼容性，避免使用不被大多数浏览器支持的属性和值。
-
样式冲突： 当多个CSS样式规则应用于同一个元素时，需要注意样式冲突的问题。可以使用优先级、继承和层叠等方法解决这个问题。
-
代码结构清晰： CSS样式规则应该按照一定的结构进行组织，包括缩进、注释和空格等，以便后期维护和修改。
-
可读性好： CSS样式规则应该易于理解和阅读，不要使用过于复杂的语法和选择器。
