变量
在 根部 通过 – 定义全局变量，定义的全局变量可以在本地Style标签 和 外联样式文件 中使用。
/* html */
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wtt</title>
<style>
:root {
--color: red;
--len: 8px;
}
.aaa {
width: var(--color);
border: var(--len);
}
</style>
<link rel="stylesheet" href="a.css" type="text/css" />
</head>
......
/* 外联css文件： a.css */
:root {
--color: black;
}
.bbb {
color: var(--color);
}
说明：
当全局变量 重名时，后面的说了算，所以类元素aaa 的字体颜色是 黑色的。
性状属性
-
width、height
-
border
-
边圆角
border-radius: 一个值：上下左右边 || 两个值：上下边 左右边 || 四个值: 上 右 下 左 边;
- 盒子阴影
box-shadow: 影子左右移 上下移 模糊度 大小 rgba() inset;
- 字体阴影
text-shadow: 影子左右移 上下移 模糊度 rgba() ; /* 与盒子阴影相比 没有 大小、inset */
/* 实现 文字浮雕效果 */
text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc ;
- 盒子类型
box-sizing: content-box(有padding扩充) || border-box(没有)；
- 背景
/* 渐变背景 */
background: linear-gradient(to right, pink, skyblue);
/* 图背景 */
background-image: url(" ");
background-size: Wpx Hpx || auto;
background-repeat: round(缩放平铺) || space(不缩放平铺) || no-repeat(不平铺);
background-attachment: local(随内容动) || fixed(固定);
background-position: 左右移 上下移;
文章属性
- 字体
font-family: Microsoft YaHei, "宋体";
font-size: 1em = 16px;
font-weight: 100~900;
font-style: italic;
- 文本
letter-spacing: px; /* 字间距 */
line-heigt: px; /* 行高 */
text-align: left || right || justify || center;
text-indent: px; /* 首行缩进 */
text-decoration: none || overline || line-throught || underline;
word-break: break-all; /* 文字自动换行 */
vertical-align: center; /* 图文对齐 */
- 超出文本 省略号 代替：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- 文章分列
column-count: 列数;
column-width: Wpx;
布局属性
-
float
-
margin
-
padding
-
position
-
形变
transform: translate(Xpx, Ypx);
: rotate(90deg); /*(以中心，顺转90度)*/
: scale(Xpx, Ypx); /*(上下边，上下动； 左右边，左右动)*/
: skew(Xdeg, Ydeg); /*(上下边，左右动； 左右边，上下动)*/
transform-origin: left top;(基点： left、right、bottom、top、center)
- flex布局
display: flex;
/*水平方向*/
justify-content: space-between || space-around || center;
/* 竖直方向 */
align-items: flex-start || center || flex-end;
/* 主轴 + 换行 */
flex-flow: colum wrap; /* 默认为 row nowrap */
/* 在子元素中的属性 */
flex-grow: 1;
flex-shrink:1;
align-self: flex-start || center || flex-end; /* 侧轴上的排布 */
效果属性
-
cursor: pointer;
-
过渡
transiton-property: all;
transiton-duration: 多少s;
transiton-timing-function: linear;
transiton-delay: 多少s;
/* 语法糖 */
transition: all 3s ease 0s;
- 动画
@keyframes wtt {
0% {
width: 10px;
height: 10px;
}
50% {
width: 20px;
height: 20px;
}
100% {
width: 30px;
height: 30px;
}
}
div {
border:1px soid red;
animation-name: wtt;
animation-duration: 3s;
animation-timing-function: linear;
animation-direction: alternate; (头->尾->头)
animation-iteration-count: infinite; (循环次数：永久)
}
其他属性
- overflow: hidden;
选择器
- 组合选择器
div#abc 交集
div,#abc 并集
div #abc 后辈
div>#abc 子辈
div+#abc 后一
div~#abc 后多
- 属性选择器
div[class]
div[class ~= abc] include
div[class ^= abc] start
div[class $= abc] end
div[class = abc] must be
- 伪类选择器 （主语：定语）
div:first-child 第一个div
div:last-child 最后一个div
div:nth-child(2) 第2个div
div:nth-child(2n) 偶数行
div:nth-child(2n+1) 奇数行
div:nth-child(-n+5) 前5个
div:nth-last-child(-n+5) 前5个
- 动作选择器
div {
width: 10px;
height: 10px;
border: 5px solid black;
}
div:hover {
border: 5px solid red;
}
div:active {
border: 5px solid green;
}