目录
常见样式参考表
特殊样式
媒体查询
自定义字体
变换效果 transform
translate() 方法
rotate() 方法
scale() 方法
skew() 方法
matrix() 方法
过渡效果 transition
动画效果 @keyframes animate
渐变效果
background-image:linear-gradient
background-image:radius-gradient
多列效果 column-count
字体图标(icon)
常见样式参考表
| 样式名称 | 样式的值 | 说明 |
|---|---|---|
| font-family | 字体名称（如微软雅黑or Microsoft YaHei） | 文本字体 |
| font-style | normal、italic、oblique | 规定斜体文本 |
| font-variant | small-caps、normal | 小型大写字母 |
| font-weight | normal、bold、bolder、数值 | 文本的粗细 |
| font-size | 默认大小是 16 像素 (16px=1em)，单位一般是px，也可以是其他 | 文本的大小 |
| text-indent | 所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值 | 软化文本内容 |
| text-align | left、right 、center、justify | 文本行间的对齐方式 |
| word-spacing | 其默认值 normal 与设置值为 0 是一样的 | 改变单词间隔 |
| letter-spacing | 其默认值 normal 与设置值为 0 是一样的 | 改变字（字母）间隔 |
| text-transform | none、uppercase、lowercase、capitalize | 处理文本的大小写 |
| text-decoration | none、underline、overline、line-through、blink | 文本装饰 |
| white-space | normal、pre-line、nowrap、pre、pre-wrap | 空格换行和tab 处理 |
| color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 文本颜色 |
| direction | 默认ltr、rtl、inherit | 文本的方向 |
| line-height | normal、数值、%等 | 行高 |
| text-shadow | h1 { text-shadow: 5px 5px 5px #FF0000; } | 文本阴影效果 |
| box-shadow | div{ text-shadow: 5px 5px 5px #FF0000; } | 盒子阴影效果 |
| list-style-type | disc、circle、square、decimal、lower-roman、lower-latin | 列表的样式 |
| list-style-image | url函数引入图片 | 列表图标 |
| list-style-position | inside、outside、inherit | 何处放置列表项标记 |
| list-style | list-style:square inside url('imgs/point.png'); | 统一设置列表样式 |
| outline | p { outline:#00FF00 dotted thick; } | 轮廓线 |
| outline-offset | 数值 | 轮廓和元素的距离 |
| outline-color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 轮廓颜色 |
| outline-style | dotted、solid、dashed、double等 | 轮廓样式 |
| outline-width | thin（细）、medium（默认）、thick（粗）、数值 | 轮廓的宽度 |
| border-image | div { border-image:url(border.png) 30 30 round;} | 使用图片来创建边框 |
| opacity | 0~1之间的数值，0表示全透明，1表示不透明 | 透明度 |
| width | 数值 | 元素的宽度 |
| height | 数值 | 元素的高度 |
| max-height | 数值 | 最大高度 |
| max-width | 数值 | 最大宽度 |
| min-height | 数值 | 最小高度 |
| min-width | 数值 | 最小高度 |
| margin | {margin: 0px; margin: 10px 20px; margin: 10px 20px 30px 0px; margin: auto;} | 外边距 |
| margin-left | 数值 | 左外边距 |
| margin-right | 数值 | 右外边距 |
| margin-top | 数值 | 上外边距 |
| margin-bottom | 数值 | 下外边距 |
| padding | {padding: 0px; padding: 10px 20px; padding: 10px 20px 30px 0px; } | 内边距 |
| padding-xx | 和margin一致 | 也有四个 |
| border | border: 1px solid red; | 边线 |
| border-width | 数值 | 边线粗细 |
| border-style | dotted、dashed、solid、double | 边线样式 |
| border-color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 颜色 |
| border-xx-xx | border-top-width: 15px | 样式、颜色、粗细 |
| border-radius | div { border:2px solid; border-radius:25px; }，数值或者百分比 | 边线的弧度 |
| background | { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } | 背景综合写法 |
| background-color | #十六进制三原色、颜色单词、rgb函数、rgba函数 | 背景颜色 |
| background-position | top left 这种单词对 或者 坐标位置（x,y）或者 x%, y% | 背景位置 |
| background-size | background-size:80px 60px;| cover | 背景图像的尺寸 |
| background-repeat | repeat、repeat-x、repeat-y、no-repeat | 背景图像重复 |
| background-image | url函数引入图片 | 背景图片 |
| background-attachment | 默认scroll、fixed | 背景图像是否固定或者随页面的滚动 |
| visibility | visible、hidden | 元素是否可见 |
| display | none、block、inline、inline-block、list-item | 元素类型转换、可见性 |
| position | static、relative、absolute、fixed | 元素定位 |
| z-index | 数值，默认0 | 表示z轴的优先级 |
| vertical-align | baseline、sub、super、top、text-top、middle、text-bottom | 元素的垂直对齐方式 |
| overflow | visible、hidden、scroll、auto | 溢出元素框时处理 |
| clear | left、right、both、none | 清除浮动 |
| float | left、right、none | 元素在哪个方向浮动 |
| resize | none、both、horizontal、vertical | 规定是否调整元素尺寸 |
| box-sizing | content-box、border-box | 容器尺寸计算方式 |
| filter | opacity()、url()、blur()、grayscale()、brightness()等函数 | 设置页面的滤镜 |
案例详解：
body {/*background-color: #666666;*/ } .content {width: 600px;font-family: "微软雅黑","宋体";font-size: 16px;line-height: 35px;/*font-weight: bold;*/text-shadow: -5px -5px 2px #317FE5; /* offset-x | offset-y | blur-radius | color */position: fixed;top: 0;left: 0; } .box {margin: 30px auto;width: 700px;height: 100px;background-color: grey;color: white;/*text-align: justify;*/word-spacing: 10px;letter-spacing: 5px;text-transform: lowercase;text-decoration: underline;direction: inherit;box-shadow: 5px 5px 5px[阴影的模糊程度] #ff0000; /* offset-x | offset-y | blur-radius | color */ /*border: 2px solid green;*/border-width: 2px;border-style: solid;border-color: green;/*border-radius: 5px;*/ border-bottom-left-radius: 5px;border-top-right-radius: 15px; /*visibility: hidden;*//*display: none;*/ } input {outline: blue 1px solid; } .box1 {margin-top: 30px;width: 300px;height: 300px;/*background-color: #317FE5;*/border-radius: 50%;background: #317FE5 url("../image/5.jpeg") left top; } .box2 {margin: 30px;width: 700px;height: 300px;border: 1px solid red;background: url("../image/mybatis-logo.png") no-repeat 50px 5px; }页面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>常见样式的使用</title><link rel="stylesheet" href="css/index.css"> </head> <body> <div class="content"> 中新网2月20日电 据香港《明报》报道，澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，被视为“城中钻石笋盘”，家底丰厚兼遗传了赌王的帅气。2018年农历新年，他公布向内地女友GiGi求婚成功，随后传媒追问他有关婚礼的安排却低调避谈。 </div> <div class="box">澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，hello HTML css</div> <input type="text" name="username" placeholder="姓名"> <div class="box1"></div> <div class="box2"></div> </body> </html>
特殊样式
媒体查询
有时，我们需要显示的区域根据不同设备显示不一样的效果，这时就可以使用媒体查询。而使用媒体查询我们就需要用到 @media 来实现。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体查询</title><style>.box{width: 100%;height: 500px;background-color: #317FE5;}@media screen and (max-width: 500px) {.box {background-color: red;}}@media screen and (min-width: 768px){.box {background-color: blue;}}@media screen and (min-width: 1200px){.box {background-color: #C44F00;}}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
自定义字体
由于浏览器默认的使用的字体是微软雅黑，但有时候我们希望使用我们自己指定的字体，这时就需要使用 @font-face 来实现。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体的使用</title><style>/*指定自定义字体*/@font-face {/*自定义字体名称*/font-family: myfont;src: url("./font/ttf/JetBrainsMono-Bold.ttf"), url("./font/ttf/JetBrainsMono-Italic.ttf");}/* 使用自定义字体 */.box {font-family: myfont;}</style>
</head>
<body>
<div class="box">澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启</div>
</body>
</html>
变换效果 transform
在 CSS 中有以下几种变换效果：
translate()：移动
rotate()：旋转
scale()：缩放
skew()： 翻转
matrix() 综合
translate() 方法
它是一种平移效果，元素从某个位置移动到另一个位置。在使用过程中，需要通过 x 轴和 y 轴来实现。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>translate</title><style>div {width: 200px;height: 200px;}div.box1 {background-color: #317FE5;z-index: 900000;}div.box2 {background-color: orange;/*transform: translate(200px, 30px);*//*transform: translate(100px, -100px);*//*transform: translate(50px);*//*transform: translateX(100px);*/transform: translateY(100px);z-index: 0;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
rotate() 方法
这个效果是让某个元素进行旋转，需要指定旋转的角度。负数为逆时针旋转，正数是顺时针旋转，旋转的单位是 deg。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>rotate</title><style>div {width: 200px;height: 200px;}div.box1 {background-color: #317FE5;transform: rotate(-20deg);}div.box2 {background-color: orange;transform: rotate(45deg);}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
scale() 方法
这个方法的作用是让某个元素的尺寸增加或减少，会根据给定的宽度（x轴）和高度（y 轴）来进行变化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>scale</title><style>div {width: 200px;height: 200px;}div.box1 {background-color: #317FE5;transform: scale(0.5, 0.5);}div.box2 {background-color: orange;/*transform: scale(1.5, 1.5);*//*transform: scale(2);*/transform: scaleX(2);}.container {position: absolute;left: 200px;top: 0;}</style>
</head>
<body>
<div class="container"><div class="box1"></div><div class="box2"></div>
</div>
</body>
</html>
skew() 方法
这个方法的作用是让元素翻转给定的角度，根据给定的水平线（x 轴）和垂直线（y 轴）来进行变化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>skew</title><style>div {width: 200px;height: 200px;color: white;}div.box1 {background-color: #317FE5;}div.box2 {background-color: orange;transform: skew(30deg, 30deg);}</style>
</head>
<body>
<div class="box1">这是第一个块元素</div>
<div class="box2">这是第二个块元素</div>
</body>
</html>
matrix() 方法
这个方法可以实现前面的那几个效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>matrix</title><style>div {width: 200px;height: 200px;color: white;text-align: center;}div.box1 {background-color: #317FE5;}div.box2 {background-color: orange;transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0); /* matrix(a, b, c, d, tx, ty) */}</style>
</head>
<body>
<div class="box1">这是第一个块元素</div>
<div class="box2">这是第二个块元素</div>
</body>
</html>
过渡效果 transition
从一个状态变为另一个状态的过程，要想有过渡效果，我们需要有触发条件，通常的触发条件为鼠标移动到元素上（hover）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单项过渡效果</title><style>.box {width: 200px;height: 200px;background-color: #317FE5;transition: width 2s;}.box:hover {width: 400px;background-color: #C44F00;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
多项过渡：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多项过渡效果</title><style>.box {width: 200px;height: 200px;background-color: #317FE5;/*transition: width 2s, background-color 2s, transform 2s;*/transition: all 2s;}.box:hover {width: 400px;background-color: #C44F00;transform: translateX(150px);}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition 这个属性的值：
| 属性 | 描述 | 值 |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 属性对 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 属性名称 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 数值（单位：秒） |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | linear、ease、ease-in等 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 数值（单位：秒） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡效果比较</title><style>.box {width: 200px;height: 200px;background-color: #317FE5;/*transition: width 5s ease 2s;*//*transition: width 3s linear;*//*transition: width 3s ease-in;*//*transition: width 3s ease-in-out;*/transition: width 3s ease-out;}.box:hover {width: 500px;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画效果 @keyframes animate
在 CSS3 中提供了基于 CSS 动画效果，我们需要先定义动画，然后再使用动画。
定义动画使用 @keyframes，而使用动画使用 animate。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果</title><style>/*.box {*//* width: 200px;*//* height: 200px;*//* background: #317FE5;*//* transition: transform 2s;*//*}*/
/*.box:hover {*//* transform: translateX(100px);*//*}*/
/* 定义动画 */@keyframes myAnimate {from {left: 5px;background: #317FE5;}to {left: 500px;background: red;}}
.box {width: 200px;height: 200px;background: #317FE5;animation: myAnimate 5s;position: absolute;left: 5px;top: 5px;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
另一个效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果</title><style>/* 定义动画 */@keyframes myAnimate {0% {left: 5px;top: 5px;}25% {left: 500px;top: 5px;}50% {left: 500px;top: 200px;}75% {left: 5px;top: 200px;}100% {left: 5px;top: 5px;}}
.box {width: 200px;height: 200px;background: #317FE5;animation: myAnimate 5s;position: absolute;left: 5px;top: 5px;}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画属性
| 属性 | 描述 | 值 |
|---|---|---|
| @keyframes | 规定动画。指定 | css样式 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 动画名称 |
| animation-name | 规定 @keyframes 动画的名称。 | 动画名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 数值 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | ease-in-out、linear、ease、ease-in、ease-out |
| animation-delay | 规定动画何时开始。默认是 0。 | 数值 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 数值或者infinite |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | normal、alternate |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | paused、running |
| animation-fill-mode | 规定对象动画时间之外的状态。 | none、forwards、backwards、both |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画属性介绍</title><style>.box {width: 200px;height: 200px;background: #317FE5;position: absolute;top: 5px;left: 5px;
/*animation: myMove 5s;*//* 指定动画名称 *//*animation-name: myMove;*//* 定义动画持续时间，单位是秒或毫秒 *//*animation-duration: 3s;*//* 定义动画执行的效果 *//*animation-timing-function: ease-in;*//* 定义动画执行次数，默认为 1 次，如果希望无限次，则值为 infinite *//*animation-iteration-count: infinite;*//*animation-iteration-count: 1;*//* 定义动画的运行方向 *//*animation-direction: alternate-reverse;*//*animation-direction: alternate;*/
/*animation-play-state: paused;*/
animation: myMove 3s ease-in infinite alternate;
}
@keyframes myMove {from {/*background: #317FE5;*/left: 5px;top: 5px;}to {/*background: red;*/left: 200px;top: 5px;}}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画案例：定义两个圆，一个圆逆时针旋转，另一个圆顺时针旋转。
下图是定义分析
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画的案例</title><style>.outer {width: 300px;height: 300px;background: url("image/5.jpeg") no-repeat center center;overflow: hidden;border-radius: 50%;/*transform: translateY(50%);*/position: absolute;left: 50%;top: 50%;margin-top: -150px;margin-left: -150px;animation: outerAnimate 5s linear infinite;}.inner {width: 200px;height: 200px;background: url("image/7.jpeg") no-repeat center center;/*transform: translate(25%, 25%);*/border-radius: 50%;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;animation: innerAnimate 3s linear infinite;}@keyframes outerAnimate {from {transform: rotate(360deg);}to {transform: rotate(0deg);}}@keyframes innerAnimate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style>
</head>
<body>
<div class="outer"><div class="inner"></div>
</div>
</body>
</html>
渐变效果
background-image:linear-gradient
background-image:radius-gradient
在 CSS3 中提供了可以让两种或多种颜色 之间的显示平稳过渡。我们只需要使用 background-image: linear-gradients 属性来指定即可。它的语法为：
background-image: linear-gradient(direction, color-stop1, color-stop2,....);
简单示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>渐变效果1</title><style>.box {width: 500px;height: 200px;border: 1px solid #333333;/* 线性渐变，从下到上 *//*background-image: linear-gradient(#cccccc, #317FE5, #ff0000);*//* 线性渐变：从左到右 *//*background-image: linear-gradient(to right, #317FE5, #ff0000);*//* 线性渐变：从右到左 */background-image: linear-gradient(to left, #317FE5, #ff0000);}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
其它效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>渐变效果2</title><style>.box {width: 300px;height: 300px;margin: 50px auto;border: 1px solid #333333;border-radius: 50%;/* 可以指定渐变的角度 *//*background-image: linear-gradient(180deg, #ff0000, yellow);*/
/* 可以指定渐变的透明度 *//*background-image: linear-gradient(to right, rgba(255,0,0,.5), rgba(255, 255, 0, 0.5));*/
/* 重复的线性渐变 *//*background-image: linear-gradient(red, yellow 10%, green 20%);*/
/* 径向渐变 */background-image: radial-gradient(red, yellow);}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
多列效果 column-count
在 CSS3 中提供了将文本内容设计成像报纸一样的多列布局。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多列效果</title><style>.box {column-count: 3;}</style>
</head>
<body>
<h1>下面的数据呈现3列展示</h1>
<div class="box">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
</html>
字体图标(icon)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>字体图标</title> </head> <body> <h1>svg标签的使用</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="50" cy="50" r="20" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html>
)
海豚与沙丁鱼全过程文档及程序)
 ❀ 01. 对指定IP网段访问进行分流 ❀ FortiGate 防火墙)
