2024年最新CSS入门和CSS选择器

最新推荐文章于 2024-06-13 21:20:19 发布

洋240

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量810

点赞数 18

分类专栏：前端文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/2402_84051608/article/details/137742716

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第三章CSS入门

3.1CSS概述

层叠样式表也是一种标记语言（Cascading /kæˈskeɪd/ Style Sheets）的简称，有时我们也会称之为CSS样式表或级联样式表。

3.1.1认识CSS

如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，用CSS控制页面布局、文本或图片的显示样式。通过更改CSS样式代码，可以轻松控制网页的样式，而不用修改网页的结构。而且通过浏览器私有前缀，还可以针对不同的浏览器设置不同的CSS样式。

3.1.2CSS的发展历史

CSS1。1996年12月W3C发布了第一个有关样式的标准CSS1。这个版本包含颜色属性、文字属性等CSS样式属性。

CSS2。1998年5月，CSS2正式推出，这个版本开始使用样式表结构。

CSS2.1。 2004年2月，CS S2.1正式推出，它在CSS2的基础上删除了许多浏览器不支持的属性。

CSS3。最早在2001年，W3C就着手开发CSS3第3版规范，也就是CSS3。CSS3是目前CSS的最新版本，在CSS 2.1的基础上增加了很多强大的新功能，例如过渡，变形，动画等效果。使用CSS3不仅可以设计炫酷、美观的网页，而且可以提高网页性能。

3.2CSS基础

3.2.1CSS样式规则

选择器{属性:属性值；属性:属性值；}//CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

CSS样式中的选择器严格区分大小写，而声明不区分大小写，因此选择器和声明一般采用小写。

3.2.2引入CSS样式表

行内式

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

虽然使用行内式CSS代码能够设置样式，但行内式CSS代码在HTML中，没有做到结构与样式分离，所以很少使用这种方式。

内嵌式

内嵌式内嵌式是指将CSS代码集中写在HTML文件的头部标签<head>中，并且用style标签定义。

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

</style>

链入式

链入式也叫外链式是指将所有的样式代码放在一个或多个以.css为拓展名的外部样式表文件中。通过<link />标签将外部样式文件链接到HTML文件中。

<head>

<head>

在上述数语法格式中，<link />标签要放在头部标签head中，并且必须指定link标签的三个属性，其具体介绍如下。

href:用以定义链接的外部样式表文件的路径文件路径,可以是相对路径，也可以是绝对路径。

type:用于定义链接的文件的类型,这里需要将其指定为”text/css”表示链接的外部文件为css样式表。在css3中type属性可以省略。

rel:用于定义当前文件与被链接文件之间的关系，在这里需要将其指定为”stylesheet”,表示被链接的文件是一个样式表文件。

在实际的网页制作中链入式CSS样式是使用频率最高且最实用的引入方式。通过它可将HTML代码与CSS代码分离为两个或多个文件，实现结构与样式的完全分离，使网页的前期制作和后期维护都十分方便。

导入式。

导入式和链入式相同是指HTML头部应用<style>标签，并在style标签内使用@import语句导入外部样式表文件。

@import url(css文件路径);或@import” css文件路径”;

虽然导入式链入式css基本功能相同，但是大多网页采用链路式：css样式表和<link />标签同时被加载。

3.2.3CSS基础选择（由单个选择器组成）

（一）

标签选择器。

标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

优点：能快速为页面中同类型的标签统一设置样式。缺点：不能设计差异化样式只能选择全部的当前标签。

类选择器。

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

样式点定义、结构类（class）调用、一个或多个、开发最常用。①选择器使用“.”进行标识后面紧跟类名(自定义使用多个类名中间必须用空格分开)。②可以理解为,为这个标签起了个名字来表示。③长名称或词组可以使用横线来为选择器命名。④不要使用纯数字中文等命名尽量使用英文字母来表示。⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。⑥变量名称应该使用小写字母。⑦如果变量名称有多个单词，请使用连字符(-)分隔它们。⑧变量名称应该描述它们在样式表中的作用，而不是它们的值。这意味着您应该使用名称，如“主色调”、“背景颜色”等。⑨避免使用数字或特殊字符（例如$、@、#等）作为变量名称的开头。⑩变量名称应该与它们控制的元素或组件相关联。这有助于确保每个变量名称都具有其特定的目的，而不是混淆或重叠。

id选择器。

#id{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }//id:以字母、下划线、-、开头，无空格严格区分大小写

样式#定义，结构id调用，只能调用一次，别人切勿使用。 id选择器和类选择器最大的不同在于使用次数上。类选择器在修改样式中用的最多,id选择器一般用于页面唯一性元素上,经常和Java script搭配使用。

通配符选择器。

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }//它是所有选择其中作用范围最广的选择器，且能用于匹配页面中所有的标签。但在实际开发中不建议使用通配符选择器定义CSS样式，会降低代码的执行效率。

交集选择器。（即……又……）

交集选择器也被称为标签指定式选择器，可用于为某些标签单独指定样式是一种复合选择器(复合选择器有两个或两个以上的选择器构成)。交集选择有两个选择器构成，其中一个为标签选择器，第二个为类选择器或id选择器（常用标签名.类名）。交集选择器两个选择器之间不能有空格。

并集选择器。（两条件满足一个就成力，集体声明缩小样式表）

使用并集选择器可以为多个标签统一设置相同的样式，从而避免代码的冗余并集选择器也是一种复合选择器，是由多个选择器通过英文“,”连接而成。任何形式的选择器(包括标签选择器,类选择器,交集选择器和id选择器)都可以作为并集选择器的一部分。如果不同标签包含相同的样式，则可以使用并集选择器对这些相同的样式进行统一设置。

后代选择器。

后代选择器可以用来控制内部嵌套标签的样式。在后代选择器中，外层标签写在前面内层标签写在后面。外层标签和内层标签用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

注意：特殊情况p标签里面不能嵌套p标签本身、h1到h6标签、ul标签。

（二）关系选择器。（关系选择器可以更精确地控制标签样式）

1.子元素选择器。

子元素选择器主要用来选择父标签的子标签，由符号“>”连接标签名称。如，要选择<h1>标签中的子标签<strong>,可以将子元素选择器写为：h1>strong。

2.兄弟选择器。

兄弟选择器可以用于选择位于同一个父标签中的指定标签之后的具有并列关系的只标签。在CSS三中，兄弟选择器分为临近兄弟选择器和普通兄弟选择器，两种。

邻进兄弟选择器。（自上到下紧挨着）

在临近兄弟选择器中，使用“+”符号连接前后两个选择器。选择器中的两个字标签从属于同一个父标签。而且被选择的子标签必须紧跟指定的标签。

普通兄弟选择器。(自上到下选择向下普通的兄弟)

在普通兄弟选择其中，使用“~”符号来连接前后两个选择器。选择器中的两个子标签从属于同一个父标签，而且被选择的子标签需要位于指定标签之后。

3.3字体样式属性

3.3.1 font-size：字号

单位	说明
em	倍率单位
px	像素单位是网页设计中常用的单位。
%	百分比单位

注意点：①Chrome浏览器支持的最小文字为12px,默认的文字大小为16px,并且0px会自动

消失。②不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大

小。③通常以给body设置font-size属性，这样body中的其他元素就都可以继承了。⑤由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小。例如：font-size设为4px,最终呈现的文字，可能比40px大，也可能比4px小。⑥通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

3.3.2 font-family：字体

字体族

1.属性名：font-fami1y

2.作用：控制字体类型

语法：

div {

font-family:"STCaiyun","Microsoft YaHei",sans-serif

}

注意：

使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。④如果字体名包含空格，必须使用引号包裹起来。③可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif(衬线字体)或sans-serif(非衬线字体)。④windows系统中，默认的字体就是微软雅黑.

3.3.3 font-weight：文字粗细

属性名：font-weight
作用：控制字体的粗细。
常用值：

关键词

1. lighter:细

2. normal:正常

3. bold：粗

4.bo1der:很粗(多数字体不支持)

数值：

1.10~900且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的

精确程度)。

2.100~300等同于lighter,400~500等同于norma1,700及以上等同于bo1d。

语法：

Div{

font-weight: bold;

}

div{

font-weight:600;

{

3.3.4 font-variant：变体

font- variant属性，用于设置英文字符的变体以及小型大写字母该属性仅对英文字母有效。font- variant属性的常用值，如下。 Normal：默认值。用于浏览器显示标准的文字。 Small-caps：用于浏览器显示小型大写字母，将所有的小写字母均转换为大写字母，但是转换后的字母比正常的大写字母小。

3.3.5 font-style：字体风格

属性名：font-sty1e。
作用：控制字体是否为斜体。
常用值：

1.normal:正常（默认值）

2.ita1ic:斜体（使用字体自带的斜体效果）

3.ob1ique:斜体（强制倾斜产生的斜体效果）

实现斜体时，更推荐使用italic。

语法：

div{

font-style: italic;}

3.3.6 font：综合设置字体样式

属性名：font,可以把上述字体样式合并成一个属性。
作用：将上述所有字体相关的属性复合在一起编写。
编写规则：

1.字体大小、字体族必须都写上。

2.字体族必须是最后一位、字体大小必须是倒数第二位。

3.各个属性间用空格隔开。

实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性。

3.3.7 @font-face 规则

@font-face是CSS3的新增规则，用于定义服务器字体。通过@font-face规则，可以在计算机中使用未安装的字体。

@font-face{

font-family:字体名称；

src: 字体路径；}（通过定义的font-family字体名称要与标签调用的字体名称保持一致。这样设置的服务器字体才能生效）

3.4文本外观属性

3.4.1 color：文本颜色

属性名：co1or
作用：控制文字的颜色。
可选值：

1.颜色名 2.rgb或rgba 3.hex或hexa(十六进制) 4.hsl或hsla

开发中常用的是：rgb/rgba或hex/hexa(十六进制)。

举例：div{ co1or:rgb(112,45,78)；}

3.4.2 letter-spacing：字间距

1.字母间距：letter-spacing

2.单词间距：word-spacing(通过空格识别词)

3.属性值为像素(px),正值让间距增大，负值让间距缩小。

3.4.3 word-spacing：单词间距

3.4.4 line-height：行间距

属性名：line-height
作用：控制一行文字的高度。
可选值：

1.normal：由浏览器根据文字大小决定的一个默认值。

2.像素(px)。

3.数字：参考自身font-size的倍数（很常用）。

4.百分比：参考自身font-size的百分比。

备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响

观感。

举例：

div{ line-height:60px; line-height:1.5; line-height:150%;}

行高注意事项：

1.Iine-height过小会怎样？--文字产生重叠，且最小值是0，不能为负数。

2.1ine-height是可以继承的，且为了能更好的呈现文字，最好写数值。

3.line-height和height是什么关系？

·设置了height,那么高度就是height的值。

·不设置height的时候，会根据line-height计算高度.

应用场景：

1.对于多行文字：控制行与行之间的距离。

2.对于单行文字：让height等于line-height,可以实现文字垂直居中。

备注：由于字体设计原因，靠上述动法实现的居中，并不是绝对的垂直居中，但如果

一行中都是文字，不会太影响观感。

3.4.5 text-transform：文本转换

1.none:不进行转换，为默认值。

2.capitalize: 将首字母转换为大写字母。

3.4.6 text-decoration：文本装饰

属性名：text-decoration
作用：控制文本的各种装饰线。
可选值：

1.none：无装饰线（常用）

2.underline:下划线（常用）

3.overline:上划线

4.1ine-through:删除线

可搭配如下值使用：

1.dotted:虚线 2.wavy:波浪线 3.也可以指定领色

举例：

a{ text-decoration: none;}

3.4.7 text-align：水平对齐方式

属性名：text-align。
作用：控制文本的水平对齐方式。
常用值：1.1eft:左对齐（默认值）

2.right：右对齐

3.center:居中对齐

举例：div{text-align:center;}

3.4.8 text-indent：首行缩进

设置首行文本的缩进，其值可以为不同单位的数值，例如以PX、 em或%为单位的数值，通常以em为单位的数值。设置首行缩进时允许使用负值。 em是一个相对单位，就是当前元素（font-size）。一个文字的大小。如果当前元素没有设置大小，则会按照父元素的一个文字大小。

3.4.9 white-space：空格处理

使用HTML制作网页时。不论源代码中有多少个空格，浏览器只会显示一个空格在CSS中使用。属性white-space，可以设置空格的处理方式。

normal	默认值文本中的空格、换行无效。只显示一个空格，当前文本满行（指文本到达模块区域边界）后自动换行。
pre	将文本按照原书写格式显示，保留空格、换行。
nowrap	空格、换行、无效强制文本不换行，除非使用标签<br \>；若文本超出浏览器编辑浏览器边界，浏览器会自动增加滚动条。

3.4.10 text-shadow：阴影效果

CSS3的新增属性使用该属性可以为页面中的文本添加阴影效果。

选择器{ text-shadow : h-shadow v-shadow blur color;} h-shadow：用于设置水平阴影的距离。v-shadow:用于设置垂直阴影的距离。blur:用于设置模糊半径。Color：用于设置阴影颜色。各属性值用空格分隔。注意：设置阴影的水平距离或垂直距离为负值，可以改变阴影的投射方向。阴影的水平距离或垂直距离参数值可以设置为负值，但阴影的模糊半径参数值只能设置为正值，并且数值越大，阴影向外模糊的范围也就越大。

3.4.11 text-overflow：处理溢出的文本

CSS3的新增属性，用于处理溢出的文本。

clip	用于修剪溢出的文本不显示“…”符号。
ellipsis	用“…”符号替代溢出的文本，“…”符号的位置在最后一个字符处。

3.4.12 word-wrap属性

属性值。	描述。
normal	默认值则在允许的断点换行
break-word	在长单词或URL内部换行

3.4.13行高

属性名：line-height
作用：控制一行文字的高度。
可选值：

1.norma1：由浏览器根据文字大小决定的一个默认值。

2.像素(px).

3.数字：参考自身font-size的倍数（很常用）。

4.百分比：参考自身font-size的百分比。

备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
举例：

div{ line-height:60px; line-height:1.5; line-height:150%;}

行高注意事项：

1.Iine-height过小会怎样？一一文字产生重叠，且最小值是g,不能为负数。

2.1ine-height是可以继承的，且为了能更好的呈现文字，最好写数值。

3.1ine-height和height是什么关系？

①设置了height,那么高度就是height的值。

②不设置height的时候，会根据line-height计算高度。

应用场景：

1.对于多行文字：控制行与行之间的距离。

2.对于单行文字：让height等于line-height,可以实现文字垂直居中。

备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果

一行中都是文字，不会太影响观感。

3.4.14文本对齐：垂直

1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。

2.居中：对于单行文字，让height=line-height即可。

问题：多行文字垂直居中怎么办？一一后面我们用定位去做。

3.底部：对于单行文字，目前一个临时的方式：

让line-height=(height×2)-font-size-×。

备注：×是根据字体族，动态决定的一个值。

问题：垂直方向上的底部对齐，更好的解决办法是什么？一一后面我们用定位去做。

3.4.15 vertical-align

属性名：vertical-align。
作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
常用值：

1.base1ine(默认值)：使元素的基线与父元素的基线对齐。

2.top：使元素的顶部与其所在行的顶部对齐。

3.midd1e：使元素的中部与父元素的基线加上父元素字母x的一半对齐。

4.bottom：使元素的底部与其所在行的底部对齐。

特别注意：vertical-align不能控制块元素。

3.5 列表样式属性

3.5.1 list-style-type 属性

3.5.2 list-style-image 属性

3.5.3 list-style-position属性

3.5.4 list-style 属性

3.5.5CSS鼠标属性

3.6 CSS的层叠性和继承性

3.6.1 层叠性

1.层叠性

·概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆

盖)。

什么是样式冲突？元素的同一个样式名，被设置了不同的值，这就是冲突。

3.6.2 继承性

1.概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

2.规则：优先继承离得近的。

3.常见的可继承属性：text-?？,font-?？,1ine-??、color

4.备注：参照MDN网站，可查询属性是否可被继承。

3.7 CSS优先级

1.简单聊：！1 mportant>行内样式>ID选择器>类选择器>元素选择器>*>继承的样

式。

2.详细聊：需要计算权重。

计算权重时需要注意：并集选择器的每一个部分是分开算的！

第四章 CSS选择器

4.1属性选择器

使用属性选择器可以根据标签的属性及属性值来选择对应的标签，从而为标签设置差异化的CSS样式CSS3中有多种属性选择器。

4.1.1 E[attribute]选择器

E：指代标签名称可省略表示满足条件的任意标签。attribute：n. 特性；特质；属性(指代属性名称)属性的标签。

4.1.2 E[attribute=vale]选择器

该选择器用与选择标签名为E(代指标签名称)并设置了attribute(代指属性名)属性和value(代指属性值)属性值的标签。

4.1.3 E[attribute~=vale]选择器

设置了attribute属性，而且包含value属性值的标签当属性和属性值完全一致时才选中标签。

4.1.4 E[attribute|=vale]选择器

设置了attribute属性，而且包含value属性值的标签当属性和属性值完全一致或以value-开头的属性值的标签。

4.1.5 E[attribute^=vale]选择器

设置了attribute属性，而且属性值前缀为value的标签

4.1.6 E[attribute$=vale]选择器

设置了attribute属性，而且属性值后缀为value的标签

4.1.7 E[attribute*=vale]选择器

设置了attribute属性，而且包含value属性值的标签

4.3 结构化伪类选择器

4.3.1 ：root选择器

：root选择器用与匹配文件根目录，根标签。在HTML中根标标签是指<html>标签。因此，使用：root选择器定义的样式对所有页面标签都生效。

4.3.2 ：not选择器

用于匹配除设置的标签或属性之外的标签。

4.3.3 ：only-child选择器

用于选择父标签中的唯一子标签。

4.3.4 ：first-child选择器和：last-child选择器

同一个父标签中的所有排序例：div>p:last-child div中的最后一个p标签。

4.3.5 ：nth-child(n)选择器和:nth-last-child(n)选择器

分别选择父标签的第几（倒数，正数）个子标签。n：

4.3.6 ：first-of-type选择器和：last-of-type选择器

用于匹配父标签中特定类型的子标签。

4.3.7 ：nth-of-type(n)选择器和：nth-last-of-type(n)选择器

用于匹配父标签中特定类型的第n（正数，倒数）子标签。

4.3.8 ：empty选择器

用来选择没有子标签或内容为空的所有标签。注：空格也是有内容

4.3.9 ：target选择器

用于突出显示当前活动的页面元素。只有单击页面中的超链接，并跳转到由：target选择器选择器控制的元素后。由：target选择器设置的样式才会起作用。

4.4 状态化伪类选择器

状态化伪类选择器。	描述。
a:link{ CSS样式;}	设置超链接的默认样式。
a:visited{ CSS样式;}	设置超链接被访问之后的样式。
a:hover{ CSS样式;}	设置鼠标指针悬停时超链接的样式。(点也是一种悬停)
a:active{ CSS样式;}	设置单击时超链接的样式。