HTML03
1.1 元素展示类型
在 HTML 当中本身定义了很多的元素,这些元素默认在网页上展示的时候会存在自已默认的状态,例如有些元素默认情况下宽高属性不起作用,有些元素默认情况下都独占一行显示。这种现象我们就称之为元素展示类型,为了记忆我们人为的将元素展示类型分为三种: 块元素、行内元素、行内块元素。
- 块元素:当同时存在多个块元素的时候,每个块元素都会独占一行显示,且默认情况下它的宽高属性可以起作用。
- 行内元素:当同时存在多个行内元素的时候,这些元素都会显示在一行,如果一行放不下自动折行。默认情况下它的宽高属性不起作用
- 行内块元素:当同时存多个行内块元素的时候,这些元素会显示在一行,默认情况下它的宽高属性起作用。
- 注:不需要去死记哪些元素是行内,哪些是块,哪些是行内块。
1.2 布局标签补充
-
div 标签,它是 HTML 当中定义好的一个双标签( DIV+CSS )。我们人为的认为它是一个体积最大的标签。
-
span 标签,它也是一个双标签,主要用来放文字,我们人为的认为这体积很小。
-
段落标签里不能包裹标题,因为浏览器不能正常解析。
1.3 元素展示类型转换
在我们进行网页布局过程中往往会遇到一些"特殊的模块",对于这种模块来说我们之前的一些常见标签在使用的时候就会显示 "语义" 有些不对应,所以我们可以使用相应的标签进行强制的类型转换,从而让它可以展示成 设计稿 上的样子。在 CSS 当中有一个 display 属性,可以设置不同的值来完成元素类型的转换。
-
转成块元素: display:block;
-
转成行内块:display:inline-block
-
转成行内元素:display:inline; none
1.4 简单选择器权重
权重:我们就可以理解为是不同类型的 CSS 选择器在对同一个元素进行样式设置的时候,出现的控制能力不同的现象。
对于简单选择器来说 : id 选择器 》 类名选择器 》 标签名选择器
1.5 CSS 特性
-
在权重相同的情况下,同一个元素后写的 CSS 样式会覆盖先写的 CSS 样式。【覆盖性】
-
CSS 的定义存在继承的特点,子元素会继承父元素的一些样式【继承性】
(1) 不是所有的 CSS 属性都可以被继承。
(2) 不是所有类型的元素都会去继承祖先元素的样式( 继承一般发生在块元素的身上)
(3) 继承指的就是子元素可以使用祖先元素的一些样式
- 不同选择器对同一个元素的 CSS 控制能力存在着强弱。【优先级】
1.6 复合选择器
一、为什么需要复合选择器
在实际的网而制做过程中往往会出现很多结构层级嵌套很深的现象, 而这种结构模块又很多,大家使用的标签名称又一样。所以此时我们就可以通过复合选择器,将这些简单选择器进行组合。从而让我们选择元素变得简单。
二、常见的复合选择器:
1.后代选择器:这种选择器就是以某一个元素为起点,将它做为祖先然后不停的向下进行穿透查找,去选择它下面的后代元素。
起点元素 后代元素 .....{ 设置样式 }
注:
01 后代选择器当中的每个部分都可以采用任意的简单选择器代替。
02 不同的部分之间要用空格隔开。
03 ...... 就表示可以不停的向下层查找。
2.并列选择器:就是将多个选择器使用 逗号 进行连接,表示同时选中这些元素,然后设置相同的样式。其中每个部分的选择器都可以由任意类型的选择器构成。
1.7 选择器权重总结
1 简单选择器: id 名 》 class 名 》 element 名
2 复合选择器: 需要在大家明白的就是复合选择器由多个其它类型选择器组合而成,为了方便比较,我们人为的给每个简单选择器都定义了一个数值,分别是: Id(100) class(10)
ele(1),这三个数值我们也称之为权重值,有了它们之后只需要将当前选择器中出现的权重值进行相加求,最终的结果就是该选择器的权重。数值越大的权重越大
3 切记权重比的就是不同选择器对同一个元素的控制力比较( 区别继承的影响 )
1.8 CSS 文件存放位置
CSS 代码可以被我们放在很多的地方,习惯性的有三种写法:内嵌 CSS 、外链 CSS、行内 CSS 。
-
内嵌 CSS 指的就是将 CSS 代码写在 html 网页中。
-
外链 CSS 指的就是就将 CSS 代码写在外部的独立 CSS 文件中。
-
行内 CSS 指的就是将 CSS 代码写在具体的 HTML 标签身上 。
注:
01 依据浏览器渲染页面原理,我们选将 CSS 代码写在 HTML 文件靠前的位置。
02 使用外链 CSS 写法的时候,外部独立的 CSS 文件当中不需要写 style 标签,同时还
需通过 link 标签将某个 CSS 文件引入到具体的 HTML 文件当中。 rel 属性对不要省略
<link href="目录 CSS 文件路径" type="text/css" rel="stylesheet" />
03 对于上述的三种 CSS 文件存放位置来说,行内 CSS 的权重是最高,但是外链与内嵌并不存在谁一定大于谁的现象( 权重 ),它的控制能力完全取决于各自所使用的选择器权重。
04 如果想要直接将某一个样式的权提至最高,我们只需要在该句 CSS 代码的最后设置 !important .
P{ color:pink!important; }
1.9 音频标签
<audio autoplay controls loop>
<source src="格式 1 路径" />
.......
</audio>
注:
01 audio 是一个双标签,用来定义一个声音资源模块。
02 autoplay 用来设置自动播放。
03 controls 调用当前设备的播放控制。
04 loop 设置当前音频循环播放。
05 默认 audio 里的文字不显示,只有在当前浏览器不支持这个标签的时候会显示文字。
1.10 常见的文字样式
-
行高: line-height, 当我们将行高的大小设置成当前元素的高度时,可以实现单行文本在当前元素中垂直方向居中显示的效果。
-
水平对齐方式:text-align: left | center | right ,分别表示设置文字在当前盒子当中水平的对齐。
-
字体大小: font-size ,单位是 px ,一般情况下浏览器都会有一个最小的显示字体。
-
字体粗细: font-weight,可以设置关键字,或者数值( 100-900 ). 关键字有 normal 表示正常,还有 bold 表示加粗。
-
字体名称: font-family ,一般常用的就是 "微软雅黑""黑体"
-
字体颜色: color ,可以设置颜色单词,还可以是十六进制的数字。