首先祝大家元旦快乐,2019的我们会更加优秀
来看一下今天的学习内容吧
一.css的三种书写位置
1.内嵌样式
书写位置,css写在style标签里面,写在title下面
作用范围,当前页面
适用范围,小的案例或者小的demo里
2.行内样式
书写位置,css写在标签的style属性里
作用范围,当前标签
适用的场景,基础时候不用,找js当中使用
3.外联样式
书写位置,写在一个单独的.css文件中,需要通过link标签引用
使用范围,多个页面,谁引入谁生效
使用场景,一般项目中使用
二.text-相关属性
1.首行缩进,text-indent
取值,数字加px;
数字加em;1em=font-size,一个字节;
2. 文本的对齐方式,text-align
取值,左边left,中间,center,右边right
能让哪些元素居中?
文本 , span ,a,input,img
3.文本的修饰,text-decoration
取值,none,没有效果,去除a标签的默认下划线
underline,下划线
line-through,删除线
文本格式化标签的样式
加粗,font-weight
下划线,text-decoration:underline;
倾斜;font-style:italic;
删除线;text-decoration:line-through;
四.盒子居中,margin: 0 auto;
div,p,h,标签相当于一个盒子
让盒子居中,margin: 0 auto;
五.css的三大特性
1.继承性
1.子代有默认继承父元素样式的效果
2.有哪些样式可以用继承呢?
颜色,color
font-系列标签
text-系列标签
line-height;行高
3.继承性的小应用
去除列表的小圆点
ul{list-style : none;}
4.继承的特殊情况
当子代标签有自己的属性的时候就不能继承父代标签的属性,具有独立性
a标签的颜色不能继承,其实继承下来了,但是被浏览器设置的默认属性覆盖了
h标签font-size不能继承,其实也是继承下来了,只是覆盖了
div的高度不能继承,因为有原来的属性
2.层叠性
当层叠样式相同时,样式会覆盖,写在下面的样式会生效
当层叠样式不同是,样式会叠加,共同作用在标签上
注意点:当优先级相同时才会叠加属性
3.优先级
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意:!important书写在属性值后面,分号前面
!important不能提高继承的优先级,只要是继承优先级都是最低的
权重:(0,0,0,0)从第一个开始依次是,行内样式,id选择器,类选择器,标签选择器
!important,只要它不是继承,天下第一
判断方法:先看第一个标签的数字,哪个大哪个就生效,相同的话就看第二个
权重计算题的步骤:
1.判断选择器是否作用在标签上,如果不能直接选中就是继承
2.接下来就是通过权重计算公式来判断谁会生效
浏览器解析选择器的顺序是从有往左解析