CSS（美化页面）

遗憾终释怀

于 2024-08-08 01:19:55 发布

阅读量82

点赞数 2

分类专栏：前端文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/2202_75472383/article/details/141004522

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS简介

定义：

CSS是层叠样式表的简称（CSS样式表或连级样式表）

价值：

由HTML专注做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）分离

结构：

<style>

选择器

{

属性：值；（冒号分离属性与属性值，分号结束）

}

</style>

风格：

格式：

1.展开式

2.紧凑式

大小写：

一般小写

空格规范：

1.属性值前面，冒号后面，保留一个空格

2.选择器（标签）和大括号中间保留一个空格

CSS引入方式：

1.行内样式表（行内式）

在标签内style="属性：属性值;"，适用于简单的样式

2.内部样式表（嵌入式）

将CSS内容放在style标签中

一般放于head标签中

3.外部样式表（链接式）

将CSS内容放于CSS文件

使用方法：

1.新建文件，后缀名为CSS，文件里面只有样式，没有标签，在head中通过<style>@import url(css.css);</style>引入css样式

2.通过在head中添加<link rel="stylesheet" href="CSS文件路径" type="text/css">引入样式

// 在js中可以直接使用元素.cssText=""设置某元素的样式

CSS基础选择器

作用：

选择标签用的

类型：

基础选择器（由单个选择器组成的，包括标签选择器（标签名作为选择器），类选择器，id选择器，通配符选择器）：

标签选择器：

优点是可以选择页面中同类型的标签统一设置样式

缺点是不能设计差异化样式，只能选择全部的当前标签

类选择器：

差异化选择不同的标签，单独选一个或几个标签可以使用

语法结构：

<style>

.类名 {

属性1: 属性值1；

}

</style>

<标签名 class="类名类名">内容</标签名>

id选择器：

<style>

#id {

属性1：属性值1；

}

</style>

<标签名 id="id名">内容</标签名>

如果需要用到多类名，在原有的内容中class属性值加上类名，与原有的类名用空格隔开，可使用无数次，但是id选择器只能调用一次，一次性的。

属性选择器

通配符选择器：

改所有的样式

* {

属性:属性值;

}

复合选择器：

1.后代选择器：元素1 元素2{}

属性：

静态效果：

body中可以增加height:100%,属性，作用是撑满全屏
body中可以增加background:颜色 url(img/地址) center center 作用设置背景图片
body增加background时，图片未撑满全屏时，可以增加代码background-size:cover使其撑满全屏

border-radius 属性值：像素作用：给长方形的按钮增加圆角样式
@import规定外部格式

伪类：

必须按照“link、visited、focus、hover、active”的顺序进行

:link 定义元素未访问时的样式（该页面被加载完成后的颜色，初始颜色）

外部CSS也是通过link引入，格式为

:visited 定义元素访问后的样式（鼠标点击后显示的颜色）

:focus 主要用于文本框输入时（鼠标松开时显示的颜色）

:hover 定义鼠标经过元素时的样式（鼠标在内容上悬停时显示的颜色）

:active 定义鼠标单击激活时的样式（鼠标按下还未松开时的样式）

超链接伪类

必须按照“link、visited、hover、active”的顺序进行

a:link 定义a元素未访问时的样式

a:visited 定义a元素访问后的样式

a:hover 定义鼠标经过a元素时的样式

a:active 定义鼠标单击激活时的样式

字体属性

（1）字体样式：font-style

normal 不倾斜

italic 倾斜

（2）字体粗细：font-weight （只能是100的整数，不带px，可以使用数字表示粗细，也可以使用单词表示）

normal（400）默认值不加粗；bold（700）粗体字符；bolder 更粗字符；lighter：更细字符

（3）字体大小：font-size

（4）字体样式：font-family

格式为：

font_family:字体1，字体2，···；（游览器会自动从第一个字体开始选择，因为有的游览器不支持某些字体或者电脑没有安装，注意：当某个字体由多个单词组成时，尽量用引号把他们包含在一起）

（5）行高

line-height（使文本文字垂直居中可以让其等于行高）

(6）设置英文的每个首字母大写：

text-transform: capitalize;

复合简写：

font: style值 weight值 size值或line-height值 family值

文本属性

（1）文本颜色：color：RGB

（2）文本水平对齐方式：text-align （left（默认值）、center 、right）

（3）文本装饰：text-decoration （默认、倾斜、删除···）

underline 下划线.（常用）
none 表示没有，可以给 a 标签去掉下划线
overline 上划线（不常用）
line-through 删除线（不常用）

（4）文本缩进：text-indent （px、em）

（5）行高：line-height （水平居中：text-align；垂直居中：line-height 行间距=上间距+下间距+文本高度）

line-height 行高=字体大小+行间距

文本之间的距离：

letter-spacing:像素值;

该原生色：（可以更改默认的颜色，如表单中的选择框以及其他选择带进度条的）

accent-color:颜色;

背景属性

（1）背景颜色：background-color:（默认值为： transparent 透明的）

（2）背景图片：background-image: url(图片地址); （便于控制位置） linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 url中可以不加引号

（3）背景平铺：background-repeat: [平铺方式]（repeat: 平铺—重复铺满、no-repeat: 不平铺—只显示一张图片、repeat-x: 水平平铺—沿着x轴平铺、repeat-y: 垂直平铺—沿着y轴平铺）

（4）背景位置（起始位置）：background-position: x y （top, left, right, bottom, center）

（5）背景尺寸：background-size: length|percentage|cover|contain;（可以通过px的方式来直接设置背景的宽度和高度，cover和cotain都能让背景图自适应这里的元素大小，不同的是cover不会让元素漏出背景色，使图像完全覆盖背景区域，而cotain可能会漏出一部分背景色，把图片拉伸为元素大小就可以了，保证背景图始终在元素之内）

（6）背景图像固定：background-attachment: ; （scroll(默认：随对象内容滚动)、fixed(固定)）

复合简写：

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置; （一般没有顺序）

（7）背景颜色半透明：background:rgba(0,0,0,0.3); (最后一个参数为alpha，透明度，取值范围为0~1，可以简写为 .数字 )

CSS三大特性

1.层叠性

就近原则，有冲突的样式就会被覆盖，没有冲突的不会被覆盖

2.继承性

3.优先级

!important （无穷大） > style="" （1,0,0,0） >ID（0,1,0,0） > 类与伪类（0,0,1,0） >元素（0,0,01） >继承或*（0,0,0,0）

权重可以叠加

盒子模型

边框

border：粗细样式颜色

样式的属性值：solid（直线）、dotted（间隔圆点）、dashed（虚线）、double（双线）

边框分别设置的方法：

1.分别设置：

border-top:粗细样式颜色;

border-right:粗细样式颜色;

border-bottom:粗细样式颜色;

border-left:粗细样式颜色;

2.复合设置：

（1）顺序为：上右下左

border-width: 属性值属性值属性值属性值;

border-style:属性值属性值属性值属性值;

border-color:属性值属性值属性值属性值;

（2）顺序为：上下左右

border-width: 属性值属性值;

border-style:属性值属性值;

border-color:属性值属性值;

表格的细线边框：

border-collapse:collapse; 表示邻边框合并

圆角边框

border-radius: length; （数值可以为数值px或者为百分比）

用半径为length的圆去与盒子内部相切，将外部去掉，即圆角

分开写四个数值分别代表左上、右上、右下、左下

也可以写成：

border-top-left-radius: 数值; 左上

border-top-right-radius: 数值; 右上

border-bottom-right-ridius: 数值; 右下

border-bottom-left-ridius: 数值; 左下

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影，默认为outset不需要写

文字阴影

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

内边距 padding

设置边框与内容的距离，我们用padding，表示内边距，和border一样，有上下左右

左边距padding-left:数值；

右边距:padding-right:数值；

上边距:padding-top:数值；

下边距:padding-bottom:数值；

复合写法

padding:一个值为上下左右,两个值为上下、左右,三个值表示为上、左右、下,四个值为上、右、下、左(顺)

给盒子一个内边距可以使内容到边距的距离相等，即：padding会改变盒子的大小

//元素的宽/高：border+padding+width

//元素空间的宽/高：border+padding+margin+width

//内容的宽/高：width/height

外边距 margin

设置边框与边框的距离，我们用margin，表示外边距，和border一样，有上下左右

auto:设置了宽度的盒子居中左右。

左边距margin-left:数值；

右边距:margin-right:数值；

上边距:margin-top:数值;

下边距:margin-bottom:数值;

1、margin: 0px(上) 0px(右) 0px(下) 0px(左)；

2、margin:0px(上) 0px(左右) 0px(下)；

3、margin:0px(上下边距) 0px(左右边距)；

4、margin:0px(上下左右边距都是0px)；

margin:一个值为上下左右,两个值为上下、左右,三个值表示为上、左右、下,四个值为上、右、下、左(顺)

塌陷问题：

如果父元素和子元素同时有auto，那么父元素会执行相对较大的外边距的值

想要让父元素和子元素隔开：

1.给父元素定义上边框

2.给父元素定义上内边距

3.给父元素添加overflow:hidden

清除盒子的内外边距（第一行）

* {

padding: 0; /*清除内边距*/

margin: 0; /*清除外边距*/

}

清除列表中的小圆点：

list-style: none;

布局方式：

1.标准流

2.浮动：

浮动（行内块）：

意义：可以让多个块级元素横向排列

语法：float:属性值;

属性值为：left()、right()、

如果前面有一个浮动那么第二个加浮动会移动到前一个旁边

一般情况下，浮动元素在父级标准流里面，

清除浮动（闭合浮动）：

四种方法：

1.额外标签法也称为隔墙法，是W3C推荐的做法，添加块级元素标签，在块级元素中添加属性 clear:属性值;

属性值为：left（清除左侧浮动的影响）、right（清除右侧浮动的影响）、both（清除两侧浮动的影响）

2.父级添加overflow属性，属性值有：hidden、auto、scroll

3.父级添加after伪元素

4.父级添加双伪元素

属性书写顺序：

1.布局定位属性

2.自身属性

3.文本属性

4.其他属性

3.定位（固定某一个位置）position：

静态定位：

static

默认定位方式，无定位

固定定位（重要）：

fixed

滚动页面时，固定于浏览器某个位置（以浏览器的可视窗口为基准），不随着滚动条的滚动而滚动

脱离标准流，即不占有原先位置

//与父元素无关

小技巧：固定在版心附近位置，算法：先放置中心，再用margin移动版心盒子的一半

绝对定位：

absolute

position:absolute;top:数值1px;left:数值2 px;

表示在距离顶部数值1 px，左边数值2 px的位置显示

相对于父级对齐（父级需要设置定位为非静态定位），如果没有父级或者父级没有设置定位，那么直接以浏览器为准，以带有定位的最近的带定位的父级为参考位

把外部的div设置为相对定位（relative），内部的div设置为绝对定位（absolute）

其格式和绝对定位一样，因此亦可以说内部相对外部绝对定位

特点：脱标；绝对定位不占有原先的位置

相对定位（重要）：

relative

与原位置为参照点，但是原位置继续保留，后面的元素依旧按照标准流排列

粘性定位：

sticky

特点：1.以浏览器的可视窗口为基准2.占有原先的位置3.必须添加top、right、bottom、left、才有效果

重叠样式

1、z-index 重叠顺序属性数值越大越靠上（只有定位盒子才有该属性）
2、position:relative和position:absolute设置对象属性为可定位（可重叠）
3、left right top bottom绝对定位具体位置设置

//浮动的元素只会压住下面的盒子，不会压住下面的文字（产生的意义原本是让文字环绕图片周围，现常用布局）

//绝对定位两者都会压住

元素的显示与隐藏

display属性：

属性值：

none（隐藏对象）隐藏后不在显示，不占有原位置

block（转换成块级元素或显示元素）

visibility属性：

hidden：隐藏对象，占有原有位置

visible:

overflow属性（对溢出的部分进行显示或隐藏）：

visible：显示内容

hidden：隐藏溢出内容

scroll：溢出的部分显示滚动条（溢出或者不溢出都显示滚动条）

auto：在需要的时候添加滚动条（没有超出不会显示滚动条）

opacity

将其设置为0

CSS精灵图：

目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，也称：CSS精灵技术

方法：

把多个小图片集中在一张图片

sprites

使用方法

使用精灵图中的定位，将图片移动至盒子范围，使显示的是精灵图中的某一位置

使用background-position:数值数值;（基本为负值）

字体图标（iconfont）：

优点：

展示图标，本质属于字体
轻级性：一个图标字体比一系列的图像要小
灵活性：本质是文字，可以随意改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有浏览器

注意：字体图标不能替代精灵技术，只是对图标部分技术的提升和优化

网上下载地址：

SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

下载方法：

进入网站之后，点击右上角的icomoon app 进入选取图标页面（如果该页面没有你想要的图标，下滑至最底端，选择add icons from library进入新的选择界面）
选择完毕后，点击右下角的Generate Font 即生成文字的压缩包
再按download下载至电脑

iconfont-阿里巴巴矢量图标库

使用字体图标：

下载完毕后，把下载包里面的fonts文件夹放入页面的根目录下
字体声明，在CSS中将声明部分写入（下载的文件夹中含有CSS文件夹，从里面复制即可）
在下载后的文件HTML中复制，使用后对相应的文字样式修改为声明的样式即可

//或者使用前面的字符串，前面加/转义即可

追加字体文件

在网站中选取import icons 按钮，再将原有的后缀名为.json的文件上传，之后按原操作即可

CSS三角制作

制作方法：

将一个盒子的宽高设置为0，然后设置边框，想要朝哪边的三角，只设置朝向对面一个有边框，其余三个透明即可

用户样式：

鼠标样式：

鼠标样式

cursor:url（图片地址）,属性值;

这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”，我们可以使用一些小软件来制作

这个“属性值”一般只会用到3个，分别是default、pointer和text

还有其他属性值为：

表单样式：

轮廓线（输入框等等点击后会有轮廓线）：

outline：

改为none或0时，可以取消默认的蓝色边框

文本域：

resize:;

改为none，取消拖动放大

vertical-align:

用处：对行内元素或行内块元素进行垂直对齐

属性值：

值	说明
baseline	默认，元素放在父元素的基线上
top	把元素顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素底端与行中的最低的元素顶端对齐

解决图片底部默认空白缝隙问题：

给图片添加vertical-align:middle | top | bottom 等
把图片转换成块级元素display:block;

溢出的文字用省略号显示：

1.单行文本省略号显示：

条件：1.将文字强制一行显示，white-space: nowrap;（默认为normal自动换行）2.超出的部分隐藏，overflow:hidden;3.文字用省略号代替超出的部分，text-overflow: ellipsis;

2.多行文本溢出省略号显示（兼容差）

CSS3 新增特性

新增选择器（权重为0,0,1,0）

属性选择器（可以不借助类或者id选择器，其中val可以没有引号，权重等于E选择器加属性选择器）

选择符	简介
E[att]	选择具有att属性的E元素
E[att = "val"]	选择具有att属性且att等于val的E元素
E[att ^= "val"]	选择具有att属性且以val开头的E元素
E[att$ = "val"]	选择具有att属性且以val结尾的E元素
E[att *= "val"]	选择具有att属性且含有val的E元素

结构伪类选择器

选择器	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中第n个子元素E（其中n可以是数字、关键字偶数even.基数odd、公式如果是公式，那么他是从0开始计算的超出元素个数的数都会被忽略，且公式里面的自变量必须是n）
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个（其中n可以是数字、关键字偶数even.基数odd、公式如果是公式，那么他是从0开始计算的超出元素个数的数都会被忽略，且公式里面的自变量必须是n）
上三和下三的区别：child会把所有的子元素都排列序号，执行前三会先执行child(n)，再看前面，如果执行child选中的子元素和前面选中的子元素不一样那么没有相应的变化，下三先执行前面后执行后面

如：

<p></p>

</section>

如果使用 section div:first-child （他会先执行后面，把所有的子元素排列序号，找到第一个子元素为p，再配对前面，前面为div与p不配对，则不会有相应的变化）

如果使用 section div:first-of-type （他会先执行前面，把所有的div排列序号，再执行后面，那么选中的则是第一个div）

伪元素选择器（可以利用CSS创建HTML标签，从而简化HTML的结构）

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称为伪元素
语法：element::before {}
before和after必须要有content属性，如果没有内容则等于""（空）即可
before在父元素内容的前面创建元素，after在父元素内容的后面创建元素
伪元素选择器和标签选择器一样，权重为0001

伪元素清除浮动

单伪元素清除：

.clearfix::after {

content: ""; /*伪元素必写的属性*/

display:block; /*插入元素必须是块级*/

height: 0; /*不要看见这个元素*/

clear: both; /*核心代码，清除浮动*/

visibility: hidden; /*不要看见这个元素*/

}

双伪元素清除：

.clearfix::before,.clearfix::after {

content: "";

display: table; /*转换成块级元素并在一行显示*/

}

.clearfix::after {

clear: both;

}

CSS3盒子模型

box-sizing指定盒子模型（样式）

值1：content-box

盒子大小为：width+padding+border（以前默认的）（如果加了边框或者内外边距会撑大原盒子）

值2：border-box

盒子大小为width（如果加了边框或者内外边距不会撑大原盒子，前提是padding和border 不会超过width）

其他

图片变模糊：

滤镜：

filter: 函数(); 如：filter:blur(5px); blur 模糊处理数值越大越模糊

盒子大小计算：

calc()

如：width:calc(100%-25PX); 比父盒子小25像素

CSS3过渡特性

过渡动画：由一个状态到另一个状态

transition: 要过渡的属性花费时间运动曲线何时开始;

属性值	说明
要过渡的属性	想要变化的CSS属性，宽度高度，背景颜色，内外边距等都可以，如果需要全部则写all即可
花费时间	单位是秒（必须写单位），如： 0.5s
运动曲线	默认是ease（可以省略），ease(越来越慢)、linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)
何时开始	单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）

如果其他的属性也需要更改，那么重复写transition会发生冲突，应写到同一个transition中，用逗号隔开（以此类推），或者直接写all

如：

transition: 要过渡的属性1 花费时间1 运动曲线1 何时开始1,要过渡的属性2 花费时间2 运动曲线2 何时开始2;

2D转换transform（二维坐标系）

translate（移动）:

定义：

改变位置，类似定位

语法格式：

transform: translate(x,y);

或者分开写：

transform: translateX(n);

transform: translateY(n);

优点：

不会影响到其他盒子的位置
tanslate中的百分比是相对于自身元素的
对行内标签没有效果

//移动盒子的位置的方法：定位、外边距、2D转换

rotate（旋转）:

定义：

旋转自身

语法格式：

transform: rotate(度数); 其中度数的单位是deg，意为度，角度为正时，顺时针转，为负时，逆时针转。

//设置旋转的中心点

transform-origin: x y;

x y用空格隔开
默认为宽度和高度的50%（中心点）
其中xy可以设置为百分数、方位名词、像素

scale（缩放）:

定义：

放大和缩小

语法格式：

transform:scale(x,y);

x y 用逗号隔开
xy的值为数字，表示倍数，其中1,1为自身，即不变
同时等比例修改宽高可以简写成transform:scale(x);

优点：

不会影响其他盒子，而且缩放时是按中心点缩放

2D综合性写法：

中间用空格隔开即可，有顺序问题先旋转会改变坐标轴的方向，一般位移放置在最前面

动画

基本使用

定义动画

用keyframes定义动画（类似定义类选择器）

语法格式：

@keyframes 动画名称 {

0% {

原

}

100% {

后

}

- - 动画序列：0%为动画的开始，100%是动画的结束
  - 在@keyframes中规定某项CSS样式，就能创建当前样式改为新样式的效果
  - 动画是使元素从一种样式逐渐变成另一种样式的一种效果，可以改变任意多样式任意多次数
  - 用百分比来规定变化发生的时间，或用关键字"from"和"to"，等同于0%和100%

使用（调用）动画

1. 调用的格式（在将要使用动画的元素添加，如果有多个动画用逗号隔开即可）

animation-name:动画名称; //调用动画

animation-duration:持续时间;// 持续时间（单位为秒）

动画的常用属性：

属性	描述
@keyfreams	规定动画
animation	所有动画的简写属性，除了animation-play-state属性
animation-name	规定调用的动画名称（必须属性）
animation-duration	规定动画一个周期完成所花费的时间默认是0；（单位为秒或毫秒，必须属性）
animation-timing-function	规定动画的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，无数次为infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal 不逆向，逆向播放为：alternate
animation-play-state	规定动画是否正在运行或停止，默认是running正在运行，停止为pause ，一般与事件搭配使用
animation-fill-mode	规定动画结束后的状态，默认为backwards回到起始位置，保持当前位置为：forwards

动画简写

语法格式为：

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束状态

即按照：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode 的顺序进行

简写属性里面不包含animation-play-state
速度曲线的值：ease（可以省略），ease(低速开始，变快，结束前变慢)、linear(匀速)、ease-in(慢块)、ease-out(快慢)、ease-in-out(慢快慢) 、step(n) 可以使动画分成n等份，不会拖泥带水就的显示中间的部分，只会显示份数停止的部位跳跃式（step为函数）