外观
css
2003字约7分钟
css
2020-05-08
语法
选择器
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。单位
- 像素 -- px
- 比例像素 -- calc(90% - 20px)
- 字体 -- em
- 相对字体 -- rem
- 移动端 -- vh vw
- 16进制颜色 -- #FFFFFF
显示
- 展示效果 -- display: none|block|inline|inline-block;
- 大小 -- width height
- 可见性 -- visibility: hidden|visible;
- 透明度 -- opacity:number; //number取值0.0（完全透明）-1.0（完全不透明）
字体
- 字体大小 -- font-size
- 字体风格 -- font-style
- 字体加粗 -- font-weight
- 字体类型 -- font-family
- 字体阴影 -- text-shadow
- 字体行高 -- line-height
- 字间距 -- letter-spacing
- 字段缩进 -- text-index
- 字体居中 -- text-align
- 字体风格 -- -webkit-font-smoothing：
边框
- 图片边框 -- border-image
- 圆角 -- border-radius
- 阴影 -- box-shadow
- 类型 -- box-sizing: content-box|border-box|inherit;
滚动条
- overflow: auto;
- overflow-x: auto;
- overflow-y: auto;
背景
- 背景固定 background-attachment:fixed;
- 背景区域 background-origin
- 背景大小 background-size
- 多个背景 background-image:url(),url();
- background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));
- 渐变样式：Radial linear
- 渐变起点、渐变终点、
- 开始颜色、终止颜色
- -webkit-gradient(radial,center, shape size, start-color, ..., last-color);
景深
- perspective属性：（目前仅仅支持-webkit-perspective属性，视点距离）
- 值：number
- perspective-origin属性：（视点位置）
- 值：number% number%
动画
- @keyframes 动画名 动画关键帧
- animation 动画的6个属性
- animation-name 动画的名称
- animation-duration 动画的周期时间
- animation-timing-function 动画的速度曲线
- animation-delay 动画的开始时间
- animation-iteration-count 动画的播放次数
- animation-direction 动画的下一个周期是否逆向
- animation-play-state 动画是否在运行
- animation-fill-mode 动画时间之外的状态
- animation: myfrist(关键帧) 5s(时间) infinite(持续) linear(线性)
变换
- transform-style属性（设置三维/二维效果）
- flat表示子元素不保留3D设置（默认）
- preserve-3d表示子元素保留3D设置
- transform属性
- X轴向右为正，Y轴向下为正，Z轴向外为正
- translateX(length)、translateY(length)、translateZ(length)对元素进行3D位移，合并为translate3d(x,y,z,deg)(并不好用，必须同等旋转)
- 旋转逆时针为负、顺时针为正，旋转中心设置
- scaleX(number)、scaleY(number)、scaleZ(number)对元素进行3D缩放，合并为scale3d(number,number,number)
- rotateX(angle)、rotateY(angle)、rotateZ(angle)对元素进行3D旋转操作，合并为rotate3d(angle,angle,angle)
表格
- 表格布局 table-layout
- 单元格边框合并 border-collapse
- 单元格距离 border-spacing
- 表格布局 table-layout
- 单元格边框合并 border-collapse
- 单元格距离 border-spacing
实例
动态模糊
可拖拽头部
这里是内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态模糊</title>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="app" id="app">
<div class="bar" id="bar">可拖拽头部</div>
<div class="content" id="content">这里是内容</div>
</div>
</div>
<style>
html,body{
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
top: calc(50% - 250px);
left: calc(50% - 400px);
width: 800px;
height: 500px;
overflow: hidden;
background-image: url("img1.png");
background-repeat: no-repeat;
background-position: center;
background-size: 800px 500px;
}
.app {
z-index: 1;
position: absolute;
width: 300px;
height: 150px;
overflow: hidden;
text-align: center;
box-shadow: 0px 0px 5px #252525b8;
border-radius: 3px;
}
.app::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -30px;
background-image: url("img1.png");
background-repeat: no-repeat;
background-position: center;
background-size: 800px 500px;
background-attachment: fixed;
filter: blur(10px);
}
.bar {
background: #b3b3b375;
height: 24px;
cursor: move;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
line-height: 24px;
color: #000;
font-size: 14px;
}
.content {
height: 126px;
line-height: 120px;
}
</style>
<script>
let dragBox = function (wrapper, drag, app) {
function getCss(ele, prop) {
return parseInt(window.getComputedStyle(ele)[prop]);
}
let initX, initY, dragable = false,
appLeft = getCss(app, "left"), appTop = getCss(app, "top"),
wrapperLeft = getCss(app, "left"), wrapperTop = getCss(wrapper, "top");
drag.addEventListener("mousedown", function (e) {
dragable = true;
initX = e.clientX;
initY = e.clientY;
}, false);
document.addEventListener("mousemove", function (e) {
if (dragable === true) {
var nowX = e.clientX, nowY = e.clientY, disX = nowX - initX, disY = nowY - initY;
app.style.left = appLeft + disX + "px";
app.style.top = appTop + disY + "px";
}
});
drag.addEventListener("mouseup", function (e) {
dragable = false;
appLeft = getCss(app, "left");
appTop = getCss(app, "top");
}, false);
};
dragBox(document.querySelector("#wrapper"), document.querySelector("#bar"), document.querySelector("#app"));
</script>
</body>
</html>