CSS字体

  • 字体系列

font-family属性设置文本的字体系列。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
多个字体系列是用一个逗号分隔指明：

1
2
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
  • 字体样式

主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：

1
2
3
4
5
6
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
  • 字体大小

设置字体大小像素

1
2
3
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

1
2
3
4
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
1
2
3
4
5
6
font                在一个声明中设置所有的字体属性
font-family         指定文本的字体系列
font-size           指定文本的字体大小
font-style          指定文本的字体样式
font-variant        以小型大写字体或者正常字体显示文本
font-weight         指定字体的粗细

CSS链接

  • 链接样式

链接的样式，可以用任何CSS属性(颜色)。

1
2
3
4
5
6
7
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

a:hover   必须跟在 a:link 和 a:visited后面
a:active  必须跟在 a:hover后面

text-decoration 属性主要用于删除链接中的下划线：

1
2
3
4
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色属性指定链接背景色：

1
2
3
4
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS列表

  • 不同的列表项标记

list-style-type属性指定列表项标记的类型是：

1
2
3
4
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
  • 作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

1
2
3
ul{
  list-style-image: url('sqpurple.gif');
}
  • 列表-简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：

1
2
3
4
5
6
7
8
ul{
  list-style: square url("sqpurple.gif");
}

可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image

CSS表格

  • 表格边框

指定CSS表格边框，使用border属性。

1
2
3
4
下面的例子指定了一个表格的Th和TD元素的黑色边框：
table, th, td{
    border: 1px solid black;
}
  • 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

1
2
3
table{
    border-collapse:collapse;
}
  • 表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

1
2
3
4
table,th{
  width:100%;
  height:50px;
}
  • 表格文字对齐

表格中的文本对齐和垂直对齐属性。

1
2
3
4
5
6
7
8
9
text-align属性设置水平对齐方式，向左，右，或中心：
td{
  text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td{
  height:50px;
  vertical-align:bottom;
}
  • 表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

1
2
3
td{
  padding:15px;
}
  • 表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

1
2
3
4
th{
  background-color:green;
  color:white;
}

CSS盒子模型

1
2
3
4
Margin(外边距)            -清除边框外的区域，外边距是透明的。
Border(边框)              -围绕在内边距和内容外的边框。
Padding(内边距)           -清除内容周围的区域，内边距是透明的。
Content(内容)             -盒子的内容，显示文本和图像。

css边框

  • border-style属性用来定义边框的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed

  • border-color属性用于设置边框的颜色。

  • 边框-简写属性

可以在一个属性中设置边框。

1
2
3
4
5
border-width
border-style (required)
border-color
实例
border:5px solid red;