前端---CSS（前端三剑客）
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