跳至主要內容

样式

苓渊大约 11 分钟css

文本样式

字体样式

字体大小使用属性名 font-size 设置，取值使用数字 + 单位（px），px 代表像素。

字体粗细使用属性名 font-weight 设置，取值可以使用关键字：normal（正常）/ bold（加粗），也可以是数字取值（100 ~ 900 之间的整百数）：400（正常），700（加粗）。

字体倾斜使用属性名 font-style 设置，取值使用关键字 normal（正常，默认值）/ italic（倾斜）。

字体间距使用属性名 letter-spacing 设置，取值使用数字 + px.

字体使用属性名 font-family 设置，取值是用逗号分隔一系列的字体名称，最后一个值是字体系列。字体名词存在多个单词建议使用引号包裹。渲染时将从左至右顺序查询电脑中已安装的字体，都不支持时使用字体系列的默认字体。

常见的字体包括："Microsoft YaHei" / 微软雅黑 / 黑体 / 宋体 / 楷体。常见的字体系列包括：sans-serif（无衬线字体） / serif（衬线字体） / monospace（等宽字体）。在 Windows 操作系统中默认字体是微软雅黑， MacOS 中是苹方。

字体系列解释

  • 无衬线字体：文字笔画粗细均匀，首尾无装饰。多应用于网页中。包括黑体、Arial.
  • 衬线字体：文字笔画粗细不均匀，首尾有笔锋装饰。多应用于报刊书籍。包括宋体、Times New Roman.
  • 等宽字体：每个字母和文字的宽度相等。多应用于代码编写。包括：Consolas、fira code.

使用 font 复合属性一次性设置所有字体样式，取值有多个，使用空格分隔，含义分别是 style weight size/line-height family，其中 style weight 可省略。

文本修饰符使用 text-decoration 属性设置，取值使用关键字：underline（下划线） / line-through（删除线） / overline（上划线） / none（无），none 可以用于清除标签的默认样式，如 a 标签的下划线。

* {
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 2px;
    font-family: "Microsoft YaHei", 微软雅黑, 黑体, 宋体, 楷体, sans-serif;
    font: italic 700 18px/2 黑体;
}

段落样式

首行缩进使用 text-indent 属性设置，取值使用数值 + 单位（px / em），em 代表字符，相当于当前标签的 font-size 的大小（一个字的大小）。

水平对齐方式使用 text-align 属性设置，取值使用关键字：left（左对齐，默认值）、center（居中对齐）、right（右对齐）。要使文本居中对齐，应修饰其父元素。

行高使用 line-height 属性设置，取值使用 数字 + px 或当前标签 font-size 的倍数。行高控制一行的上下行间距，是上下间距和文本高度三者的总和。设置 line-height 为 1，则可以取消上下间距。

要使文本垂直居中可以设置 line-height 等于文本父元素的高度。

p {
    /* p标签首行缩进2字符 */
    text-indent: 2em;
    
}
body {
    /* 要使文本居中对齐，应修饰其父元素 */
    text-align: center;
}

背景

背景颜色使用属性 background-color 设置，取值方式参见简介#颜色取值。默认值为 rgba(0, 0, 0, 0).

背景图片使用属性 background-image 设置，取值使用 url("") 路径引用，引号可以省略，默认在水平和垂直方向平铺。

背景平铺方式使用属性 background-repeat 设置，取值使用关键字：repeat（水平和垂直方向都平铺，默认）、no-repeat（不平铺）、repeat-x（沿 x 轴方向平铺）、repeat-y（沿 y 轴方向平铺）。

背景位置使用属性 background-position 设置，值有两个，空格分隔，其含义为：水平方向位置 垂直方向位置。取值可以使用方位名词，水平方向（left、center、right），垂直方向（top、center、bottom）；也可以使用数值 + px 模拟坐标系位置，原点 (0, 0) 表示盒子左上角，x 轴水平向右、y 轴垂直向下。

使用 background 复合属性一次性设置所有背景相关属性，属性值之间用空格隔开，没有顺序之分，可以按需省略任意属性，建立顺序是：color image repeat position/size.

垂直对齐方式使用属性 vertical-align 设置，取值使用关键字：middle（居中）.

背景大小使用属性 background-size 设置，拥有两个属性值：宽度 高度。取值可以是数值 + px ；可以是百分比；可以是关键字：contain（包含，等比例缩放）。

div {
    background-color: pink;
    background-image: url("./image.jpg");
    background-repeat: repeat-x;
    background-position: 0 0;
    background: #000 url("#") no-repeat center/cover;
    background-size: cover;
}

渐变

在 background-image 属性中使用 linear-gradient 实现背景效果渐变，渐变是多个颜色逐渐变化的视觉效果。

background-image: linear-gradient(颜色1, 颜色2, ...);

div {
  background-image: linear-gradient(
    pink, 
    hotpink
  );
}

/*半透明渐变*/
div {
  background-image: linear-gradient(
    transparent,
    rgba(0,0,0,.5)
  );
}

精灵图

精灵图指由多张小图片合并的一张大图片。目的是减少需要加载的资源大小，提高页面加载速度。

实现步骤：

  1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同。
  2. 将精灵图设置为盒子的背景图片。
  3. 修改背景图位置，分别设置给盒子的 background-position 属性找到对应需要的小图。
  4. 精灵图的标签都用行内标签。
span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("#");
  background-position: -5px 0;
}

装饰

垂直对齐方式

使用属性 vertical-align 设置垂直对齐方式，属性值：baseline（默认值，基线对齐）、top（顶部对齐）、middle（中部对齐）、bottom（底部对齐）。

基线是浏览器文字类型元素排版中存在用于对齐的基线。

div {
  vertical-align: middle;
}

光标类型

使用属性 cursor 设置鼠标光标在元素上时显示的样式。属性值：default（默认值，通常是箭头）、pointer（小手效果，提示用户可以点击）、text（工字型，提示用户可以点击）、move（十字光标，提示用户可以移动）。

div {
  cursor: pointer;
}

圆角边框

使用属性 border-radius 让盒子四个角变得圆润，增加页面细节。属性值：数值 + px 或百分比。

  • 一个取值，设置四个角。
  • 四个取值，分别设置：左上、右上、右下、左下的角。
  • 三个取值，分别设置：左上、右上左下、右下的角。（看对角）。
  • 两个取值，分别设置：左上右下、右上左下的角。（看对角）。
div {
  border-radius: 2px;
}

溢出显示

使用属性 overflow 控制内容溢出部分的显示效果，溢出部分指盒子的内容超出盒子范围的区域。

属性值：visible（默认值，溢出部分可见）、hidden（溢出部分隐藏）、scroll（无论是否溢出，都显示滚动条）、auto（根据是否溢出，自动显示或隐藏滚动条）。

div {
  overflow: auto;
}

元素隐藏

让某个元素在页面中不可见。

  • visibility: hidden
  • display: none
div {
  visibility: hidden;
}

元素透明度

使用属性 opacity 让某元素整体包括内容一起拥有透明度。

属性值：0 ~ 1 之间的数值，0 表示完成透明，1 表示完全不透明。

div {
  opacity: 0.5;
}

盒子阴影

使用属性 box-shadow 给盒子添加阴影效果。

属性值：

参数作用
h-shadow必须，水平偏移量，允许负值
v-shadow必须，垂直偏移量，允许负值
blur可选，模糊度
spread可选，阴影扩大
color可选，阴影颜色
inset可选，将阴影改为内部阴影
div {
  box-shadow: 5px 10px 10px 10px pink inset;
}

过渡

使用 transition 属性让元素的样式慢慢变化。

属性值：

参数取值
过渡的属性all：所有能过渡的属性都过渡、具体属性名：此属性使用过渡效果
过渡的时长数值 + s（秒）

属性设置在不同状态中，效果不同：

  • 给默认状态设置，鼠标移入移出都有过渡效果。
  • 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。
div {
  transition: width 1s , color 2s;
  width: 300px;
}
div:hover {
  width: 500px;
  background-color: pink;
}

transform

使用 transform 复合属性实现元素的位移、旋转、缩放效果。

复合属性使用时需保证顺序 transform: translate() rotate();，因为旋转会改变坐标轴向，影响位移的方向，旋转属性需最后使用。

位移

transform 取值中使用 translate 设置元素的位移效果。

transform: translate(水平移动距离, 垂直移动距离);

transform: translateX(水平移动距离);

transform: translateY(垂直移动距离);

属性值可以是数值 + px；也可以是百分比，正负均可。

使用时建议搭配过渡属性 transition.

div {
  transition: all 0.5s;
}
div:hover {
  transform: translate(0, -50%);
}

旋转

transform 取值中使用 rotate 设置元素的旋转效果。

transform: rotate(角度);

属性值是数值 + 单位（deg），正负均可，正数顺时针旋转，负数逆时针旋转。

转换原点

盒子原点默认是中心点，使用 transform-origin 属性可以改变转换原点，需添加给标签本身。

transform-origin: 原点水平位置 原点垂直位置;

属性取值方式：

  • 方位名词：left、right、top、bottom、center.
  • 像素单位数值。
  • 百分比。
div {
  transform-origin: right bottom;
}

缩放

transform 取值中使用 scale 设置元素的缩放效果。

transform: scale(x轴缩放倍数, y轴缩放倍数);

取值为数值，大于 1 表示放大，小于 1 表示缩放。一般只设置一个值，表示 x 轴和 y 轴等比例缩放。

img {
  transform: scale(1.5);
}

立体空间

x、y、z 三条坐标系构成的一个立体空间，z 轴位置与视线方向一致。

Z轴位移

transform: translate3d(x, y, z);

transform: translateZ();

属性值是数值 + px 或百分比，正负均可。

z 轴效果与视线平行，所以直接不可见，仅设置透视后，z 轴的变化可导致元素变大或变小。

透视

使用 perspective 属性实现透视效果，应设置给父元素。利用透视特性可以实现近大远小、近实远虚的效果。

属性取值使用数值 + px，一般在800 ~ 1200.

空间旋转

transform: rotateX();：以 X 轴旋转，取值为 0 ~ 1 之间。

transform: rotateY();：以 Y 轴旋转。

transform: rotateZ();：以 Z 轴旋转。

rotate3d(x, y, z, 角度度数);

立体呈现

设置 transform-style 属性为 preserve-3d 使子元素处于 3D 空间，呈现立体图形。属性默认值为 flat，表示子元素处于 2D 平面。

空间缩放

transform: scale3d(x, y, z);

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

动画

动画的本质是快速切换大量图片形成的具有连续性的画面，构成动画的最小单元是帧或动画帧。

定义动画效果

/*使宽度从 200px 变到 600px */
@keyframes 动画名称 {
  /*动画的初始状态和盒子默认样式一致，可以省略*/
  from {
    width: 200px;
  }
  to {
    width: 600px;
  }
}

/*使用百分比的方式分段设置效果，百分比指动画总时长的占比*/
@keyframes 动画名称 {
  0% {
    width: 200px
  }
  10% {
    width: 300px;
    height: 100px;
  }
  15% {
    width: 500px;
    height: 900px;
  }
  100% {
    width: 500px;
    height: 1500px;
  }
}

animation

使用 animation 复合属性添加动画效果，实现多个状态间的变化过程（重复播放、最终画面、是否暂停）。

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

animation 复合属性取值不分先后顺序，动画名称和动画时长必须赋值。存在两个数值时，第一个表示动画时长，第二个表示延迟时间。

div {
  animation: 动画名称 2s /*动画花费时长*/;
}
  • 速度曲线取值：linear（线性，默认）、数值（逐帧动画）。
  • 重复次数取值：数值、infinite（无限循环）。
  • 动画方向取值：alternate（交替）。
  • 执行完毕时状态取值（无限循环时不执行）：backwards（动画停留在第一帧状态，默认）、forwards（动画停留在最后一帧状态）。

animation 复合属性可以拆分单个属性：

  • animation-name：动画名称。
  • animation-duration：动画时长。
  • animation-delay：延迟时间。
  • animation-fill-mode：动画执行完毕时状态。
  • animation-timing-function：速度曲线。
  • animation-iteration-count：重复次数。
  • animation-direction：动画执行方向。
  • animation-play-state：暂停动画。（paused为暂停，通常配合:hover使用）。

逐帧动画

使用精灵图，设置盒子尺寸为一个小图的尺寸，改变背景图的位置，添加速度曲线，帧数设置为精灵图中小图的个数，添加无限重复效果。

多组动画

逐帧动画、位移动画等多个动画配合使用。实现更多的效果。

上次编辑于:
贡献者: lingyuan