前端-CSS前端三剑客
目录
前端—CSS（前端三剑客）
1.基本语法规范
选择器 + {⼀条/N条声明} • 选择器决定针对谁修改 (找谁) • 声明决定修改啥. (⼲啥) • 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值 比如：
CSS_Test
h1
style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内.
2.引入方式
CSS有3种引⼊⽅式，语法如下表格所⽰：
| 引入方式 | 语法描述 | 示例 |
|---|---|---|
| 行内样式 | 在标签内使⽤style属性，属性值是css属性键值对 |
绿⾊
内部样式| 定义 外部样式| 定义标签，通过href属性引⼊外部css⽂件 |
3.CSS选择器
3.1标签选择器
注意所有的CSS 都要写到 style 标签中
3.2类选择器
Hello World
⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类
3.3 ID选择器
CSS_Test
Hello World
注意id比class优先
3.4 通配符选择器
设置所有元素为红色
5 复合选择器
CSS_Test
h1
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: 设置⾼度
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