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.
type2.position3.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：觉得这个东西好丑啊）
网友评论