CSS布局教程

利用继承性优化代码
在CSS中，子元素会自动继承父元素的属性值，如颜色、字体、大小、行距等排版格式。已经在父元素中定义过的属性，在子元素中可以直接继承，不需要事重复定义。例如，在下面的代码中，我们就可以把清除超链接下划线的声明全部删除，然后在a元素中统—定义，通过继承而影响所有超链接伪类：
可以优化为：但要注意，并不是所有属性都可以继承。一般来说，如布局、盒模型属性的display, width、height等只使用自己的属性值，不会继承上级元素。
...

规划好CSS文件，组织好样式规则，而CSS样式的声明与属性的书写也很讲究。虽然属性与两个概念相比更简单，可是还有一些非常好的、能够保持规则整洁的方法很值得一提。
1．按字母顺序组织
对于属性书写来说，按属性的字母顺序进行排列，可以防止属性重复声明或被覆盖这种偶然事件的发生。例如，当某个选择符已被定义了很多声明，在页面更新时，忽然想为它添加一个margin属性，也许以前你已经声明了margin属性，但时间久了也就忘记了，在很长的样式代码中间，你可能也没有发现已经声明了margin属性。如果按照字母顺序排列，就很容易发现margin己被定义了两次，这个问题自然也就可以避免。这是一个细节问题，但在设计师的工作中这是很常见的“小臭虫”。
...

Blog（博客）是继Email、BBS、ICQ之后出现的第四种网络交流方式，是一种集个人自由表达、深度交流沟通的网络新方式。从2005年开始，博客开始在中国兴起，国内目前经常使用博客的人数达到2800万，都市白领成为博客群体的主力。
Blog网站存在有多种形式，有专门提供博客服务的平台或门户网站，这类网站一般规模比较大，结构复杂，遵循商业化运作模式，公司化经营，团队运作，如博客中国、博客网、 新浪博客也有个人建立的博客站点一或博客页面，功能相对简单，结构单一，一般主要有2个页面，即日志分类列表和日志详细页。
...

CSS Filter利用浏览器的问题或者未支持的特性来隐藏针对特殊版本浏览器的CSS样式规则。由于IE7修复了这些问题并且改进了CSS支持，一些CSS filter将不再适用。如果使用这些Filters，你应该了解它们的效果。这样我们就可以针对IE和其他浏览器更有效地使用过滤器以适应改影；CSS设计方法。在IE7中，下面这些过滤器不再被支持，虽然前面曾经提到，这儿再简单汇总以下。
1. • HTML filter
这个CSS过滤器是基于一个解析错误。它被用于显示排除内容。这些内容将被IE 7和以后的版本忽略。
...

列表在网页布局和排版方面都具有强大功能，是设计师最喜欢选用的元素，因此使用频率相当地高。传统网页布局中列表多用于多行单列的标题信息的排列，由于列表信息比较整齐直观，非常方便浏览者浏览，使用频率仅次于表格。在标准网页布局下，由于CSS定义了强大的列表属性，以及各种浏览器对CSS列表属性的狗空前支持，使列表可以配合div元素实现更多的网页布局。
XHTML列表框架
XHTML支持三种列表形式：有序列表、无序列表和定义列表。
◆有序列表
表中，每个列表项前都标有数字，表示顺序，如1,2,3，或a,b.c等，盒列表用ol元素表示，每个列表项用li元素表示。
...

构建CSS系统的第一步是要规划好CSS文件结构。这个结构如同天津网站建设的网站的目录一样，虽然没统一的规定，但如何合理分离CSS文件，以及如何高效组织和管理这些文件，是设计师首先应思考的问题。一般网站的CSS样式文件会被分为主文件和分类文件，在CSS主文件中可Css定义所有页面公共属性，如网站默认字体、链接、页眉、天津网站设计，天津网站制作， 二页脚和公共类等，同时还会包含各种被分离的CSS文件链接。
...

网页流动与HTTP数据传输方式、浏览器接收、解析和显示数据的方式密切相联系。HTML源代码部是从上到下分步解析、显示的。自然网页元素也只能自上而下按顺序逐步分布。当在网页编器中删除上面的元素，我们会看到下面的元素自动回收，以填补删除的空间，这就是流动布局的一大特点，这对于绝对定位的层来说是做不到的。
流动(Flow)是默认的网页布局模式。任何没有具体定义position:absolute;或position: fixed；以及没有被定义浮动float:left;或float:right;的元素都将默认呈现流动布局模式。流动布局模型具有两个比较典型的特征：
...

清楚了CSS盒模型的基本概念、盒模型类型，以及包含块后，我们就可以深入探讨天津网站建设和天津网站设计的模型了。布局模型与盒模型一样都是CSS最基本、最核心的概念。但布局模型是建立在盒基础之上，又不同于我们常说的CSS布局样式或CSS布局模板。如果说布局模型是本，那么cSS，布局模板就是末了，是外在的表现形式。CSS包含3种基本的布局模型，用英文概括为：Flow、Layer和Float。
...

在CSS代码中添加注释是个好习惯，但是有时也会出现一些问题。例如，为CSS添加中文注释，在一些特殊情况下中文注释会导致部分代码无故失效，主要原因是服务器端支持、文档代码以及程序类型等引起的。由于IE6及更低版本浏览器对于双字节的中文字稅符支持不是太好，添加中文注释就会出现解析问题，而IE7、fire fox等现代标准浏览器都能良好支持中文注释。因此如果发现带有中文注释的样式代码无法显示，可以把注释改成英文或者尝试把文档编码改成与页面一致的编码。如把IE默认编码UTF-8改为GB2312后会显示正常。另外，如果在内部样式中添加HTML注释，则后面相邻的样式也会失效。
...

国内网页设计师一般喜欢使用12px定义网站默认字体大小。lOpx太小，眼睛很容易疲劳，14px虽然看得清楚，但很容易破坏布局，使页面失去美感。唯独12px在审美和视力方面都能恰到好处，所以也难怪现在很多国内大型网站都把12px作为网页显示的标准字体大小。
实际上，这种做法是不科学的，分析原因怠因为他们没有考虑到特殊人群的阅读需要，对于弱视浏览者来说，12px几乎等于l0px的字体大小效果。
浏览者可以补救的措施只能是借助浏览器提供的视图功能来调节字体大小。例如，在Firefox浏览器中按Ctrl廾组合键放大页面，按Ctrl+组合键缩小页面，或选择菜单命令可以轻易调整网页字体大小，但对于Windows系统下的Ⅲ浏览器就会出现问题，对于定义为12px大小的字体，用户通过[查看]1[字体大小]子菜单来调整网页字体大小。如果有兴趣的话，你试着打开国内三大门户网站——新浪、网易、搜狐、天津网站设计、天津网站建设、天津网络公司都会存在无法用IE浏览器调整字体大小的缺陷，而国外的MSN -Google、华盛顿邮报等在IE浏览器里却是可调的。
...