HTML5第4章总结

AZY 言

于 2023-02-14 20:39:12 发布

阅读量101

点赞数

文章标签： html5 css css3

本文链接：https://blog.csdn.net/m0_73693838/article/details/129020380

版权

初识CSS3

CSS发展历

194年，哈坤·提出了CSS的最初建议。当时伯特·波斯正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。CSS发展至今出现了4个版本，具体介绍如下。

1996年12月,W3C发布了第一个有关样式的标准,即CSS1.0版本。在这个版本中，包含了字体、颜色、背景、文本等相关属性。

1998年5月，CSS2.0正式推出。CSS2.0版本规范是基于CSS1.0设计的，其包含了CSS1.0的所有功能，还融入了DIV+CSS的概念，提出了HTML结构与CSS样式的分离，以及其他属性。

2004年2月，W3C升级了CSS2.0，变成CSS2.1版本，其新增了很多高级用法，如浮动、定位等属性，还删除了许多不被浏览器支持的属性

2010年，W3C退出了CSS3.0版本，它包括了CSS2.1版本的所有功能，还增加了很多新特征，如圆角，盒子阴影，2D/3D转换、过渡、动漫等属性。

CSS的3种方式

行内样式直接写在标签上

<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>

内部标签单独写在页面中标签中

<head>
		<meta charset="UTF-8">
		<title>内部样式表</title>
		<style>
			选择器｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
		</style>
	</head>

外部标签另外写在.CSS后缀的文件里

<head>
		<meta charset="UTF-8">
		<title>链接外部样式表</title>
		<link rel="stylesheet"href="style.css"type="text/css">
	</head>

<head>
		<meta charset="UTF-8">
		<title>导入外部样式表</title>
		<style>
			@import url ("style.css")
		</style>
	</head>

样式优先级

样式优先级还遵循"就近原则",即当内部样式表、链接外部样式表和导入外部样式表和导入外部样式表在同一个文件头部，谁离相应的代码近，谁的优先级就高。

CSS3选择器

CSS3基础选择器
CSS3基础现择其包含标签选择器，类选择器和ID选择器

1.标签选择器
一个完整的HTML5页面是由很多不同的标签组成的，而标签选择器则决定标签应采用的CSS样式，基本语法如下：
标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
在上述语法中，所有的HTML5标签都可以作为标签选择器，如<body>,<h1>,,<img/>,<a>等。如果一个页面中存在多个标签，当选择器给其添加样式时，所有的标签都会被添加样式。

2.类选择器
在标签选择器中，标签选择器一旦声明，那么页面中所有的该标签都会发生相应的变化。例如声明了标签的字体为红色时，页面中所有的标签的字体均为红色。

3.ID选择器
在CSS中，ID选择器使用“#”进行标识，后面紧跟id名，基本语法如下：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

高级选择器

CSS3高级选择器包含层次选择器，结构伪类选择器和属性选择器
1.增次选择器包含后代选择器，子选择器，相邻同胞选择器和通用兄弟选择器等。
（1）后代选择器
后代选择器被称为包含选择器，如id为a，b，c的三个元素，后代选择器可以写成#a#b#c{}的形式。
只要对祖先元素的选择在后代元素之前，中间以空格分开即可。
（2）子选择器
子选择器与后代选择器容易混淆，注意子选择器仅指它的直接后代，后代选择器通过空格进行选择，而子选择器通过“>”标识符进行选择。
（3）相邻同胞选择器
相邻同胞选择器使用“+”标识符进行选择。
（4）通用兄弟选择器
通用选择器使用“~”进行选择。

.结构伪类选择器

2. last-child选择器
3. nth-child(value)选择器
 4. nth-last-child(value)选择器
 5. only-child选择器
 6. first-of-type选择器
 7. last-of-type选择器
8. nth-of-type(value)选择器
9. nth-last-of-type(value)选择器

3.属性选择器

属性选择器可以根据元素的属性及属性值来选择元素的，CSS3中新增了以下5个常用的选择器：
E[att] 选择具有 att属性的E元素
E[att=“val”] 选择具有att属性、且属性值等于val的E元素
E[att^=“val”] 匹配具有val属性、且值以val开头的E元素
E[att $= “ v a l ”] 匹配具有 v a l 属性、且值以 v a l 结尾的 E 元素 E [a tt$ =“val”] 匹配具有val属性、且值以val含有的E元素