1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
| # CSS---------------------------------------------------------------------------------------------------------- //涵盖CSS3的全部CSS标签以及可用属性值
# |说明:"ttt"处为CSS自定义文本,常用于属性或变量的自定义命名
# 选择器与优先级========================================= # *{} :通配选择器 # #id{}: ID选择器 # .ttt{};Class选择器 //class=ttt # div{} :元素选择器 # .ttt,.zzz{}:合并选择器 # ttt zzz{}: 后代选择器 # ttt>zzz{}:子代选择器 # ttt+zzz{}: 相邻兄弟选择器 # ttt~zzz{} 通用兄弟选择器 # !important: # :hover: 鼠标悬停|伪类选择器 # [attr=value]: 属性选择器(精确匹配属性值) # :nth-child(n): 第n个子元素(CSS3) # ::before: 元素前插入内容(伪元素) # :not(selector): 排除选择器(CSS3) # :root: 根元素选择器(CSS3)
# 盒模型与布局========================================= # width: 宽 |px # height: 高 |px # left: 0px 方向对齐 | # margin: 外边框 |上右下左 0 0 0 0 px # padding: 内边框 |上右下左 0 0 0 0 px # size:水平宽度 |px # border-radius: 圆角 |px //1:相同;2:左上+右下,右上+左下;3:左上,右上+左下,右下;4:左上,右上,右下,左下 # float: 浮动 | (left 左浮动|right 右浮动|none 无浮动) # clear: both: 清除浮动| # overflow: hidden:清除浮动| # align :对齐方式 | (左 left|右 right|水平居中 center|上 top|下 bottom|垂直居中 middle) # display:盒元素 | (block 块级|inline 行内|flex 弹性|grid 网格) # flex : 弹性布局简写(grow shrink basis,CSS3) # box-sizing:盒子模型 | (content-box 标准盒模型|border-box 边框盒模型) # resize : 元素缩放(none|both|horizontal|vertical,CSS3) # box-shadow: 阴影|(水平偏移 h-shadow|垂直偏移 v-shadow|模糊 blur|扩展 spread|颜色 color|内阴影 inset)//0px 0px 0px #ffffff # grid-template-columns : 网格列定义(CSS3:repeat(3, 1fr)) # justify-content : 主轴对齐(center/space-between,Flex/Grid 通用) # align-items : 交叉轴对齐(stretch/center)
# 背景与边框=========================================== # background-color: 背景颜色 | #ff0000ff # background-image: 背景图片 |(url() 图片路径|linear-gradient() 线性渐变) # background-attachment : 背景固定(固定 fixed|滚动 scroll) # background-size: 背景图片大小 | (cover 有损比例填充|contain 无损比例填充|auto 默认) # background-repeat: 背景填充 | repeat默认值/repeat-x水平平铺/repeat-y垂直平铺/no-repeat不平铺} # background-clip : 背景绘制区域(border-box/padding-box/content-box,CSS3) # background-position: 图片定位 | left ???/center ???/right ???/x(px)y(px)/x%y%} # linear-gradient() : 线性渐变背景(CSS3:to right, #ff0000, #0000ff) # radial-gradient() : 径向渐变背景(CSS3) # border-color: 边框颜色 | #ff0000ff # border-collapse: 边框折叠样式| collapse # border: 边框样式| (width 宽|样式 style|颜色 color) # transparent //在border里面添加以隐藏边框 # background-cover:(背景图片放大,完全覆盖背景区域,可能无法显示在背景定位区域中)(等比放大)//400px # background-contain:(把图像放大至最大尺寸,使其高度宽度完全适应内容区域,可能铺不满盒子)//400px
# 列表与定位=========================================== # list-style-type:列表列标签样式(disc:实心圆 circle:空心圆 square:实心正方体 none:无) # list-style-image:url(img.jpg图片路径) //将图片设置为列表符合样式 # list-style-position: 列表符定位 (outside 外面,inside 里面)| //设置列表项标记的放置位置 # list-style:简写 | (none去除列表符号) # position: 定位 | static(默认)/relative(相对)/absolute(绝对)/fixed(固定)(绝对和固定会脱离文档流)
# 文本与字体=========================================== # color: 颜色 | #ff0000ff //可选值:red/#ffffff/rgb(255,255,255)/rgba(0,0,0,.0)} # font-size: 字体大小 |(px、rem) # font-weight: 字体粗细 | bold粗(700)/bolder更粗/lighter更细/100-900细到粗(400默认)} # font-style: 字体样式| normal默认/italic斜体 # font-family: 字体 |("Arial", sans-serif) # text-align: 字体对齐 |(左 left|右 right|水平居中 center|上 top|下 bottom|垂直居中 middle) # vertical-align: 垂直对齐|??? # text-shadow: 阴影 | (水平偏移 x|垂直偏移 y|模糊 blur|颜色 color) # line-height: 行高对齐 |(行高倍数或固定值) # white-space: ... | (nowrap 不换行|pre 保留空格) # text-overflow : 文本溢出处理(clip/ellipsis,需配合 overflow: hidden) # word-wrap : 单词换行(break-word,CSS3) # @font-face : 自定义字体(CSS3,支持 .woff 格式) # text-decoration: 文本修饰| underline下划线/overline上划线/line-through删除线 # text-indent:文本缩进 # text-transform: capitalize; 对英文句子所有单词首字母大写 # text-transform: lowercase; 对英文句子所有单词首字母小写 # text-transform:uppercase;对英文句子所有单词字母大写ita # text-transform:none; 不添加任何效果}
# 变换与动画(CSS3)==================================== # transform: 元素变换 | (rotate(45deg) 旋转|scale(1.2) 缩放|translateX(50px) 移动) # transition: 过渡效果 | (属性 property|时长 duration|缓动函数 timing-function)(如all 0.3s ease)) # animation: 动画效果 | name duration timing delay count(动画名 时长 缓动 延迟 次数) # animation: ttt 0(s) linear 0(s) infinite normal}| # animation: hover{animation-play-state:paused}} # ttt:hover{animation-play-state:paused}} # opacity: 不透明度 | 0~1(透明度,如0.5) # filter: 滤镜| blur(5px)(模糊)/grayscale(100%)(灰度) @keyframes : 关键帧定义(动画)(如 from {opacity:0} to {opacity:1})from{样式}to{样式}} //from为动画的开始,to为动画的结束 # flex-grow: 0 |
# 弹性与网格布局(css3)================================ # flex-direction: 布局方式 | row(行排列)/column(列排列) # justify-content: 空间布局 | center(居中)/space-between(两端对齐) # align-items:对齐方式 | stretch(拉伸)/center(居中) # grid-template-columns: 定义网格列宽| repeat(3, 1fr)(重复列)/minmax(100px, auto)(最小最大值) # gap: 列宽间距 |(网格或弹性项间距)
# 响应式与单位======================================== # @media: 媒体条件 |(如max-width: 600px) # vw/vh: 视窗比例单位 |(1vw = 1% 视窗宽度) # calc(): 动态计算 |(如calc(100% - 60px)) 3 rem : 根字体相对单位(适配不同设备) # calc() : 动态计算(如 width: calc(100% - 60px)) # hsla() : HSL 带透明度(hsla(120,100%,50%,0.3),CSS3) # rgba() : RGB 带透明度(rgba(255,0,0,0.5),CSS3) # @media screen and (max-width:768(px)) {.ttt{样式}} |手机适配 # @media screen and (min-width:768(px)) and (max-width:996(px)) {.ttt{样式}}|平板适配 # @media screen and (min-width:996(px)) {.ttt{样式}}|电脑适配
# 其他关键属性======================================== # overflow: 溢出处理(滚动条) | visible(默认)/hidden(溢出隐藏)/scroll(溢出滚动)/auto(自动)/inherit; # cursor: 鼠标光标状态 | pointer(手形)/wait(等待) # z-index: 层叠顺序 |(层叠顺序,如999) # currentColor : 继承当前文字颜色 # clip-path : 裁剪路径(CSS3:circle(50%)/polygon()) # will-change : 性能优化(预声明变化属性) # scroll-snap-type : 滚动捕捉(CSS3:y mandatory)
# CSS----------------------------------------------------------------------------------------------------------
|