笔记-html03

1.1 元素展示类型

在html当中本身定义了很多的元素, 这些元素默认在网页上展示的时候会存在自己默认的状态, 例如有些元素默认情况下宽高属性不起作用,有些元素默认情况下都独占一行显示. 这种现象称为元素展示类型.

将元素展示类型分为三种: 块元素, 行内元素, 行内块元素

1 块元素: 当同时存在多个块元素的时候,每个块元素都会独占一行显示,且默认情况下他的宽高属性可以起作用.

2 行内元素: 当同时存在多个行内元素的时候,这些元素都会显示在一行,如果一行放不下自动折行. 默认情况下它的宽高属性不起作用.

3 行内块元素: 当同时存多个行内块元素的时候, 这些元素会显示在一行, 默认情况下他的宽高属性起作用.

4 注: 不需要去死记哪些元素是行内,哪些是快, 哪些是行内块

1.2 布局标签补充

1 div标签: 它是html当中定义好的一个双标签(DIV+CSS). 它是一个体积最大的标签.

2 span标签: 它也是一个双标签, 主要用来放文字,认为这体积很小.

3 段落标签里不能包裹标签, 因为浏览器不能正常解析.

1.3 元素展示类型转换

在我们进行网页布局过程中往往会遇到一些"特殊的模块"，对于这种模块来说我们之前的一些常见标签在使用的时候就会显示 “语义” 有些不对应，所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成设计稿上的样子。在 CSS 当中有一个display属性，可以设置不同的值来完成元素类型的转换。

1 转成块元素: display:block;

2 转成行内块: display:inline-block

3 转成行内元素: display:inline

1.4 简单选择器权重

权重: 可以理解为不同类型的CSS选择器在对同一个元素进行样式设置的时候,出现的控制能力不同的现象.

对于简单选择器来说: id 选择器 >类名选择器>标签名选择器

1.5 CSS特性

1 在权重相同的情况下,同一个元素后写的css样式会覆盖先写的css样式[覆盖性]

2 css的定义存在继承的特点. 子元素会继承父元素的一些样式[继承性]

(1) 不是所有的css属性都可以被继承

(2) 不是所有类型的元素都会去继承祖先元素的样式(继承一般发生在块元素上)

(3) 继承指的就是子元素可以使用祖先元素的一些样式

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

1 内嵌CSS: 就是将CSS代码写在html网页中.

2 外链CSS:指的是将CSS代码写在外部的独立CSS文件中

3 行内CSS: 将CSS代码写在具体的html标签身上

注:

01 依据浏览器渲染页面原理, 我们将选CSS代码写在html文件靠前的位置

02 使用外链CSS写法时, 外部独立的CSS文件当中不需要写style标签, 同时还需通过link标签将某个CSS文件引入到具体的html的html文件中. rel 属性对不要省略

<link href="目录CSS文件路径" type="text/css" rel="stysheet"/> 

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 常见的文字样式

1 行高 line-height: 将行高大小设置成当前元素的高度时,可以实现单行文本在当前元素中垂直方向居中显示的效果

2 水平对齐方式 text-align:left |center| right , 分别表示文字在当前盒子中是从左对齐还是居中对齐还是右对齐.

3 字体大小 font-size 单位是px ,一般情况下浏览器都会有一个最小的显示字体

4 字体粗细： font-weight,可以设置关键字，或者数值( 100-900 ). 关键字有 normal 表示正常，还有 bold 表示加粗。

5 字体名称： font-family ，一般常用的就是 “微软雅黑”“黑体”

6 字体颜色： color ，可以设置颜色单词，还可以是十六进制的数字。