JS学习笔记-CSS篇（二）

5.CSS Fonts（字体）

CSS字体属性定义字体，加粗，大小，文字样式。

serif和sans-serif字体之间的区别

Serif	Times New Roman Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

所有字体属性：

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

（1）font-family（字体系列）

定义：

p.serif{font-family:"Times New Roman",Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

（2）font-style （ 字体样式）：

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值及定义：

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

（3） font-size （字体大小）

定义：

p {font-size:14px;}  像素定义

h1 {font-size:2.5em;} /* 40px/16=2.5em */   em定义

body {font-size:100%;}  百分比定义

font-size 属性设置文本的大小。

（4）font-variant（以小型大写字体或者正常字体显示文本）

normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

定义：

p.normal {font-variant:normal;}

p.small {font-variant:small-caps;}

（5） font-weight（字体的粗细）

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

定义：

p.normal {font-weight:normal;}

p.light {font-weight:lighter;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

6. CSS链接（link）

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

定义：

（1）

a:link {color:#FF0000;}    /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;}   /* mouse over link */

a:active {color:#0000FF;}  /* selected link */

（2）

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

a:link {text-decoration:none;}    /* unvisited link */

a:visited {text-decoration:none;} /* visited link */

a:hover {text-decoration:underline;}   /* mouse over link */

a:active {text-decoration:underline;}  /* selected link */

注： 当设置为若干链路状态的样式，也有一些顺序规则：

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

7. CSS列表

CSS列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

• 在HTML中，有两种类型的列表：
• 
  
  • 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）  ul表示
  • <ul class="b">
  •   <li>Coffee</li>
  •   <li>Tea</li>
  •   <li>Coca Cola</li>
  • </ul>
  • 有序列表 - 列表项的标记有数字或字母   ol表示

<ol class="c">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

(1) list-style:

定义：

ul 

{

    list-style:square url("sqpurple.gif");

}

(2) list-style-image:

定义：

ul 

{

    list-style-image:url('sqpurple.gif');

}

(3) list-style-position:

定义：

ul.inside  //该列表的 list-style-position 的值是 "inside"：

{

    list-style-position: inside

}

ul.outside //该列表的 list-style-position 的值是 "outside"

{

    list-style-position: outside

}

(4) list-style-type：

定义：

<style>

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

</style>

标记：

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

8.CSS table 表格

表格定义：

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

运行结果：

Firstname	Lastname
Peter	Griffin
Lois	Griffin

说明：用table定义一个表格；<tr>定义一行数据；<th>定义表头名称；<td>定义列表数据；

（1）表格边框

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

定义：

<style>

table,th,td

{

    border:1px solid black;// 表格的Th和TD元素的黑色边框

}

</style>

运行结果：

Firstname	Lastname
Peter	Griffin
Lois	Griffin

(2)折叠边框（ border-collapse ）

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

定义：

<style>

table {

    border-collapse: collapse;

}

table, td, th {

    border: 1px solid black;

}

</style>

运行结果：

Firstname	Lastname
Peter	Griffin
Lois	Griffin

（3） 表格的宽度和高度

定义：

table

{

    width:100%;

}

th

{

    height:50px;

}

td

{

    height:30px;

}

运行结果：

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250

（4）表格文字对齐

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

text-align属性设置水平对齐方式，像左，右，或中心：

定义：

td

{

    text-align:right;

}

或

td

{

    height:50px;

    vertical-align:bottom;

}

运行结果：

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250

（5）表格填充

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

定义：

td

{

    padding:15px;

}

（6）表格颜色

指定边框的颜色，和th元素的文本和背景颜色

定义：

table, td, th

{

    border:1px solid green;

}

th

{

    background-color:green;

    color:white;

}

运行结果：

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250