CSS学习心得（三）

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;
}
........

Home

News

Contact

About

水平导航栏
有两种方法实现水平：inline和float，但如果想要使每一个链接都有相同的大小，就要使用float

使用内嵌的方法
li
{
display:inline;
}
具体见使用内嵌的导航栏

使用浮动的方法
li
{
float:left;
}
a
{
display:block;/显示块元素的链接，让整体变为可点击链接区域（不只是文本），
它允许我们指定宽度/
width:60px;
}

CSS下拉菜单