CSS
Cascading Style Sheets 层叠样式表
用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。
CSS语法
样式名：样式值；
color:red;
font-size:20px;
选择器
用于选择页面中元素(标签)的工具。
id选择器
1.给标签添加id属性，对其命名
2.在style标签中通过**#id**名获取
通常用于选择某一个元素
<html>
<head>
<style>
#test{
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
class选择器
1.给标签添加class属性，对其命名
2.在style标签中通过**.class**名获取
通常用于选择一组元素
<html>
<head>
<style>
.test{
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
元素/html/标签选择器
直接通过标签名获取。
通常用于选择一组元素。
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
层次选择器
通过空格或>获取某个元素的子元素。
“元素A 元素B” 表示获取元素A下的所有元素B
"“元素A > 元素B” 表示获取元素A下的第一层元素B
<html>
<head>
<style>
#father div{
获取其中的所有子元素
}
#father > div{
获取其中的第一层子元素
}
</style>
</head>
<body>
<div id="father">
<div>
<div>使用>无法获取该div</div>
</div>
<div></div>
</div>
</body>
</html>
群组选择器
通过,同时选择多个元素
<html>
<head>
<style>
div,#mp,.mu{
}
</style>
</head>
<body>
<div ></div>
<p id="mp"></p>
<ul class="mu">
<li></li>
</ul>
</body>
</html>
将CSS写在哪里
1.写在标签的style属性中
style=“样式:值;样式:值;”
<body style="background-color:red;">
</body>
2.写在<style>标签中，通过选择器获取标签后控制样式
style标签通常放在head标签中
<html>
<head>
<style>
选择器{
样式:值;
样式:值;
}
/*获取页面中所有名为div的元素*/
div{
}
/*获取页面中class为test的元素*/
.test{
}
/*获取页面中id为test的元素*/
#test{
}
</style>
</head>
</html>
3.创建一个独立的.css文件，通过link标签引入
1.创建一个.css文件，将原本写在style标签中的内容保存在该文件中
2.在页面的head标签中，使用以下代码引入
<link rel="stylesheet" href="css文件路径">
CSS优先级
style属性==>style标签==>引入css文件。
如果某个元素同时拥有id、class以及style属性时。
优先级从高到低
style属性==>id选择器==>类选择器==>元素选择器
常用样式
尺寸
只能对块级元素设置尺寸。
如果要对行内元素设置尺寸，需要先将其改为块级元素。
| 样式名 | 作用 | 值 |
|---|---|---|
| width | 设置块级元素的宽度 | px像素或百分比或vw |
| height | 设置块级元素的高度 | px像素或百分比或vh |
设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。
设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。
如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。
背景background
| 样式名 | 作用 | 值 |
|---|---|---|
| background-color | 背景色 | 颜色的单词、十进制RGB、十六进制RGB |
| background-image | 背景图 | url(图片路径) |
| background-repeat | 背景重复 | 默认重复。 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复 |
| background-size | 背景尺寸 | 默认加载原图。 100%表示完整显示图片。 cover表示覆盖元素。 如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。 |
| background-position | 背景位置 | 可以同时设置x轴和y轴的距离。 如10px 20px表示向右移动10px，向下移动20px 也可以通过background-position-x或-y只移动具体轴 通过使用right left top bottom center设置指定方向 |
| background-attachment | 背景固定方式 | fixed表示固定背景，scroll或默认表示跟随滚动条移动 |
| background | 背景属性简写 | 可以同时设置图片路径、是否重复和图片位置，无关顺序。如 background:url(图片地址) no-repeat right top 表示图片不重复位于容器右上角 |
| background | 渐变函数 | linear-gradient(to left, #7a28c1, #a17fe0, #59C173) |
边框border
边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度
| 样式 | 作用 | 值 |
|---|---|---|
| border-style | 边框线型 | solid单线，double双线，dotted点线，dashed虚线 |
| border-width | 边框宽度 | 像素 |
| border-color | 边框颜色 | 颜色的三种写法 |
| border | 同时设置边框线型、宽度和颜色 | 1px solid red |
| border-方向-样式 | 某个方向的style或width或color。方向可以是left、right、top、bottom | border-bottom-color:red |
| border-方向 | 同时设置指定方向边框线型、宽度和颜色 | border-right:1px solid red; |
| border-上下-左右-radius | 设置某个方向为圆角 | |
| border-radius | 同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形 | |
| outline | 轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓 | |
| border-collapse | 合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。 | collapse |
字体font
| 样式名 | 作用 | 值 |
|---|---|---|
| font-size | 字体大小 | 像素。默认16px，最小12px |
| font-family | 字体字型 | 默认微软雅黑 |
| font-weight | 字体粗细 | lighter细，bolder粗 |
文本text
| 样式 | 作用 | 值 |
|---|---|---|
| color | 文本颜色 | 颜色的三种写法 |
| text-align | 文本对齐方式 | 默认left，right右对齐，center居中 |
| line-height | 行高 | 像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。 |
| letter-spacing | 字符间距 | 像素。 |
| text-indent | 首行缩进 | 像素。如果缩进2个字，默认设置为32px |
| text-shandow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。如gray 4px 4px 3px 表示向右下角移动4px，模糊3px |
| text-decoration | 文本修饰 | under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线 |
| word-break | 英文换行方式 | 默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。 |
列表list
| 样式名 | 作用 | 值 |
|---|---|---|
| list-style-type | 列表符号 | 通常用none去掉。 |
| list-style-image | 使用图片替换列表符号 | url(图片路径) |
| list-style-position | 列表符号位置 | 默认outside表示符号和文本分离。inside表示符号和文本绑定。 |
伪类
表示某个元素的某种状态。
用于对某些元素在不同的情况下呈现不同的效果。
如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
| a标签伪类 | 作用 |
|---|---|
| a:link | 未访问时 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标按住 |
| a:visited | 访问后 |
以上的:hover可以适用于很多标签，如div:hover。
但其余伪类只适用于a标签。
鼠标样式cursor
| 值 | 效果 |
|---|---|
| pointer | 光标呈现为指示链接的指针（一只手） |
| crosshair | 光标呈现为十字线。 |
| move | 此光标指示某对象可被移动。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
| progress | 载入 |
显示方式display
| 值 | |
|---|---|
| block | 将元素设置为块级元素，能设置尺寸，独占一行 |
| inline | 将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定 |
| inline-block | 将元素设置为行内块，能设置尺寸，占一行中的一部分 |
| none | 不显示，不保留自身位置，后续元素会顶替其位置 |
浮动float
让某个元素脱离原本的位置，朝某个方向对齐。
| 值 | 作用 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 清除浮动 |
float:left和display:inline-block的区别
相同点：都能让多个独占一行的块级元素位于同一行
display:inline-block
多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的一行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6ulkhSl-1671596656354)(F:\221001\前端\CSS.assets\image-20221207115233441.png)]
float:left
多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIR6Vfho-1671596656355)(F:\221001\前端\CSS.assets\image-20221207115258819.png)]
盒子模型
页面中的所有块级元素，都是一个“盒子”，每个“盒子”由元素自身、内边距padding、边框border、外边距margin组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSgFE4sT-1671596656355)(F:\221001\前端\CSS.assets\image-20221207141602649.png)]
内边距padding：边框与元素自身之间的距离
外边距margin：元素A的边框与元素B的边框之间的距离
| 盒子模型相关样式 | 作用 |
|---|---|
| padding | 内边距。一个参数表示同时设置4个方向，两个参数表示上下 左右；三个参数表示上 左右 下；四个参数表示上 右 下 左； |
| padding-方向 | 某个方向的内边距，方向可以是left、right、top、bottom |
| margin | 外边距。如果某个值设置为auto表示自动将所在容器剩余距离除以2 |
| margin-方向 | 某个方向的外边距 |
一个元素的所占位置是外边距+边框+内边距+元素自身的大小。
溢出overflow
当子元素超出父元素的范围时，称为溢出。通过overflow控制溢出部分的表现。
默认显示溢出部分，溢出部分不会影响后续元素。
| 值 | 作用 |
|---|---|
| hidden | 溢出部分隐藏 |
| scroll | 使用滚动条 |
| visiable | 默认。显示。 |
盒子模型阴影box-shadow
类似于text-shadow，通常设置4个值 颜色 左右位置 上下位置 模糊程度
box-shadow:gray 4px 5px 6px 灰色阴影 向右4px 向下5px 模糊6px
定位position
将元素以像素为单位调整位置
| 值 | 作用 | |
|---|---|---|
| relative | 相对定位 | |
| fixed | 固定定位 | |
| absolute | 绝对定位 |
配合定位使用样式
| 定位相关方向样式 | 作用 | 值 |
|---|---|---|
| left | 元素距离页面左边界的左右距离 | 正值向右，负值向左 |
| top | 元素距离页面左边界的上下距离 | 正值向下，负值向上 |
| right | 元素距离页面右边界的左右距离 | 正值向左，负值向右 |
| bottom | 元素距离页面下边界的上下距离 | 正值向上，负值向下 |
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。
可以通过浮动float、固定定位fixed和绝对定位absolute让元素脱离文档流。
脱离文档流后，通过改变元素的left、top、bottom、right移动其位置
相对定义relative
让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。
元素不会脱离文档流(后续元素不会顶替其位置)。
固定定位fixed
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
通常用于放置一些工具、广告、返回首页等。
绝对定位absolute
让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据页面定位。
层叠z-index
某个已定位的元素，可以通过z-index控制其层叠顺序。
z-index是一个数字，数字越大，距离视线越近。
不透明度
取值范围[0,1]，值越大，越不透明
opacity
独立的样式，修改某个元素的不透明度
opacity:0.5;
rgba
background-color的值的一种写法，修改背景的不透明度
background-color:rgba(255,0,0,0.5);
转换transform
改变某个元素的状态，如旋转、移动、缩放等
| 值 | 作用 |
|---|---|
| rotate(30deg) | 顺时针旋转30度 |
| translate(10px,20px) | 向右平移10px，向下平移20px |
| translateX(10px)/translateY(10px) | 向右/向下平移10px |
| rotateX(30deg)/rotateY(30deg)/rotateZ(30) | 沿着X/Y/Z轴3D旋转30度 |
| rotate3d(1,1,0,30deg) | 沿着X和Y轴3D旋转30度(0表示该轴不变化) |
| scale(1.5) | 放大1.5倍 |
以上所有效果可以通过“transform:效果1 效果2 …”同时设置，如
transform:rotate(30deg) scale(1.5) translate(10px,20px);
过渡transition
设置某个转换效果完成所需的时间等
| 相关样式 | 作用 |
|---|---|
| transition-duration:3s | 所需时间 |
| transition-delay:2s | 延时生效 |
| transition-timing-function:linear | 时间函数 |
| transition:5s 2s ease | 2s后执行，所需5s，慢-快-慢 |
动画animation
1.定义动画的关键帧
@keyframes 动画名{
0%{
/*该阶段的样式*/
样式名:值;
}
25%{}
50%{}
75%{}
100%{}
}
2.给某个元素设置animation样式
#xxx{
/*指定动画名*/
animation-name:动画名;
/*动画执行时间*/
animation-duration:3s;
/*延时*/
animation-delay:3s;
/*动画执行次数 infinite无限*/
animation-iteration-count:4;
/*动画时间函数 linear匀速 ease-in ease-out ease-in-out*/
animation-timing-function:linear;
/*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
animation:动画名 5s 2s infinite linear;
}
| animation相关样式 | 作用 |
|---|---|
| animation-name:动画名 | 执行指定动画 |
| animation-duration:3s | 动画执行时间 |
| animation-delay:3s | 动画延时时间 |
| animation-iteration-count:3 | 动画执行次数，infinite表示无限 |
| animation-timing-function:linear | 动画执行时间函数，linear表示匀速 |
| animation:动画名 5s 2s | 简写。只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时 |
滤镜filter
| 滤镜函数 | 作用 |
|---|---|
| grayscale(100%) | 灰度 |
| blur(4px) | 模糊 |
| brightness(150%) | 亮度 |
| contrast(150%) | 对比度 |
| hue-rotate(45deg) | 色调旋转 |
| invert(100%) | 颜色反转 |
| opacity(50%) | 不透明度 |
| saturate(2) | 饱和度 |
| sepia(80%) | 灰褐色(做旧) |
可以同时给某个元素设置多个滤镜
filter:滤镜函数1 滤镜函数2 ...;
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
