HTML5知识4

最新推荐文章于 2024-08-15 15:11:28 发布

LHS301248

最新推荐文章于 2024-08-15 15:11:28 发布

阅读量88

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/LHS301248/article/details/129004956

版权

HTML5知识点4

1.css的简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.1css的优势

1.丰富的样式定义
2.易于使用和修改
3.多页面应用
4.层叠
5.页面压缩

1.2css的发展史

1994 年，哈坤·利提出了 CSS 的最初建议，并决定与正在设计 Argo 浏览器的伯特·波斯（Bert Bos）合作，共同开发 CSS。
1994 年底，哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议，之后又在 1995 年的 WWW 网络会议上再次提出了 CSS，在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器，哈坤·利也展示了支持 CSS 的 Arena 浏览器。
发展至今，CSS 总共经历了 4 个版本的迭代：

CSS1.0
1996 年 12 月 W3C 发布了 CSS 的第一个版本——CSS1.0（https://www.w3.org/TR/CSS1/）。
CSS2.0
1998 年 5 月，CSS2.0 版本正式发布（https://www.w3.org/TR/CSS2/）。
CSS2.1
2004 年 2 月，CSS2.1 正式发布。该版本在 CSS2.0 的基础上略微做了改动，删除了许多不被浏览器支持的属性。
CSS3
早在 2001 年，W3C 就着手开始准备开发 CSS 的第三个版本，到目前为止该版本还没有最终定稿。虽然完整的 CSS3 标准还没有最终发布，但各主流浏览器已经开始支持其中的绝大部分特性。

2.css.语法结构

行内样式

语法:
<body>
	<p style=""font-size:20px color:red>行内样式</p>

效果如果下：
在这里插入图片描述

内部样式表

语法：
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{font-size: 16;color: blue;}
</style>
<body>
    <h1>内部样式表</h1>
</body>
</html>

效果如下：
在这里插入图片描述

外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="laisd.css">
<body>
    <h1>外部样式表</h1>
    <li>爱上对方过后就哭了</li>
</body>
</html>

在这里插入图片描述

导入外部样式表

语法：
<style>
	@imput url("style.css");
</style>

外部样式表和导入外部样式表的区别

导入样式表与外部样式表的区别.：导入样式表和外部样式表都是把样式表中的标签对中的样式规则定义语句，放置在一个单独的外部文件中，扩展名为.css, 然后将独立的css样式文件引用到网页中来。. 但又有以下几个方面的不同：. href：指定文件地址； href=linked.css：这里链接的样式表文件是linked.css. type：定义文档的类型 ; type=“text/css”：表示文本类型的样式. 使用link链接的css，客户端浏览网页时，先将外部的css文件加载到网页中（下载到html里面），是一种并行加载方式，然后再编译显示，显示出来的网页和我们预期的效果一样，即使一个网页链接多个css，网速再慢也是一样的效果。.

样式优先级

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

3.CSS选择器

1.标签选择器

语法:
	<style>
		p{color:red;}
	</style>

2.类选择器

语法:
	<style>
	.changeColor{color:blue;}
	</style>

3.ID选择器

语法:
	<style>
	# one{属性1：属性值1,；属性2,:属性值2；属性值3}
	# two{属性1：属性值1,；属性2,:属性值2；属性值3}
	</style>

3种基础选择器的优先级

ID选择器>类选择器>标签选择器

4.css高级选择器

1.层次选择器包括(1)后代选择器(2)子选择器(3)相邻同胞选择器(4)通用兄弟选择器
2结构伪类选择器

在这里插入图片描述

3.属性选择器

LHS301248

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识4

HTMl5知识点4
复制链接

扫一扫