【CSS】——基础入门常见操作
阿华代码,不是逆风,就是我疯
你们的点赞收藏是我前进最大的动力!!
希望本文内容能够帮助到你!!
目录
一: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
效果如下