1.基本语法规范
选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥. (⼲啥)
• 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值
比如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_Test</title><style>h1{color: red;}</style>
</head>
<body><h1>h1</h1>
</body>
</html>
style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内.
2.引入方式
CSS有3种引⼊⽅式，语法如下表格所⽰：
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使⽤style属性，属性值是css属性键值对 | <div style="color:green">绿⾊</div> |
| 内部样式 | 定义<style>标签，在标签内部定义css样式 | <style> h1{ color: red; } </style> |
| 外部样式 | 定义<link>标签，通过href属性引⼊外部css⽂件 | <link rel="stylesheet" href="[CSS⽂件路径]"> |
3.CSS选择器
3.1标签选择器
注意所有的CSS 都要写到 style 标签中
<style>div{color: red;}</style>
3.2类选择器
<style>.test {color: red;}</style> <div class = "test">Hello World</div>⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类
3.3 ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_Test</title><style>#test {color: red;}</style>
</head>
<body><div id = "test">Hello World</div>
</body>
</html>
注意id比class优先
3.4 通配符选择器
<style>* {color: red;}</style>设置所有元素为红色
5. 复合选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_Test</title><style>div h1 {color: red;}</style>
</head>
<body><div id = "test"><h1>h1</h1></div>
</body>
</html>
4.常用CSS
4.1 color
color: 设置字体颜⾊
.text1{font-size: 32px;
}颜⾊有如下⼏种表达⽅式:
• 英⽂单词,如red,blue
• rgb代码的颜⾊ 如rgb(255,0,0)
• ⼗六进制的颜⾊ 如#ff00ff
4.2 font-size
font-size: 设置字体⼤⼩
.text1{font-size: 32px;
}4.3 border
border: 边框
| 样式 | 说明 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-style | 设置边框样式 | dotted : 点状 solid : 实线 double : 双线 dashed: 虚线 |
| border-color | 设置边框颜⾊ | 同 color |
.text1 {/* border: 1px purple solid; */border-width: 1px;border-style: solid;border-color: purple;
}4.4 width/height
width: 设置宽度
height: 设置⾼度
<style>.text {width: 100px;height: 100px;}</style>4.5 padding
padding: 内边距, 设置内容和边框之间的距离
padding也是⼀个复合样式, 可以对四个⽅向分开设置
padding-top
padding-bottom
padding-left
padding-right
4.6 外边距
margin: 外边距, 设置元素和元素之间的距离
margin也是⼀个复合样式, 可以给四个⽅向都加上外边距
margin-top
margin-bottom
margin-left
margin-right
