css概述
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
css基本语法
css的定义方法是：
选择器 { 属性：值； 属性：值； 属性：值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：
div{
width:100px;
height:100px;
background:gold;
}Css的三种选择器
第一种： 标签选择器：标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。(受局限型比较大)例如： 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 /*第一种选择器：标签选择器，会选择到页面上所有同类型的标签，局限性大，容易误伤*/
10 div{
11 color: red;
12 font-size: 30px;
13 }
14 </style>
15 </head>
16 <body>
17 <body>
18 <div class="bold">这是第一个div</div>
19 </body>
20 </body>
21 </html>
第二种：
类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*第二种选择器:类选择器,使用最多的选择器，一个类可以用在多个标签上，一个标签可以用多个类（类之间用空格隔开），使用非常灵活*/
.bold{
font-weight: bold;
}
.indent{
text-indent: 50px;
}
</style>
</head>
<body>
<body>
<div class="indent bold">这是第二个div</div>
</body>
</body>
</html>
第三种：
层级选择器：主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*第三种选择器：层级选择器，符合此种层级关系的标签才能被选中*/
.indent span{
font-family: ‘Times New Roman‘, Times, serif;
color: slateblue;
}
</style>
</head>
<body>
<body>
<div class="indent bold">这是第二个<span>div</span></div>
</body>
</body>
</html>
时间： 2024-10-11 09:34:39