编辑

阿华代码，不是逆风，就是我疯

你们的点赞收藏是我前进最大的动力！！

希望本文内容能够帮助到你！！

目录

一：CSS引入

二：CSS对元素进行美化

1：style修饰

2：选择器

（1）标签选择器

（2）类选择器

效果①

效果②

（3）ID选择器

总结

（4）复合选择器

3：font-size

4：boder、width、height

5：margin、padding内外边距

一：CSS引入

CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和

结构分离.

CSS 可以理解为"东⽅四⼤邪术" 之化妆术.

对⻚⾯的展⽰进⾏"化妆"

编辑

二：CSS对元素进行美化

1：style修饰

编辑

编辑

编辑

对所有span标签都设置为了红色，这显然是不合适的

编辑

我们对span标签进行分类

2：选择器

（1）标签选择器

解释：对<span>的标签进行修饰

编辑 编辑

效果：

编辑

（2）类选择器

在center前加“.”    

解释：选择class为center的元素

编辑 编辑

效果①

编辑

效果②

编辑 编辑

（3）ID选择器

编辑 编辑 编辑

总结

编辑

（4）复合选择器

由多个单选择器组成

ul标签：unlist无序列表

ol标签：orderlist有序列表

①场景：不修改li，给ol标签中的li加修饰  

ol li

编辑 编辑

②效果

编辑

③变式：类选择器 + 标签选择器

.order li

编辑 编辑

④就近原则

你要改成红色，但我偏要用蓝 色

按照代码从上往下的顺序，谁离得近，就是什么颜色

编辑 编辑

效果

编辑

⑤样式

通常将样式放在header里面，保证页面加载时先出样式

1>行内样式

适合新手小白

编辑

2>内部样式

编辑

3>外部样式

herf外部链接，用ctrl+鼠标左击点进去。特点：非常简洁，适合企业开发

编辑

编辑

3：font-size

设置字体大小（chrome浏览器默认字体大小为16像素）

编辑 编辑

效果

编辑

4：boder、width、height

边框，边界 ；px是像素（可以理解为字体大小，数字越大像素越大，字体越大）

复合样式：由多个样式组成，没有先后顺序

编辑

编辑

①效果

编辑

②width

编辑

③height

编辑

编辑

重点：width、height只对块级元素生效，对行内元素不生效——例如对div标签生效，对span标签不生效（可以理解成div是一个箱子，span是一个袋子）

块级元素：h1~6、p、div

行内元素：span、a、

编辑 编辑 编辑

5：margin、padding内外边距

重点内外都是相对的，看是相对于谁！！

编辑 编辑

margin

有上下左右像素单独设置，也可以什么都不加就是都设置，也可以是两个参数（第一个表示上下，第二个表示左右）——margin（0，auto）居中的意思

编辑

遵循上右下左的顺序设置为不同值（也可以记为顺时针）

编辑

也可以单独选设置

编辑

设置前

编辑

设置后

编辑

padding

编辑

效果如下

编辑