菜鸟教程CSS学习笔记（02）

CSS字体

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

CSS字型

分为通用字体系列和特定字体系列。

Serif ，Serif字体中字符在行的末端拥有额外的装饰
Sans-serif，"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace，所有的等宽字符具有相同的宽度

字体系列

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

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

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

字体样式

这个属性有三个值：正常，倾斜italic，倾斜的文字oblique。
关于后两者的区别：italic 可以理解为使用默认的斜体设置。能不能斜体，斜体多少度都是默认设置说了算。而 oblique 则是强制使用斜体，斜体的角度也可以又 oblique 设置

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}//和斜体非常相似

字体大小

font-size属性设置文本大小。
分为绝对大小和相对大小：

• 绝对大小：
  设置一个指定大小的文本
  不允许用户在所有浏览器中改变文本大小
  确定了输出的物理尺寸时绝对大小很有用
• 相对大小：
  相对于周围的元素来设置大小
  允许用户在浏览器中改变文字大小

用em来设置字体大小

1em的默认大小是16px，使用em来代替像素以避免Internet Explorer 中无法调整文本的问题。

使用em和百分比的组合

在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

所有CSS字体属性

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

CSS链接

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
不同状态的链接，可以用不同的样式。
注：当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

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

后面是一些常见的链接样式。

文本修饰

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

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

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

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

CSS列表

CSS 列表属性作用如下：

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

列表

在 HTML中，有两种类型的列表：

• unordered list无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
• ordered list有序列表 ol - 列表项的标记有数字或字母
  使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

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

作为列表项标记的图像

ul
{
    list-style-image: url('sqpurple.gif');
}//效果是亮紫色的无序列表图标，但在不同浏览器显示不同效果

列表 - 简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
可以按顺序设置如下属性：

• list-style-type
• list-style-position
• list-style-image

为列表使用简写属性，列表样式属性设置如下：

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

移除默认设置

list-style-type:none 属性可以用于移除小标记。默认情况下列表

• 或
  1. 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

CSS表格

• 表格边框
• 折叠边框
  默认是双边框，th/td有独立边界。

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

• 表格宽高

table 
{
    width:100%;
}
th
{
    height:50px;
}

• 文字对齐

td
{
    height:50px;
    vertical-align:bottom;//底部对齐
    //若要置水平对齐方式，向左，右，或中心：
    //用text-align
}

• 表格填充

td
{
    padding:15px;
}

• 表格颜色

table, td, th
{
    border:1px solid green;//边框色
}
th
{
    background-color:green;//背景色
    color:white;//文本色
}

注：本文为菜鸟教程https://www.runoob.com/try/try.php?filename=trycss_font-family学习笔记，侵权删。