CSS Margin(外边距)
- 简写
margin:100px 50px;
表示上下边距100px，左右边距50px.
CSS Padding（填充）
- 简写
padding:25px 50px;
同上。
选择器
分组选择器
h1,h2,p
{
color:green;
}-
嵌套选择器
p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; }
.marked p指 为所有class="marked"元素内的p元素指定一个样式
CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。
注意元素是块状的，如果是文字段落则表示的一块而不是一个个字。
CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素
display:none;visibility:hidden
h1.hidden {visibility:hidden;}
/visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。/
------------------------------------------------------------------------------------
h1.hidden {display:none;}
/display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐
藏了，而且该元素原本占用的空间也会从页面布局中消失。/-
改变元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定 的方式组合，并仍然遵循web标准
把列表项显示为内联元素：
li {display:inline;}下面的示例把span元素作为块元素：
span {display:block;}
CSS Positioning(定位)
Fixed 定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}-
Relative 定位
相对定位元素的定位是相对其正常位置。position:relative; left:-20px; -
Absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:position:absolute; left:100px; top:150px; /*标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.*/ -
重叠的元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）.具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。position:absolute; left:0px; top:0px; z-index:-1; 剪裁元素的外形（clip）
剪辑一个绝对定位的元素
position:absolute;
clip:rect(0px,100px,100px,0px);
/遵循上右下左顺序/设置自动溢出处理（overflow）
overflow:scroll使用滚动条显示溢出内容
overflow:visible直接显示溢出内容
overflow:hidden不显示溢出内容显示光标指定类型（cursor）
用于改变指针类型
CSS Float(浮动)
float
float:left;
width:110px;
height:90px;
margin:5px;
/left表示浮动元素会尽可能往左移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
/如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻*/清除浮动clear
指定不允许元素周围有浮动元素。
clear:both;
CSS 水平对齐(Horizontal Align)
使用margin属性进行中心对齐
margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：
margin:auto;
width:70%;/*这里貌似要设置宽度不能到100%，否则就和没设置居中一样了使用position属性设置左，右对齐
使用绝对定位进行对齐
position:absolute;
right:0px;
width:300px;/同上，也要设置宽度/使用float属性设置左，右对齐
float:right;
width:300px;
使用position个和float时始终设置在DOCTYPE声明中！
CSS 组合选择符
后代选取器(以空格分隔)：匹配所有值得元素的后代元素
-
子元素选择器(以>分隔）:子元素选择器（Child selectors）只能选择作为某元素子元素的元素
<div>
<p>I will not be styled.</p>
</div>
/可以，因为是子元素/<div> <span><p>I will not be styled.</p></span> </div> /*不可以，p不是子元素*/ 相邻兄弟选择器（以加号分隔）:选择紧接在另一元素后的元素，且二者有相同父元素。
普通相邻兄弟选择器(以~分隔）:取所有指定元素的相邻兄弟元素。
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器特殊效果的工具。
selector:pseudo-class {property:value;}
anchor伪类
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才有效
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才有效CSS - :first - child伪类
可以使用 :first-child 伪类来选择元素的第一个子元素匹配作为任何元素的第一个子元素的
<p>元素：
p:first-child选择相匹配的所有
<p>元素的第一个<i>元素：
p > i:first-child匹配所有作为第一个子元素的
<p>元素中的所有<i>元素
p:first-child iCSS - :lang 伪类
:lang 向带有指定 lang 属性开始的元素添加样式。
q:lang(no)
{
quotes: "~" "~";
}
........
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>CSS-:focus伪类
input:focus
{
background-color:yellow;
}
做表单时美化输入时可以用到，起到鼠标点进输入框时改变属性（颜色）的作用。
CSS 伪元素
类似伪类
selector:pseudo-element {property:value;}
first-line和first-letter伪元素
用于对文本首行和首字母进行设置
注意：只能够用于块级元素before和after伪元素
用于在元素内容的前面和后面进行添加内容
CSS导航栏
垂直导航栏
ul
{
list-style-type:none;/去掉列表前的小圆点/
margin:0;/取消外边距和填充/
padding:0;
}
a:link,a:visited
{
display:block;/显示块级元素链接，使得整个区域可以点击而不是单单文本允许只等宽度/
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;/设置块状元素宽度，不设置则会为最大宽度/
text-align:center;/使文字位于设置宽度的中间/
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
........
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>水平导航栏
有两种方法实现水平：inline和float，但如果想要使每一个链接都有相同的大小，就要使用float使用内嵌的方法
li
{
display:inline;
}
具体见使用内嵌的导航栏使用浮动的方法
li
{
float:left;
}
a
{
display:block;/显示块元素的链接，让整体变为可点击链接区域（不只是文本），
它允许我们指定宽度/
width:60px;
}
