Python全栈 Web（CSS常用样式大全）
常用内联样式： func-size color background-color 内部样式表： <style> 选择器1{ 属性：值； } 选择器2{ 属性：值； } ... </style> 外链方式： <link rel="stylesheet" type="text/css" href=".css文件名"> 样式优先级： 默认 < 稳文档内嵌/元素选择器 < 行内 不发生冲突 同步 发生冲突 后来者居上 选择器： 标签选择器： p{ color: red; } 类选着器： .cls{ 样式 } <p class="cls">文本</p> <p class="cls1 cls2"> 文本 </p> 标签类结合： p.cls{ 样式 } 表示在指定标签中匹配class属性 id选着器： #nav{ 样式 } <div id="nav"></div> 群组选择器： div, p{ 样式 } <div></div> <p></p> 后代选择器： #nav #npc/div{ 样式 } 子代选择器： 选择器1>选择器2/标签{ 样式 } 伪类选择器： 超链接伪类选择器： :link 访问前 :visited 访问后 :active 鼠标点按 :hover 鼠标滑过 其他元素伪类选择器： :hover 鼠标滑过 :active 鼠标点按 伪类选择器只能和其他选择器/元素结合使用 p:hover{ 鼠标滑过p元素的新样式 } 选择器优先级： 标签选择器： 1 类/伪类选择器： 10 id选择器： 100 行内选择器： 1000 尺寸单位： px % in 英寸 1in 2.54cm pt 榜 1pt = 1/72 in cm m deg 角度 颜色单位： 英文单词（transparent: 透明） rgb(r,g,b) 0~255 rgba(r,g,b,a)透明度 十六进制：#fff 元素分类： 块元素 独占一行 支持宽高 div h1 p ul ol table form 行内元素 可以共行 大小由内容决定 span i b label u sub sup 行内块元素 可以共行 支持宽高 img input 常用属性： img{ width: 300px; height: 300px; color: red; background-color: #fff; font-size: 24px; font-weight: normal; 取消字体加粗 text-decoration: none; 取消下划线 vertical-align: top/middle/bottom; 左右元素与其的对齐方式（只能在行内块元素中使用） } 尺寸： img{ width: 300px/50%; height: 300px/50%; 溢出处理： overflow: visible/hidden/scroll/auto; 默认可见/溢出部分不显示/始终有滚动条溢出可用/自动产生滚动条 } 边框： div{ border: width style color; 宽度 样式 颜色 缺一不可 border: 1px solid/dashed/dotted/double; 实线/虚线/点线/双线 border: none; 取消边框 单独设置： border-top: 上 border-right： 右 border-bottom: 下 border-left: 左 border-width： 宽度 border-style: 样式 border-color: 颜色 三角标： width: 0px; height: 0px; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid transparent; border-left: 100px solid transparent; } 轮廓线： div{ outline: width style color; outline: none; 取消轮廓线 } 圆角边框： div{ border-radius: 10px/10%; 超过50%就是圆形 border-radius: 10px 20px 30px 40px; 上 右 下 左 一个值：表示是个角相等 两个值：表示上下、左右相等 三个值：左右相等 其他分别设置 四个值：表示上右下左全不分别设置 } 边框阴影： div{ box-shadow: offset-x offset-y blur spread color 水平偏移 垂直偏移 延伸距离(可以省略) 阴影颜色 box-shadow: 10px 10px 10px pink; } 盒模型： 外边距： div{ margin: 10px/10%; 有四个值 最少一个 最多4个 效果同上（圆角边框） margin: 0px; 清除外边距 margin: 0px auto; 在父元素内水平居中 margin: -10px; 位置微调 单独设置： margin-top: 上 margin-right: 右 margin-bottom: 下 margin-left: 左 可以是像素也可以是百分比 默认具有外边距的元素： body p h1~h6 ul ol } 内边距： div{ padding: 10px/10%; 有四个值 最少一个 最多4个 效果同上（圆角边框） padding-top 上 padding-right 右 padding-bottom 下 padding-left 左 具有默认内边距的元素： ol ul 文本框 密码框 按钮 td } 声明盒模型计算方式： div{ box-sizing: border-box/content-box; 内边距+边框+内容的共同尺寸/默认值 } 改变元素类型： div{ display: block/inline/inline-block/none; 转换为块元素（显示元素）/转换为行内元素/行内块元素/隐藏元素 } 背景相关属性： 背景颜色： background-color:red; 背景图片： div{ background-image：url("./1.jpg") 图片平铺： background-repeat: repeat/no-repeat/repeat-x/repeat-y; 水平和垂直平铺/不重复平铺/水平平铺/垂直平铺 图片尺寸： background-size: 10px 10px/10%/cover/contain; 当前元素宽 高/元素比例/将图片拉伸全部覆盖元素超出部 分裁剪掉/将图片拉至刚好被容纳 超出部分不管 拉伸：图片比例不变 图片的位置： background-position: x/x% y/y%; 水平偏移/垂直偏移 百分比参照尺寸获取 background-position: 0% 0%; 图片左上角显示 background-position: 100% 100%; 图片右下角显示 background-position: 50% 50%; 图片居中显示 background-position: left/center/right top/center/bottom; 方位值表示：左/中/右 上/中/下 } 简写： div{ background: color/url()/repeat/position; } 文本相关属性： 字体： div{ 字体大小： font-size: 24px; 设置字体大小 font-family: "微软雅黑", "黑体", "KaiTi"; 设置字体类型 字体类型： font-weight: normal/bold/lighter; 正常显示/加粗显示/极细文本 字体加粗： font-weight: 400/700/100; 数字越大越粗 400=normal/700=bold 字体样式： font-style: normal/italic/oblique; 正常显示/使用倾斜显示/使文本倾斜达到斜体效果 简写： font: style weight size family; family 必须写 不写没效果 } 文本： div{ color: green; 文本颜色 文本对齐： text-align: left/center/right/justify; 默认水平左对齐/居中/右对齐/两端对齐 文本行高： line-height: 32px/2; 设置行高位32像素/设置行高为字体大小的2倍 文本居中方式： 将行高设置为和元素一样的高度 一行文本一定的垂直居中的 上下空隙由浏览器默认分配 文本装饰线： text-decoration: underline/overline/line-through/none; 下划线/上划线/删除线/取消下划线 } 表格属性： div{ width:; height:; background:; color:; margin:; padding:; 边框合并： border-collapse: separate/collapse; 默认边框分离/合并边框 td不支持外边距 只能写在table里 边框边距： border-spacing: h-Value v-Value; border-spacing: 10px 10px; 只能在表格分离的状态下使用 } 过渡效果： div{ 过渡属性： transition-property: width/height; 指定某个属性添加过渡效果 宽度过渡/高度过渡 transition-property: all; 将所有能过渡的属性都进行过渡 能够添加过渡的属性：所有颜色相关的、取值为数值的 过渡时长： transition-duration: 1s/100ms; 1秒完成过渡/100毫秒 时间曲率： transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out; 默认开始结束满中间块/匀速/开始慢结束块/开始块结束慢/慢开始结束中间加速后减速 过渡延迟： transition-delay: 1s/100ms; 1秒后开始过渡/100毫秒 过渡时长必须设置其他可以省略 必须写在默认样式中 简写： transition:property duration timing-function delay; duration必须写 } 布局： 普通流布局： 默认方式 浏览器默认布局方式 浮动布局： div{ float: left/right/none; 元素向左浮动停靠在其他元素便于/向右浮动/默认 特点： 元素飘浮会脱流 后面的元素会补位 所有的元素只要设置浮动都可设置宽高 行内元素或行内块元素浮动后 水平方向之间没有空隙 浮动元素特殊效果： 文字环绕效果 浮动元素会遮挡正常元素 但是不会遮挡内容 解决不占位影响： 1.指定父元素的高度 2.父元素中设置 ：overflow: hidden; 3.清除浮动： clear: none/left/right/both; 默认不处理/清除左浮影响/正常元素左边不允许出现浮动元素/两边都不允许 4.父元素末尾添加空块元素 设置：clear: both; } 定位布局： div{ position: relative/absolute/fixed/static; 相对定位/绝对定位/固定定位/默认文档流布局 只有设置了非默认属性 才算是已经定位的元素 偏移属性： 用来配合已定位的属性 进行位置移动 top: 10px; 以元素的上边界向下为正方向 right: 10px; 以元素的右边界向左为正方向 bottom: 100px; 以元素的下边界向上为正方向 left: 10px; 以元素的左边界向右为正方向 } 定位方式： div{ 相对定位： position: relative; 按照当前位置偏移 绝对定位： position: absolute; 定位后会脱流 脱流的所有元素都可以设置宽高 按照离他最近的祖先元素偏移 如果没有按照body位置偏移 一般采用父元素相对定位 子元素绝对行为方式 浮动 + 外边距调整元素位置 = 绝对定位 + 偏移属性 固定定位： position: fixed; 按照浏览器窗口进行定位 配合偏移属性使用 定位后元素都会变成块元素 层叠次序调整： z-index: 0~n； 默认0 数字越大越靠上 数值相同 后来者居上 只能用在已经定位的元素上 子元素永远在父元素之上 不受层次影响 } 显示方式： div{ display: none/block/inline/inline-block; 隐藏元素并且不占位/转换为块元素/转换为行内元素/转换为行内块元素 } 显示效果： div{ visibility: visible/hidden; 默认显示/隐藏元素并占位 opacity: 0~1; 设置元素的透明度 继承效果： 子元素最终效果 = 父元素opacity * 自身opacity vertical-align: top/middle/bottom; 调整垂直对齐方式 常见于行内块元素 cursor: default/pointer/text/crosshair; 默认值/设置为小手形状/输入I形状/ +形状 } 转换属性： div{ transform: 转换函数1 转换函数2...; 转换原点设置： transform-origin: x y; transform-origin: 像素/百分比/方位值; 默认以元素中心为原点 转换函数： 平移转换： transform: transform(x,y); x：水平方向平移距离 y：垂直方向 一个值等于translateX(value) transform: translateX(value) 水平方向位移 transform: translateY(value) 垂直方向位移 缩放变换： transform: scale(value)/scaleX()/scaleY(); 正常缩放/横向缩放/垂直缩放 value：默认1 大于1会等比放大 0~1会缩小 小于0会翻转 旋转变换： transform: rotate(90deg/-90deg); 顺时针旋转90度/逆时针旋转90度 transform: rotate3d(45deg/-45deg); transform: rotateX(ndeg); 沿x轴翻转 transform: rotateY(ndeg); 沿y轴翻转 transform: rotateZ(ndeg); 沿z轴旋转 旋转原点会影响旋转效果 如果涉及旋转操作 会连带坐标轴一起旋转，影响后面的位移 } HTML 会跳动的小心心 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 200px; height: 160px; /*background-color: pink;*/ margin: 100px auto; position: relative; } #box:hover{ transform: scale(1.2); } .c1,.c2{ width: 100px; height: 160px; position: absolute; border-radius: 50px 50px 0 0; background-color: red; } .c1{ top:0; left:0; transform:rotate(45deg); transform-origin: right bottom; } .c2{ top:0; right: 0; transform:rotate(-45deg); transform-origin: left bottom; } </style> </head> <body> <div id="box"> <span class="c1"></span> <span class="c2"></span> </div> </body> </html>
