自己改个弹窗每个功能都要一个一个查，还是学一下css吧。
样式基本结构
.selector {
<属性名>:<属性值>;
//注释
&.child-selector {
<属性名>:<属性值>;
//使用方法：class="selector child-selector"
}
&-class {
//同样是子选择器
<属性名>:<属性值>;
//使用方法：class="selector-class"
}
&:hover {
//伪类选择器，鼠标悬停时触发
<属性名>:<属性值>;
}
&:active {
//伪类选择器，鼠标按下时触发
<属性名>:<属性值>;
}
&::before {
//伪元素选择器，在元素前面插入内容
content: "可替换的内容";//在前面插入任何内容
}
&::after {
//伪元素选择器，在元素后面插入内容
content: "可替换的内容";//在后面插入任何内容
}
}
常用属性
常用属性值
- 颜色属性
- #RRGGBB: 六位十六进制颜色值
- rgb(R,G,B): 三元色值
- hsl(H,S,L): 色相、饱和度、亮度值
- 颜色名，如red、blue、yellow
- 字体属性
- normal: 正常
- bold: 加粗
- bolder: 较粗
- lighter: 较细
- 100-900: 字体权重
- 空间属性
- normal: 标准
- auto: 自动
: 长度 : 百分比 - inherit: 继承
- 位置属性
- static: 静态定位
- relative: 相对定位
- absolute: 绝对定位
- fixed: 固定定位
- top: 上
- bottom: 下
- left: 左
- right: 右
- 边框属性
- normal: 标准边框
- none: 无边框
- solid: 实线边框
- dashed: 虚线边框
布局属性
- display: 显示方式
- block: 块级元素
- inline: 行内元素
- inline-block: 行内块元素
- none: 隐藏元素
- position: 定位方式
- static: 静态定位
- relative: 相对定位
- absolute: 绝对定位
- fixed: 固定定位
文本属性
font-size: 字体大小
- px: 像素
- em: 相对于父元素的字体大小
- %: 相对于父元素的宽度
font-weight: 字体粗细
- normal: 正常
- bold: 加粗
- bolder: 较粗
- lighter: 较细
font-style: 字体风格
- normal: 正常
- italic: 斜体
- oblique: 倾斜
font-family: 字体系列
- serif: 衬线字体
- sans-serif: 无衬线字体
- cursive: 手写字体
- fantasy: 幻想字体
- monospace: 等宽字体
text-shadow: 文本阴影
text-overflow: 文本溢出
line-height: 行高
text-align: 文本对齐方式
- left: 左对齐
- right: 右对齐
- center: 居中对齐
- justify: 两端对齐
text-decoration: 文本装饰
- none: 无装饰
- underline: 下划线
- overline: 上划线
- line-through: 删除线
text-indent: 首行缩进
text-transform: 文本大小写
- none: 无大小写
- capitalize: 首字母大写
- uppercase: 全部大写
- lowercase: 全部小写
letter-spacing: 字符间距
word-spacing: 单词间距
white-space: 空白处理
- normal: 正常
- pre: 保留空白符
- nowrap: 不换行
- pre-wrap: 保留空白符并自动换行
- pre-line: 保留空白符并保留换行符
color: 文本颜色
背景属性
- background-color: 背景颜色
- background-image: 背景图片
- url(“图片路径”): 图片路径
- none: 无背景图片
- background-repeat: 背景平铺
- background-position: 背景位置
- background-size: 背景大小
- background-attachment: 背景固定
边框属性
- border: 边框样式
- border-width: 边框宽度
- border-style: 边框样式
- border-color: 边框颜色
- border-radius: 边框圆角
盒模型属性
- width: 宽度
- height: 高度
- margin: 外边距
- padding: 内边距
- box-sizing: 盒模型
其他属性
top: 上边距
bottom: 下边距
left: 左边距
right: 右边距
z-index: 层级
- auto: 自动
: 整数值//数字越大，越在前面
opacity: 透明度
overflow: 内容溢出
- visible: 可见
- hidden: 隐藏
- scroll: 滚动条
- auto: 自动
cursor: 鼠标样式
- pointer: 指针
- move: 移动
- default: 默认
- not-allowed: 不可用
content: 内容
clip: 裁剪
filter: 过滤器
zoom: 缩放
transform: 变换
transition: 过渡
animation: 动画
媒体查询
@media screen and (min-width: 768px) {
/* 针对屏幕宽度大于或等于768px的设备，包括平板和PC端 */
/* 样式 */
}
@media screen and (max-width: 767px) {
/* 针对屏幕宽度小于768px的设备，一般用于移动端 */
/* 样式 */
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 针对屏幕宽度大于或等于768px小于1024px的设备，一般用于平板 */
/* 样式 */
}
@media screen and (min-width: 1024px) {
/* 针对屏幕宽度大于或等于1024px的设备，一般用于PC端 */
/* 样式 */
}
@media print {
/* 打印样式 */
}
样式引入
- 外部样式表
<link rel="stylesheet" href="mystyle.css">
- 内部样式表
<style>
/* 样式 */
</style>
- 内联样式
<div style="/* 样式 */"></div>
样式文件包含
- 直接包含
/* 样式1 */
/* 样式2 */
- 导入其他样式文件
@import "mystyle.css";
- 条件导入
@import "mystyle.css" screen and (min-width: 768px);
此方悬停