CSS基础积累总结.docx

一：CSS的工作原理1.基本的CSS语法比方说，我们要用红色作为网页的背景色：用HTML的话，我们可以这样：???????body?bgcolor=#FF0000用CSS的话，我们可以这样获得同样的效果：???????body?{background-color:?#FF0000;}上例也向你展示了基本的CSS模型：为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。方法1：行内样式表（style属性）为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：??????body?style=background-color:?#FF0000;方法2：内部样式表（style元素）为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：????????style?type=text/css??????????body?{background-color:?#FF0000;}????????/style方法3：外部样式表（引用一个样式表文件）我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。导入语法：????link rel=stylesheet type=text/css?href=style/style.css?/???注意要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部（header），即放在标签head和标签/head之间。就像这样：????html??????head????title我的文档/title????????link?rel=stylesheet?type=text/css?href=style/style.css?/??????/head??????body??????...???这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。二：颜色与背景前台页面背景和颜色主要包括下面内容：·?color·?background-color·?background-image·?background-repeat·?background-attachment·?background-position·?background前景色：‘color’属性CSS属性color用于指定元素的前景色。例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。???????h1?{????????color:?#ff0000;????}CSS属性background-color用于指定元素的背景色。因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。???????body?{????????background-color:?#FFCC66;????}????h1?{????????color:?#990000;????????background-color:?#FC9804;????}注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。CSS属性background-image用于设置背景图像。如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。???????body?{????????background-color:?#FFCC66;????????background-image:?url(butterfly.gif);????}????h1?{????????color:?#990000;????????background-color:?#FC9804;????}注