自己写的web标准教程，帮你走进web标准设计的世界——第五讲（css篇2）
2010-09-08 18:19
387 查看
声明：本教程源于本人学习的一些经验的总结，希望大家帮忙完善与指正，也希望会给初学者带来方便，希望大家不要随便转载，写的不是很好，还不完善，不过转载时要注明作者和出处，附加原文的链接地址，谢谢了
已出：
上讲回顾： 上一讲主要介绍了css的基础知识
非常感谢网友对我的大力支持，谢谢你们给我的鼓励！ 本节概况：
前端网页项目文件的基本结构：
在html中插入css的三种方式：
如果网页禁用了css？
禁用了css的博客园有点“狼藉”。
css定义格式：
css实例讲解：
[align=center]今天的教程就到这里了明天再见，谢谢！[/align] 交流QQ群： 71019430（菜鸟居多，请大家见谅！）
已出：
自己写的web标准教程，帮你走进web标准设计的世界——第一讲
自己写的web标准教程，帮你走进web标准设计的世界——第二讲
自己写的web标准教程，帮你走进web标准设计的世界——第三讲（html终结篇）
自己写的web标准教程，帮你走进web标准设计的世界——第四讲（css篇1）
自己写的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！2.在html中插入css的三种方式
3.如果网页禁用了css？
4.css定义格式
5.css注释格式
6.css实例讲解
前端网页项目文件的基本结构：
首先创建一个文件夹并命名为项目名（这里举例命名为index），该文件夹中包含：
在html中插入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//（初级作为了解）设置背景图片是否固定，该属性只使用于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-repeat否则属性失效
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//（初级作为了解）设置背景图片是否固定，该属性只使用于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-repeat否则属性失效
background实例下载（请详细的看源代码和注释）
css属性大体的学习方法就是这样的：
1. 看属性->属性值
2. 亲手写实例
3. 从实例问题中学习兼容
4. 查资料、写总结
下期预告：1. 看属性->属性值
2. 亲手写实例
3. 从实例问题中学习兼容
4. 查资料、写总结
1. 利用Id、class以及html element来为html添加css属性
2. css属性设置的优先级机制
2. css属性设置的优先级机制
[align=center]今天的教程就到这里了明天再见，谢谢！[/align] 交流QQ群： 71019430（菜鸟居多，请大家见谅！）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自己写的web标准教程，帮你走进web标准设计的世界——第四讲（css篇1）
- 自己写的web标准教程，帮你走进web标准设计的世界——第六讲（css篇3）
- 自己写的web标准教程，帮你走进web标准设计的世界——第二讲
- 自己写的web标准教程，帮你走进web标准设计的世界——第三讲（html终结篇）
- 自己写的web标准教程，帮你走进web标准设计的世界——第一讲
- web标准教程，帮你走进web标准设计的世界 第一讲
- web标准教程，帮你走进web标准设计的世界 第二讲
- web标准教程，帮你走进web标准设计的世界 第三讲（html终结篇）
- WEB标准中使用CSS的基础教程
- Kotlin教程（一）：走进Kotlin的世界
- 用html css javascript打造自己的RIA图文教程第1/2页
- IE与Firefox的CSS兼容大全-Web标准教程
- WEB标准之CSS: 打造自己的重置样式reset.css[转]
- Web前端教程-01.走进前端工程师的世界
- web标准建站:CSS入门教程
- Scala教程（一）走进Scala世界
- WEB标准教程第7天：CSS入门
- WEB标准之CSS: 打造自己的reset.css
- WEB标准教程第8天：CSS布局入门
- 十天学会web标准（DIV+CSS）系列（十）div+css网页标准布局实例教程