介绍CSS基础语法和选择器常见类型 - WeTab学习笔记
时间：2023-6-2 07:49 作者：六思逸 分类： HTML
什么是CSS?
CSS是用于让网页元素变得漂亮并让网页布局更加灵活的一种技术，它可以改变网页中元素的颜色、大小、位置等样式，让网页看起来更好看，更有吸引力。通过CSS，开发人员可以将样式信息从HTML文档中分离出来，提高了代码的可维护性。
CSS基础语法
CSS的基础语法主要包括两个部分：选择器和属性。
选择器是指用于指定要应用样式的HTML元素的标识符，可以是元素的标签名、类名、ID名等等。
属性是指要应用的样式所包含的属性名和属性值，比如颜色、字体大小、边框样式等等。
CSS语法:
选择器 {
属性1: 属性值1;
属性2: 属性值2;
…
属性n: 属性值n;
}.example {
background-color: red; //背景颜色设置为红色
color: white; //字体颜色设置为白色
}CSS写入方式
CSS（层叠样式表）是用于在HTML文档中添加样式的一种语言。CSS有三种写入方式：
外部样式表：
把样式写在外部的CSS文件中，然后在HTML文档中通过link标签引入。这种方式适用于需要对多个网页使用同样的样式的情况。
/* style.css */
body {
background-color: #f1f1f1;
}
h1 {
color: red;
text-align: center;
}在HTML文件中，通过link标签引入：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>内部样式表：
把样式写在HTML文档的head标签中的style标签内。这种方式适用于需要对单个网页使用的样式。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f1f1f1;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>内联样式：
在元素的style属性中直接定义样式。这种方式适用于需要对某个特定的元素应用样式的情况。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: red; text-align: center;">Hello World</h1>
</body>
</html>选择器
CSS选择器是用于选择HTML上的元素并为其应用样式的模式或模板。
元素选择器：
使用HTML元素名作为选择器，选择所有该元素类型的元素。
p {
color: red;
}ID选择器：
使用HTML元素的id属性的值作为选择器，选择该元素。id属性的值在整个HTML文档中应该是唯一的。
#myDiv {
background-color: blue;
}类选择器：
使用HTML元素的class属性的值作为选择器，选择属于该类的元素。class属性可以应用于多个元素，并且一个元素可以同时属于多个类。
.myClass {
font-weight: bold;
}属性选择器：
使用HTML元素的属性和属性值作为选择器。
[title="example"] {
color: orange;
}伪类选择器：
使用关键字和冒号来选择元素的特定状态。
a:hover {
color: green;
}伪元素选择器：
选择HTML元素的某个特定部分，并应用样式。伪元素用于在元素的某个位置上添加特定的样式，例如添加文本到元素的起始位置（:first-letter）或元素的结尾位置（:last-child）。
h1::before {
content: "Chapter: ";
}标签: CSS 基础语法 选择器 外部样式表 内部样式表 内联样式 元素选择器 ID选择器 类选择器 属性选择器 伪类选择器 伪元素选择器
推荐阅读：