自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)
声明:本教程源于本人学习的一些经验的总结,希望大家帮忙完善与指正,也希望会给初学者带来方便,希望大家不要随便转载,写的不是很好,还不完善,不过转载时要注明作者和出处,附加原文的链接地址,谢谢了
已出:
自己写的web标准教程,帮你走进web标准设计的世界——第一讲
自己写的web标准教程,帮你走进web标准设计的世界——第二讲
上讲回顾: 上一讲主要介绍了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>
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否则属性失效
我想说的:
css属性大体的学习方法就是这样的:
1. 看属性->属性值
2. 亲手写实例
3. 从实例问题中学习兼容
4. 查资料、写总结
下期预告:
1. 利用Id、class以及html element来为html添加css属性
2. css属性设置的优先级机制
交流QQ群: 71019430(菜鸟居多,请大家见谅!)