CSS3的基础_通过建立样式表,可以统一控制html中各标签的显示属性-CSDN博客

本文链接：https://blog.csdn.net/qq_61748807/article/details/122724645

CSS基础

css概述

CSS(Cascading Stlye Sheet)全称为层叠样式表，通常又称为风格样式表(Stlye Sheet)，他是用来经行网页设计的

css在网页中的应用

通过设立样式表，可以统一的控制HTML中的各种标签的显示属性，比如设置字体的大小，颜色，排版，文本的居中，列表的形状

css的发展史

1993年，当超文本标记语言受到广泛的关注之后，迅速壮大，成为网页开发的热门语言。可是通过前面的章节学习可以知道，HTML开发出来的网页，并不美观，1994年，哈坤利为HTML语言提出了CSS样式表的构想，1995年，他再一次展开这个建议。W3C对CSS的发展很感兴趣，为此专门组织过讨论会

1996年12月推出了CSS规范的第一版，即CSS1.0版本
1998年5月W3C发布了CSS第二版，即CSS2.0版本，CSS2.0版本规范是基于CSS1.0设计的，其中包括了CSS1.0的所有功能，还融入了DIV+CSS的概念，提出了HTML结构与CSS样式表分离，以及一些其他的属性
2004年W3C升级了CSS2.0版本，变成了CSS2.1版本，融入了很多高级的用法，如浮动，定位等属性
2010年W3C推出了CSS3版本，包括2.1版本下的所有功能，是目前最新的版本

CSS3的使用率在持续增加，学习CSS3已然成为了一种趋势

CSS的优势

内容与表现分离，即使用前面学习的HTML语言制作网页，使用CSS设置网页样式，风格，并且CSS样式单独存放在一个文件中。然后HTML文件去引用CSS文件就可以了。网页的内容（HTML5）与表现就可以分开了，以便于后期CSS的维护
表现的统一。CSS可以使网页的表现统一，并且容易修改。把CSS写在单独的页面中，可以对多个网页应用其样式，使网站中的所有页面表现风格统一，并且需要修改页面表现形式时，只需要修改CSS样式，所有的页面样式即可同时修改
丰富的样式，使的页面布局更加灵活
减少网页代码量，提高网页的浏览速度，节省网络宽带。在网页中只写HTML代码，在CSS样式表中编写样式可以减少页面代码量，并且页面代码清晰。同时一个合理的层叠样式表，还能有效地节省
运用独立页面的css，还有利于被搜索引擎收录

CSS3的基本语法

CSS3的基本语法结构

CSS规则由两部分构成，`即选择器和声明```
声明必须放在大括号中，并且声明可以是一条或多条
每条声明由一个属性和值组成，属性和值用冒号分开，每一条语句用英文分号结尾

如：
```
h1{
    font-size:12px;
    color:#F000;
}
```

认识style标签

在HTML文件中定义style标签用来引入CSS样式

style标签一般放在head标签当中，它定义了HTML文件样式如何呈现在浏览器中

<head>
    /*省略了上面部分*
    <stlye>
    /*css样式定义在这里*/
        
    </stlye>
</head>

HTML中引入CSS样式

在HTML的head标签中的style标签引用CSS代码并不是唯一的一种方式，引用CSS代码的方法一共有三种，分别是行内样式，内部样式表和外部样式表

行内样式

行内样式就是在html标签中，直接引用style属性去设置CSS样式，style属性提供了一种改变所有html元素的样式的通用方法，style属性使用方法如下

<h1 style = "color:red;font-size:12px">
    CSS的style属性的用法
</h1>

这种style属性设置CSS的样式方式仅对当前的HTML标签起作用，并且是写在HTML标签中的，这种方式不能使内容与表现分离，本质上没有出现CSS的优势，因此不推荐使用

内部样式表

正如前面讲到的所有实例一样，把CSS代码写在head的style标签中，与HTML内容位于同一个HTML文件中，这就是内部样式表

这种方式便于在页面中修改样式，但是不利于在多个页面中共享重复代码，对内容与样式的分离也不够彻底，实际开发时会在页面开发结束后，将这些样式代码保存到单独的CSS文件中，将样式和内容彻底分开，即下面介绍的外部样式表

外部样式表

外部样式表是把CSS代码单独的保存在一个CSS文件当中，文件扩展名为.css，在页面中引用外部样式表即可。html文件引用外部样式表有两种方式，分别是连接式和导入式

链接外部样式表

链接外部样式表就是在HTML5页面中使用link标签链接外部样式表，link标签要在head标签当中语法如下所示
```
<head>
    <link herf="style.css" rel="stylesheet" type="text/css">
</head>
```
其中，rel = "stylesheets"是指在页面中使用这个外部样式表；type = "text/css"是指文件的类型是样式表文本；href = "style/css"是文件的所在位置

外部样式表实现了样式和结构的彻底分离，一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都会随之改变。这在制作大量相同样式页面的网站时，非常有用，不仅减少重复的工作量，利于保持网站的统一样式和网站维护，同时减少了用户在浏览网页是重复下载代码，提高了网站的运行速度
1. 把页面中的CSS代码单独保存在文件名为common.css的样式表文件中，文件代码如下
```
h1{
    color:#ffff
    font-size:14px
}
```
2. 在HTML文件中使用link标签连接css文件
```
<head>
    <link herf="css/common.css" rel="stylesheet" type="text/css">
</head>
```
导入式外部样式表

导入外部样式表就是在HTML网页中使用@import导入外部样式表。导入外部样式表，导入样式表的语句必须放在style标签中，而style标签必须放到head标签当中语法如下
```
@import ulr("css/common.css")
```
其中@import表示导入文件，前面必须要有一个@符号，ulr("common.css")表示样式表文件位置
链接式与导入式的区别
1. link标签属于XHTML的范畴，而@import式css2.1中的特性
2. 使用link链接的css是客户端浏览网页时先将外部CSS文件加载到网页中，再进行网页编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也是一样的效果
3. 使用@import导入的CSS文件，客户端在浏览网页时先将HTML结构呈现出来，再把外部CSS文件加载到网络当中去，当然最终效果与link标签呈现的内容相同，只是网速较慢的时候会先呈现一部分HTML的效果，再显示CSS，没有达到CSS效果的统一，这就是为什么大家都喜欢链接外部样式表

样式优先级

样式优先级为：“就近原则”

CSS选择器

选择器式CSS中的重要概念，所有HTML的标签样式，都是通过不同的CSS选择器经行控制的，用户只需要通过选择器，就可以对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种样式效果，上面我们学过的选择器，如P，h2等，有时并不能完全准确的选择我们需要改变的元素，接下来我们会学习其他更加准确的选择器

CSS3的基本选择器

在CSS3中，有三种最基本的选择器，分别是标签选择器，类选择器，ID选择器

标签选择器

一个HTML网页由很多的标签组成，CSS标签选择器就是用来声明这些标签的，每种HTML标签的名称都可以作为相应的标签选择器名称。当在CSS使用标签选择器，当前HTML网页该标签都会受到影响
类选择器

类选择器是在HTML网页中的标签属性里添加一个class属性，一个网页中可以出现相同的class属性值，可以通过类名来更改HTML样式，相同的class属性都会收到影响

html示例
```
<h1 class="a">
    类选择器测试
</h1>
<p class="a">
    类选择器测试
</p>
```
CSS示例
```
a{
    color:#123
}
```
类a都会受到影响
ID选择器

ID选择器与类选择器的使用方法基本相同，但是ID在网页中有唯一性

CSS3的高级选择器

选择器是CSS中一个重要的内容，使用太可以大量地提高开发人员书写或修改样式表时的开发效率

高级选择器分为层次选择器，结构伪类选择器，属性选择器

层次选择器

层次选择器是通过HTML文档对象模型，元素间的层次来选择元素的，其层次关系包括，后代，父子，相邻兄弟和通用兄弟几种关系

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

伪类结构选择器

伪类可以将一段并不存在的HTML当作独立元素来处理定位，或者是找到无法使用其他简单选择器就能定位到切实存在的元素上，这种选择器可以根据元素在文档树中的某些特性（如相对位置）来定位到他们

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，n可以是，1，2，3，关键字even，old
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

属性选择器

在HTML中，可以给元素设置各种各样的属性，如id,，class等，通过各种各样的属性可以选择到元素并为其设置样式

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素，并且他的属性值为val(区分大小写)
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了val