基本格式：
<！DOCTYPE html>
<html lang = "en">
<head>
<meat charset = "UTF-8">
<title></title>
//外部css
<link rel="stylesheet" type="text/css" href="路径">
//内部css
<style>
选择器 {
属性名称；属性对应值；
}
</style>
</head>
<body>
//行内css
<h1 style="color:red;">行内css</h1>
</body>
</html>0x001：文字属性相关
文字样式
font-style:样式
文字粗细
font-weight:粗细
文字大小
font-size:大小
文字字体
font-family:字体,备选字体
合并简写：
font: 样式 粗细 大小 字体
0x002：文本属性相关
文本缩进
text-indent:缩进距离
文本对齐
text-align:对齐方向
文本居中
text-align: center
文本划线
text-decoration:划线
文本颜色
color:颜色
0x003：图片边框属性相关
边框宽度
border-width: 宽度px
边框样式
border-style: 样式
边框颜色
color: 颜色
边框圆角
border-radius:大小px
0x004：选择器相关
- 标签选择器
标签{ 属性:值; } - ID选择器
#ID名称{ 属性:值; //配合id = "xxx"使用 } - 类选择器
.类名{ 属性:值; //配合class = "xxx"使用 } - 后代选择器
#ID名称 .类名1 .类名2··· { 属性:值; //同上 } - 子元素选择器
div>标签>标签>··· { 属性:值; //">"是指地址 } - 交集选择器
标签名.类名 { 属性:值; } - 并集选择器
ID名称,.类名 { 属性:值; } - 相邻兄弟选择器
标签1 + 标签2 { 属性:值; } - 通用兄弟选择器
标签1 ～ 标签2 { 属性:值; }
0x005：序选择器相关
- 选中同级别中的第一个标签
标签:first-child { 属性:值; } - 选中同级别中的最后个标签
标签:last-child { 属性:值; } - 选中同级别中的第n个标签
标签:nth-child(n) { 属性:值; } - 选中同级别中的倒数第n个标签
标签:nth-last-child(n) { 属性:值; } - 选中父元素中唯一的元素
标签:only-child { 属性:值; } - 选中父元素中唯一类型的某个标签
标签:conly-of-type { 属性:值; } - 选中同级别中同类型的第一个标签
标签:first-of-type { 属性:值; } - 选中同级别中同类型的最后一个标签
标签:last-of-type { 属性:值; } - 选中同级别中同类型的第n个标签
标签:nth-of-type(n) { 属性:值; } - 选中同级别中同类型的倒数第n个标签
标签:nth-last-of-type(n) { 属性:值; } - 选中同级别中的所以奇数
标签:nth-child（odd） { 属性:值; } - 选中同级别中的所以偶数
标签:nth-child（oven） { 属性:值; } - 选中自定义的标签
标签:nth-child（xn+y） { 属性:值; }
0x006：属性选择器相关
- 根据指定属性找到对应的标签
标签[id] { 属性:值; } - 根据class标签找到指定的属性
标签[class ="xxx"] { 标签:值; } - 属性的值是以什么开头的
标签[alt ^="xxx"] { 属性:值; } - 属性取值是以什么结尾的
标签[alt $="xxx"] { 属性:值; } - 属性取值是否包含某个特定的值
标签[alt *="xxx"] { 属性:值; } - 选中全文的标签设置属性
* {
属性:值;
}0x007：优先级相关
- 提升直接选中标签的优先性
直接选中的标签 { 属性:值!important; } - 直接选中标签的权重问题
- 优先级：
id> 类> 标签> 继承> 默认 - 计算优先级得权重
- 只有
font color text line开头的属性才可以继承
- 优先级：
0x008：div和span标签
div标签 – 容器级标签（可以嵌套所有的标签）
- 作用：完成网页的基本布局
- 注意点：
div标签独占一行 - 格式：
<div class="xxx"> 标签属性 </div>
span标签 – 文本级标签（只能嵌套文字，图片和超链接）
- 作用：修改文本的局部信息
- 注意点：
span标签不会独占一行 - 格式：
<span>内容</span>
0x009：显示模式的转换
- 转换为块级元素
- 块级元素是在容器级标签的基础上多了p标签
- 注意点：块级元素独占一行，可以控制宽高
- 格式：
display:block;
- 转换为行内元素
- 行内级元素是在文本级标签的基础上少了p标签
- 注意点：行内元素不会独占一行，不能控制宽高
- 格式：
display:inline;
- 转换为块级行内元素
- 不独占一行，并且可以控制宽高
- 格式：
display:inline-block;
0x010：背景属性
- 设置背景颜色
background-color: 颜色; - 设置背景图片
background-image: url(图片地址); - 页面背景图片
body { background-image: url(图片地址); } - 图片平铺属性
background-repeat: repeat-x; //x轴平铺 background-repeat: repeat-y; //y轴平铺 background-repeat: no-repeat; //不平铺 - 图片关联方式
background-attachment: fixed; //页面动图不动 - 背景图片定位
background-position: 方向 方向; 水平方向：left，center，right 垂直方向：top，center，bottom - 背景属性缩写
background: 颜色 图片 平铺 关联 定位;
0x011：盒模型属性css
边框属性
- 格式：
border-top: 宽度 样式 颜色; //上边框 border-left: 宽度 样式 颜色; //左边框 border-right: 宽度 样式 颜色; //右边框 border-botom: 宽度 样式 颜色; //下边框 border: 宽度 样式 颜色; //四条边都相等 例：border: 1px solid #000; //虚线样式：dashed border-width: 上 右 下 左; border-style: 上 右 下 左; //一步设置四条边 border-color: 上 右 下 左;
- 格式：
内边距属性
padding-top: 宽度; padding-left: 宽度; padding-right: 宽度; padding-bottom: 宽度; padding: 上，右，下，左; //四条边的内边距宽度外边距属性
margin-top: 宽度; margin-left: 宽度; margin-right: 宽度; margin-bottom: 宽度; margin: 上，右，下，左; //四条边的外边距宽度 margin: 上 auto; //auto：只可水平方向居中盒子模型计算
内容宽高 = width或height 外边距：margin 内边距：padding 元素宽高 = 边框 + 内边距 + `内容高度`或`宽度` 边框：border 元素空间宽高 = 外边框 + 边框 + 内边距 + `内容高度`或`宽度`盒子box-sizing属性
- 作用：
- 保证元素宽高不变的情况下，添加
padding和margin属性时超过了元素宽高的值时，自动改变内容的宽高
- 保证元素宽高不变的情况下，添加
- 格式：
box-sizing: border-box;
- 作用：
水平居中
text-align: center; 和 margin: 0 auto; 的区别 text-align: center; -> 边框内部的内容居中 margin: 0 auto; -> 盒子边框整体居中清空默认的外边距
//范围太广比较不实用
* {
padding: 0;
margin: 0;
}
//用于大项目的开发时
body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, tex tarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}- 边框内的行高
- 作用：
- 设置行高的高度等于边框的高度时，可以使单行文字在边框中垂直居中显示(只适用于一行文字)，如果有多行文字则应使用
padding来垂直居中
- 设置行高的高度等于边框的高度时，可以使单行文字在边框中垂直居中显示(只适用于一行文字)，如果有多行文字则应使用
- 格式：
line-height: 高度;
- 作用：
0x012：浮动流
- 浮动流的基本概念
- 注意点：
- float中不能使用center居中，也不能使用margin: 0 auto进行距中
- 好处：
- 无论是块级元素/行内元素/块级行内元素
都可以进行水平排版、都可以进行设置宽高
- 无论是块级元素/行内元素/块级行内元素
- 格式：
- 注意点：
float: left; //左对齐
float: right; //右对齐浮动的排版规则
- 从外向内，从上向下；
- 在浮动流中，浮动的元素不能撑起父元素的高度。
清除浮动
- 注意点：
- 当使用clean后margin将会失效。
- 格式：
clean: both; //清除左右浮动 - 格式：
overflow: hidden; - 作用：
- 可将超出标签范围的内容截剪掉；
- 如果在盒子里设置了margin-top，则可以让外面的盒子不会掉下来
- 注意点：
伪元素选择器
格式（div内容之前）：
div::before { content: "内容"; //添加子元素内容 width: 宽度; //添加内容的宽度 height: 高度; //添加内容的高度 background-color: 背景颜色; display: block; //转换为块级元素 visibility: hidden; //隐藏添加的内容 }格式（div内容之后）：
div::after { content: "内容"; //添加子元素内容 width: 宽度; //添加内容的宽度 height: 高度; //添加内容的高度 background-color: 背景颜色; display: block; //转换为块级元素 visibility: hidden; //隐藏添加的内容 }
0x013：定位流
标准定位
注意点：
- 标准定位流不会脱离标准流的空间，只能在标准流内进行上右下左的移动
格式：
position: relative; top: 大小px; //相当于上外边距 right: 大小px; //相当于右外边距 bottom: 大小px; //相当于下外边距 left: 大小px; //相当于左外边距
绝对定位
注意点：
- 主要是祖先关系的定位流都可以实现绝对定位，那个定位流离它最近就在那里定位
格式：
position: absolute; top: 大小px; //相当于上外边距 right: 大小px; //相当于右外边距 bottom: 大小px; //相当于下外边距 left: 大小px; //相当于左外边距
子绝父相：
将子元素是绝对定位，将父元素是相对定位
水平居中：
left: 50%; margin-left: 元素宽度的一半;a标签伪类选择器
//修改从来被访问过状态下的样式 选择器标签:link { color: 颜色; } //修改被访问过的状态下的样式 选择器标签:visited { color: 颜色; } //修改鼠标悬停状态下的样式 选择器标签:hover { color: 颜色; } //修改鼠标长按状态下的样式 选择器标签:aetive { color: 颜色; }注意点：
- 如果四种同时出现，则必须按照爱恨原则排序
love hate，如果需要修改访问过和未访问过的颜色一样时，则可以简写为：
a { color: 颜色; }- 如果四种同时出现，则必须按照爱恨原则排序
0x014：过度模块
基本格式
transition-property: 变化的标签,变化的标签; transition-duration: 秒数,秒数; transition-delay: 延时时间s; 选择器标签:hover { //变化的宽度,高度,内外边距大小，颜色 例：margin: 100px; 例：width: 100px; 例：background-color: red; }控制模块移动速度
格式：
选择器标签:nth-child(序数) 标签 { transition-timing-function: 速度; linear：匀速 ease：慢慢变慢 ease-in：由慢变快 ease-out：由快变慢 ease-in-out：由慢变快再变慢 }
合并连写
transition:过渡属性 过渡时长 运动速度 延时时间;
0x015：2D转换模式
- 2D图形旋转
transform: rotate(度数deg); - 2D图形移动
transform: translate(水平px,垂直px); - 2D图形缩放
transform: scale(水平,垂直); - 形变中心点
transform: origin(xxx%,xxx%); - 旋转轴向.默认是X
transform: rotate X/ Y/ Z(度数deg); - 透视属性.近大远小
perspective: 大小px;
0x016：动画模块
- 动画三要素
animation-name: xxx; animation-duration: 时间; @keyframs xxx { from { 属性: 值; } to { 属性: 值; } } - 动画延时
animation-delay: 延迟; - 动画速度
animation-timing-function: 同上; - 动画次数
animation-iteration-count: 次数; - 动画往返
animation-direction: alternate; - 悬停暂停
animation-play-start: paused; - 连写格式
animation: 动画名字 动画时长 运动速度 延时时间 执行次数 是否往返;
文章作者：Torres-圣君
文章链接：http://www.cjlblog.vip/posts/f8a3898b.html
版权声明：本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Torres-圣君
