一、CSS基础

1.1CSS的介绍

CSS：层叠样式表（Cascading style sheets）

CSS作用是什么？？

1.2CSS语法规则

写在哪里？

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

怎么写？

在这里插入图片描述

<style>
    /*css注释*/
    /*这里写的都是css*/
    /*选择器{css属性}*/
    /*选择器：查找标签*/
    p{
        /*文字颜色变红*/
        color:red;
        /*字变大 px:像素*/
        font-size:30px;
        /*背景颜色*/
        background-color:green;
        /*width height*/
        width:400px;
        height:400px;
    }
</style>

2.1CSS引入方式

内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

<link rel="stylesheet" href="./my.css">

行内式：CSS写在标签的style属性中

提示：不推荐使用，之后会配合js使用

<div style="color:green;font-size:30px">这是div标签</div>

2.2CSS引入方式-小结

CSS常见三种引入方式有哪些？

内嵌式
外联式
行内式

CSS常用三种引入方式的特点区别有哪些（书写位置、作用范围、使用场景）

引入方式·	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

二、基础选择器

1.2标签选择器

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

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

注意点：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

<style>
    /*选择器{}*/
    /*标签选择器 就是 以标签名命名的选择器*/
    p{
        color:red;
    }
    /*标签选择器 选中所有的这个标签都生效css*/
</style>

1.3类选择器

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

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

注意点：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<style>
    .red{
        color:red;
    }
    .size{
        font-size:66px;
    }
</style>
<body>
    <p class="red size">222</p>
    <div class="red">这个标签文字要变红</div>
</body>

1.4id选择器

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

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

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

1.5通配符选择器

结构：*{css属性名:属性值;}

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

注意点：

开发中使用极少，只会在极特殊情况下才会用到
在小页面中可能会用于去除标签默认的margin和padding（后续讲解）

三、字体和文本样式

1.1字体大小

属性名：font-size

取值：数字+px

注意点：

谷歌浏览器默认文字大小是16px
单位需要设置否则无效

1.2字体粗细

属性名：font-weight

取值：

关键字：

正常	normal
加粗	bold

纯数字：100~900的整百数：

正常	400
加粗	700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常，加粗两种取值使用最多。

1.3字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

1.4字体系列 font-family

属性名：font-family

常见取值：具体字体1,具体字体2,具体字体3,…字体系列

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、斜体等…
字体系列：sans-serif、serif、monospace等…

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

1.5常见字体系列（了解）

无衬线字体（sans-serif）

特点：文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见该系列字体：黑体、Arial

衬线字体（serif）

特点：文字笔画粗细不均，并且首尾有笔锋装饰
场景：报刊书籍中应用广泛
常见该系列字体：宋体、Times New Roman

等宽字体（monospace）

特点：每个字母或文字的宽度相等
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见该系列字体：Consolas、fira code

1.6样式的层叠问题

问题：

给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

结果：

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

TIP：

CSS（Cascading style sheets）层叠样式表
所谓的层叠即加的意思，表示样式可以一层一层的层叠覆盖

1.7字体font相关属性的连写

属性名：font（复合属性）

取值：

font:style weight size family

省略要求：

只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写的形式

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

p{
	/*
		font-size:;
		font-style:;
		font-weight:;
		font-family:;
	*/
	font:italic 700 66px 宋体;
	/*一个属性冒号后面书写多个值的写法--复合属性*/
}

1.8文本缩进

属性名：text-indent

取值：

数字+px
数字+em（推荐：1em=当前标签的font-size的大小）
em：一个字的大小

1.9文本水平对齐方式

属性名：text-align

取值：

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

text-align:left;
text-align:right;
text-align:center;

1.10水平居中方法总结text-align:center

text-align：center能让哪些元素水平居中?

文本
span标签、a标签
input标签、img标签

注意点：

如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

2.1文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

注意点：

开发中会使用text-decoration:none;清除a标签默认的下划线

3.1行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字+px
倍数（当前标签font-size的倍数）

应用：

让单行文本垂直居中可以设置line-height：文字父元素高度
网页精准布局时，会设置line-height:1可以取消上下间距

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family;

p{
    line-height:1.5;
    font:italic 700 66px/2 宋体;
}

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

属性名：

如：字体颜色：color
如：背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow…
rgb表示法1	红蓝绿三原色，每项取值范围0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)…
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0-1	rgba(255,255,255,0,5)、rgba(255,0,0,0,3)…
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#e92322，简写：#000、#f00