zoukankan      html  css  js  c++  java
  • 自己写的web标准教程,帮你走进web标准设计的世界——第五讲(css篇2)

    声明:本教程源于本人学习的一些经验的总结,希望大家帮忙完善与指正,也希望会给初学者带来方便,希望大家不要随便转载,写的不是很好,还不完善,不过转载时要注明作者和出处,附加原文的链接地址,谢谢了

    已出:

    自己写的web标准教程,帮你走进web标准设计的世界——第一讲

    自己写的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! 

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

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

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

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

    我想说的:

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

    1.       看属性->属性值

    2.       亲手写实例

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

    4.       查资料、写总结

    下期预告:

    1.       利用Idclass以及html element来为html添加css属性

    2.       css属性设置的优先级机制

     

    今天的教程就到这里了明天再见,谢谢!

    交流QQ群: 71019430(菜鸟居多,请大家见谅!)

  • 相关阅读:
    Linux基础-4磁盘管理
    Linux基础-3文本处理
    Linux基础-2文件及目录管理
    Linux基础-1使用命令帮助
    解决Eclipse 添加 Tomcat 中的一些问题
    非关系型数据库 -- redis
    Java 学习笔记 五 -- Jedis
    Java 学习笔记 四 -- DBUtils的使用
    Java 学习笔记 三 -- 数据库连接池 Druid
    Java 学习笔记 二 -- JDBC事务
  • 原文地址:https://www.cnblogs.com/chaofan/p/1821665.html
Copyright © 2011-2022 走看看