css入门教程（二）

第一课里面有些单词大小写没有对上，这是因为我在word里面排的版，自动变成了首字母大写。学习的话得改一下。
先改一下网站的title

<title>我的第一个网页</title>

以后记得都要改一下。有助于记忆也有助于SEO(关于这个自己百度)

这一节来讲一些基本规范

1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？

当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；<link href="css.css" rel="stylesheet" type="text/css" />

只在单个网页中使用的CSS，采用文档头部方式；

<title>我的第一个网页</title>

<style type="text/css"></style>

只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。

<div style=" font-size:0"></div>

三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方式、外连文件方式。一句话就近原则。

分析一个典型CSS的语句：

p { color:#f00; background:#06f} 

· 其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；

· 样式声明写在一对大括号"{}"中；

· color和background称为"属性"(property)，不同属性之间用分号";"分隔；（注意到最后一个属性最好不加;）

· "#f00"和"#06f"是属性的值(value)。

关于上面的颜色值：

颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。

id选择器

用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。一个页面中一个id有且只能存在一次。这点相当重要。例如我们首先定义一个层

<div id="container"></div>

然后在样式表里这样定义：

#container{ width:960px; margin:0 auto; height:500px; background:#fff}

其中"container"是你自己定义的id名称。注意在前面加"#"号。

这里要记得id选择器也支持派生，例如：

#container p{}

类别选择器

在CSS里用一个点开头表示类别选择器定义，例如：

.text{color:red}

然后在页面中，用class="类别名"的方法调用：

<span class="text"></span>

类别选择器可以重复调用多次。

<span class="text"></span>

<p class="text"></p>

这点和id选择器不一样.其实关于是用id还是用class网上有很多争论。可以去找找相关文章。

群选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, li { font-size:12px }

派生选择器

可以使用派生选择器给一个元素里的子元素定义样式，例如这样：

li strong { font-style : italic; font-weight : normal；} 

就是给li下面的子元素strong定义一个斜体不加粗的样式。

定义链接的样式

CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;} 

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

辅助图片一律用背景处理

用XHTML+CSS布局，所有辅助图片都用背景来实现。类似这样：

background-image: url(images/bg_poem.jpg) ;

尽管可以用<img>直接插在内容中，但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用<img>元素直接插在页面里，而其它的类似logo，标题图片，列表前缀图片都必须采用背景方式或者其他CSS方式显示。

这里讲一点小技巧：

上面的语句可以写成

background: url(images/bg_poem.jpg)  no-repeat;

因为该属性是复合属性：

background : background-color || background-image || background-repeat || background-attachment || background-position 

默认值为：transparent none repeat scroll 0% 0%

background-color:设置或检索对象的背景颜色(这个好说，比如用#D00)

background-image:设置或检索对象的背景图像(给定一个图片地址url(img/aa.gif),注意这里url里面就不用加引号了，占空间。)

background-repeat:设置或检索对象的背景图像是否及如何铺排（有四个选项no-repeat;(不铺排.repeat-x,图片在x轴上平铺。Repeat-y在y轴上平铺。Repeat同时在x轴和y轴上铺开。)）

background-attachment:设置或检索背景图像是随对象内容滚动还是固定的（scroll :　背景图像是随对象内容滚动fixed :　背景图像固定）

background-position:设置或检索对象的背景图像位置（如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。横坐标有三个值：left :　居左center :　居中right :　居右 纵坐标：top :　居顶center :　居中bottom :　居底 ，这里提一点有了这个就有了CSS Sprites技术）.

讲了这么多无非是告诉你一点，以后写background全写在一起，别一个个分开写，看的累写的也累。

这里加一点，使用 GIF格式还是使用 jpg？ 

因为 GIF 格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了 GIF 格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。

类似的还有font

　　一般用CSS设定字体属性是这样做的：

　　font-weight:bold;

　　font-style:italic;

　　font-varIEnt:small-caps;

　　font-size:1em;

　　line-height:1.5em;

　　font-family:verdana,sans-serif;

　　但也可以把它们全部写到一行上去：

　　font: bold italic small-caps 1em/1.5em verdana,sans-serif;

　　真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font- weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。