【学习笔记00】CSS3:显示模式+背景+三大特征
1. CSS的元素显示模式
1.1 什么是元素显示模式?
元素(标签)以何种形式显示,不同元素(标签)有不同的显示模式,比如<div>自己独占一行,比如一行可以放多个<span>
1.1.1 块元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。块元素也叫块标签。
·特点1:独占一行
·特点2:高度(height)、宽度(width)、外边距(margin)以及内边距(padding)都可控制
·特点3:若未设定宽度(width),则默认是容器(即父级元素宽度)的100%(此处常与CSS继承性混淆)
·特点4:这是一个容器级盒子,里面可放 行内元素 或者 块级元素
注意:
1. 文字类的标签内不能放块级元素,例如<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
2. 同理,<h1>~<h6>、<dt>等均为文字类块级标签,里面也不能放其他块级元素
1.1.2 行内元素(inline-level)
行内元素也称内联元素,常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。行内元素也叫行内标签。
·特点1:相邻行内元素在一行上,一行可以显示多个
·特点2:高(height)、宽度(width)直接设定无效
·特点3:默认宽度是标签内容自身的宽度(因此增加内容能自动撑宽盒子)
·特点4:行内元素只能容纳文本或者其他行内元素(即不能放块级元素)
注意:
·链接标签里不能再放链接
·特殊情况 链接<a>里面可以放块级元素,但是<a>转换为块级元素最安全。因为行内元素<a>经过转换后变成块元素,从而具备块元素的特点,因此才可容纳 行内元素 或者 块级元素
1.1.3 行内块元素(inline-block)
在行内元素中有几个特殊的标签---<img />、<input />、<td>,他们同时具有块元素和行内元素的特点。
·特点1:相邻行内元素(行内块)在一行上,但之间有空白缝隙。一行可以显示多个(行内元素特点)
·特点2:未设定宽度时,默认宽度为自身内容的宽度(行内元素特点)
·特点3:高度,宽度、外边距以及内边距都可以控制(块级元素特点)
2. CSS的背景
2.1 背景颜色
选择器 { background-color:颜色值; }
2.2 背景图片
background-image属性描述了元素的背景图像。
实际开发常见于logo 或 一些装饰性的小图片 或 超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)。
background-image不同于在页面中直接插入图片<img src="#" alt="#">,它是在CSS中通过选择器选中标签,然后插入图片,以作为背景。
语法:
background-image:属性值
属性值:
none 无背景图 丨 url 使用绝对或相对地址指定背景图像2.2 背景图片
2.3 背景平铺
在页面上对背景图像进行平铺,使用background-repeat属性,背景默认平铺。
页面元素既可以添加背景图像,也可添加背景颜色,区别是背景颜色在最底层
2.4 背景图片位置
如果在页面中直接插入图片<img src="#" alt="#">,调整图片的位置会牵扯到其他盒子,而采用背景图片时能十分方便的更改图片的位置。
利用background-position属性能改变图片在背景中的位置(在盒子中的位置),x表示水平坐标,y表示垂直坐标,xy可以使用方位名词 or 精确单位。
注意:如果实现英雄联盟的大背景图片,则必须给<body>设定background-position,因为该背景图片是在屏幕最下层的。
语法:
background-position:x y ;
参数为方位名词时:
(x:left、center、right ;水平方向:靠左、靠中、靠右对齐)
(y:top、center、bottom;垂直方向:靠上、靠中、靠下对齐)
·如果指定的两个值都是方位名词,则两个值前后顺序无关,例如left top 和top left效果一致(即图片在该盒子里,有2种实际效果一致的对齐方式。第1种,左上;第2种,上左)。
·如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐(center)
参数是精确单位(例如px、%)时:
·如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标(严格的顺序)。例如“background-position: 30px 50px”中,30px表示图片在x轴的刻度坐标为30px,50px表示图片在y轴的刻度坐标为50px。页面的坐标系是特殊的。
·如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
参数是混合单位时:
·如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标。
·混合单位经常配合背景图片使用,例如王者荣耀首页,大背景图片距离页面顶部有一定距离(background-position: center 40px),而这个距离常用来放导航栏
2.5 背景图片固定
background-attachment属性设置背景图像是否固定 或 随着页面的其余部分滚动。
利用该属性最常用的是制作视差滚动的效果。
语法:
background-attachment: scroll 丨 fixed ;
属性值:scroll 背景图片随对象内容滚动 丨 fixed 背景图像固定
2.6 背景复合写法(实际开发常用)
为了简化背景属性的代码,以上属性可以合并简写在同一个background中。
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:background-color丨background-image丨background-repeat丨background-attachment丨background-position
2.7 背景颜色半透明(CSS3新增)
CSS3提供了背景颜色半透明的效果
rgba表示颜色混合,三个0混合正好是黑色,0.3表示黑色的透明度,1为纯黑色。
采用rgba的优点是不需要单独设定"background-color",颜色和透明效果一步到位。
语法:
background: rgba(0, 0, 0, 0.3) ;
属性值:
·最后一个参数是alpha透明度,取值为0~1
·习惯省略0.3的0,只写.3
·背景半透明为盒子的背景半透明,盒子中的内容不受影响
3.CSS的三大特征
3.1 层叠性
该特征对所有CSS样式均有效!
啥叫层叠性?同一内容(HTML标签),若多个相同选择器同时选中该内容,且都指定了相同属性的CSS样式(即属性相同,属性值不同),此时出现到底该执行哪个样式的冲突,由CSS层叠性的就近原则可知,距离内容近的样式就会覆盖(层叠)另一个距离内容远的样式。
层叠性原则:
·相同选择器(例如标签选择器,注意,同一元素可有标签、类等多个不同选择器)
·样式冲突,遵循的原则是就近原则。哪个样式离内容近,执行哪个样式。
·样式不冲突,则不会覆盖 。例如上个div样式设定为red,下面同一个div又设定为pink,此时样式冲突。
·层叠性不限于文本的层叠,所有CSS样式都可以发生层叠。
3.2 继承性
该特征只对文本属性有效!
子标签会继承父标签的某些样式(并非所有样式),比如文本颜色和字号(text-,font-,line-等开头与文本相关的元素均能继承,以及color属性)。
恰当利用继承性,可以简化代码降低CSS复杂性。
继承性具有一定的传递性,但仅限父子-父子-父子...的嵌套结构中。例如上图,若只设定了<body>的字体颜色和大小,但未设定<li>的字体颜色和大小,则<li>根据继承性原理,自动向上一级寻找样式,结果<ul>没有,则再向上一步寻找,最后找到<body>里有字体颜色和大小。
3.2.1 特别情况:行高的继承
如上图,<body>样式下“font:12px/24px”的意思是,字号(font-size)是12px,行高(line-height)是24px。根据继承性,<div>和<p>将继承<body>的文字类样式。
在实际开发中会有这种写法: ,这是啥意思?按照上例,“/”前是字号,后是行高,而此处“/”后的1.5没有单位px,这表示当前的行高(line-height)是“1.5 × 当前的字号”。
3.2.2 层叠性+继承性+行高特殊写法
如上图,<body>样式设定了字体相关,<div>样式设定了字号大小,根据继承性,<div>的父元素是<body>,则<div>的内容将继承<body>样式,即字体颜色为pink。根据层叠性,<div>的内容执行<div>样式的20px字号。根据“/”的含义,<div>的内容的行高(line-height)是“1.5 × 当前的字号”,等于1.5 × 20px。
7.3 优先级
当一个元素对应了多个不同选择器(例如<div class="nav">对应“div”和“.nav”两个选择器),就会产生优先级
·选择器一模一样,则执行层叠性
·选择器不同,则根据选择器权重执行
选择器 | 选择器权重 |
继承 或 * | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器、伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | 无穷大 |
注意:
1.元素选择器也叫标签选择器
2.权重是有4组数字组成,但不能进位
3.类选择器永远大于元素选择器,ID选择器永远大于类选择器,以此类推
4.等级判断从左向右,如果某一位数值相同,则判断下一位数值
5.简单记忆:通配符和继承的权重为0,标签选择器为1,类和伪类选择器伪10,id选择器为100,行内样式表为1000,!important为无穷大(使用方式是直接放在属性值后面-"color:pink!important")
6.继承样式所对应的权重为0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。继承一般发生在文本类样式上(text-、line-、font-、color等),所以一般能继承的样式都和文本相关
6.1 关于继承样式所对应的权重。一定要看该元素是否直接被选中,如果多个选择器均有选中该元素,则权重逐层叠加,叠加值大者,执行大者的属性;如果该元素没有选择器被选中,则权重为0,因为继承的权重为0
例如上图,<p>在页面中显示什么颜色?先看结构,<p>为子元素,<div>为父元素,子元素将继承父元素的文本类属性;再看CSS选择器情况,两个选择器不同,进行权重大小比较,“#father”ID选择权重"0,1,0,0",“p { }”元素(标签)选择器权重"0,0,0,1",但是<p>继承<div>的颜色属性,但其权重为0。故最后显示pink色
<a>的特例:如上图,<a>没有被直接选中,同时CSS中只有一个样式,不构成冲突,故应该不遵守优先级。所以根据继承性(文字类特性)<a>应该继承<body>设定的红色。但实际情况是<a>样式为蓝色且有下划线,因为浏览器为<a>链接默认制定了一个样式,蓝色有下划线。
7.3.1 权重的叠加(仅限复合选择器)
如果是复合选择器,则会有权重叠加,需要计算权重。不是复合选择器,则不存在权重叠加问题。权重虽然会叠加,但永远不会进位。复合选择器权重叠加时,继承权重为0失效,按照单个选择器的权重依次累加。
常用的复合选择器是基础选择器组合而成的
包括:后代选择器、子选择器、并集选择器、伪类选择器、伪元素选择器、属性选择器等