CSS相关知识 | 青训营笔记

这是我参与[第四届青训营]笔记创作活动的第2天

一、什么是CSS？

CSS(Cascading Style Sheets) 是用来定义页面元素的样式，可以设置字体和颜色，设置位置和大小，添加动画效果。

h1 {
  color: white;
  font-size: 14px;
}

上面的代码段就是一个完整地CSS样式，其中h1就是选择器，里面的“color”和“font-size”都是属性，“white”是属性值。

CSS代码结构中需注意的几点

CSS样式中选择器严格区分大小写，属性和值不区分大小写，一般情况下都采用小写方式；
多个属性之间必须用英文状态下的分号隔开；
如果属性的值由多个单词组成，且中间包含空格，则必须为这个属性值加上英文状态下的引号；
在编写css代码时，为了提高代码的可读性，通常会加上css注释；
属性的值和单位之间是不允许出现空格的；

二、在页面中如何使用CSS？

引入CSS样式表的几种方式

1. 外链式

是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表链接到HTML文档中，其基本语法格式如下：

<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径；
type：定义所链接文档的类型，在这里需要指定为text/css,表示链接的外部文件为css样式表；
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为steelsheet，表示被链接的文档是一个样式表文件。

2. 嵌入式

是将CSS代码集中写在HTML的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：

<head>
<style type="text/css">
    选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;...}
<style/>
</head>

3. 内联式

也称为行内式，是通过标记的style属性来设置元素的样式，它的基本语法格式如下：

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

三、CSS中都有哪些选择器？每种选择器该如何使用？

CSS中有基础选择器和复合选择器，在实际开发中，仅使用基础选择器不可能良好地组织页面样式，因此就需要复合选择器。

1. 基础选择器

1.1 通配选择器

它是作用范围最广的，能匹配页面中所有的元素，但实际开发中不建议使用，因为他设置的样式对所有HTML标记都生效，不管标记是否需要该样式，会降低代码执行速度。基本语法格式为：

*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

1.2 标签选择器

它是指用HTML标记名称作为选择器，按标记名称分类，为页面某一类标记制定统一的CSS样式，基本语法格式为：

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

QQ图片20220725160255.png 上图中就是使用p标签去制定统一样式。

1.3 类选择器

使用“.”进行标识，后面紧跟类名，基本语法格式为：

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

QQ图片20220725161743.png

QQ图片20220725161808.png 1.4 id选择器

使用“#”进行标识，后面紧跟id名，基本语法格式为：

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

QQ图片20220725161845.png

QQ图片20220725161907.png id名即为HTML元素的id属性值，大多HTML元素都可以定义id属性，元素的id值是唯一的。

1.5 属性选择器

为带有特定属性的 HTML 元素设置样式，共有7种属性选择器，每个的基本语法格式为：

[attribute] 选择器用于选取带有指定属性的元素。
[attribute="value"] 选择器用于选取带有指定属性和值的元素。
[attribute~="value"] 选择器选取属性值包含指定词的元素。
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素，值必须是完整或单独的。
[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素，值可以不完整。
[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。
[attribute*="value"] 选择器选取属性值包含指定词的元素。

2.复合选择器

2.1 标签指定式选择器

又称并集选择器，有两个选择器构成，其中第一个为标签选择器第二个为class选择或id选择器，两个选择器之间不能有空格，如h3.special，p#one;

2.2 后代选择器

后代选择器用来选择元素或元素组的后代。其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔；

2.3并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为他们定义相同的css样式。

四、什么是伪类(pseudo-classes)？

所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“:”构成；超链接标签<a>的伪类有以下四种：

a:link：未访问时超链接的状态；
a:visited：访问后超链接的状态；
a:hover：鼠标经过、悬停时超链接的状态；
a：active：鼠标点击不动时超链接的状态；

五、关于CSS文本相关样式

1.CSS字体样式相关属性

1.1 font-size：用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位；长度单位有：px、cm、mm、em(尺寸)等；

p{font-size: 12px;}

1.2 font-family：用于设置字体，常用的字体有宋体，微软雅黑，黑体等，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体；

各种字体之间必须用英文状态下的逗号隔开；
中文字体需要加英文状态下的引号，英文字体一般不需要加引号当需要设置英文字体时，英文字体名必须位于中文字体名之前；
如果字体名中包含空格等符号，则该字体必须加英文状态下的单引号或双引号。

p{font-family: "微软雅黑";}
body{font-family: 'Courier New', Courier, monospace;}
body{font-family: "宋体","黑体";}
body{font-family: Arial,"微软雅黑", "黑体";}

1.3 font-weight：用于定义字体的粗细；

normal:默认值，定义标准字符；
bold：粗体字符；bolder：更粗的字符；
lighter：更细的字符；

1.4 font-style：用于定义字体风格，如设置斜体，倾斜或正常字体；

normal：默认值，显示标准字体样式；
italic：斜体样式；oblique：倾斜样式；二者常用italic;

1.4 font：对字体样式进行综合设置；

2.CSS文本外观属性

2.1 letter-spacing：用于定义字间距，其属性值可为不同单位的数值允许使用负值，默认为normal；

2.2 word-spacing：单词间距，用于定义英文单词之间的间距，对中文字符无效；

2.3 line-height：行间距，用于设置行间距，常用的属性值单位有三种，分别为像素px相对值em和百分比%；

2.4 text-align：用于设置文本内容的水平对齐，相当于HTML中的对齐属性，仅适用于块级元素，对行内元素无效；

2.5 text-decoration：用于设置文本的上划线，下划线，删除线等装饰效果，其后可赋多个值，添加多个效果；

none：没有装饰
underline：下划线
overline：上划线
line-through：删除线

2.6 text-indent：用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比，允许使用负值；

2.7 white-space：空白符处理；

normal：常规文本中的空格空行无效，满行后自动换行；
pre：预格式化，按文档的书写格式保留空格空行原样显示；
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记内容超出元素的边界也不换行，若超出浏览器界面，则会自动增加滚动条；
pre-wrap：保留空白符，但正常的进行换行；
pre-line：合并空格，保留换行；

六、关于CSS的调式

右键点击页面，选择检查或者直接使用快捷键Ctrl+Shift+i

七、总结

通过本节课的学习，对CSS有了一个基本的了解。理解了CSS的语法，对CSS的选择器有所掌握，对CSS的那些控制文本样式更加熟悉了。

CSS相关基础知识