CSS学习心得（二）

CSS字体

字体系列（font-family）

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

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

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

对于较常用的字体组合，看看我们的 Web安全字体组合

字体样式（font-style）
- 正常normal
- 斜体italic
- 倾斜的文字oblique
字体大小（font-size）

：设置文字像素大小
```
  h1 {font-size:40px;}
```

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

用em来设置字体大小
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
h2 {font-size:1.875em;}
在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
使用百分比和EM组合
body {font-size:100%;}
h1 {font-size:2.5em;}
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

CSS链接

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

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

当设置为若干链路状态的样式，也有一些顺序规则：
a:hover必须跟在a:link 和 a:visited后面
a:active必须跟在 a:hover后面

创建连接框

 a:link,a:visited
{
display:block;/*让元素变为块级元素*/
font-weight:bold;/*字体粗细*/
color:#FFFFFF;
background-color:#98bf21;
width:120px;/*设置背景块状宽度*/
text-align:center;/*将字体位于块状中部*/
padding:4px;/*填充*/
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}

CSS列表

ps：u1表示无序列 o1表示有序列表

不同的列表项标记（list-style-type）

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;}/*字母排序*/

作为列表项标记的图像（list-style-image）
```
u1 {list-style-image:url('.....');}
```
缩写（list-style）
```
ul
{
 list-style: square url("sqpurple.gif");
}
```
顺序：1.type 2.position 3.image

CSS表格

边框属性（border，border-collapse）

table {border-collapse:collapse;}
table,th,td {border: 1px solid black;}

高度与宽度（width，height）
```
table {width:100%;}
th {height: 50px;}
```
对齐方式（水平对齐text-align,垂直对齐vertical-align）

text-align: right left center
vertical-align:top middle bottom` 更多见参考手册。

标题位置（caption-side)
caption {caption-side:bottom;}

表格填充padding 表格背景字体不再赘述。

CSS边框

边框样式（border-style）
border-style属性用来定义边框的样式。
边框宽度（border-width）
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

边框颜色（border-color，必须由border-style设置样式后才可使用）
ps：透明为transparent

边框-单独设置各边

p
{
  border-top-style:dotted;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:solid;
}
------------------------------------------------------------------------------------
   border-style:dotted solid;/*上下dotted，左右solid*/

边框-简写属性
border:5px solid red;

可以分别控制边框四个边的属性
a,b,c,d:上右下左
a,b,c:上（左右）下
a,b:（上下）（左右）

CSS轮廓（outlines）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

属性：outline-color;outline-style;outline-width;
(ps：觉得这个东西好丑啊）