css 学习笔记 菜鸟
1 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
2 CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下: /*这是另一个注释*/
3 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 "#" 来定义
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>
4 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。在 CSS 中，类选择器以一个点"."号显示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p> </body> </html>
5 可以指定特定的HTML元素使用class。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p> </body> </html>
6 每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
可以使用 <style> 标签在文档头部定义内部样式表
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
7 多重样式优先级：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
8 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。如果图像只在水平方向平铺 (repeat-x),垂直方向平铺是 (repeat-y),不平铺是 no-repeat
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
9 text-decoration 属性用来设置或删除文本的装饰。
10 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
11 设置文字的大小与像素h1 {font-size:40px;} 1em和当前字体大小相等 h1 {font-size:2.5em;}
12
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
13
14 分组选择器
h1,h2,p
{
color:green;
}
嵌套：
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
15 使用百分比设置高度
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> html {height:100%;} body {height:100%;} img.normal {height:auto;} img.big {height:50%;} img.small {height:10%;} </style> </head> <body> <img class="normal" src="logocss.gif" width="95" height="84" /><br> <img class="big" src="logocss.gif" width="95" height="84" /><br> <img class="small" src="logocss.gif" width="95" height="84" /> </body> </html>
16 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
17 块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
利用CSS可以改变元素的类型，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
18 position 属性指定了元素的定位类型。
position 属性的五个值：
19 CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条
20 水平居中块级元素 (如 div), 可以使用 margin: auto;
.center { margin: auto; width: 50%; 注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。 border: 3px solid green; padding: 10px; }
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
21
