前端学习- CSS1

1 CSS简介

CSS是层叠样式表的简称。主要用于设置HTML的文本内容、样式、图片外形样式、版和外观显示样式。即，CSS是HTML的美容师。

格式：CSS由选择器以及一条和多条声明组成。选择器{样式}

• 注1：CSS写在style里，style写在head里。
• 注2：属性和属性值以键值对的形式出现；
• 注3：每条声明后用分号结尾。

1.1 CSS代码风格

1）样式格式书写

展开型格式：每个属性放一行。

2）样式大小写

一般样式采用小写字母。

3）空格规范

• 属性值前面，冒号后面保留一个空格；
• 选择器和花括号之间保留空格；

2 CSS基础选择器

2.1  选择器的作用

根据不同的需求把不同的标签选出来。

2.2 选择器分类

选择器分为基础选择器和复合选择器。

2.3 基础选择器

基础选择器包括标签选择器、类选择器、id选择器和通配符选择器。

1）标签选择器

用标签名当作选择器，把所有的同类型标签都选出来，不能差异化只选择某一个标签。。例如：p、div 。

2）类选择器（样式点定义，结构类调用，一个或多个，开发最常用）

可以单独选择一个或某几个标签，实现差异化样式。

格式：.类名{样式表}  在想改变样式的地方，写class="类名"。

注意❗️

• 通过点定义的类名用户自定义。
• 若遇到长名称可以使用中横线来命名
• 不要使用纯数字、中文等命名，尽量用英文字母表示
• 命名要有意义
• 命名规范可见《Web 前端开发规范手册》

特殊多类名

在标签class属性中有多个类名，类名之间用空格分隔。把公共样式提取出来，避免冗余。

例如：class="box red" box是一个类名，red是一个类名

3）id 选择器（样式#定义，结构id调用，只能调用一次，别人切勿使用）

以#定义，调用时通过id。

#类名{}          id="类名"

id选择器和类选择器的区别：

• 类选择器好比人的名字，人和名字之间是多对多的关系，类选择器和标签之间也是多对多的关系。
• id选择器好比人的身份证号，人和身份证号码是一对一的关系，id选择器和标签之间也是一对一的关系。
• 使用次数，id选择器只能用一次。
• 类选择器在修改样式时使用最多，id选择器一般用于页面唯一元素，和js搭配使用。

4）通配符选择器

使用*定义，选择页面中所有的标签。

注意❗️

• 通配符选择器不需要调用；
• 特殊情况下使用，例如：清除所有元素的内外边距。

3 CSS 字体属性

3.1 字体系列

font-family: "Microsoft Yahei";

注意❗️

• 也可以使用中文微软雅黑，但是建议英文，兼容性更好；
• 可以写多个字体，每个字体之间用英文逗号分隔，实现时自左向右找；
• 若有多个单词的英文字体名字，将该字体用引号括起来；
• 尽量使用系统默认字体；
• 常用字体：body {font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB"}。

3.2 字体大小

fong-size: 20px；

注意❗️

• 不同浏览器的默认文字大小不一样，所以建议设置默认文字大小；
• 标题标签比较特殊，需要单独设置文字大小；
• 可以给body指定整个页面（除标题h1234外）文字大小。

3.3 字体粗细

font-weight: normal(400)/bold(700)/bolder(更粗)/lighter(更细)/number(100-900);

注意❗️

• 建议使用数字加粗，数字后不用跟单位。例如：font-wight=700;
• 数字700等价于bold;数字400相当于normal 。

3.4 文字样式

font-style: normal(正常)/italic(斜体)

注意❗️

• 一般不使用倾斜字体
• 可以将斜体标签（em，i）文字改为不倾斜

3.5 字体符合属性（节约代码）

font：font-style font-weight font-size/line-height font-family；

注意❗️

• font里的顺序不能更改，各个属性之间用空格隔开；
• line-height是行高。自左向右以依次是：斜体、粗细、大小/行高、字体；
• 不需要的属性可以省略，但必须保留font-size和font-family，否则font属性不起作用。

4 CSS 文本属性

4.1 文本颜色

color：red/#FF0000/rgb(255，255，255)

注意❗️

• 平时使用十六进制比较常见。

4.2 对齐文本

text-align：left/center/right；

注意❗️

• 默认左对齐，只能设置水平对齐方式。

4.3 装饰文本

text- decoration：none；underline；overline；line-through；

注意❗️

• 自左向右依次是无、下划线、上划线、删除线
• 重点是如何增加、删除下划线

4.4 文本缩进

text-indent：数值px；

注意❗️

• 数值为负，往左边缩进；数值为正，往右缩进。
• em单位：相对单位，当前元素1个文字大小的距离。设置text-indent=2em即是缩进两字符。

4.5 行间距

line-height：数值px；

注意❗️

• 行间距包含了上间距、文字高度和下间距。
• 测量行高可以用FScapture，从上一行最下行量到下一行的最下行。

5 CSS引入方式

5.1 内部样式表

CSS写到HTML页面的style标签里。

注意❗️

• style理论可以放在HTML的任何位置，但是一般放在head里
• 可以方便控制整个页面的样式设置

5.2 行内样式表

样式简单时，可以直接在标签内部写style="…"。

注意❗️

• style其实就是标签的属性；
• 在双引号之间，写法要符合css规范；
• 可以控制当前标签的样式。

5.3 外部样式表

适用于样式表很多的情况。将样式单独放到CSS文件中，之后把CSS样式引入HTML页面中。

<link rel="stylesheet" href="文件路径">

注意❗️

• link写在head里。

6 Emmet语法

6.1 快速生成HTML 结构语法

1. tab键：自动将标签补充完整。
2. * 键：快速生成多个同类型标签，eg. div*10+tab键。
3. > 号：父子级关系可以用，eg. ul>li+tab键，可以快速生成ul包含li的结构。
4. + 号：兄弟关系，eg. div+p+tab键。
5. .类名或者#id名：快速生成带有类或id的标签。eg.“标签.类名”或者“标签#id名”+tab键。
6. $号：自增符号。若想要生成有顺序的类名，可以用“标签.类名$*数量”+tab键。eg. p.demo$*5+tab，会生成5个class分别等于demo12345的p标签。
7. {} ：生成带有默认内容的标签。eg. div{这是默认内容}。
8. {$} ：生成带有默认自增内容的标签。eg. div{$}*5。

6.2 快速生成CSS语法

用首字母缩写：例如：w100+tab，就等于width= 100px。

6.3 格式化代码

VS code快捷键：shift+alt+f。一步将文档中所有代码格式化。

注意❗️（只需要设置一次）

如果想保存就直接格式化，可以进行如下设置。VS code：文件-首选项-设置-搜索emmet.include-setting.josn-用户-添加以下语句：

"editor.formatOnType":true,

"editor.formatOnSave":true

7 CSS复合选择器

符合选择器就是将基础选择器组合而成，包括后代选择器、子选择器、并集选择器、伪类选择器等。

7.1 后代选择器（重要）

选择父元素里面的子元素，也称为包括选择器。写法：父标签写在前面，子标签写在后面，中间用空格分隔。

语法

元素1 元素2 {样式说明}

注意❗️

• 元素1和元素2中间用空格隔开。
• 元素1是父级，元素2是子级。元素2可以是后代的后代。
• 元素1和元素2可以是任意基础选择器。

7.2 子选择器（重要）

只能选择作为元素1的最近一级子元素。语法如下：

元素1>元素2{样式声明}

注意❗️

• 元素1和元素2用大于号>隔开
• 元素2必须是亲儿子，后代的后代不行。
• 验证是嫡长子还是所有儿子都行？

7.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。语法如下：

元素1，

元素2{样式声明}

注意❗️

• 元素1和元素2中间用，分隔；
• 元素1和元素2可以是任何形式的元素；
• 并集选择器一般竖着写，最后一个选择器不用加逗号。

7.4 伪类选择器

1）链接伪类选择器

a:link：还没访问过的链接

a:visited：浏览过的链接

a:hover：经过的链接

a:active：鼠标选中，还没有放开时

注意❗️

• 为了确保能够生效，建议按照LVHA的顺序来写，记忆法love hate；
• 实际工作中，要给链接指定样式必须单独指定；
• 实际开发中，往往指定link和hover就可以了。

2）:focus伪类选择器

选取获得焦点（光标）的表单元素，这个选择器主要针对表单元素。语法如下：

input：focus{样式列表}

8 元素显示模式

元素显示模式就是元素（标签）以什么方式显示。HTML元素一般分为块元素和行内元素。

8.1 块元素

常见的块元素有div、p、h1-h6、ul、ol、li等

1）特点：

1. 自己独占一行；
2. 可以设置宽度、高度和内外边距；
3. 宽度默认和父级一样宽；
4. 块元素是容器，里面可以放行内或块元素。

2）注意❗️

• 文字类标签（比如p、h1-h6）内不允许有块元素。

8.2 行内元素（内联元素）

常见的行内元素有：span、a、strong等。

1）特点

1. 一行可以放多个行内元素；
2. 无法直接设置宽度和高度；
3. 默认宽度就是本身内容的宽度；
4. 行内元素只能容纳文本或其他行内元素。

2）注意❗️

• a标签里不允许放a；
• a标签里可以放块元素，但是给a转换一下最安全。

8.3 行内块元素

常见的行内块元素有img、input、td，它们同时具有块元素和行内元素的特点。

1）特点：

1. 一行可以放多个行内块元素（行内元素特点）；
2. 默认宽度是元素内容的宽度（行内元素特点）；
3. 可以设置宽度、高度和内外边距（块元素特点）。

8.4 元素显示模式转换

1）转换为块元素

display：block；

2）转换为行内元素

display：inline；

3）转换为行内块元素

display：inline-block；

8.5 文字垂直居中

1）解决方案

将文字行高等于盒子高度，即line-height和height设置一样的值。

2）实现原理

行高=文字高度+上间距+下间距。如果行高小于盒子高度，上边距偏小，文字在盒子中偏上；如果行高大于盒子高度，上边距偏大，文字在盒子中偏下。

9 CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

9.1 背景颜色

background-color：transparent｜color

transparent：透明，默认为透明的。

color：自定义颜色，可以用十六进制、rgb、英文单词等。

9.2 背景图片

background-image表述元素的背景图像，实际开发中的logo、装饰性的小图片或者超大的背景图片都习惯用背景图片，非常便于控制位置。默认为none。

background-image：none｜url(url)；

9.3 背景平铺

background-repeat:repeat | no-repeat | repeat-x | repeat-y 

默认背景在横向和纵向一起平铺。页面元素既可以添加背景颜色，也可以添加背景图片。其中背景颜色会置于底层。

9.4 背景图片位置

background-position：x y；

参数代表x坐标和y坐标，可以使用方位名词或精确单位。

方位名词有：top,center,bottom,left,center,right。

1）参数为方位名词

• 参数的前后顺序改变无影响；
• 如果只给一个参数，另一参数默认为center。

2）参数为数值

• 第一个数值一定是x坐标，第二个数值一定是y坐标；
• 如果是给一个数值，则该值为x坐标，纵轴方向居中。

3）混合参数

• 第一个参数一定是x坐标，第二个参数一定为y坐标

9.5 背景图片固定（背景附着）

设置背景图片是否随着页面滚动，默认为滚动状态。

background-attachment：scroll｜fixed

9.6 背景图片复合属性

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

注意❗️

• 没有固定顺序上述顺序只是一般习惯约定的。
• 各个属性中间用空格隔开。

9.7 背景色半透明

background：rgba(0,0,0,0.3)；

注意❗️

• 前三个数值为rgb颜色，第四个数值控制透明度，取值为0-1，0为100%透明，1为100%不透明；
• 开发中经常会把第四个数值的0省略掉，例如0.3 省略为.3；
• 背景颜色半透明不会影响盒子里的内容；
• 这个属性对IE9+对浏览器才有效。

10 截图工具推荐-snipaste

常用快捷键：

1. f1 截图；
2. f3 桌面置顶；
3. 点击图片+alt 取色，shift 切换取色模式（rgb、十六进制等）；
4. esc取消图片显示。