CSS基础

1.分配ID和类名时，一定要尽可能保持名称有意义并与表现方式无关。

2.写类名和ID名时，需要注意区分大小写，最好的方式是保持一致的命名约定，camel case 。

3.在不适合使用ID的情况下对元素应用类,而且尽可能少使用类.

4.为了将不必要的标记减小到最少，应该只在没有元素能够实现区域分割的情况下使用div元素。

二.选择器

类型选择器,元素选择器,简单选择器 寻找特定类型的元素

p {color:black;}

a {text-decoration:underline;}

h1 {font-weight:bold;}

后代选择器 寻找特定元素或元素组的后代

li a {text-decoration:none;}

ID选择器

#intro {font-weight:bold;}

类选择器

.datePosted{color:green;}

类型.后代.ID 和 类 几种选择器的组合

#mainContent h1 {font-size:1.8em;}

#secondaryContent h1 {font-size: 1.2em;}

通用选择器 可以匹配任何元素,在与其它选择器结合使用时，通用选择器可能用来对特定元素的所有后代应用样式。

*{ padding:0; margin:0;}

子选择器 与后代选择器的区别是:后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素

#nav > li {background:url(folder.png)no-repeat left top:}

<ul >

<li>Home</li>

<li>Services

<ul>

<li>Design</li>

<li>Developement</li>

<li>Consultancy</li>

</ul>

</li>

<li>Contact Us</li>

</ul>

在IE6中可以使用通用选择器模仿子选择器:

#nav li {background:url(folder.png)no-repeat left top:}

#nav li * {background-image:none;}

相邻同胞选择器 定位于同一父元素下某个元素之后的元素

h1 + p {font-weight:bold;}

<h1>Main Heading</h1>

<p>First Parargraph</p>

<p>Second Paraapraph</p>

IE6不支持

属性选择器

三 伪类 根据文档结构之外的其它条件对元素应用样式

:link和visited 称为链接伪类，只能应用于锚元素.

:hover. :active 和:focus 称为动态伪类,理论上可以就用于任何元素.

CSS允许将所有样式放在一个或多个外部样式表中，可以链接，也可以导入

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

@import url("Css_Path");

并非只能导入到html文档中，还可以从另一个样式导入样式表.

CSS注解

/*-----------------------------------------

version:

author:

email:

website:

-------------------------------------------*/

盒模型

页面上的每个元素被看做一个矩形框，这个框由元素的内容.填充(padding),边框(border)和空白边(margin) 组成

| ----------------------------------------------------

| 空白边(margin)

| |--------------------------------------------

| | 边框(border)

| | |-----------------------------

| | | 填充(padding)

| | | |---------------

| | | | 内容

填充.边框和空白边都是可选的，默认为0,width,height指的是内容区域的的宽度和高度

空白边叠加:当两个垂直空白这相遇时，它们将形成一个空白边，空白边的高度等说两个发生叠加的空白边的高度中的较大者

只有普通文档流块框的垂直空白边才会发空白边叠加，行内框，浮动框或绝对定位框之间的空白边不会叠加。

块框: p,h1或div等元素 称块级元素(block-level element),意思是这些元素显示为一块内容

行内框: strong和span等称为行内元素，因为它们的内容显示在行中.

可以使用display属性改变生成框的类型.

CSS中三种基本的定位机制:普通流,浮动和绝对定位

普通流:元素框的位置由元素在html中的位置决定

块级框从上到下一个接一个地排列,框之间的垂直距离由框的垂直空白边计算出来.

行内框在一行中的水平布置.可以使用水平填充.边框.和空白边调整 它们的水平间距，但是垂直填充.边框和空白边不影响行内框的高度。

相对定位:

如果对一个元素进行相对定位,它将出现它所在的位置上，然后，可以通过设置垂直或水平位置让这个元素"相对于"它的起点进行移动。

绝对定位:

相对定位实际上被看成普通定位流模型的一部分,因为元素的位置相对于它普通流中的位置。与之相反，绝对定位使元素的位置与文 档流无关，不占据空间。

绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它位置相对于最初的包含块。

浮动:

可以设置一个块级元素飘浮在父容器的左边或右边，直到它的外边碰到父容器的包含框或其它浮动元素的边缘。

浮动框不在文档的普通的文档流中，普通流的块框表现得就像浮动流不存一样(IE对此有不同解析，认为其它的普通流应该从浮动框的右侧开始，这就使浮动框表现得像插入左边一样),行框会自动适应，为浮动框留出适当的空间。

清除:

如果一个框不允许有任何浮动元素，可应用clear