【CSS学习】CSS学习笔记

作者：gnuhpc
出处：http://www.cnblogs.com/gnuhpc/

注：本学习笔记只是自己的一些备忘，初学者的东西不具有参考性，请到W3School（http://www.w3school.com.cn/css/index.asp ）进行系统学习。

学习CSS我使用的工具是Visual CSS，可以实现同步预览，快速学习编辑CSS。

1.CSS的作用 ：用来规定网页中的内容的显示方式，避免给HTML增加很多的属性而将代码变得臃肿。

2.CSS的应用方式

（1）内联样式：在标签中包括一个style属性，并在其后定义CSS属性及值，例如：

Hello world!

（2）文档级样式表：将一系列样式规则罗列在HTML文档开头，处于内的之间，它可以改变外部样式表中定义的一个或多个规则，创建一个个性化的文档，适用于单个HTML文件。

（3）外部样式表：将样式定义放置于分离的文档中，在各个需要应用该样式表的HTML通过在内的标签引入这个分离文档，例如。每次打开页面都需要下载这个表格，所以要尽量减小样式表的容量。

注意：三种样式表作用域不同，同时存在时的页面处理原则为：

• “近优先于远”——内联样式>文档级样式。
• “局部优先于整体”——定义为标签的类的属性>为标签总体进行定义的属性
• “特殊优先于一般”——上下文样式>为标签总体进行定义的属性
• “后优先于前”——后边指定的属性>前面指定的属性

3.CSS语法 ：

选择符+属性（属性名+属性值）。

• selector：表示受样式规则影响的HTML标记元素的名称，由于XHTML中规定标签都为小写，CSS2则也建议为selector为小写。
• property+value：具体定义各种样式属性。

例如：

h1{

     color:red;

     font-size:14px;

}

4.selector详解

（1）标签选择器：最简单的直接对HTML标签进行操作的选择器，其中有三种特殊的选择器：

1）通配符选择器：将样式应用到文档中的所有元素中：

* {
    color:red;
    font-style:italic
}

2）属性选择器：将样式应用到具有某一个特殊属性的标签中：作用于align属性为right的

元素

Div[alige=right]{
    color:black;
    font-style:italic;
}

3）群组选择器：将几个便签相同的选择器写在一起：

p,u1,u2,u3 {
    color:red;
    font-style:italic
}

4）

（2）类选择器：处理具有统一名称但是有不同格式的标签时使用。在标签中使用 class=类名 就可以指明使用该选择器规定的样式了。

1）常规类：标签名.类名{}，例如：

font.big{
    font.size:18pt;
}

font.small{
    font.size:10pt;
}

使用时：

Hello, A

Hello, B

2）一般类：不与特定标签相连，以.为前缀定义。

3）伪类：用于特殊用途，最常用的是超链接的3种状态（在此只讨论这三种状态）：未访问、正被访问、已访问。定义方式为：a:类名{}。其中类名为link/active/visited。在HTML中使用a标签进行使用。

（3）ID选择器：ID是唯一的选择符，#id 名称 {}，使用时  id=”类别名”方法调用，用于定义大结构，如logo、nav、content、copyright。也就是说id需要具有唯一性的元素使用，尽量在外围使用，而class具有可重复性，尽量在结构内部使用。id是唯一的，并且是父级的，而class是可重复的，并且是子集的。 一般用#father .child{}来将所有class变成id的子孙级，便于后期维护和修改。也可以使用群组方式连接。
例如：

#main p
{
    color:#000;
    font-size:18pt;
}

（4）派生选择器：或叫做上下文选择器 (contextual selectors)，派生选择器允许你根据文档的上下文关系来确定某个标签的样式，无需指定class或者id。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong
 {

    font-style: italic;

    font-weight: normal;

  }

使用：

1. 
   
2. 我是斜体字。这是因为 strong 元素位于 li 元素内。
   
3. 我是正常的字体。
   

5.CSS属性：大多使用派生选择器形式来定义。

6.CSS设计方法

（1）继承：允许样式不仅可以应用于某个特定的元素还可以应用到它的后代中。可以自己使用important!定义优先级，注意其总是放在规则声明的最后，分号之前。

（2）盒模型：假设HTML元素都可以装在一个矩形框内，由内到外依次是内容、间距、边框、边距。IE和Firefox对盒模型的解释不一致。这是一个充满相对性的概念，比较重要。

background-color将填满border内部的全部范围；background-image默认以图片左上角对齐border内部左上角点，然后完整显示整个图片（超出部分不予显示），如果图片尺寸不足铺满整个范围，图片默认重复自己直至铺满或超出范围； background-image将叠加到background-color之上；通过指定图片的对齐方式，可以改变background-image的位置；

通过以上这些规则的组合，就能在有限的元素组合下，实现各种修饰性效果。

举例：背景色与背景图的合成、图片和文字的分离后合成。

作者：gnuhpc
出处：http://www.cnblogs.com/gnuhpc/