css3样式_请简要描述一下css3的样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_39477501/article/details/104204616

1. 字体样式属性

（1）font-style：字体风格，设置斜体italic或正常字体normal。

（2）font-weight：粗体，normal | bold | bolder | lighter | <integer>，数值取值范围100~900，其中normal相当于数值400，bold相当于700。

（3）font-size：字号大小，可使用相对长度单位，em相对于当前对象内文本的字体尺寸，px像素，也可使用绝对长度单位，in英寸，cm厘米，mm毫米，pt点。现在网页中普遍使用14px，尽量使用偶数的数字字号。

（4）font-family：字体，网页中常用的字体有宋体、微软雅黑（默认）、黑体等，可同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。中文字体或字体名包含空格、#、￥等符号时，需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前。字体名还可以用unicode编码，例如宋体 "\5B8B\4F53"，微软雅黑 "\5FAE\8F6F\96C5\9ED1"。

（5）font：综合设置字体样式，选择器 {font: font-style font-weight font-size / line-height font-family;}；不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用。

<style type="text/css">
    p {
        /*font-style: italic;
        font-weight: 700;
        font-size: 14px;
        font-family: "微软雅黑";*/
        font: italic bold 14px "微软雅黑";
    }
</style>

2. 文本外观属性

（1）color：文本颜色，取值方式有4种，预定义的颜色值，如red，green，blue等；十六进制（最常使用），如#F00，#F60等；RGB代码，如rgb（255,0,0）或rgb（100%，0%，0%）等，百分号不能省略，css3中可以设置透明度，rgba（100%，0%，0%，50%），最后一位数取值范围为0~1。

（2）line-height：行间距，行高，行与行之间的距离，即字符的垂直间距，常用单位有像素px，相对值em和百分比%，一般行距比字号大7,8像素左右即可。

（3）text-align：文字水平对齐方式，取值有left，right，center，行高等于盒子高度时，文字垂直居中。

（4）text-indent：首行缩进其属性可为不同单位的数值、em一个字符宽度的倍数\或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em。

（5）letter-spacing：字间距，字符与字符之间的空白，中文即汉字，英文即字母，允许使用负值，默认为normal。

（6）word-spacing：单词间距，用于定义英文单词之间的间距，对中文字符无效，允许使用负值。

（7）text-shadow：文字阴影（css3），语法格式text-shadow：水平位置（必须）垂直位置（必须）模糊距离阴影颜色，例如text-shadow: 5px 11px 3px rgba(0,0,0,0.5)，后面两个值可省略，取默认值。还可以利用text-shadow设置凹凸文字效果，示例代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            background-color: #ccc;
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
        }
    </style>
</head>
<body>
    <div>凸起的文字</div>
    <div>凹下的文字</div>
</body>
</html>

（8）text-decoration：文本装饰，none定义标准的文本，underline带下划线的文本，overline文本上有一条线，line-through穿过文本的一条线。

（9）word-break：自动换行，主要处理英文单词，取值有三种，normal（使用浏览器默认的换行规则）、break-all（允许在单词内换行）、keep-all（只能在半角空格或连字符处换行）。

（10）white-space：设置或检索对象内文本显示方式，取值有两种，normal（默认，自动换行），nowrap（强制在同一行内显示所有文本，直到文本结束或者遇到<br />标签换行）。

（11）text-overflow：文字溢出，取值有两种，clip不显示省略标记，只是简单的裁剪，ellipsis当对象文本溢出时显示省略标记，使用时必须设置white-space：nowrap；和overflow：hidden。

3. 背景background（相对于设置了宽高的div）

（1）background-color：背景颜色。

（2）background-image：背景图片地址，例如background-image：url（images.jpg）。

（3）background-repeat：是否平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横纵均平铺，no-repeat不平铺，sound背景图像自动缩放直到适应且填充满整个容器，space背景图像以相同的间距平铺且填充满整个容器或某个方向。

PS：精灵图是将网页中的一些背景图像整合到一张大图中，各个网页元素只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用css的background-image、background-repeat、background-position属性进行背景定位，同时对盒子的宽高进行限制。

（5）background-attachment：背景图像随内容滚动scroll还是固定fixed。

（6）background：复合属性（不强制要求顺序），背景颜色背景图片地址背景平铺背景滚动背景位置，例如background：#000 url（images.jpg） no-repeat fixed center -25px。

（7）背景半透明：即盒子背景半透明，例如background：rgba（0，0，0，0.3）。

（8）background-size：背景缩放，可以设置长度单位px或百分比（参照盒子的宽高），设置一个值宽或高，另一个值等比例缩放；或设置为cover（较多使用），自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏；或设置为contain，会自动调整缩放比例，保证图片始终显示在背景区域。

（9）多背景：background设置，每组属性间使用逗号分隔，如果多重背景图之间存在交集（重叠关系），前面的背景图会覆盖在后面的背景图之上，为了避免背景色将图像盖住，背景色通常都定义在最后一组上。

4. 补间动画（过渡效果）transition（css3）

（1）transition-property过渡属性名称，例如width、height、all等等。

（2）transition-duration花费时间，单位是秒s，例如0.5s。

（3）transition-timing-function过渡效果时间曲线（默认ease），取值有linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速后减速。

（4）transition-delay何时开始，默认0s，立马开始。

（5）复合属性transition：transition-property transition-duration transition-timing-function transition-delay；例如transition：background-color 2s ease 2s；如果有多组属性变化，可用逗号隔开。

5. 2D变形变换transform（css3）

实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠flash才可以实现的效果，多组变形可直接用逗号隔开即可。

（1）translate（x，y）：将文字或图像在水平方向和垂直方向上分别移动x像素和y像素，可为负值，也可设置为百分比，例如定位的盒子居中对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);/*向左移动自身宽度的50%*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（2）translateX（x）：仅水平方向移动；translateY（y）：仅垂直方向移动。

（3）scale（x，y）：使元素水平方向和垂直方向同时缩放，默认取值为1，当设置为0.01到0,99之间的任何值时，作用使一个元素缩小；任何大于或等于1.01的值，作用是让元素放大。

（4）scaleX（x）：元素仅水平方向缩放；scaleY（y）：元素仅垂直方向缩放。

（5）rotate（deg）：可以对元素进行旋转，正值为顺时针，负值为逆时针，例如transform：rotate（45deg）。

transform-origin可以调整元素转换变形的原点，默认为transform-origin：center center；可以设置为left top，或者是更精确的位置，像素px定位。

（6）skew（deg，deg）：使元素按一定的角度在水平、垂直方向上进行倾斜，可为负值，第二个参数不写默认为0。

6. 3D变形变换transform（css3）

3D坐标轴

（1）rotateX（deg）、rotateY（deg）、rotateZ（deg）：旋转。

（2）perspective：视距，眼睛到屏幕的距离，视距越大，效果越不明显，视距越小，透视效果越明显，透视一种展示形式，体现出3D的效果。

（3）translateX（px）、translateY（px）、translateZ（px）、translate3d（x，y，z）：移动，x，y可以是百分数，也可以是像素，但是z只能是像素，translateZ是物体到屏幕的距离，控制物体近大远小的具体情况，translateZ越大，我们看到物体越近，物体越大。

（4）backface-visibility：hidden，定义当元素不面向屏幕时是否可见。

8. 动画animation（css3）

（1）animation：动画名称动画时间运动曲线何时开始播放次数是否反方向。

（2）animation-name：动画名称。

（3）animation-duration：动画完成一个周期所花费的秒或毫秒，默认为0。

（4）animation-timing-function：动画的速度曲线，默认ease。

（5）animation-delay：动画何时开始，默认为0。

（6）animation-iteration-count：动画被播放的次数，默认为1，还可以取值infinite无限循环。

（7）animation-direction：动画是否在下一周期逆向地播放，默认是normal，还有三种取值reverse反向、alternate先正常运行再反方向运行，并持续交替、alternate-reverse先反向再正方向运行。

（8）animation-play-state：动画是否正在运行或暂停，默认是running。

（9）animation-fill-mode：对象动画时间之外的状态。

7. 其它属性

（1）overflow：溢出，检索或设置当对象的内容超出其指定高度及宽度时如何管理内容。visible不剪切内容也不添加滚动条；auto超出自动显示滚动条，不超出不显示滚动条；hidden不显示超出对象尺寸的内容，超出的部分隐藏掉；scroll不管超出内容与否，总是显示滚动条。

（2）cursor：鼠标样式，设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状，取值有default（小白）、pointer（小手）、move（移动）、text（文本）。

（3）outline：outline-color outline-style outline-width，轮廓，绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，常见的用法都是取消轮廓线，outline：0；或者是outline：none。

（4）resize：设置为none，防止火狐、谷歌等浏览器随意的拖拽文本域大小。

（5）vertical-align：垂直对齐，取值有baseline（默认）、top、middle、bottom，不影响块级元素的内容对齐，它只针对于行内元素或者行内块元素，通常用来控制图片和表单与文字的对齐。但是图片或者表单等行内块元素，底线会和父级盒子的基线对齐，图片底部会有一个空白的缝隙，一种解决方法（常用）是给img设置vertical：middle | top，让图片不要和基线对齐，另一种解决方法是给img添加display：block，转换为块级元素就不会存在问题了。