CSS 指的是层叠样式表（Cascading StyleSheet），在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，本文对 css 一些基本内容及常用功能进行一下总结，总结的内容主要是来自实验楼的 CSS 速成教程，这篇文章会实时更新，后续如果遇到什么好的有用功能，也会更新到这篇文章中。

css 基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

1
2
3
4
5
6
selector {
    declaration1;
    declaration2;
    ...
    declarationN;
}

选择器通常是需要改变的 HTML 元素，每条声明都由一个属性和一个值组成，每个属性都有一个值，属性和值被冒号分开。

1
2
3
4
h1{
   color:red;
   font-size:14px;
}

css 基本样式

介绍 css 的一些基本样式，这些都是 css 中一些常用的设置。

背景

css 是允许使用纯色作为背景，也允许使用背景图像实现一些相当复杂的效果。

属性 描述
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否及如何重复，其中，no-repeat：表示不能重复，repeat：可重复（默认值），repeat-x：表示 x 轴重复，repeat-y：表示 y 轴重
background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域

举个例子，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
   background-color: red;
   background-image: url("hha.jpg");
   background-repeat: no-repeat;
   background-position: center top;
   background-attachment: fixed;
   background-size：100px 100px;
}

p{
    width: 150px;
    padding: 10px;
    background-color: #0014ff;
}
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>matt's blog</p>
    </body>
</html>

效果如下下图所示：

效果图

文本

css 文本可定义文本的外观，通过文本的属性，可以改变文本的颜色、字符间距、对齐方式等等。

属性 描述
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本，可选择 left、right 和 center
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距

应用时，可以进行以下设置

1
2
3
4
5
body{
   color: red;
   text-align: center;
}
p {text-indent: 5em;}

在网页展现时，标签 body 和 p 中元素就会按照设置进行显示。

链接

在 css 的链接属性中，可以对其颜色、字体、背景进行相应的设置，不同的状态我们可以设置对应的样式。

4种链接状态

css 共有以下几种链接状态：

  1. a:link：普通的、未被访问的链接；
  2. a:visited：用户已访问的链接；
  3. a:hover：鼠标指针位于链接的上方；
  4. a:active：链接被点击的时刻。

在进行设置中，有以下两种要求：

  • a:hover 必须位于 a:link 和 a:visited 之后；
  • a:active 必须位于 a:hover 之后。

修改链接下划线

只需要在链接属性中添加 text-decoration 属性，将对应的值设置为空即可。

1
2
3
4
5
6
7
a:link{
    background-color:#B2FF99;
    text-decoration:none;
}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

列表

在 html 中学习过列表的一些设置，这里主要讲述的是如何通过 css 进行列表的设置。

简单的列表类型

列表有无序、有序之分，无序列表又可以用不同的标记来区分，而 list-style-type 这个属性我们就可以用来控制标记类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* html 中添加以下内容 */
<ul class="circle">
    <li>haha</li>
    <li>wawa</li>
</ul>

<olclass="square">
    <li>haha</li>
    <li>wawa</li>
</ol>

/* css 中的设置 */
ul.circle {list-style-type:circle}
ol.square {list-style-type:upper-roman}}

列表项图片

在无序列表中，除了进行一些默认的设置外，并没有其他可选的内容，但是 css 可以提供图片来作为标记。

1
ul.img1{list-style-image:url("1.ico")}

表格

在 css 表格的设置中，需要先了解一下属性：

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

这里也以一个例子来说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* html 部分 */
<table id="tb">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>number</th>
    </tr>

    <tr>
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr class="tr2">
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr class="tr2">
        <td>li</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* css 部分*/
#tb td,th{
    border: 1px solid green;
    padding: 5px;
}
#tb{
    border-collapse: collapse;
    width: 500px;
    text-align: center;
}
#tb th{
    text-align: center;
    color: black;
    background-color: lightseagreen;
}
#tb tr.tr2 td{
    color: black;
    background-color: #B2FF99;
}

显示效果如下图

效果图

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：

属性 描述
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色.
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* html 部分 */
<p id="p1">matt's blog</p>
<p id="p2">This is mtt's blog.</p>

/* css 部分 */
#p1{
    outline-color: #FF704D;
    outline-style: groove;
    outline-width: 10px;
}

#p2{
    outline-style: dotted;
    outline-color: green;
    outline-width: 5px;
}

显示效果如下图所示：

效果图

css 选择器

选择器是 css 中最常用的组件，本节就介绍一下 css 中最常见的几种选择器。

元素选择器

最常见的选择器就是元素选择器，文档的元素的就是最基本的选择器。比如h1、a等，在 css 中可以这样实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*第一种，直接对某个元素进行相应的设置*/
h1{
  color: cadetblue;  
}

/*第二种，对多个元素执行同样的操作*/
h1,h2,h3,h4{
  color: cadetblue;
}

/*第三种，对没有特别特定元素设置的元素都执行同样的操作（除 h4外，其他执行的操作都一样）*/
*{
  color: cadetblue;
}
h4{
    color: darkslategray;
}

类选择器

类选择器允许以一种独立与文档元素的方式来制定样式。.class{} 这是类选择器的标志，点后面是属性名，大括号里面就是具体的设置，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*第一种，最简单的使用方法*/
/* 调用方式：<div class="div">matt</div> */
.div{
    color: cadetblue;
}

/*第二种，将类选择器结合元素选择器来使用，下面的例子这个 .div 就只会对 h1 起作用*/
/* 调用方式：<h1 class="div">matt</div> */
h1.div{
    color: cadetblue;
}

/*第三种，多类选择器（.class.class{}），它可以继承多个类的作用*/
/* 调用方式：<p class="p1 p2">shiyanlou is my home</p> */
.p1{
    color: cadetblue;
}
.p2{
    font-size: 20px;
}
.p1.p2{
    font-style: italic;
}

id 选择器

id 选择器类似于类选择器，id 选择器的引入是用#，就和类选择器的.是一样的效果，它与类选择器的区别是：

  • id 顾名思义只能在文档中使用一次，而类可以使用多次；
  • id 选择器不能像刚才类选择器一样结合使用。
1
2
3
4
5
6
7
/* html 中的用法 */
<p id="div">matt's blog</p>

/* css 中的配置*/
#div{
    color: cadetblue;
}

属性选择器

对带有指定属性的 HTML 元素设置样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 第一种，对带有 title 属性的所有元素设置样式 */
[title] {color:red;}

/* 第二种，为 title="te" 的所有元素设置样式 */
[title=te]{
    color: red;
}

/* 第三种，为 href="http://matt33.com" 的标签 a 设置元素样式 */
/* 调用方式：<a href="http://matt33.com">matt's blog</a> */
a[href="http://matt33.com"]{
    color: cornflowerblue;
}

其他选择器

其他的还有：

  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器

下面仅列出一种后代选择器

1
2
3
4
5
6
7
/* html */
<p>This is <strong>my</strong> blog.</p>

/* css */
p strong{
    color: cadetblue;
}

css 盒子模型

css 的盒子模型主要适用于网页的布局。

盒子模型概述

盒子的组成包括：

  • margin(外边距)：边框以外就是外边距，默认外边距是透明的（可以为负）；
  • border(边框)：内边距的边缘就是边框；
  • padding(内边距)：直接包围内容的部分，它呈现了元素的背景；
  • content(内容)：正文框的最内部分就是实际的内容.

其中，内边距、边框和外边距都是可选的，默认值是0。下面用一张简单的图来描述它们的结构

盒子模型

内边距

内边据在正文（content）外、边框（border）内，控制该区域最简单的属性是 padding 属性

  • padding 属性接受长度值或百分比值，但不允许使用负值；
  • 也可以进行统一的内边距设置，也可以进行单边的内边距设置。
  • 设置某一边的边据时，可以通过以下四个属性：padding-top、padding-right、padding-bottom、padding-left.

举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* html 部分 */
<table border="1">
    <tr>
        <td>
            <h1>正文</h1>
        </td>
    </tr>
</table>

/* css 部分 */
h1 {
    padding-left: 5cm;
    padding-right: 5cm;
    padding-top: 30px;
    padding-bottom: 30px;
}

内边距

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

  • 边框的宽度可以通过这几个参数来设置：border-top-width、border-right-width、border-bottom-width、border-left-width；
  • 同样可以使用属性控制各个边框的颜色：border-top-color、border-right-color、border-bottom-color、border-left-color。

外边距

外边距就是围绕在内容框的区域，也可以使用任何长度的单位、百分数来进行设置。

  • 宽度的设置：margin-top、margin-right、margin-bottom、margin-left；
  • margin 的默认值是 0;
  • 在宽度设置时，可以借助于对称复制；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* html 部分 */
<div class="wb">
    <div class="bk">
        <div class="nj">
            <div class="zw">
                matt's blog
            </div>
        </div>
    </div>
</div>

/* css 部分 */
.wb{
    margin: 100px;
}
.bk{
    border-style: groove;
}
.nj{
    padding: 10px;
}
.zw{
    background-color: cornflowerblue;
}

盒子模型举例

css 一些高级用法

这里是 css 中一些高级的常见用法

定位

定位，就是定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

在 css 中，有三种基本的定位机制：

  1. 普通流：在位置顺序决定排版顺序；
  2. 浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；
  3. 绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

定位有以下几个属性:

  • position：将元素放在一个静态的，相对的，绝对的或固定的位置；
  • 通过对 top、left、right、bottom 这四个属性的赋值让元素向对应的方向偏移；
  • overflow：设置元素溢出其区域发生的事情；
  • clip：设置元素的显示形状，多用于图片；
  • vertical-align：设置元素的垂直对其方式；
  • z-index：设置元素的堆叠顺序。

position 属性，有以下四种设置：

  1. relative：就是普通流；
  2. absolute：这个就是绝对定位，该元素区域会与文档区域重合，因为它使用该元素与文档流无关；
  3. fixed：将元素固定下来,就算滚动屏幕,它也会在同一个地方不会动；
  4. static：设置以后,偏移量什么的就没用了。
1
2
3
4
5
6
7
.position1{
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    position: relative;
    left: 60px;
}

浮动

这里涉及到的属性就是 float，其值可以赋值为：

  • left: 元素向左浮动；
  • right: 元素向右浮动；
  • none: 不浮动；
  • inherit: 从父级继承浮动的属性；
  • clear: 主要用于去掉向各方向的浮动属性(包括继承来的属性)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* html 部分 */
<div class="qd"></div>
<div class="wd"></div>
<div class="ed"></div>

/* css 部分 */
.qd{
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    float: left;
}
.wd{
    width: 100px;
    height: 100px;
    background-color: lightseagreen;
    float: left;
}
.ed{
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    float: right;
}

效果如下图所示：

css 浮动

尺寸

尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。涉及到的属性有：

  • height– 设置元素的高度。
  • line-height –设置行高。
  • max-height– 设置元素的最大高度。
  • max-width –设置元素的最大宽度。
  • min-height –设置元素的最小高度。
  • min-width –设置元素的最小宽度。

  • width –设置元素的宽度。

    举例说明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     .p1{
        line-height: normal;
        width: 400px;
    }

    .p2{
        line-height: 50%;
        width: 400px;
    }

    .p3{
        line-height: 200%;
       width: 400px;
    }

导航栏

这里通过一个示例来实现导航栏的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* html 部分 */
<ul>
    <li><a href="http://matt33.com">blog1</a></li>
    <li><a href="http://matt33.com">blog2</a></li>
    <li><a href="http://matt33.com">blog3</a></li>
    <li><a href="http://matt33.com">blog4</a></li>
</ul>

/* css 部分 */
ul{
    list-style: none;
}

li{
    float:left;
}

a:link,a:visited{
   text-decoration: none;
   background-color: lightgray;
   display: block;
   width: 100px;
   margin:5px 10px;
}
a:active,a:hover{
    background-color: cadetblue;
}

显示效果如下：

水平导航栏

图片

插入一张图片，加上一句描述符，使用 div 继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* html 部分 */
<div class="image">
        <a href="./hha.jpg" target="_self">
            <img src="hha.jpg" width="150px" height="150px">
        </a>
        <div class="text">haha</div>
</div>

/* css 部分 */
.image{
    border: 2px solid darkgrey;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    padding: 5px;
}
img{
    padding: 5px;
}
.text{
    font-size: 20px;
    margin-bottom: 5px;
}

显示效果如下：

css 图片

然后可以通过 opacity 属性来设置透明度，属性值的范围为0-1，0是完全透明，1是完全不透明。

到这里，css 基本内容已经总结完了，不过本文后续会一直更新，遇到什么常用的设置，都会更新到本文中。