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定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
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)只能选择作为某元素子元素的元素
I will not be styled.
/可以，因为是子元素/
I will not be styled.
/*不可以，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:first-child
选择相匹配的所有
元素的第一个 元素：
p > i:first-child
匹配所有作为第一个子元素的
元素中的所有元素
p:first-child i
CSS - :lang 伪类
:lang 向带有指定 lang 属性开始的元素添加样式。
q:lang(no)
{
quotes: "~" "~";
}
........
Some text A quote in a paragraph
Some text.
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;
}
........
水平导航栏
有两种方法实现水平：inline和float，但如果想要使每一个链接都有相同的大小，就要使用float
使用内嵌的方法
li
{
display:inline;
}
具体见使用内嵌的导航栏
使用浮动的方法
li
{
float:left;
}
a
{
display:block;/显示块元素的链接，让整体变为可点击链接区域(不只是文本)，
它允许我们指定宽度/
width:60px;
}
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
