CSS布局教程

有时候我们希望控制某种元素的一定范围内对象的样式，这时候可以把元素与class与id选择符结合起来使用。例如：
span.red{color:red;} div#top{width:100%}
上面的选择符就是元素指定选择符，它与包含选择符有点相似，但元素指定选择符前后对象之间没有空格，且不再要求前后两个对象之间在结构上必须是包含关系，元素指定选择符对于定义样式限定为class或id属性的某种元素非常有用，它对元素的控制精度介于类型选择符与id或class选择符之间，是一种非常实用的选择符类型，例如，在下面这个模块中，包含了4个子元素，我们如何精确控制新闻正文的样式呢？
...

伪类选择符被浏览器广泛支持得益于超链接的普及和使用，当然伪类可不止上面提到的4种，css2为我们提供了更过的伪类，不过上面列表里的伪类可没有超链接的伪类风光和受欢迎，原因是浏览器的支持不多，特别是ie浏览器不积极支持，另外是这些伪类使用的领域比较偏僻，或者与javascript的功能出现重合，也阻碍了他们的普及。
关于超链接相关的4个伪类使用时候应该注意几个问题
这4个伪类选择符可以单独使用
为了简化代码，可以把伪类选择符中相同的声明提出来在a选择符中，例如在上面的代码中，把去除超链接下划线的声明放在a类型选择符的样式中，这样超链接就不会显示下划线了，除非你单独定义才会显示。
...

通用选择符是一种特殊的选择符，它用*符号表示，是一个非常实用的，但容易被忽略的选择符，在windowsh中，我们常用通配符来查找所有文件夹或文件，如果要查找系统中所有扩展名为txt的文件，可以使用*.txt来匹配查询，css中的通用选择符与通配符具有相同的功能，它可以定义所有元素对象的样式，例如：
*{font-size:12px;}上面的样式将会影响文档中所有元素，即文档中所有文字大小都定义为12pt，使用通用选择符时候要慎重，一般常用于定义文档中各种元素的共同属性，如字号，字体，字体颜色，行高等。
...

id翻译为中文表示身份的意思，它似乎与每个人使用的身份证号类似，事实上也是这样的，css的id是作为网页文档中每个元素的身份证来使用的，因此，它是唯一的，不同元素的id指示不能重复的，使用id选择符能够扩展xhtml元素这里的扩展不是重新定义元素，而是扩展元素的显示效果的意识，就是把不同的一个元素当做两个甚至无数了不同样式的元素来使用，为每个元素的具体对象定义不同的样式，方便了用户更精确的控制页面。
当我们使用id选择符的时候，应先为每个元素定义一个id属性，例如：
...

类型选择符就是网页元素自身，定义的时候直接使用元素名称，如定义段落样式，我们可以使用p元素名称，即把p作为选择符就可以，在xhtml框架中所有元素都可以作为类型选择符来进行定义，例如：下面定义样式的选择符都是类型选择符。
html{}body{}div{}span{}br{}
定义了类型选择符，所定义的属性就会影响引用这个样式的所有该元素的显示效果，因此，类型选择符是一把双刃剑，使用恰当会非常省力，但考虑不周，贸然定义类型选择符就会给网页布局增加无穷的烦恼，例如，如果在样式中定义：div{width:774;}那么当你使用div进行布局时候，就需要重新为页面中每个div对象定义宽度，意味在页面中并不是每个div元素对象的宽度都显示为774px，否则所有div都显示为774px将是一件非常麻烦的事情。所以在下面情况时可以选择使用：
...

完成了网页框架的构建，下一步就该使用css来布局和修饰了，使用css的方法可以简单的概括为：
1、选择符，选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者指定名称的元素，后面将详细介绍
2、选择属性，选择属性是指定选择符所具有的属性，它是css的核心，css共定义了150多个属性，css定义的大部分属性都可以适用于任何选择符，这是因为所以xhtml元素都是基于盒模型构建的，关于盒模型以后专门研究
3、定义属性值，属性值包括常见的数值加单位，如25px，其中25表示数值，px表示单位，即像素或像素点的意识，它是屏幕显示的最小单元，我们常说的显示器大小为1024*768，就是说屏幕宽度由1024个像素点组成，高度由768个像素点组成，也可以是百分比，如29%，百分比值一般都参照父级元素的相同属性来确定，或是范围，如顶部，底部，左侧，右侧等。
...

了解了常用的布局元素之后，下面来探讨xhtml结构语义化，望读者能够从更高的理论层面认识html结构框架
语义化的xhtml主要包括语义化元素和语义化命名
语义化元素就是我们介绍的各种结构化的布局元素，如标题，段落，列表，表格，还有如表示引用的元素，表示强调的元素等，关于语义元素的更详细说明参考相关资料。
语义化的命名主要是元素命名要体现的语义化，例如，<div id="header"></div>这个结构标签，把div元素的id属性定义为header，我们就可以知道这个标签包含的内容一定是网页页眉信息，关于语义化命名的更详细介绍可以参考后面内容。天津网站建设，天津网站优化，汽车玻璃，商业策划招商，钢板桩租赁，天津废锡回收，天津网站制作
...

实践中，我们会更多的根据元素的上述分类以及语义特性有选择的使用，下面列举常用的布局元素及他们的简单使用。
1、div，英文全称division，该元素从internet explorer3.0版本就开始使用，到4.0版本时候得到更进一步的完善，并在脚本中获得支持。
div作为通用块状元素，在标准网页布局中是最常用的结构化元素，div没有明确的语义，但不等于说它没有意思，通过理解他的英文全称和w3c对于div和span的定义，我们可以这样理解，div元素表示文档结构块的意思，它可以把文档分割为多个有意义的区域或模块，因此，使用div元素可以实现网页的总体布局，网页布局格式千变万化，没有定规，但div一定是网页总体布局的首选元素，例如下面代码中，用了3个div元素分割三大块区域，这些区域分别属于页眉，主体和页脚，然后在页眉和主题区域分别又用几个div元素再次细分几个更小的单元区域，如此等等就可以把一个网页切分为很多个功能模块。
...

在传统布局中，网页设计师似乎更多的熟悉三个标签，table ,tr,td，而标准网页下，我们需要与更多的元素打交道，因此你应该认识他们，了解他们的习性，根据css显示分类，xhtml元素被分成三种类型
1、块状元素
顾名思义，块状元素在网页中是以块的形式显示的，所谓块状就是元素显示为矩形区域，从css3开始支持定义圆角矩形区显示，但目前还有有支持的浏览器，常用的块状元素包括div,h1-h6,p,table和ul等，更多的块状元素的列表说明可以参考详细介绍。
...

xhtml是根据xml语法简化而成的，因此它遵循xml文档规范，下面是xhtml语言的基本语法，但更像几条要求，培养良好的xhtml代码书写习惯对于读者未来的网页设计非常重要，建议好好看看
在文档的开始定义文档类型，可以参照以前的文章
在根元素中应声明命名空间，既设置xmlns属性，天津网站建设，天津网站优化，汽车玻璃，商业策划招商，钢板桩租赁，天津废锡回收，天津网站制作
...