牛腩操作系统--CSS学习
浏览数：34 /
时间：2015年06月09日
牛腩系统对前台界面的设计采用了DIV+CSS的方法：DIV是层叠样式表中的位置和层次，是用来对HTML文档大块内容提供结构和背景；CSS是动态改变界面样式的好帮手。
【CSS是什么】
首先要先理解一下网页文档构成元素：内容层、表现层和行为层。
内容层用于向大众传达信息，嵌入在定义语义和结构的HTML或XHTML标记内，形式有文字，图片，声音，动画等；表现层则负责将内容如何呈现出来，牛腩系统是通过web页面的形式展现；行为层设计与文档的实时用户交互，由JavaScript处理这种任务。
CSS—Cascading Style sheet 层叠样式表，是控制网页文档的表现层一种推荐方式，使网页样式和内容完全分离。这样可以让样式循环复用，减少代码量，同时可以降低存储成本和带宽，让访问者更快捷的进入网页。总结一下，css结合HTML负责网页前台设计样式，让设计者更加容易维护，让访问者对未来发布的网页更容易进入。
【基本内容】
（1）@规则：对css解析器的指令和指导。
@charset规则用于指定外部样式表的字符编码，通常位于文件第一行。
@import url（）；将一个样式表导入另一个样式表。eg：@import url（“/css/main.css”）；
@page{} 为分页媒介样式表的页box指定边距值。
@namespace引用命名空间，跟C/S中引用类似。
（2）选择符，匹配HTML或XML文档的一组元素。规则集=选择符+声明块
1>通用选择符：*{声明块}，可以匹配任意元素类型。
2>元素类型选择符：某一特定元素类型匹配。eg：ul{声明}
3>类选择符：.classname{}
4>ID选择符：#ID{}
5>属性选择符[href]{}
6>选择符分组：td，th{声明块} 、#foo td,th{} 、#foo td,#foo th{}
7>后代选择符：ul li{声明块}
（3）伪类，类似HTML中的类，作为用户与文档交互的结果。
：link{} 应用于具有href的a元素，且链接未访问
：visited{} 应用于已访问的href的a元素
：active{声明块} 用于匹配正在激活状态的任何元素
：hover{}用于丁点设备已指定的元素，例如鼠标悬停在元素上方
：foucus{} 匹配键盘输入焦点的任何元素
：empty{} 匹配没有子元素的元素
：target{}文档URL红片段标示符的目标
：checked{}匹配像检查框或单选按钮这样被选中或处于“打开”状态的元素
以上是一些常见的CSS配置内容。
【box模型】
CSS的box模型基本组成属性：内容(content)、填充(padding)、边框(border)、边界(margin)
之所以成为盒子结构，因为其外形像盒子一样，内容是盒子中装的东西，填充就像盒子中用于保护内容的东西，边框是盒子本身，盒子的堆放要保留一些边界，这样利于盒子的存放。
盒状结构摒弃了以前对网页设计时直接对图片，文字的排版，每一个网页的设计都是写死的。盒状结构将不同的内容块组合在一起，随时按照需要进行排版，大大方便了设计人员进行排版。
【总结】
对于一项新内容的学习，通过对一个系统的操作可以让我们马上上手，但我们还应时刻保持全局观，站在全局的角度对学习的内容做分析，这样才能让知识有条不紊。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
