css

基础教程

1.记得写引号

提示：如果值为若干单词，则要给值加引号：p {font-family: "sans serif";}}

2.关于0

当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

3.派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。例如：li strong {font-style: italic;font-weight: normal;}

4.后代选择器

id 选择器和派生选择器在现代布局中，id 选择器常常用于建立派生选择器。#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

5.类选择器

和 id 一样，class 也可被用作派生选择器：.fancy td {color: #f60;background: #666;}元素也可以基于它们的类而被选择：td.fancy {color: #f60;background: #666;}

6.属性选择器

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。（1）例如：<a title="W3School" href="http://w3school.com.cn">W3School</a>[title]{color:red;}（2）属性和值选择器下面的例子为 title="W3School" 的所有元素设置样式：[title=W3School]{border:5px solid blue;}（3）属性和值选择器 - 多个值下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：[title~=hello]{color:red;}<h2 title="hello world">Hello world</h2><p title="student hello">Hello W3School students!</h1>下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：[lang|=en] { color:red; }(3)设置表单的样式属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family: Verdana, Arial;}input[type="button"]{width:120px;margin-left:35px;display:block;font-family: Verdana, Arial;}CSS 选择器参考手册选择器 描述[attribute] 用于选取带有指定属性的元素。[attribute=value]   用于选取带有指定属性和值的元素。[attribute~=value] 用于选取属性值中包含指定词汇的元素。[attribute|=value]  用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。[attribute^=value]  匹配属性值以指定值开头的每个元素。[attribute$=value] 匹配属性值以指定值结尾的每个元素。[attribute*=value]  匹配属性值中包含指定值的每个元素。

样式

1. 背景

   如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
   属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

2. 文本

   (1)缩进文本

   text-indent 属性，该属性可以方便地实现文本缩进。
   p {text-indent: 5em;}
   注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
   提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

   (2)字间隔
   word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
   (3)字母间隔
   与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：
   (4)字符转换
   text-transform 属性处理文本的大小写。这个属性有 4 个值：
   none
   uppercase
   lowercase
   capitalize
   默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
   (5)文本装饰
   text-decoration 有 5 个值：
   none
   underline
   overline
   line-through
   blink
   不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
   (6)处理空白符white-space 属性
   (7)文本方向direction 属性

3.字体
(1) font-family 属性
只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
(2)字体风格font-style 属性
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
4.链接
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后(1)text-decoration 属性大多用于去掉链接中的下划线：

框模型

1.浏览器兼容性
不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

定位