Web前端系列技术之CSS基础（从入门开始）①

从这一节开始，便开始记录每天重新学习巩固CSS语言的过程了，作为美化HTML的一门语言，它的发展始终和网页的开发息息相关；而现如今，它也已经迭代到了CSS3，其规范的模块化，促使着我们可以规范进行有效的开发，其具体内容介绍可以参考CSS3百度百科。

一、前言

什么是CSS语言？为什么要使用到CSS语言？该如何使用CSS语言呢？

1. 什么是CSS语言？
CSS：层叠样式表（Cascading style sheets），是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。简单而言：就是给页面中的HTML标签设置样式，用来美化页面的。

2.为什么要使用到CSS语言？
CSS有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从（X）HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSs样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

3.该如何使用CSS语言呢？
既然选择使用CSS叠层样式表来开发网页，那首先自然要学会的就是理解CSS代码的书写规范 ，其次就是懂得如何引入CSS代码 ，最后就是理解各种CSS样式的效果实现方式，接下来的内容，就是我想要介绍的。

二、CSS的语法规则

首先：写在哪里？
CSS写在style标签中，style标签一般写在head标签里面，title标签下面。

其次：怎么写？如图所示：

注意：
①CSS 标点符号都是英文状态下的；
②每一个样式键值对写完之后，最后需要写分号；

三、CSS的引入方式

CSS有三种引入方式，其分别为：内嵌式、外联式、行内式，其中在具体项目的开发中，最常用的还是【外联式】，因为这种方式避免了页面代码的大量冗余，同时提高了网页CSS样式表的可维护性，当然，这三种方式还是需要一一介绍：
➢内嵌式：CSS 写在style标签中——常用于小的案例使用
• 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中，具体情况如图所示：

➢ 外联式：CSS 写在一个单独的.css文件中——常用于项目中
• 提示：需要通过 link标签 在网页中引入，具体情况如图所示：
①先创建CSS文档：

②再利用 link标签 来引入CSS文档

➢ 行内式：CSS 写在标签的style属性中——常配合JS使用
• 提示：基础班不推荐使用，之后会配合js使用，具体情况如图所示：

四、基础选择器

基础选择器的类别主要分为四类：

1. 标签选择器
2. 类选择器
3. id选择器
4. 通配符选择器

选择器的作用：选择页面中对应的标签，方便后续设置样式。

1.标签选择器

➢ 结构：标签名 { css属性名：属性值； } ➢ 作用：通过标签名，找到页面中所有这类标签，设置样式。
➢ 注意点：
① 标签选择器选择的是一类标签，而不是单独某一个；
② 标签选择器无论嵌套关系有多深，都能找到对应的标签；

2.类选择器

➢ 结构：.类名 { css属性名：属性值； }
➢ 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
➢ 注意点：
① 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）；
② 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；
③ 一个标签可以同时有多个类名，类名之间以空格隔开；
④ 类名可以重复，一个类选择器可以同时选中多个标签；
⑤ 实际开发中，类选择器用的最多，其中可能也会遇到 冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

3.id选择器

➢ 结构：#id属性值 { css属性名：属性值； }
➢ 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
➢ 注意点：
① 所有标签上都有id属性；
② id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
③ 一个标签上只能有一个id属性值；
④ 一个id选择器只能选中一个标签；
⑤ 一般配合js使用，除非特殊情况，否则不要使用id设置样式

4.通配符选择器

➢ 结构：* { css属性名：属性值； }
➢ 作用：找到页面中所有的标签，设置样式。
➢ 注意点：
① 开发中使用极少，只会在极特殊情况下才会用到；
② 在基础班小页面中可能会用于去除标签默认的margin和padding（后先了解）；
③ 常被用做于实现清除页面所有元素的内外边距，如下图代码所示：

五、字体和文本样式

主要涉及到的是：字体样式、文本样式和行高，其目的就是为了能够使用 字体和文本相关样式 修改元素外观样式。

1.字体样式

涉及到字体的样式内容主要有：

① 字体大小：
font-size : 数字 + px；
谷歌浏览器默认文字大小是16px；

② 字体粗细：
font-weight : normal / 400（正常） 、bold / 700（加粗）
实际开发中以：正常、加粗两种取值使用最多；

③ 字体样式：
font-style : normal （正常）、italic（倾斜）；

④ 字体类型：
font-family : sans-serif（无衬线字体，最为常用）
注意：
在项目开发中，通常会写多种字体，如：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列；

⑤ font属性连写：
font : style weight size family（只能省略前两个，如果省略了相当于设置了默认值）；
注意：

1. 只能省略前两个，如果省略了相当于设置了默认值；
2. 如果需要同时设置单独和连写形式，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面。

2.文本样式

涉及到字体的样式内容主要有：

①文本缩进：
属性名：text-indent
取值：
• 数字+px；
• 数字+em（推荐：1em = 当前标签的font-size的大小）；

②文本缩进：
属性名：text-align
取值：
left：左对齐；
center：居中对齐；
right：右对齐；
注意：
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素） 设置

③text-align : center（拓展）：
text-align : center 能让文本 、span标签 、a标签 、input标签 、img标签 元素水平居中；
注意：
如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置。

④margin : 0 auto（拓展）：
margin : 0 auto 能让div、p、h（大盒子）水平居中；
注意：

1. 如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可
2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

⑤文本修饰
属性名：text-decoration
取值：
underline：下划线（常用）；
line-though：删除线（不常用）；
overline：上划线（几乎不用）；
none：无装饰线（常用）；
注意：开发中会使用 text-decoration : none ; 清除a标签默认的下划线。

3.line-height行高

作用： 控制一行的上下行间距
属性名：line-height
取值：
• 数字+px；
• 倍数（当前标签font-size的倍数）；
应用：
①让单行文本垂直居中可以设置 line-height : 文字父元素高度；
②网页精准布局时，会设置 line-height : 1 可以取消上下间距；
行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题；
• font : style weight size/line-height family ;

4.颜色取值方式

颜色的取值方式共有四种，但是rgba表示法和十六进制表示法是网页开发过程中最为常用的；

总结

◆ 能够知道 CSS 的 引入方式 及区别
◆ 能够使用 基础选择器 在 HTML 中选择元素
◆ 能够使用 字体和文本相关样式 修改文字样式
◆ 能够使用 CSS 让页面中元素水平居中

以上就是所要介绍的CSS的第一节内容，在此分享一下，CSS文本的编写，是一定要遵从它自己的语法规则，后续即将更新CSS的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下HTML基础学习的文章介绍，再结合今天所介绍的CSS样式表，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！