【前端三件套——CSS基础】网页开发必备知识

前言

上文笔者对HTML做了较为全面的总结，前端三件套三下五除二，我们就干掉三分之一了（狗头）
那么接下来就是我们的层叠样式表——CSS，它的作用就是给页面中的HTML标签设置样式的，那些下面就开启我们今天的旅程吧

导读

CSS语法：
选择器{ 属性名：属性值；}
选择器简单理解就是选择的标签名，如p，大括号里面的就是CSS的属性了，也就是将选择的标签设置某个样式
如：

p{
    color：red;/* 给p段落的字体叠加红色*/
}

PS:/* … */ 就是CSS的注释格式，也可以直接ctrl+/
编辑器会自己判断该用哪种格式注释

常见属性：

1. CSS引入方式

1.1内嵌式

首先我们得说一下style标签，一般它都是写在标签里，

红色

1.2 外联式

是之前提到的CSS写在一个单独的.css文件里面，这也是开发项目中最常见的

引入方式： 需要通过link标签在网页中引入
标签也写在title标签下
语法：

"stylesheet" href="">

rel的值告诉编译器这是这个链接是样式表
href里面就填CSS文件的相对路径（简单一点），和HTML里的超链接标签是一样的

1.3 行内式

将CSS写在标签的style属性中
开发中基本是与JS配合使用的

语法：

color:red; font-size:5px;>5号红色

注意
日常小案例可以用内嵌式，比较方便
项目开发外联式为主
行内式和js 配合使用

2. 基础选择器

在HTML中选择元素

2.1 标签选择器

结构： 标签名{ css属性名：属性值；}

作用： 通过标签名，找到页面中所有这类标签，设置样式

注意点：

1. 标签选择器选择的是一类标签，而不是一个
2. 标签选择器无论嵌套关系多深，都能找到对应的标签

2.2 类选择器

结构： .类名{ css属性名：属性值；}

 .one{
    color:red;
}

作用： 通过类名找到页面中所有带有这个类名的标签，设置样式

注意点：

1. 所有的标签都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可由数字、字母、下划线、中划线等组成，但需注意不能由数字或中划线开头
3. 一个标签可同时有多个类名，类名之间以空格隔开

"one" "red" "30px">大标题 

4. 一个类选择器可以同时选中所有同类名的标签

   实际开发中，类选择器用得最多

2.3 id选择器

结构： #id属性值{css属性名：属性值}

#blue{
     color:blue;
}

"blue" >id选择器

作用： 通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

1. 所有标签上都有id属性

2. id属性值是唯一的，即两个标签不能共用一个id，一个标签不能有两个id
   id选择器只能选中一个标签

   id一般配合js使用，除非特殊情况，否则不要使用id设置样式

2.4 通配符选择器

结构： *{css属性名：属性值；}

*{
     margin:0;
     padding:0;
}

作用： 找到页面所有的标签，设置样式

注意点：

开发中使用极少，只会在特殊情况使用，用处在CSS进阶再进行讲解

3.字体与文本样式

3.1 font字体样式

• 字号：
  属性名：font-size
  取值格式：数字 + px

font-size : 32px;

注意点：

1. 谷歌浏览器的默认字号为16
2. px必须加

• 字体粗细
  属性名：font-weight
  取值格式：
  分俩种——
  一种为关键字，normal表示正常粗细，bold表示粗体
  另一种是纯数字，100~900取整百数，其中normal 对应400，bold对应700

font-weight : bold;

注意点：
不是所有的字体都提供了九种粗细

• 字体样式
  属性名：font-style
  取值格式：
  正常—— normal
  倾斜—— italic

font-style : italic;

• 字体
  属性名：font-family
  取值格式：
  字体分为三大类:
  无衬线字体（sans-serif）——笔画粗细均匀，常见字体有黑体、Arial、微软雅黑
  sans-serif也是网页中最常用的字体类型
  衬线字体（serif）——笔画粗细不均，有笔锋修饰，常见字体有宋体、Times New Roman
  serif主要应用在报刊
  等宽字体（monospace）——字符间隔宽度相等，常见该字体Consolas
  monospace一般见于代码编写

font-family : 微软雅黑；

渲染规则

1. 从左到右按顺序查找，若电脑中未安装该字体，则显示下一字体
2. 直到都不支持则根据操作系统，显示最后字体系列的默认字体

font-family : 微软雅黑，黑体，sans-serif;

最后一个是字体系列“统称”
注意点：

1. 若某个字体名称中存在多个单词，建议用引号包裹，如：“Microsoft YaHei”
2. 最后一项字体系列是不需要引号的
3. 网页开发中，尽量使用系统自带字体，保证不同用户浏览时均可正常显示

格外增加：CSS是层叠样式表，而层叠就是叠加的意思，样式可以一层一层的层叠覆盖。就像你个

标签的字体用CSS设置了红色样式，后面在这同个标签又设置了蓝色是，此时网页显示的就是蓝色。（写在最下面的会生效！！！）

• 字体font相关属性的连写
  格式如下：
  font : style weight size family；’
  例子：

font : italic 700 16px 宋体；

前面两个可以省略，省略则代表设置为默认值，但后面两个是不可以省略的

3.2 text字体样式

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

text-indent : 2em;

• 文本水平对齐方式
  属性名：text-align
  取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：
text-align属性在文本所在标签（文本的父元素）设置

3.3 文本修饰

属性名：text-decoration
取值：

属性名	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

注意点：
开发中，会使用text-decoration : none;清楚标签默认的下划线

3.3 line-height行高

控制一行的上下行间距
属性名：line-height
取值：

1. 数字+px（上间距到下间距的距离）
2. 倍数（当前标签font-size的倍数）
   注意点：
   设置line-height : 1 ;可以取消上下间距
   与font连用：
   font : style weight size/line-herght family ;
   使用如下：

font : italic 700 16px/1.5 微软雅黑 ；

下节预告，【前端三件套——CSS进阶】

各位看官觉得还不错可以点赞关注一下吗，我是前端小刘不怕牛牛，期待与您共同进步