一、概述

本文继前文简要介绍 CSS 的常用样式，包括：文本样式、列表样式、背景边框、常见特效、展示隐藏等效果。

二、文本样式

首先介绍文本样式,我们通过以下代码例子即备注来介绍：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


.text{
    color: red;/*字体颜色，还可以设置为：#fof、#fc34de、red、rgb(255,100,30)、rgba...、hls...等*/
    font-size:20px; /*字体大小 */
    line-height: 1.5; /* ⾏⾼, font-size的倍数 */
    font-family: Arial, Helvetica, sans-serif;/*设置文本的字体系列,如宋体等*/
    font-weight: bold; /* 粗细 bold、normal */
    font-style: italic; /* 斜体 italic、 normal */
    text-decoration: underline; /* 下划线 none、underline、line-through */
    text-align: center; /* ⽂字对⻬ center、left、right、justify(每一行被展开为宽度相等，左右外边距是对其) */
    text-indent: 2em; /* 缩进当前font-size的2倍 */
    letter-spacing: 3px; /* 单个字符⽔平间隔 */
    white-space: nowrap; /* 这三⾏让⽂字单⾏展示超出展示... */
    overflow: hidden;/*如果单行文本溢出则 hidden 设置为隐藏 */
    text-overflow: ellipsis;/*同上，隐藏后更换为"..."符号显示，两者通常一起使用"*/
}

注意： 设置字体大小时有两个单位

px：字体大小像素，完全控制字体大小;
em：em 的字体尺寸大小由 W3C 建议，1 em 和当前字体大小相等，浏览器中默认大小为 16 px。所以2 em = 32 px。

三、列表、背景

3.1 列表样式布局

列表属性布局主要有四个，通过实例展示说明：

1
2
3
4
5
6
7
8


/* 列表 */
ul, ol {
  list-style: none; /* 去掉前⾯的点或者数字 */
  
  list-style-type:circle;/*设置列表标记的类型，ol 有upper-roman、lower-roman等，ul 有circle、square等。*/
  list-style-img:url('***');/* 设置列表标记的图像，以 url 链接过来的为准*/
  list-style-positon:0px 5px;/* 设置列表标记的位置左 0px，上下 5px*/
}

3.2 背景

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果说明见下表：

属性名	说明
background-color	背景颜色，通常用十六进制(#ff0000)，rgb(255,0,0) 或颜色名字(red) 来表示
background-size	背景图像大小。可以设置宽度高度数值，也可以相对区域百分比，还有cover(完全覆盖区域的最小大小)和contain(完全覆盖区域的最大大小)
background-image	背景图像，通常使用`url('...')`来引入
background-repeat	背景平铺，默认背景图片为水平或者垂直方向平铺(repeat-x/y),也可以不让平铺(no-repeat)
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。(`fix`为固定、`scroll`滚动等)
background-position	背景位置，平衡文本与背景的位置，改变图像在背景中的位置，如(`right top`)为右上
background	可以简化属性设置的代码，将以上几个属性按顺序设置在该属性栏

背景的属性还有很多，本文只是简要介绍一些主要使用的属性。

四、圆、阴影、过渡

4.1 边框

边框设置圆角和圆形，如下例：

1
2
3
4


.box{
    border:1px solid #ccc;
    border-radius:4px;/*要设置成圆，可以设置值为50%或者边框高度(宽度)的一半*/
}

4.2 常见特效：阴影、偏移、过渡

具体见下代码及其注释：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


/* 常⻅特效 */
 .box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 50px;
    transition: all .3s; /* 样式变化的时间持续0.3s */
    cursor: pointer; /* ⿏标放置上去变成⼿指 */
 }
 .box:hover {
    box-shadow: inset -10px -10px 10px #aaa,
    2px 2px 4px 4px rgba(0, 0, 0, 0.2);
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜⾊ */
    opacity: 0.3; /* 透明度为0.3， 1为不透明，0为全透明 */
    transform: translateX(3px); /* ⽔平偏移3px */
 }

五、水平居中、均匀分布

5.1 两栏布局

设置成两栏布局，将侧边宽度固定，主要内容设置成变化，具体代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* flex 两栏布局*/
 .container {
    display: flex;
 }
 .aside {
    width: 100px;
 }
 .main {
    flex:1;
 }

5.2 垂直水平居中

见下代码：

1
2
3
4
5
6


/* 垂直⽔平居中 */
.box {
   display: flex;
   align-items: center;
   justify-content: center;
}

说明如下：

display：规定元素应该生成的框的类型。none表示该元素不会被显示，block 块级元素，inline 默认内联元素前后无换行符，inline-block 行内块元素。设置 flex 表明指定该元素为 Flex 布局。
flex：用于设置或检索弹性盒模型对象的子元素如何分配空间。值为 1 时让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
align-items: 居中对齐弹性盒的各项 <div> 元素.定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
justify-content: 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 *注意：属性align-items和justify-content的使用必须将 display 属性设置为 flex

5.3 均匀分布

具体实现参考以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


* {
   box-sizing: border-box;/*设置IE盒模型模式*/
}
.ct {
   width: 900px;
   border: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;/* 规定灵活的项目在必要的时候拆行或拆列。默认为 nowrap*/
   justify-content: space-between;/* 表明项目位于各行之间留有空白的容器内。*/
   margin: 0 auto;
}
.box {
   height: 80px;
   width: 31%;
   border: 1px solid red;
}

六、展示隐藏、绝对定位

6.1 隐藏展示

实现代码如下：

1
2
3
4
5
6
7


/* 隐藏/展示 */
 .box {
    display: none; /* none、block、flex ... */
 }
 .box:hover{/*表明鼠标移到元素区域后，该元素从隐藏变为显示*/
     display: block
 }

6.2 绝对定位

将元素内容设置到容器内任意想要的位置，实现代码如下：

1
2
3
4
5
6
7
8
9


/* 绝对定位 */
 .father {
    position: relative;
 }
 .child {
    position: absolute;
    left: 10px;
    top: 10px;
 }

说明：
position :指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。它有以下几个常见属性：

absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static: 默认值。没有定位，元素出现在正常的流中
sticky: 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

七、总结

本文简要介绍了CSS的一些常用样式和一些特效的实现方法，只是粗浅的见解，详细使用方法还请参考 MDN 教程

CSS常见样式

Contents