样式名称	样式的值	说明
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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/676792