什么是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: ";
}