1.如何使用CSS

<!--1.引用外部css-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--2.内部使用css-->
<style>
	body{background-color: linen;}
</style>
<!--3.行内css-->
<div style="color:red;">text</div>

2.选择器

简单选择器

名称	使用方法	描述
通配选择器	*{ }	选择全部元素
标签选择器	标签{ }	选择指定标签的元素
id选择器	#id{ }	选择指定id的元素
类选择器	.class()	选择指定类名的元素

组合选择器

名称	使用方法	描述
并集选择器	element,element{ }	选择多个选择器对于的元素
交集选择器	elementelement	选择满足多个条件的元素
后代选择器	element element	直接或间接包含的全部后代元素,包括子元素后代
子选择器	element>element	直接被父元素包含的元素
相邻兄弟选择器	element+element	拥有相同父元素且相邻的兄弟元素
通用兄弟选择器	element~element	拥有相同父元素下面的所有兄弟元素

伪类选择器

选择器	描述
a:link	未访问的超链接
a:visited	已访问过的超链接,只能设置颜色
:hover	鼠标悬停时
:active	鼠标点击时
:focus	获取焦点后
:first-child	匹配第一个该元素
:last-child	匹配最后一个该元素
:not(num)	匹配除第num个的元素
:nth-child(num)	匹配第num个该元素 n:所有元素 even或2n:偶数, odd或2n+1:基数

伪元素(只用于行内元素)

选择器	描述
::after{content:’ '}	在选择器后插入内容
::before{content:’ '}	在选择器前面插入内容
::first-letter	第一个首字母
::first-line	首行
::selection	鼠标选中的文本内容

属性选择器

选择器	描述
标签[属性名]	选择含有指定属性的元素
标签[属性名=属性值]	选择含有指定属性值的元素
标签[属性名^=属性值]	选择含和指定属性值开头的元素
标签[属性名$=属性值]	选择含有指定属性值结尾的元素
标签[属性名*=属性名]	选择属性值中含有指定值的元素

3.内容

3.1 背景

background

属性	描述	属性值
background-color	背景颜色	1.有效颜色名: 如"red",“green" 2.十六进制值: 如”#ff0000" 3.RGB值: 如rgb(255,0,0) 4.RGBA值: 如rgba(255,0,0,0.3)
background-image	背景图片	1.url(" "): 设置背景图片地址 2.linear-gradient(角度,开始颜色起始位置,渐变颜色起始位置): 渐变 3.repeating-linear-gradient(角度,开始颜色起始位置,渐变颜色起始位置): 重复渐变 4.radial-gradient(渐变大小 at 渐变原点, 起始颜色,渐变颜色): 径向渐变,如(100px 100px at 20px 20px,red,green)
background-repeat	背景重复方式	1.repeat：(默认值)，x、y方向重复 2.repeat-x：x轴方向重复 3.repeat-y：y周方向重复 4.no-repeat：不重复
background-attachment	背景图片是否随元素移动	1.scroll：(默认值) 背景随元素移动 2.fixed：背景固定在页面中，不随元素移动
background-position	背景图像起始位置	1.top/left/right/bottom/center :两两搭配使用,只写一侧则另一个默认center 2.水平偏移量垂直偏移量 : 如background-position:30px 0px 3.color image repeat attachment position: 可以省略,但是顺序不能变

backgroud-size 背景图片尺寸

宽 高: 如backgroud-size:20px 30px
cover: 等比放大到短边全显示
contain: 宽高拉伸至宽高全显示

background-origin 背景图片开始显示起点

padding-box：(默认值)背景从内边距开始计算
border-box：背景从外边距开始计算
content-box：背景从内容区开始计算

background-clip 背景图片绘制区域

border-box：(默认值)背景会出现在边框内
padding-box：背景不会出现在边框，只出现在内容区和内边距区
content-box：背景只出现在内容区

opacity 透明度

0~1

filter 模糊度

blur(px)   越大越模糊，单位px

3.2 边框

各属性的值都可以混合使用, (上右下左)(上下左右)(上左右下)

border

属性	描述	属性值
border-style	边框样式	dotted: 点线边框 dashed: 虚线边框 solid: 实线边框 double: 双边框 none: 无边框 hidden: 边框 groove: 3D 坡口边框。效果取决于 border-color ridge: 3D 脊线边框。效果取决于 border-color inset: 3D inset 边框。效果取决于border-color outset: 3D outset 边框。效果取决于 border-color
border-width	边框宽度	px、pt、cm、em 预设值：thin、medium 、 thick
border-color	边框颜色	默认继承父元素颜色颜色名: 如"red" RGB/HSL/HEX transparent: 透明

border-radius 边框圆角

像素/比例等: 如border-radius:5px
混合使用:(左上右下 右上左下)(左上 右上左下 右下)(左上 右上 右下 左下)

其他单独设置属性

简写属性: border-top，border-left，border-right，border-bottom
border-top-color, border-top-style, border-top-width等

3.3 轮廓

outline-style 边框样式

dotted: 点线边框
dashed: 虚线边框
solid: 实线边框
double: 双边框
none: 无边框
hidden: 边框
groove: 3D 坡口边框。效果取决于 outline-color
ridge: 3D 脊线边框。效果取决于 outline-color
inset: 3D inset 边框。效果取决于 outline-color
outset: 3D outset 边框。效果取决于 outline-color

outline-width 边框粗细

以 px、pt、cm、em 计
使用预设值：thin、medium 、 thick

outline-color 边框颜色

颜色名: 如"red"
RGB/HSL/HEX
invert: 颜色反转(确保轮廓可见,无论什么颜色背景)

outline 属性简写

width style color: 如outline:3rpx solid red

outline-radius 边框圆角

像素/比例等: 如border-radius:5px
混合使用:(左上右下 右上左下)(左上 右上左下 右下)(左上 右上 右下 左下)

其他单独设置属性

简写属性: border-top，border-left，border-right，border-bottom
border-top-color, border-top-style, border-top-width等

outline-offset 偏移

像素: 在元素的轮廓与边框间添加透明的空间

3.4 边距

margin 外边距

像素/比例:(上 右 下 左)(上下 左右)(上 左右 下)
auto: 自动(居中)
inherit: 继承父组件

其它单独设置属性: margin-top、margin-right、margin-bottom、margin-left

padding 内边距

像素/比例:(上 右 下 左)(上下 左右)(上 左右 下)
inherit: 继承父组件

padding-top、padding-right、padding-bottom、padding-left

3.5 宽高

width、height 宽高

auto: (默认),根据宽高自动设置填充
像素/百分比
initial: 将宽高设置为默认值
inherit: 继承自父组件

min-width、min-height、max-width、max-height

auto: (默认),根据宽高自动设置填充
像素/百分比
initial: 将宽高设置为默认值
inherit: 继承自父组件

3.6 文字设置

color 文字颜色

颜色名: 如 "red"
十六进制值: 如 "#ff0000"
RGB值: 如 "rgb(255,0,0)"

text-decoration 文字装饰

none: 不设置,常用于删除超链接的下划线
underline：下划线
line-through：删除线
overline：上划线
组合: 如text-decoration:underline red solid

user-select 文字可选

none: 防止文本可选取
auto: 默认。如果浏览器允许，则可以选择文本。
text: 文本可被用户选取
all: 单机选取文本,而不是双击

text-transform 大小写转换

capitalize：首字母大写
uppercase：全部字母大写
lowercase：全部字母小写

text-indent 第一行缩进

像素

letter-spacing 字符间距

word-spacing 单词间距

text-shadow 字体阴影

水平偏移  竖直偏移  模糊程度  颜色

font-family 字体

<!--同种通用字体-->
<table border>
        <tbody>
            <tr>
                <th style="text-align: left;">通用字体族</th>
                <th style="text-align: left;">字体名称实例</th>
            </tr>
            <tr>
                <td>Serif:衬线字体<br> 每个字母边缘都有一个小笔触</td>
                <td><span style="font-family:'Times New Roman',serif">Times New Roman</span><br>
                    <span style="font-family:Georgia,serif">Georgia</span><br>
                    <span style="font-family:Garamond,serif">Garamond</span><br>
                </td>
            </tr>
            <tr>
                <td>Sans-serif:非衬线字体<br>字体线条简洁</td>
                <td><span style="font-family:Arial,sans-serif">Arial</span><br>
                    <span style="font-family:Verdana,sans-serif">Verdana</span><br>
                    <span style="font-family:Helvetica,sans-serif">Helvetica</span><br>
                </td>
            </tr>
            <tr>
                <td>Monospace:等宽字体<br>粗细一样的字体</td>
                <td><span style="font-family:'Courier New',monospace">Courier New</span><br>
                    <span style="font-family:'Lucida Console',monospace">Lucida Console</span><br>
                    <span style="font-family:Monaco,monospace">Monaco</span>
                </td>
            </tr>
            <tr>
                <td>Cursive:草书字体<br>模仿人类的笔记</td>
                <td><span style="font-family:'Brush Script MT',cursive">Brush Script MT</span><br>
                    <span style="font-family:'Lucida Handwriting',cursive">Lucida Handwriting</span><br>
                </td>
            </tr>
            <tr>
                <td>Fantasy:幻想字体<br>装饰性/俏皮字体</td>
                <td><span style="font-family:Copperplate,fantasy">Copperplate</span><br>
                    <span style="font-family:Papyrus,fantasy">Papyrus</span>
                </td>
            </tr>
        </tbody>
    </table>

显示如下:
在这里插入图片描述

font-style 字体样式

normal：默认
italic：斜体字
oblique：倾斜

font-weight 字体粗细

font-size 字体大小

word-break 长单词内部换行

normal：浏览器规则换行
break-all：允许在单词内换行
keep-all：只能在半角空格或连字符处换行

writing-mode 文字方向

horizontal-tb: 从左到右, 从上到下
vertical-rl: 从上到下, 从右到左
vertical-lr: 从上到下, 从左到右

3.7 文本格式

text-align 文字水平对齐方式

left/right/center: 左/中/右对齐
justify: 两端对齐

vertical-align 文字垂直对齐方式

top/middle/bottom: 上/中/下
像素
baseline: 基线对齐(默认),最下端可能会流出空隙,把对齐方式换成top或bottom可解决

line-height 行高

行高等于高度可以达到居中效果

direction 文本方向

ltr: 从左到右
rtl: 从右到左
inherit: 继承父元素
initial: 默认

word-wrap 文本换行

break-word：换行
normal：换行

white-space 处理html空白

normal：正常
nowrap：不换行
pre：保留空白

text-overflow 文本溢出

clip: 修剪掉
ellipsis: 使用省略号代替被修剪的文本
string: 使用指定字符串代表被修剪的文本

/* 单行文本溢出 */
.text1{
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 多行文本溢出 */
.text2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
}

column 多列文本

属性	属性值	描述
column-gap	pixel	列间的空隙
column-rule	width style color	是三个属性的简写
column	column-width column-count	列宽和列数的简写

3.8 表格 <table>

border-spacing

设置边框之间的距离：border-spacing

border-collapse 边框合并

collapse: 合并

border-spacing 边框间距离

像素

caption-side 表格标题位置

top: 表格上面
bottom: 表格下面
inherit: 继承父元素caption-side

empty-cells 空白表格处理

hide: 隐藏边框
show: (默认)绘制边框
inherit: 继承父元素empty-cells

table-layout 表格布局

automatic: (默认)列宽由单元格内容决定
fixed: 列宽由表格宽度决定
inherit: 继承父元素table-layout

3.9 list列表

list-style-type 列表标记类型

none: 无标记
disc: (默认)实心圆
circle: 空心圆
square: 实心方块
decimal: 数字
decimal-leading-zero: 0开头的数字(01,02,03等)
lower-roman: 小写罗马数字(i, ii, iii, iv, v, 等)
upper-roman:大写罗马数字(I, II, III, IV, V, 等)
lower-alpha: 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等)
upper-alpha: 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等)
lower-latin: 小写拉丁字母(a, b, c, d, e, 等)
upper-latin: 大写拉丁字母(A, B, C, D, E, 等)

list-style-image

url: 将图像指定为标记

3.10 媒体

object-fit 容器适应

fill: 画面填充元素内容框,如果有必要则拉伸/挤压
contain: 保持长宽比, 缩放画面使适应元素内容框
cover: 保持长宽比, 裁切画面使填充元素内容框
none: 不调整画面

3.11 cursor 光标类型

url: 自定义光标的 URL.<br>为了防止URL定义的光标不可用,在此列表末端在定义一种普通光标
default: 默认,一般是箭头
auto: 浏览器设置光标
pointer: 手,点击
move: 移动
text: 文本
wait: 忙碌
not-allowed: 禁用
crosshair: 十
help: ?
n-resize: ↑
s-resize: ↓
w-resize: ←
e-resize: →
nw-resize: ↖
ne-resize: ↗
se-resize: ↘
sw-resize: ↙

4. display布局

属性值	名称	描述
none	隐藏	将元素隐藏,与visibility:hidden的区别是它不占位
inline	行内元素	不能设置宽高,宽高被内容撑开
block	块元素	能设置宽高
inline-block	行内块元素	与inline相比可以设置宽高与block相比能让元素并排
flex	盒子模型
grid	容器

4.1盒子模型

overflow 溢出

visible：(默认值)可见
hidden：隐藏
scroll：滚动条
auto：根据需要设置滚动条

visibility 隐藏元素

visible: 可见
hidden: 隐藏, 和display:none的区别是它占位

box-shadow 元素阴影

水平偏移  竖直偏移  模糊程度  颜色

resize 界面用户是否可调整

none: 用户无法调整元素尺寸
both: 用户可调整元素的宽高
horizontal: 用户可调整元素的宽
vertical: 用户可调整元素的高

4.2 弹性盒: flex

弹性盒属性:

属性	描述	属性值
justify-content	水平对齐flex项目	flex-start: (默认)开头对齐 flex-end: 末端对齐 center: 中心对齐 space-around: 元素左右流出相同空白 space-evenly: 平均分布 space-between: 除两边元素,元素间流出相同空白
align-items	垂直对齐flex项目	stretch: (默认)拉伸以填充容器 flex-start: 在容器顶部显示 flex-end: 在容器底部显示 center: 在容器中间显示 baseline: 基线对齐
align-content	垂直对齐弹性线换行才能看到效果	stretch: (默认)拉伸以填充容器 flex-start: 顶部对齐 flex-end: 底部对齐 center: 中心对齐
flex-direction	排列方向	row: (默认)从左到右排列 column: 从上到下排列 row-reverse: 从右到左排列 colum-reverse: 从下到上排列
flex-wrap	换行	nowrap: 不换行 wrap: 换行 wrap-从右到左换行
flex-flow	direction wrap的简写

弹性元素属性:

属性	描述	属性值
order	给元素设置顺序	num: 数字, 默认为0, 排最前面
flex-grow	给元素设置比例, 弹性盒留出空白时该元素按比例拉伸	num: 数字, 默认为0, 不拉伸
flex-shrink	给元素设置比例, 弹性元素压缩时该元素按比例收缩	num: 数字, 默认0, 不收缩
flex-basis	设置元素初始长度, 优先级高于width	像素
flex	是grow shrink basis的简写
align-self	元素自身在flex盒的位置	stretch: (默认)元素高度为容器高度 center：居中对齐 flex-start: 顶部对齐 flex-end: 底部对齐 baseline: 基线对齐

4.3 容器: grid

5. position定位

属性值	名称	描述	特点
static	(默认)静止	不开启定位	不受top/bottom/left/right的影响
relative	相对定位	相对于自身位置的偏移	1.提升元素层级 2.不会脱离文档流 3.不改变元素行内/块的形式
absolute	绝对定位	相对于最近开启定位的祖先元素偏移,如果没有祖先元素开启定位这相对于html偏移	1.提升元素层级 2.元素脱离文档流 3.改变元素形式, 行内变成块且高度默认内容大小
fixed	视口定位	相对显示窗口位置的偏移,不会随滚动条改变在窗口上的位置
sticky	粘滞定位	一开始是relative, 遇到偏移量则切换为fixed

top / bottom / left / right 定位属性(在开启定位后生效)

像素/百分比

z-index 层级

num: 值越大层级越高,显示在越上方. 注意:祖先元素再高不能盖住后代元素

6. 动画

transform 变换

属性值	例子	描述
translate(X,Y,Z)	transform: translate(50px,100px)	沿x轴右移50px,沿y轴下移100px
rotate(deg)	transform: rotate(90deg)	绕中心旋转90度
scale(width,height)	transform: scale(2, 3)	绕中心x轴放大2倍, y轴放大3倍
skew(deg,deg,deg)	transform: skew(20deg, 10deg)	沿x轴倾斜20度, y轴倾斜10度

transition 过度

属性	描述	属性值
transition-delay	延迟	secound: 时间,单位s,在动画执行前有多少s的延迟
transition-duration	持续时间	secound: 时间,单位s,动画执行时间
transition-property	过度属性	none: 不设置 all: 所有属性都会获得过度效果 property: 只有指定属性才能获得过度
transition-timing-function	动画效果	linear: 线性 ease: 缓入缓出 ease-in: 缓入 ease-out: 缓出 ease-in-out: 缓入缓出 cubic-bezier(n,n,n,n,): 贝塞尔曲线

animation 动画

关键帧: @keyframes是设置动画的中间状态,可以使用关键字"from"和"to",等价于0%和100%,也可以使用百分比表示各阶段状态, 使用animation-name引用该动画,如:

<head>
    <style>
        div {
            height: 50px;
            background-color: red;
            animation-name: test;
            animation-duration: 1s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-timing-function: ease;
        }
        @keyframes test {
            from {width: 50px;}
            to {width: 200px;}
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果:
在这里插入图片描述

属性	描述	属性值
animation-name	指定@keyframes	关键帧名称
animation-duration	动画持续时间	时间,单位s
animation-delay	延迟动画	时间,单位s
animation-iteration-count	动画播放次数	数字 infinite: 无限循环
transition-timing-function	动画效果	linear: 线性 ease: 缓入缓出 ease-in: 缓入 ease-out: 缓出 ease-in-out: 缓入缓出 cubic-bezier(n,n,n,n,): 贝塞尔曲线
animation-play-state	动画执行状态	paused: 暂停 running: 播放
animation-direction	动画方向	normal：(默认)从from到to执行 reverse：从to到from alternate：从from到to在从to到from来回执行 alternate-reverse：从to到from在从from到to来回执行
animation-fill-mode	动画填充模式	none: 不改变默认行为 forwards: 从样式设置开始,结束停在最后状态 backwards: 从from开始,结束回到样式设置状态 both: 从from开始,结束停在最后状态

7. 变量

CSS的全局变量和局部变量:

/*全局变量: 定义在":root"选择器内, 供整个css文档使用*/
:root{
    /*全局变量名以--开头*/
    --blue: #1e90ff;
    --white: #ffffff;
}
/* 局部变量: 定义在选择器内部使用 */
div{
    /*用var(name,value)引用全局变量, value为未找到变量时使用, 可省略*/
    color:var(--blue);
    background-color: var(--white,white);
}

8. @media媒体查询

.CSS图标字体库

FontAwesome
BootstrapCDN
iconfont

CSS常用属性文档

1.如何使用CSS

2.选择器

简单选择器

组合选择器

伪类选择器

伪元素(只用于行内元素)

属性选择器

3.内容

3.1 背景

background

backgroud-size 背景图片尺寸

background-origin 背景图片开始显示起点

background-clip 背景图片绘制区域

opacity 透明度

filter 模糊度

3.2 边框

border

border-radius 边框圆角

其他单独设置属性

3.3 轮廓

outline-style 边框样式

outline-width 边框粗细

outline-color 边框颜色

outline 属性简写

outline-radius 边框圆角

其他单独设置属性

outline-offset 偏移

3.4 边距

margin 外边距

padding 内边距

padding-top、padding-right、padding-bottom、padding-left

3.5 宽高

width、height 宽高

min-width、min-height、max-width、max-height

3.6 文字设置

color 文字颜色

text-decoration 文字装饰

user-select 文字可选

text-transform 大小写转换

text-indent 第一行缩进

letter-spacing 字符间距

word-spacing 单词间距

text-shadow 字体阴影

font-family 字体

font-style 字体样式

font-weight 字体粗细

font-size 字体大小

word-break 长单词内部换行

writing-mode 文字方向

3.7 文本格式

text-align 文字水平对齐方式

vertical-align 文字垂直对齐方式

line-height 行高

direction 文本方向

word-wrap 文本换行

white-space 处理html空白

text-overflow 文本溢出

column 多列文本

3.8 表格 <table>

border-spacing

border-collapse 边框合并

border-spacing 边框间距离

caption-side 表格标题位置

empty-cells 空白表格处理

table-layout 表格布局

3.9 list列表

list-style-type 列表标记类型

list-style-image

3.10 媒体

object-fit 容器适应

3.11 cursor 光标类型

4. display布局

4.1盒子模型

overflow 溢出

visibility 隐藏元素

box-shadow 元素阴影

resize 界面用户是否可调整

4.2 弹性盒: flex

4.3 容器: grid