HTML+CSS(HTML语义化标签+css样式引入+选择符+css文字属性)

最新推荐文章于 2022-11-25 21:01:44 发布

MrCabal

最新推荐文章于 2022-11-25 21:01:44 发布

阅读量361

点赞数

分类专栏：东软

本文链接：https://blog.csdn.net/qq_40409416/article/details/114356553

版权

东软专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML5扩展

语义化标签

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

不使用<div>标签来布局网页后：

在这里插入图片描述

CSS复习

`CSS样式引入`

内联样式（行内样式）

行内 style=“”

内部样式（嵌入样式）

<head>   写在body中也可
	<style></style>
</head>

外部样式

<link href="css/***.css" rel="stylesheet" type="text/css"/>

优先级：行内样式 > 内部样式、外部样式
内部样式，外部样式的优先级根据书写的先后顺序决定优先级（覆盖原理）
在这里插入图片描述

实例化三属性：宽，高，背景颜色

`选择符`

基础选择符

类型选择符（div{}）
id选择符(#id{})	
class选择符（.class{}）

复合选择符

复合选择器是通过基本选择器进行组合后构成的，，常用的复合选择器有：交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。

通配符 ( * )

一般用于css开头，可以控制所以的标签

*{
	属性1:属性值1;
	属性2:属性值2;
	…
}

交集选择符 ( . )

交集选择器由两个选择器直接构成，其中第一个必须是元素选择器，第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写，不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的ID或者类名。交集选择器选择的元素是三个选择器的样式，即第一个选择器、第二个选择器和交集选择器三个选择器样式的层叠效果。

例： p.one 选择的是：类名为 .one 的段落标签。

元素选择器.类选择器|#ID选择器{
	属性1:属性值1;
	属性2:属性值2;
	…
}

提示：交集选择器由于会增加代码量，会影响性能且不利于后期维护，所以除了不得已使用外，一般不推荐使用。

群组选择符（并集选择器） ( , )
使用 “,” 分隔选择符，实现对多个选择器进行“集体声明” ，从而简化了CSS代码量。

选择器1,
选择器2,
选择器3{
	属性1:属性值1;
	属性2:属性值2;
	…
}

选择器的优先级

css样式的简单权重级别由高到低排列：

	在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
	作为style属性写在元素标签上的内联样式
	id 选择器
	类选择器、伪类选择器、属性选择器
	标签选择器、伪元素选择器
	通配符选择器
	浏览器自定义

复杂场景下计算优先级

复杂场景下将选择器分为四个级别通过各级别的出现次数决定。


四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加 1、0、0、0
若是 ID选择符，则加 0、1、0、0
若是 类选择符/属性选择符/伪类选择符，则分别加 0、0、1、0
若是 元素选择符/伪元素选择符，则分别加 0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的“四位数”，从左到右进行比较，大的优先级更高。 
优先级相同时，采用就近原则，即最后出现的样式。

提升指定样式规则的应用优先权，即!important为开发者提供了一个增加样式权重的方法，让浏览器首选执行这个语句。

CSS 文字属性

color

color属性用来设置字体的颜色，字体颜色设置格式有三种

浏览器预设样色，如red，pink，blue，grenn等 p{color:pink;}
十六进制格式，如#333，#eee,#ff3300等 p{color:#333;}
RGB颜色代码，如红色可以表达为 rgb(255,0,0) 或者 rgb(100%,0%,0%)

font

该属性可以一次性使用多个属性来定义文本字体，是字体的复合属性。具体语法如下：

{font: font-style   font-variant   font-weight   
	   font-size/line-height  font-family;}

font-style

该属性是用来定义字体的风格，即字体的显示样式。具体的语法如下：

{font-style: normal | italic | oblique | inherit;}

其中属性值分别表示默认值、斜体、倾斜、继承。

font-variant

该属性用于设置大写字母的字体显示。具体的语法格式如下：

{font-variant: normal | small-caps | inherit;}

其中的参数值分别表示默认值、显示小型大写字母的字体、继承。

font-weight

该属性用来定义字体的粗细程度，具体的语法如下：

{font-weight: 100-900 | bold | bolder | lighter | normal;}

其中的属性值分别表示数值、粗体、更粗、更细、默认。

font-size

该属性用来设置文字的大小，具体的语法格式如下：

{font-size:数值  | xx-small | x-small | small | medium | large | x-large 
    | xx-large | larger | smaller | lentgth | inherit;}

这些参数代表的意义分别是：像素数值、最小、较小、小、正常、大、较大、最大、相对字体尺寸、相对字体尺寸、百分比、继承。

说明：

1）属性值为数值时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，pt是绝对单位，在dpi是96的情况下，9pt=12px,12pt=16px。
3）单位还可以是em，1em叫一个字节,1em就是一个字的宽度，默认情况下，1em=16px,0.75em=12px;

注意：谷歌浏览器识别最小字体为12px;

font-family

该属性用于指定文字的字体类型，如宋体、黑体、隶书、楷体、Times New Roman等。具体的语法如下：

{font-family:name;}

其中，name是字体的名称。如：{font-family: 宋体;}

text-decoration

文本装饰属性用来让文本有更多的展现形式，如：上划线、下划线、中划线（删除线）等

text-decoration: none;/*取消装饰*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*删除线*/

text-indent

该属性用来设置首行的文本缩进，属性值有三种，一个字符宽度的倍数em、相对于浏览器窗口宽度的百分比%、像素px

text-indent: 2em;

line-height

该属性用来设置行于行之间的距离，属性值有三种单位，像素px、百分比%、相对值em

注意：
1)当单行文本的行高 = 容器高时，可实现单行文本在容器中垂直方向居中对齐
2）当单行文本的行高 < 容器高时，可实现单行文本在容器中垂直方向居中对齐以上任意位置的定位
3）当单行文本的行高 > 容器高时，可实现单行文本在容器中垂直方向居中对齐以下任意位置的定位

text-align

该属性来设置文本的水平对齐方式，属性值有四种，左对齐 left、右对齐 right、居中对齐 center，适配宽度 justify

vertical-align

使用该属性需要设置display：table-cell（按照单元格的样式显示元素）
该属性来设置文本的垂直对齐方式，属性值有三种，上对齐 top、底部对齐 button、居中对齐 middle

letter-spacing 和 word-spacing
字间距和单词间距（英语单词）

MrCabal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS(HTML语义化标签+css样式引入+选择符+css文字属性)

HTML5扩展语义化标签在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。不使用<div>标签来布局网页后：<header>标签CSS复习CSS样式引入内联样式（行内样式）行内 style=“”内部样式（嵌入样式
复制链接

扫一扫