基础班day05笔记

学习目标

  • 能够说出三种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
2
3
4
5
6
<style>
div {
color: red;
font-size:100px;
}
</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
2
3
<div class="father">父亲
<div class="son">儿子</div>
</div>

在开发者调试工具的查看继承的代码

css1

有哪些样式属性可以继承:

可以通过开发者调试工具中查看是否有 Inherited from 判断样式是否继承

这里列举几个常见的记忆

  • color:颜色
  • font- 开头的:字体相关属性
  • text- 开头的:文本相关属性
  • line- 开头的:line-height

如何查看当前元素的属性值:

开发者调试工具中的computed 中可以搜索


常见的应用:

去除列表的样式(如:小圆点),可以给li标签设置使用 list-style:none; ,但一般给ul设置,此时也利用了继承性。


不能继承的特殊情况:

  • a链接颜色不能通过继承设置,需要单独设置(a标签有本身的样式)
    • a标签有默认的样式,要给a标签设置样式,需要单独选中后设置!
  • h系列标签字体大小不能通过继承设置,需要单独设置(有本身的样式)
  • div的高度不能继承,宽度默认有继承父元素的效果

总结: 如果标签自己有样式(可以是自己设置的或者浏览器默认设置的),就不会继承父元素的样式(标签很独立)

在同学们刚刚开始学习还不熟练的时候,先别想着用继承就少写代码,该设置的代码一个别省。

层叠性

浏览器解决样式冲突的特性

特点:后渲染的css样式会覆盖掉先渲染的css样式 (优先级相同的情况下)

例子:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.red {
/* 最终绿色起效果 */
color: pink;
color: red;
}
.green {
color:green;
}
</style>

<div class="green red">小姐姐</div>

总结:

  • 当层叠的样式相同时→样式会覆盖→写在下面的样式会生效
  • 当层叠的样式不同时→样式会叠加→共同作用在标签上

优先级(重要)

只有当优先级相同时,才比较层叠性

如果用的是不同选择器,就不能比较层叠性了,则需要考虑优先级

优先级比较

给页面中的一个标签设置样式,可以通过多种方法~

比较不同方法的优先级大小分别是什么样

1
2
3
<div class="father">
<p class="son" id="orange">我是一个p标签</p>
</div>

优先级比较公式:

1
继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

注意点:

  • !important写在样式属性值的后面,分号的前面
  • !important不能提升继承的优先级,只要是继承的优先级是最低的

权重计算

也叫做css的特殊性(specificity)

当面对复合选择器的时候,需要考虑权重的计算

计算公式:

公式算法:(0,0,0,0)

权重计算

  • 第一个数字:行内样式的个数
  • 第二个数字:ID选择器的个数
  • 第三个数字:类选择器的个数
  • 第四个数字:标签选择器的个数

注意:!important 如果能选中对应标签,则权重最高!!天下第一!!!

比较规则:

  1. 先比较第一个数字,如果比较出来了,之后的统统不看

  2. 如果第一个数字相同,再去比较第二个数字

    ……

    如果数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算)

做权重计算题的步骤:

  1. 判断选择器是否直接选中标签,如果不能直接选中→继承优先级最低→直接pass
  2. 通过权重计算公式,判断谁权重最高!!