学习目标
- 能够说出三种CSS的书写位置(内嵌、行内、外联)
- 能够使用text开头的几个属性(text-align,text-indent、text-decoration)
- 能够使用margin:0 auto(盒子(div、p、h)居中)
- 能够说出CSS三大特性(继承性、层叠性、优先级)
- 能够说出CSS能够继承的属性(color、text-、font- 、line-等)
- 能够计算CSS选择器的权重(0,0,0,0)
。。。。。。
理解上课的知识点……
CSS的三种书写位置
css的书写位置有时候也叫做css的三种引入方式
内嵌样式(内部引入方式)
将css语句都写在style标签里面
书写位置:
- css写在style标签里面
- style标签写在head标签里面,title标签下面,
作用范围:
- 当前页面
1 | <style> |
使用场景:
- 一般用在小demo或者小案例
行内样式(行内引入方式)
将CSS样式直接写在标签本身上,以属性的形式存在
书写位置:
- css写在标签的style属性中
作用范围:
- 当前标签
1 | <div style="color: red; font-size: 100px;">小可爱</div> |
使用场景:
- 基础班不使用,js操作的样式一般都是行内样式
外联样式(外部引入方式)
css写在一个单独的.css的文件中,在html文件里面通过link标签引入css文件
书写位置:
- css写在一个单独的.css文件中,需要通过link标签引入
- link标签写在head标签里面,title标签下面
作用范围:
- 多个页面(谁引入,谁生效)
1 | <link rel="stylesheet" href="路径" > |
使用场景:
- 项目中用的最多
三种样式表总结
样式表 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌样式 | css写在style标签中 | 当前页面 | 小案例 |
行内样式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
外联样式 | css写在单独的css文件中,通过link引入 | 多个页面 | 项目中 |
文本相关属性
文本的缩进(text-indent)
设置文本的缩进
取值:
- 数字+px(像素)
- 数字+em(
1em=font-size
)
注意:
- 首行缩进两个字:一般使用2em。
文本的对齐方式(text-align)
设置文字的水平对齐方式
取值:
- left:设置文字在盒子中 水平靠左
- center:设置文字在盒子中 水平居中
- right:设置文字在盒子中 水平靠右
文本的修饰(text-decoration)
给文字设置下划线、删除线等效果
取值:
- none:没有任何修饰(多用于清除多余的样式)
- underline:下划线
- line-through:删除线
注意:
- 一般用的最多的是用text-decoration:none,取消a标签的默认下划线。
总结:strong、ins、em、del的效果已经全部可以通过css替换了
- strong:加粗→
font-weight: 700;
- ins:下划线→
text-decoration: underline;
- em:倾斜→
font-style: italic;
- del:删除线→
text-decoration: line-through;
水平居中总结
项目中经常会遇到让元素水平居中的效果,要熟练使用。
学习的第一个水平居中属性就是
text-align:center
text-align:center;
能让哪些元素水平居中?
text-align:center;
除了能让文字水平居中之外,还可以让其他元素水平居中
- 文本
- span、a标签(行内元素)
- input、img(行内块元素)
如果想让以上元素水平居中,需要给以上元素的所在标签(父元素)设置text-align:center;
让盒子居中的方法
text-align:center
不能让盒子(div、h、p)这类标签水平居中,如果需要让盒子居中怎么实现呢?
代码:margin: 0 auto;
作用: 可以让 盒子(div/h/p)
水平居中
条件:有宽度的盒子
因为div不设置宽度,宽度默认就是父元素的宽度(独占一行的效果)
如果想让div、h、p标签水平居中,需要给当前div设置margin:0 auto;
ヾ(๑╹◡╹)ノ”改写昨天的新闻案例
CSS的三大特性
解释css的一些特殊现象
继承性
后代元素会继承祖先元素的一些样式(子承父业)
1 | <div class="father">父亲 |
在开发者调试工具的查看继承的代码
有哪些样式属性可以继承:
可以通过开发者调试工具中查看是否有
Inherited from
判断样式是否继承这里列举几个常见的记忆
- color:颜色
- font- 开头的:字体相关属性
- text- 开头的:文本相关属性
- line- 开头的:line-height
如何查看当前元素的属性值:
开发者调试工具中的computed 中可以搜索
常见的应用:
去除列表的样式(如:小圆点),可以给li标签设置使用 list-style:none;
,但一般给ul设置,此时也利用了继承性。
不能继承的特殊情况:
- a链接颜色不能通过继承设置,需要单独设置(a标签有本身的样式)
- a标签有默认的样式,要给a标签设置样式,需要单独选中后设置!
- h系列标签字体大小不能通过继承设置,需要单独设置(有本身的样式)
- div的高度不能继承,宽度默认有继承父元素的效果
总结: 如果标签自己有样式(可以是自己设置的或者浏览器默认设置的),就不会继承父元素的样式(标签很独立)
在同学们刚刚开始学习还不熟练的时候,先别想着用继承就少写代码,该设置的代码一个别省。
层叠性
浏览器解决样式冲突的特性
特点:后渲染的css样式会覆盖掉先渲染的css样式 (优先级相同的情况下)
例子:
1 | <style> |
总结:
- 当层叠的样式相同时→样式会覆盖→写在下面的样式会生效
- 当层叠的样式不同时→样式会叠加→共同作用在标签上
优先级(重要)
只有当优先级相同时,才比较层叠性
如果用的是不同选择器,就不能比较层叠性了,则需要考虑优先级
优先级比较
给页面中的一个标签设置样式,可以通过多种方法~
比较不同方法的优先级大小分别是什么样
1 | <div class="father"> |
优先级比较公式:
1 | 继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important |
注意点:
- !important写在样式属性值的后面,分号的前面
- !important不能提升继承的优先级,只要是继承的优先级是最低的
权重计算
也叫做css的特殊性(specificity)
当面对复合选择器的时候,需要考虑权重的计算
计算公式:
公式算法:(0,0,0,0)
- 第一个数字:行内样式的个数
- 第二个数字:ID选择器的个数
- 第三个数字:类选择器的个数
- 第四个数字:标签选择器的个数
注意:!important
如果能选中对应标签,则权重最高!!天下第一!!!
比较规则:
先比较第一个数字,如果比较出来了,之后的统统不看
如果第一个数字相同,再去比较第二个数字
……
如果数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算)
做权重计算题的步骤:
- 判断选择器是否直接选中标签,如果不能直接选中→继承优先级最低→直接pass
- 通过权重计算公式,判断谁权重最高!!