网页新手入门之走近css层叠样式表

    类别:新手问答  贡献者:admin  总点击:4623  受欢迎度:11  更新日期:2011年05月08日
简介:网页新手入门之走近css层叠样式表 CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。.
  • 网页新手入门之走近css层叠样式表

    CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。

    css层叠样式的特点便于页面的修改。   
    便于页面风格的统一。   
    减少网页的体积。
    层叠样式表极大地提高了工作效率

    样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。   由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。表现和内容相分离

    将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。提高页面浏览速度

    对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。易于维护和改版

    你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。css层叠样式语法css语法: sel ector {property: value} (选择符 {属性:值}) 

    例子:body {color: black},此例的效果是使页面中的文字为黑色。选择符组   
    你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:   h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素,每个标题元素的文字都为绿色)  类选择符   
    用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:   p.right {text-align: right}ID选择符   
    在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。   

    ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用. 注意事项用class_name方式写类名。   

    以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,样式都用class而不用id。   

    有三个理由:

    一,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。

    二,id的优先级太高,若是写了一个#page_contenta {color:#f60},那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。

    三,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。 margin和padding,尽量省略最后一个值。   
    比如margin: 20px 10px 5px 10px; ,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px 10px5px; 这样到时候要改左右间距,改一个就好,免得改漏了。其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。对于有的浏览器如果把margin:20px 10px 5px; ,这样浏览器会解析成上下间距为20px跟5px; 左右间距均为10px;。 

    补充本知识点暨快乐评论此文章:'做网页:网页新手入门之走近css层叠样式表.'

文章标签:新手入门 网页新手 
踩下去0
顶上来1
复制本页网址,与你QQ/MSN上的好友分享  温馨提示:如果您喜欢本站,请把她推荐给您的朋友们!
现在有0人对本文发表评论。  »马上发布评论
现在有0人对本文发表评论。  »查看所有评论
您的姓名: * 可选项,留空即为匿名发表
评论内容:
剩余字数:  * 按 Ctrl + Enter 直接发送.
           »»我要分享做网页知识
相关文章推荐
网友阅读排行
新手问答
本站会员贡献
合作伙伴: 百度站长平台 新浪读书频道 CSDN.Net YPState R灯具集 好搜站长平台 商录 全球网站推广库 搜狗站长平台 网页百科 更多» >>加入本站作者团
首页 | 关于我们 | 网站地图 | 合作伙伴 | 部分作者 | 会员注册 友情链接 | 联系方式 |
2004-2019 做网页学习网 鄂公网安备 42010402000280号 鄂ICP备13003030号