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;}

在网页展现时,标签 bodyp 中元素就会按照设置进行显示。

链接

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

4种链接状态

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

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

在进行设置中,有以下两种要求:

  • a:hover 必须位于 a:linka: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 中最常见的几种选择器。

元素选择器

最常见的选择器就是元素选择器,文档的元素的就是最基本的选择器。比如h1a等,在 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-toppadding-rightpadding-bottompadding-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-widthborder-right-widthborder-bottom-widthborder-left-width
  • 同样可以使用属性控制各个边框的颜色:border-top-colorborder-right-colorborder-bottom-colorborder-left-color

外边距

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

  • 宽度的设置:margin-topmargin-rightmargin-bottommargin-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 基本内容已经总结完了,不过本文后续会一直更新,遇到什么常用的设置,都会更新到本文中。