css 笔记

1. CSS 几种表示方式(应用范围)：

1) html element selector,比如 p {color:red;text-align:center;}

2) id selector, ex. #para1{text-align:center;color:red;}

3) class Selector,ex. .center {text-align:center;}

4) html+class Selector,ex. p.centor{text-align:center;}

2. 插入 CSS 的三种方式

1) 外部 CSS

<link rel="stylesheet" type="text/css" href="mystyle.css" />

2) 内部 CSS

<style type="text/css">

hr {color:sienna;}

p {margin-left:20px;} /*20px ,but not 20 px*/

body {background-image:url("images/back40.gif");}

</style>

3) Inline CSS

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

3. 当对同一个元素使用了多个 css 时，使用指定的具体的，比如 Inline Css 优于 External Css

以下优先级 4>3>2>1，假如 外部 css 放在了 internal css 后面，则 外部 css 优先

1) Browser default

2) External style sheet

3) Internal style sheet (in the head section)

4) Inline style (inside an HTML element)

4. 属性值为 justify,会使该属性充满页面

比如: text-align:justify; 则可以使文字充满整个页面（类似于 word 中的左右对齐）

5. 设置字体大小

1) W3C 推荐用 em 表示大小，这样，在 IE 里也可以调整字体的大小(查看/文字大小),如果是 px 的话，IE 不支持调整

2) 1em 表示浏览器默认的字体大小，目前是 16px

3) 百分比与 em 共用

body {font-size:100%;}

h1 {font-size:2.5em;}

这种方式在所有的浏览器里都可以放大/缩小，以及调整字体大小

6. Link style

包括四种状态，a:hover 必须在 a:link,a:visited 后，而a:active 必须在 a:hover 后

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

7. 有许多属性在 IE 里不支持，除非有 !DOCTYPE 声明，所以总是保持 !DOCTYPE 声明是必要的

8. 当对齐 block 元素时，预定义 body 的 margin & padding 对浏览器兼容是必要的

body{margin:0;padding:0;}

9. @media Rule

在不同的用户接口上显示不同的内容

@media screen

{

p.test {font-family:verdana,sans-serif;font-size:14px;}

}

@media print

{

p.test {font-family:times,serif;font-size:10px;}

}

@media screen,print

{

p.test {font-weight:bold;}

}

10. 可以设置属性为选择器

ex.

[title]{color:blue;}

[title=W3Schools]{border:5px solid green;}

[title~=hello] { color:blue; } /*title Included hello*/

[lang|=en] { color:blue; } /* attribute lang include en */

input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;}

Resources:

1. http://www.w3schools.com/css/