HTML5中初识CSS3重点总结

最新推荐文章于 2022-10-19 16:54:01 发布

妖精小狗

最新推荐文章于 2022-10-19 16:54:01 发布

阅读量1.7k

点赞数 6

分类专栏： HTML5及JavaScript中前端与后端重点知识汇总总结文章标签： Java 编程 HTML5 CSS3

本文链接：https://blog.csdn.net/baidu_29343517/article/details/81915655

版权

HTML5及JavaScript中前端与后端重点知识汇总总结专栏收录该内容

17 篇文章 4 订阅

订阅专栏

什么是CSS？

CSS——层叠（级联）样式表（Cascading Style Sheet）：表现HTML或XHTML文件样式的计算机语言【包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定】

CSS的优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少网页的代码量；增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS ，有利于网页被搜索引擎收录

CSS基本语法结构：

一、选择器

选择器 {

属性：值;

…… }

谁选择用这个样式

大括号“{}”和分号“;”必须写！

font-size：字体大小

color：字体颜色

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

二、style标签

h1 {

font-size:12px;

color:#F00;

}

</style>

三、HTML中引入CSS样式

1. 行内样式：【特定的某一个标签】

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

弊端：

看起来不明显
表象和样式揉在一起了

2. 内部样式表：

CSS代码写在<head>的<style>标签中

<style>

h1{color: green; }

</style>

样式的作用范围只是本页面

优点：方便在同页面中修改样式

缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

3. 外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

链接式
导入式

先创建一个外部的css文件：*.css

然后把样式写在这个文件中

谁想用这个样式，谁就引入这个css文件即可

1. 链接式

2. 导入外部样式表

<head>

……

</style>

</head>

链接式与导入式的区别：【推荐使用link】

<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
综上所述推荐使用<link/>标签

4. CSS样式优先级

行内样式 > 内部样式表 > 外部样式表
就近原则先是行内，再是内部再外部

CSS3基本选择器：

1. 标签选择器

选择器写法和标签是一致的。所有的这些标签会使用统一的样式

如：<h1>…<h6>、<p>、<img>

2. 类选择器

<标签名 class= "类名称">标签内容</标签名>

.red【声明的时候要有点】{

color：#ff0000;

}

<p></p>

3. ID选择器

#green【声明的时候要有点】{

color：#00ff00;

}

<p></p>

4. 小结

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

网页中的元素id必须唯一，Id只能使网页中的一个元素使用这个样式

5. 基本选择器的优先级

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

标签选择器是否也遵循“就近原则”？

不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS的高级选择器：

1. 层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

①后代选择器

body p{ background: red; }

图中所有p都变红

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

②子选择器

body>p{ background: pink; }

图中所有只有p1、p2、p3变粉

③相邻兄弟选择器

.active+p { background: green; }

图中所有只有p2变绿

④通用兄弟选择器

.active～p{ background: yellow; }

图中所有只有p2、p3变黄

2. 结构伪类选择器

<html>

<title>使用CSS3结构伪类选择器</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd主要用在隔行变色
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

例如：

p:first-child{ background: red;} 【找父集里面第一个子元素的p元素】

第一个p标签变成红色

ul（或者写class名）li:first-child{ background: red;}

第一个li标签变成红色

ul（或者写class名）li:last-child{ background: red;}

最后一个li标签变成红色

ul（或者写class名）li:nth-child(2){ background: red;}

第二个li标签变成红色

p: first-of-type{ background: blue;} 【找父集里面第一个类型是p子元素】

第一个p标签变成蓝色

注：如果body里加上<h2>结构伪类选择器</h2> 此时p:first-child{ background: red;}就会不管用了，因为第一个元素不是p元素。

ul li:first-child{ background: red;}

ul li:last-child{ background: green;}

p:nth-child(1){ background: yellow;}

p:nth-of-type(2){ background: blue;}

运行结果：

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点：

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

3. 属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配