前端之CSS——网页的皮肤！！

目录

一、CSS简单介绍

二、css内容

2.1        css的编写方式

2.2        css选择器

2.3        样式属性

2.4        css包围盒

2.5        css中的display

2.6        css中的定位

2.7        css中的浮动与清除

2.7        弹性容器

2.8        字体图标

2.9        渐变与动画

---

一、CSS简单介绍

CSS（层叠样式表）是一种用于描述网页样式和外观的样式表语言。它与HTML结合使用，用于控制网页的布局、颜色、字体、大小和其他视觉方面的属性。CSS的设计目标是将样式与内容分离，使得网页的结构和样式可以独立管理和修改。

CSS基本上由一系列规则组成，每个规则由选择器（Selector）和一组声明（Declaration）组成。选择器用于选择HTML中的元素，而声明则定义了与选定元素相关的样式属性和值。

二、css内容

2.1        css的编写方式

1、行内样式表，优先级最高。直接使用style属性写在标签中，只针对这一个标签。

2、内部样式表，在head标签中使用style标签包裹，针对当前HTML中所有满足条件的标签。

3、外部样式表，写在css文件中，通过link引入html中。可以被多个html文件引入使用。

一般先引入外部样式表，再编写内部样式表。

2.2        css选择器

1、四种基本选择器

（1）*        通配符选择器，可以选择所有标签

（2）标签名        标签选择器，匹配固定标签

（3）.类名        类名选择器，匹配所有拥有该类名的选择器

（4）#id        id选择器，匹配拥有id的标签

2、5种符号选择器

（1），        逗号左右满足一个即可被选择

（2）空格        子孙选择器

（3）>        子集选择器

（4）+        选择相邻的下一个

（5）~        选择下面多个

3、属性选择器

（1）[attr]        选择拥有该属性的标签

（2）[attr=值]        拥有属性并且值等于

（3）[attr^=值]        拥有属性并且以值为开头

（4）[attr$=值]        拥有属性并且以值为结尾

4、伪类选择器，在正常的选择器后面加：使用

（1）：hover        鼠标划入

（2）：active        鼠标点下

（3）：first-of-type        第一个

（4）:last-of-type        最后一个

（5）:nth-of-type(n)        正数第n个

（6）:nth-last-of-type(n)        倒数第n个

（7）odd  奇数      even 偶数

2.3        样式属性

1、字体相关font-

（1）font-family，字体类型，多个字体使用逗号分隔

（2）font-size，字体大小，默认16px

（3）font-weight，字体粗细，400为normal，700为bold

（4）font-style，italic斜体

2、文本相关text

（1）text-transform，capitalize首字母大写；lowercase全小写；uppercase全大写

（2）text-align，默认left居左，center居中，right居右

（3）text-ident缩进，2em表示缩进两个字符

（4）text-decoration，none去除下划线

3、背景相关background

（1）background-color，背景色

（2）background-image，背景图，优先级高

（3）background-repeat，重复，no-repeat不重复

（4）background-position，位置，left、right、center、top、bottom，也可以直接设置100px，500px

（5）background-size，尺寸，100%，contain长边全部展示，短边补空；cover短边完全展示，长边隐藏

4、列表相关list-style

（1）list-style-type，circle空心圆；disc实心圆；square方块；lower-alpha小写字母；lower-roman罗马数字小写

（2）list-style-position，编号位置，outside外侧；inside内侧

（3）list-style-image，图片，url（）引入

（4）list-style：none，去除所有样式

2.4        css包围盒

1、border上下左右，有属性width、style、color，一般写为：1px solid red

2、padding，内补，只有宽度，使用自己的背景色

3、margin，外部，只有宽度，使用父元素背景色，一般写为margin：0 auto

表示上下为0，左右自动居中

4、padding与margin支持四种写法，有顺序区分

（1）一个数值，表示上下左右都一样

（2）二个数值，上下、左右

（3）三个数值，上、左右、下

（4）四个数值，上、右、下、左

5、更改包围盒计算方式，border-box，

2.5        css中的display

1、inline 行内元素，不可以给宽高

2、block 块元素，占一行，可以给宽高

3、inline-block 行内块，多个块放在一行，可以给宽高

4、none 隐藏，不显示

2.6        css中的定位

1、static 静态定位，从左到右，从上向下

2、relative，相对定位，相对于文档流静态定位发生偏移，占用文档位置，可以top、left等约束

3、absolute 绝对定位，参考外层第一个非static标签发生偏移，不占用文档位置

4、fixed 固定定位，参考浏览器位置

5、sticky 粘性定位，没有达到粘性位置时相当于静态定位，达到粘性位置时相当于固定定位

2.7        css中的浮动与清除

1、float 浮动，分为left和right

（1）left 左浮动，靠左排列，排列在上一个左浮动的右侧

（2）right右浮动，靠右排列，排列在上一个右浮动的右侧

2、clear清除浮动

（1）left，左边不能有左浮动

（2）right，右边不能有右浮动

（3）both，清除左右浮动，后续元素不会被浮动元素覆盖

2.7        弹性容器

display：flex

常用容器属性：

1、flex-direction：row / row-reverse / column / column-reverse

2、flex-wrap：wrap / no-wrap / wrap-reverse

3、justify-content：

        flex-start主轴开始位置；

        flex-end主轴结束位置；

        center主轴居中；

        space-between中间有空白；

        space-around两边中间都有空白

4、align-items：

        flex-start交叉轴起始位置

        flex-end交叉轴结束

        center居中

5、align-content：

        flex-start交叉轴起始位置

        flex-end交叉轴结束

        center居中

2.8        字体图标

自定义字体：@font-size：font-family：name，src：url（）

！imortant表示最高优先级

2.9        渐变与动画

transition：all 0.5s  linear

动画：animation，@keyframes name {  0%{}  100%{}}

animation: name 0.5s linear infinite

transform：rotate（）；translate（）；scale（）