关于前端与移动开发学习基础篇（3）——CSS基础（一）

CSS基础

一、基础认知

1.1 CSS的介绍

CSS:层叠样式表
作用：给页面中的HTML标签设置样式

1.2 CSS的语法规则

CSS写在style标签中，style标签一般写在head里面，title下面

1.3 CSS初体验

常见属性：

属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

注意：标点符号全英文，每个样式键值对后需要写分号。

2.1 CSS的引入方式

1.内嵌式：head标签中
2.外链式：通过link标签引入
3.行内式：配合js

二、基础选择器

1.1 选择器的作用

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

1.2 标签选择器

1.结构：
标签名{
css属性名：属性值；
}
2.作用：
通过标签名，找到页面中所有这类标签，设置样式
3.注意：
（1）选择的是一类
（2）无论嵌套多深都能找到

2.1 类选择器

1.结构：
.类名{
css属性名：属性值；
}
2.作用：
通过标签名，找到页面中所有这个类名标签，设置样式
3.注意：
（1）所有标签上都有class属性，class属性的属性值称为类名
（2）类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
（3）一个标签可以同时有多个类名，空格隔开
（4）类名可以重复，一个类选择器可以同时选中多个标签

3.1 id选择器

1.结构：
#id属性值{
css属性名：属性值；
}
2.作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
3.注意：
（1）所有标签上都有id属性
（2）id属性值类似于身份证号，每个页面中是唯一、不可重复的
（3）一个标签上只能有一个id属性值
（4）一个id选择器只能选中一个标签

类与id的区别：
1.class类名与id属性值的区别：class相当于姓名，一个标签可以同时有多个class；id相当于身份证号，不能重复，一个标签只能有一个id属性值。
2.类选择器与id选择器的区别：类选择器以.开头；id选择器以#开头。
3.实际开发的情况：类选择器用的最多，id一般配合js使用，否则不要使用id设置样式；实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

4.1 通配符选择器

1.结构：
*{
css属性名：属性值；
}
2.作用：找到页面中所有的标签，设置样式

三、字体和文本样式

1.1 字体大小

1.属性名：font-size
2.取值：数字+px
3.注意：谷歌默认字体大小是：16px

1.2 字体粗细

1.属性名：font-weight
2.取值：
（1）关键字：
正常：normal
加粗：bold
（2）纯数字：100~900的整百
正常：400
加粗：700

1.3 字体样式（倾斜）

1.属性名：font-style
2.取值：
正常：normal
倾斜：italic

1.4 常见字体系列（了解）

1.无衬线字体（sans-serif）
2.衬线字体（serif）
3.等宽字体（monospace）

1.5 字体系列

1.属性名：font-family
2.注意：
（1）存在多个单词推荐使用引号包裹
（2）最后一项字体系列不需要引号包裹
（3）尽量使用系统常见自带字体

1.6 样式的层叠问题

最下面的生效

1.7 字体font相关属性的连写

1.属性名：font
2.取值：
font:style weight size family
3.顺序：swsf(稍微舒服)
4.省略要求：只能省略前两个，相当于设置默认
5.注意：如果需要同时设置单独和连写形式（？）

2.1 文本缩进

1.属性名：text-indent
2.取值：
(1)数字+px
(2)数字+em（推荐：1em=当前标签的font-size大小）

2.2 文本水平对齐方式

1.属性名：text-align
2.取值：

属性值	效果
left	左对齐
center	居中
right	右对齐
3.注意：
如果水平居中，text-align属性给文本所在标签的（文本父元素）设置

2.3 文本修饰

1.属性名：text-decoration
2.取值：

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线
3.注意：
开发中使用text-decoration:none;清除超链接默认的下划线

3.1 行高

1.作用：空值一行的上下行间距
2.属性名：line-height
3.取值：
（1）数字+px
（2）倍数
4.应用：
5.注意：

4.1 拓展：颜色常见取值（了解）

1.属性名：
（1）文字颜色：color
（2）背景颜色：background-color
2.属性值：

颜色表示方式	表示含义	属性值
关键词	预定义颜色名	red,blue,yellow…
rgb表示	红绿蓝三色，每项取值：1~255	rgb(0,0,0),rgb(255,0,0)
rgba表示	a表示透明度，取值0~1	rgba(255,255,255,0.5)
十六进制	#开头，数字转换成十六进制	#000000 、#ff0000

四、谷歌调试工具

1.1 Chrome调试工具操作

1.1 Chrome调试工具小结