文章目录
CSS简介
CSS基本介绍
- HTML的局限性：HTML只关注内容的语义，对于网页元素，都只是进行简单的显示，而不考虑对网页内容的美化。通过HTML只能做一些简单的样式，并且还会产生非常臃肿和繁琐的代码。
- CSS的名称：层叠样式表，有时候也会被称为CSS样式表或级联样式表。
- CSS的基本作用：主要用于设置HTML页面中的文本样式（字体、大小、对齐方式等）、图片样式（图片的宽和高、边框样式、边距等）以及版面布局、外观显示样式。简单来说，CSS可以美化网页布局，让网页变得更加丰富多彩。
- CSS的最大价值：可以让HTML专注于构建网页的结构，而不用负责对网页样式的管理，从而实现网页结构和样式相分离。
CSS基本语法规范
-
基本组成：CSS规则由选择器以及一条或多条声明组成。
- 选择器：指定需要进行CSS样式设置的HTML标签；
- 声明：对指定的标签进行设置的样式，用一个大括号进行表示；每一条声明表示一种样式设置，多个声明之间通过英文分号进行隔开；属性和属性值之间以键值对的形式进行表示。具体表示形式为：
标签名 {样式1: 样式1的属性值; 样式2: 样式2的属性值;...}。
-
写在代码中的位置：常常在网页头部尾标签
</head>前写一对<style></style>标签，其中插入选择的样式。通过这样的方式，就实现了网页设计的样式和结构（写在<body>标签中）相分离。
CSS代码风格
- 注意事项：代码风格不是强制规范，而是符合实际开发习惯的书写方式。
- 样式格式书写：分为紧凑格式和展开格式。更加推荐展开格式的书写，因为更加直观。
- 紧凑格式：
标签名 { 样式1: 样式1的值; 样式2: 样式2的值}。 - 展开格式：
- 紧凑格式：
标签名 {
样式1: 样式1的值;
样式2: 样式2的值；
}
- 样式大小写：推荐样式选择器、属性名和属性关键值都采用小写字母。
- 空格规范：
- 习惯于属性值之前冒号之后保留一个空格；
- 习惯于在选择器和大括号之间保留一个空格；
CSS基础选择器
选择器的作用和分类
- 选择器的作用：根据不同的需求将需要进行样式设置的标签选择出来。
- 选择器的分类：可以分为基础选择器和复合选择器两类。
- 基础选择器：
- 基本组成：由单个选择器组成。
- 包含范围：标签选择器、类选择器、id选择器和通配符选择器。
标签选择器
- 基本概念：用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的CSS样式。
- 基本语法：
标签名 {属性1: 属性值1; 属性2: 属性值2}。 - 选择器优点：能够为页面中同类型的标签统一设置样式。
- 选择器缺点：不能对同一类型的标签进行差异性设置。
- 基本语法：
类选择器
- 基本作用：可以实现差异化选择，单独选择一个或某几个标签。
- 使用语法：首先，创建一个样式类，语法为
.类名{属性1: 属性值1; 属性2:属性值2}；接着，所有需要设置为该类别样式的标签，只需要将自己的类的class属性的值设置为该类的类名即可。 - 选择器优点：实际开发过程中使用最多的选择器，可以通过定义一个类，多次进行使用，非常方便。
- 注意事项：命名要有意义，不要随便起名；不要使用纯数字和中文进行命名，尽量使用英文进行表示；不能以标签名作为类名。
- 多类名使用方式：
- 基本作用：可以为一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
- 注意事项：为一个标签设置多个类名时，多个类名之间需要用空格进行分隔。具体表示为：
class="类别1 类别2"。
id选择器
- 基本作用：可以为标有特定id的HTML元素指定特定的样式。
- 使用语法：首先，创建一个样式，语法为：
#id名称 {属性1: 属性值1; 属性2: 属性值2}，然后将需要进行样式设置的标签的id属性的值设置为定义好的id名称即可。 - 和类选择器的区别：id选择器只能被代码中一个标签调用，如果有一个标签已经调用了，则其他标签无权调用。可以理解为，id是每一个标签唯一的，不得重复。
通配符选择器
- 基本作用：选择页面中的所有元素；
- 使用语法：以星号创建一个样式，具体的语法为：
* {属性1: 属性值1; 属性2: 属性值2}。 - 注意事项：通配符选择器不需要进行调用，自动给所有元素使用样式。
CSS字体属性
font-family字体类型设置
- 属性作用：设置文本的字体类型。实际开发过程中都是按照团队指定进行使用。
- 常用属性值：“
Microsoft Yahei”“Times New Roman” “Arial” “tahoma,arial”“Helvetica”“sans-serif”"宋体"等，其中"Microsoft Yahei"也可以使用中文"微软雅黑"代替，但是出于兼容性考虑，推荐使用英语。 - 设置多个字体：样式中也可以同时设置多种字体，表示如果用户电脑未安装第一种字体，则会执行第二个字体，以此类推。需要注意的是，各个字体之间以英文逗号进行分隔。
- 注意事项：谷歌浏览器的默认字体是微软雅黑。提倡尽量使用常见且默认的字体，例如微软雅黑、新罗马字体等，不推荐使用少见的字体。
- 常用形式：使用标签选择器给
<body>标签中的所有文本内容设置字体类型，即使用一个<body>标签选择器给网页主体中的所有内容设置相同的字体。
font-size字体大小设置
- 属性作用：设置文本的字体大小；
- 属性值：一个数字加上"
px"构成，其中px即像素，是网页中最常用的大小单位。对于谷歌浏览器，默认的文字大小是16像素。 - 注意事项：对于不同的浏览器默认的字体大小可能不一致，因此推荐给出一个明确的字体大小而不是直接采用默认字体大小。
- 常用形式：使用标签选择器给
<body>标签中的所有文本内容设置字体大小。标题标签比较特殊，尽管其也在<body>标签的覆盖范围内，但是不受到<body>设置字体大小的影响，需要进行单独设置字体大小。
font-weight字体粗细设置
- 属性作用：设置字体的粗细；
- 可选属性值：
normal表示正常字体，bold表示粗体，bolder表示特粗体，lighter表示细体。另外，还可以使用取值为100-900整数表示具体的粗细（实际开发过程中更加提倡），例如bold对应的数字是700，normal对应的数字是400。实际前端开发过程中更习惯于使用数字。
font-style字体样式设置
- 属性作用：定义字体显示的风格，主要是斜体和非斜体。该设置在实际开发过程中很少使用。
- 属性值：默认值为
normal，表示标准的字体样式；italic表示斜体样式。 - 使用场景：一般情况下很少给文字加斜体，但是常常用该属性让斜体标签变为不倾斜的字体。
font字体复合属性设置
- 属性作用：同时设置字体的多个属性，节约代码空间。
- 使用语法：
font: font-style属性值 font-weight属性值 font-size/line-height属性值 font-family属性值；其中的line-weight属性值是指行高。 - 注意事项：
- 顺序问题：上面四个属性值之间的顺序不能颠倒，属性值之间以空格进行分隔。
- 必须属性：不想设置的属性值可以省略（此时会自动取默认值），但是必须保留
font-size和font-family两个属性的属性值。
CSS文本属性
color文本属性设置
- 属性作用：用于设置文本的颜色。
- 属性值：一共有预设值、十六进制和RGB代码三种形式来定义属性值。
- 预设值：例如
red，green，blue和pink等。 - 十六进制：例如
#FF0000等，需要注意的是十六进制要用#开头。这种方式是实际开发过程中这是最常用的使用方式。可以在双击该颜色的值后，在UI界面中选择需要的颜色。 - RGB代码：例如
rgb(255,0,0)和rgb(100%, 0%, 0%)等。
- 预设值：例如
text-align文本对齐设置
- 属性作用：用于设置文本的水平对齐方式（即左对齐、居中对齐和右对齐）；
- 属性值：
left是左对齐，right是右对齐，center是居中对齐。其中左对齐是默认值。
text-decoration文本装饰线设置
- 属性作用：用于设置文本的装饰线，包括下划线、删除线和上划线等。
- 属性值：
none表示无装饰，为默认值；underline表示下划线，是一个常用的线形（超链接自带下划线）；overline表示上划线（很少使用）；line-through表示删除线（几乎不用）。
text-indent文本缩进设置
- 属性作用：设置指定区域文本的第一行的缩进方式，通常是将段落的首行进行缩进。
- 属性值：
- 以像素为单位：一个整数加上"
px"结尾，表示缩进多少个像素值。也可以设置为一个负数，只是这种情况很少用。 - 以相对文字大小为单位：以当前元素中的字体大小作为一个单位，用一个整数加上"
em"结尾，表示用指定个单位的距离作为缩进距离。如果当前元素没有设置字体大小，则会采用父元素中的字体大小。
- 以像素为单位：一个整数加上"
line-height行间距设置
- 属性作用：设置某一区域中文本的行间距，即相邻行之间的距离。
- 属性值：用像素值进行表示，仍然采用整数值+"
px"的方式。 - 注意事项：修改行间距不会修改文本本身的高度，而是修改文本上方和下方的空白宽度。
CSS引入方式
- CSS样式表的分类：按照CSS样式书写的位置（也被称为引入的方式），CSS样式表可以分为内部样式表（嵌入式）、行内样式表（简称行内式）和外部样式表（链接式）三类。
- 内部样式表：
- 使用方法：将CSS部分的代码写在HTML页面的内部，即将所有的CSS代码抽取出来，单独放到一个
<style>标签中。 - 注意事项：
<style>标签理论上可以放在HTML文档中的任何位置，但是一般会放在<head>标签中。 - 控制范围：可以方便地控制整个网页页面中的元素样式。
- 优点缺点：代码结构非常清晰，但是没有实现结构和样式完全分离。
- 使用方法：将CSS部分的代码写在HTML页面的内部，即将所有的CSS代码抽取出来，单独放到一个
- 行内样式表：
- 使用方法：直接在元素标签内部设置style属性的值为指定的CSS样式，例如
<div style="color: red; font-size: 12px;">。 - 适用情况：该类型的样式表适用于修改简单样式。但是由于该方式修改繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用。
- 其他名称：也被称为行内式引入。
- 使用方法：直接在元素标签内部设置style属性的值为指定的CSS样式，例如
- 外部样式表：
- 类型地位：在实际开发过程中采用的都是外部样式表，也是推荐使用的方式。
- 适用场景：适用于样式非常多的情况。
- 核心内容：将样式单独写入到一个CSS文件中，之后把CSS文件引入到HTML页面中进行使用。
- 使用方法：首先，新建一个后缀名为
.css的文件，然后再在里面写入CSS代码（写代码的方式和其他两种样式表相同）；接着，在HTML界面中，使用<link>标签引入这个文件，使用语法为<link rel="stylesheet" href="CSS文件路径">。
- 内部样式表：
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
