CSS的简单介绍
1.什么是CSS
CSS(层叠样式表)，用于控制页面的样式，简单地来说，CSS就是用来美化页面的一种语言。
2.基本语法规范
CSS的基本语法规范：CSS选择器+{1或多条声明}
其中CSS选择器决定找谁(针对哪个元素进行修改)，声明决定干什么(具体如何修改)，声明的属性是键值对
<style>p {/* 针对所有p标签元素 */color: blue; /* 设置字体颜色 */font-size: 20px; /* 设置字体大小 */}</style>3.CSS常见的选择器
3.1 标签选择器
标签选择器仅针对标签这个元素，常见的标签例如图片标签img，无语义标签div和span等等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color:red;}</style>
</head>
<body><div>hello</div><div>world</div>
</body>
</html>3.2 类选择器
类选择器通过针对指定类名的元素进行修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通过 .+类名 构成类选择器 */.font {color:blue;}</style>
</head>
<body><!-- 通过class来定义类名属性 --><div class="font">hello</div><div class="font">world</div>
</body>
</html>3.3 ID选择器
ID选择器通过针对指定ID的元素进行修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通过 #+id 构成ID选择器 */#div1 {color:blue;}</style>
</head>
<body><div id="div1">hello</div><div id="div2">world</div>
</body>
</html>3.4 通配符选择器
通配符选择器针对页面上所有元素进行修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: blue;}</style>
</head>
<body><div>hello</div><div>world</div>
</body>
</html>3.5 复合选择器
复合选择器可以由多个单选择器组成，单选择器可以是上述的标签选择器，类选择器等等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 指定修改xx元素中的xx(可以有多层，例如ul li p{...}) *//* 复合选择器有两种不同形式，一种是elem1 elem2(elem2可以是elem1的子或孙元素)另一种是elem1>elem2(elem2必须是elem1的子元素) */div p {color:blue;}</style>
</head>
<body><div><p>helloworld</p></div>
</body>
</html>4.常见CSS
color：设置字体颜色
font-size：设置字体大小
border：边框
width/height：设置宽度和高度
padding：内边距，设置内容和边框之间的距离
注：只有块级元素可以设置宽高(width/height)，块级元素独占一行，行级元素不独占一行，常见的块级元素有h1-h6，p，div等，常见的行级元素有a，span等，可以通过display: block将行级元素转换为块级元素
<style>div {color: red;font-size: 32px;border: 5px black solid;width: 500px;height: 300px;margin: 5px;padding: 5px;}</style>