CSS学习心得（二）

CSS字体

• 字体系列（font-family）

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

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

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

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

• 字体样式（font-style）

  • 正常normal
  • 斜体italic
  • 倾斜的文字oblique

• 字体大小（font-size）

1. ：设置文字像素大小

     h1 {font-size:40px;}
   

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

2. 用em来设置字体大小
   1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
   h2 {font-size:1.875em;}
   在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
   不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

3. 使用百分比和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：觉得这个东西好丑啊）