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

  本节概况:

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

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

3.如果网页禁用了css?

4.css定义格式 

5.css注释格式 

6.css实例讲解 

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

首先创建一个文件夹并命名为项目名(这里举例命名为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-repead

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

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

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

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

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

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

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

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

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

  我想说的:

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

1.       看属性->属性值

2.       亲手写实例

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

4.       查资料、写总结

it知识库自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2),转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。