|
|
本节概况：
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>
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否则属性失效
我想说的：
css属性大体的学习方法就是这样的：
1. 看属性->属性值
2. 亲手写实例
3. 从实例问题中学习兼容
4. 查资料、写总结
it知识库：自己写的web标准教程，帮你走进web标准设计的世界——第五讲（css篇2），转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
