time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Web标准教程 > 自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)

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

时间:2010-09-14 00:52 点击:1314次 字体:[ ]




本节概况:

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

<!--[endif]-->2.html中插入css的三种方式 

<!--[endif]-->

3.如果网页禁用了css

<!--[endif]-->4.css定义格式 

<!--[endif]-->5.css注释格式 

<!--[endif]-->6.css实例讲解 

ok,Begin!Right now! 

<!--[endif]-->

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

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

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

 

<!--[endif]-->

html中插入css的三种方式:

1.       html页面中插入

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

b)         在标签中直接插入

2.       引入外部的css文件

请下载视频演示

如果网页禁用了css

自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)_www.fengfly.com  <!--[endif]-->

禁用了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>

运行:自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)_www.fengfly.com

<!--[endif]-->

提示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-repead

                      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-repead否则属性失效

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

我想说的:

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

1.       看属性->属性值

2.       亲手写实例

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

4.       查资料、写总结

转自:http://www.cnblogs.com/chaofan/archive/2010/09/08/1821665.html



本文地址 : http://www.fengfly.com/plus/view-188194-1.html
标签: css Web标准教程
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: