Python全栈 Web（CSS常用样式大全）

常用内联样式：
func-size
color
background-color
内部样式表：

选择器1{
属性：值；
}
选择器2{
属性：值；
}
…

外链方式：

样式优先级：
默认 < 稳文档内嵌/元素选择器 < 行内
不发生冲突 同步 发生冲突 后来者居上

选择器：
标签选择器：
p{
color: red;
}
类选着器：
.cls{
样式
}

文本

文本

标签类结合：
p.cls{
样式
}
表示在指定标签中匹配class属性
id选着器：
#nav{
样式
}

群组选择器：
div, 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

阿里云代金券1000元免费领取地址：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d
新老阿里云账户均可领取！可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。 代金券自领取之日起，有效期是30天，请及时使用，过30天后还可以重新领取。

常用属性：
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 会跳动的小心心