自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)

声明:本教程源于本人学习的一些经验的总结,希望大家帮忙完善与指正,也希望会给初学者带来方便,希望大家不要随便转载,写的不是很好,还不完善,不过转载时要注明作者和出处,附加原文的链接地址,谢谢了

已出:

自己写的web标准教程,帮你走进web标准设计的世界——第一讲

自己写的web标准教程,帮你走进web标准设计的世界——第二讲

自己写的web标准教程,帮你走进web标准设计的世界——第三讲(html终结篇)

自己写的web标准教程,帮你走进web标准设计的世界——第四讲(css篇1) 

 

上讲回顾: 上一讲主要介绍了css的基础知识

 非常感谢网友对我的大力支持,谢谢你们给我的鼓励!

本节概况:

1.前端网页项目文件的基本结构

2.html中插入css的三种方式 

3.如果网页禁用了css

4.css定义格式 

5.css注释格式 

6.css实例讲解 

ok,Begin!Right now! 

前端网页项目文件的基本结构:

首先创建一个文件夹并命名为项目名(这里举例命名为index),该文件夹中包含:

 

 

html中插入css的三种方式:

1.       html页面中插入

a)         建立单独的css区块插入

b)         在标签中直接插入

2.       引入外部的css文件

请下载视频演示

如果网页禁用了css

 

禁用了css的博客园有点“狼藉”。

css定义格式:

选择器

         属性名:属性值;

css注释格式:/*注释内容,最好不要采用中文注释*/

css实例讲解:

1.       颜色和背景(color,background

a)         color

设置格式:

element {

                            color:colorValue;     

}

所有的css标签的设置格式都是一样的,以后我就不重复说明了。

功能:设置某个html元素内的文本颜色(用于指定元素的前景色)

实例(我用三种调用形式,以后为了方便我的代码都采用第二种引入css的形式,在实际工作中大家最好采用第三种调用css的方式,便于代码的阅读和维护,提高网页的加载速度,至于性能方面我们以后再说,我们现在会实现简单的效果就行了):

新建一个html文件,命名为:colorAndBg。采用第一种引用css的代码为(只写了body部分):

<body>

<div style="color: #F00 ">我是不是变颜色了?</div>

</body>

运行:

提示1:颜色值#F00等价于#FF0000,是一种缩写方式,比如颜色值#CC4523,就没有办法所写了

提示2:还记得上节课的那个取色小工具吗?喜欢什么颜色就“偷”过来吧。

疑问:为什么要采用缩写?主要是为了减少文件的大小,节省带宽,提高性能(不懂可跳过),大家都采用全写方式就可以了,以后自然就明白了

采用第二种引用css的代码为:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ColorAndBgEmp</title>

<style type="text/css">//代码块放在title下面,head的里面

         div {

                   color:#F00;               

         }

</style>

</head>

 

<body>

<div>我是不是变颜色了?</div>

</body>

采用第三种引用css方式的代码下载

a)         background:

                         i.              background-color//设置背景颜色,值为颜色值

                       ii.              background-image//设置背景图片,值为图片的路径值

                      iii.              background-repeat//设置背景图片的重复方式

1.         repead-x//x方向重复,下面的不言而喻

2.         repead-y

3.         no-repeat

                      iv.              *background-attachment//(初级作为了解)设置背景图片是否固定,该属性只使用于bodyhtml

令人苦恼的兼容,大家了解:

1.background-attachment在标准浏览器中(即IE6以外的浏览器),仅在html body中才起作用(htmlbodybackground-attachment默认是scroll,可以设置成fixed;其他元素 overflow:scroll滚动时的background-attachment始终是fixed,并且设置scroll无效);

2.IE系列(IE6-8)在不指定文档类型的时候(进入quirks mode模式),元素中的background-attachment支持scrollfixed,而FF等其他内核浏览器仍然无效。

3.在不给元素设置background-attachment,并且该元素overflow:scroll滚动时,标准浏览器中默认是fixed效果,而在IE6中默认是scroll效果。

4.IE6下,不管在任何时候设置background-attachmentfixedscroll都起作用;即,IE6支持任何元素的background-attachment的一切。

                       v.              background-position//设置背景图片的位置,当容器出现滚动条的时候,拖动滚动条时可以通过设置background-position的值来控制背景图片是否跟着滚动

注意:他的值可以是left之类的表示位置的单词,也可以是10px之类的具体像素值,也可以是百分比值,但是不建议混合使用,使用该属性时background-repeat值应设为no-repeat否则属性失效

background实例下载(请详细的看源代码和注释)

我想说的:

css属性大体的学习方法就是这样的:

1.       看属性->属性值

2.       亲手写实例

3.       从实例问题中学习兼容

4.       查资料、写总结

下期预告:

1.       利用Idclass以及html element来为html添加css属性

2.       css属性设置的优先级机制

 

今天的教程就到这里了明天再见,谢谢!

交流QQ群: 71019430(菜鸟居多,请大家见谅!)

 

posted on 2010-09-08 18:19  铁拐李  阅读(2198)  评论(9编辑  收藏  举报