CSS 的预处理程序分别都有哪些优缺点_CMS教程

优点：拿来就用，可以少敲写代码，少动些脑筋。

缺点：造成css文件体积会加大一点，下载别人写的所谓预处理样式，有些玩意都不知道是用来干嘛的，有根本用不上的亢余代码。或者产生了有些奇怪的问题或不期望的效果影响到自己写的其他代码，得一点一点的排查。另外很多预处理代码作者都是把不需要处理的一些标签全都处理了，可能会造成解析css时渲染网页时间变长几毫秒什么的。

一、div标签未关闭

这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签，诊断时就像大海捞针一样麻烦。

二、麻烦的embed标签

九十年代早期，Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML标签，如“embed”，即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE(文档类型)验证，就只能放弃嵌套。如果同时想要生效的版面设计和嵌入式媒体，可以试试FlashSatay方法。

三、DIV CSS网页布局中不当的DOCTYPE声明

不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，StrictDOCTYPE是大家追求的最高级验证。Strictvalidation表明你的网页能够在所有浏览器上都得到最佳展示。

四、结尾斜线

如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

五、DIV CSS网页布局中Align标签

如果DOCTYPE被设为Transitional，你就会使用“align”标签，但如果要求更高一点希望得到Strict验证，你会看到很多错误。Align是另一个不可用于版面设计的标签。可以尝试用“float”或者“text-align”来代替align转换元素。

六、JavaScript

如果已经声明StrictDOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的JavaScript。如果必须用到JavaScript，可以在其前后加上如下标签：

七、DIV CSS网页布局中图像需要“alt”属性

你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt=”Scaryvampirepicture”。搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。

八、未知实体数据

实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entirelist中列出在XHTML版块设计中可用的适当的编码字符实体数据。

九、DIV CSS网页布局中不良嵌套

嵌套就是元素里又包括元素，我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

十、缺少“title”标签

尽管这看上去是一个很明显的错误，很多程序员(包括我自己)还是经常会在“head”版块中遗漏title标签。当你看到“missingarequiredsub-elementofHEAD”(缺少HEAD的必要子元素)时，才会发现自己忘记添加title标签了。

<ul>

</ul>

重点在于设置ul 和li的样式，和span 的宽度与浮动，就可达到这样的效果

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height;其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应。当然该元素高度上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。

2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。

3、边框宽度不允许使用百分比值。这点就不解释了。

4、width：100%，当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。

5、line-height。你知道line-height:150%和line-height:15的区别吗 line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。

6、ex和 ch单位。ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以05em计算;ch:以节点所使用字体中的“0”字符为基准，找不到时为05em。

ex和 ch单位，类似于 em和 rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。7、使用calc时运算符之间要有空格，否则可能无效。

以上这7个知识点你们掌握了吗更多的内容资讯，小编会及时发布在本平台，请及时关注哦!

CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

空间页面CSS说明

body 整个空间页面{background-color:#FFFFFF}

--------------------------------------------------------------------------------

空间名称和简介区域

#header 主体部分{height:89px;background:#3399CC}

#header divlc 左背景图{background:url(temp1/hdljpg) no-repeat}

#header divrc 右背景图{background:url(temp1/hdrjpg) no-repeat top right}

#header divtit 空间名称{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑体}

#header divtit atitlink 空间名称链接{color:#FFFFFF;text-decoration:none}

#header divtit atitlink:visited{color:#FFFFFF;text-decoration:none}

#header divdesc 空间简介{top:33px;left:20px;color:#FFFFFF;font-size:13px}

#tabline TAB菜单下方的横线{top:89px;background-color:#FFFFFF}

#tab TAB菜单主体{top:67px;background:url(temp1/tabbggif) repeat-x}

#tab aon,#tab aon:link,#tab aon:visited TAB选中状态{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}

#tab span TAB与TAB之间的分割符“|”{color:#FFFFFF;font-size:14px}

#tab a:link TAB未选中状态{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab2 设置TAB菜单主体{background:#DAE9F5}

#tab2 span TAB选中状态{color:#000000;font-size:12px;font-weight:bold}

#tab2 a TAB未选中状态{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

--------------------------------------------------------------------------------

stage 内容区域（TAB菜单与版权信息之间的区域）{background:#F3F1F1}

其它区域（即访问量等信息）

#comm_info 主体{color:#333333;font-family:Arial;text-align:left}

#comm_info divline 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#comm_info a 链接{color:#3399CC}

--------------------------------------------------------------------------------

页码区域

#page 主体{height:30px;font-size:14px;font-family:Arial;text-align:center}

#page span 当前页码（不可点击）{padding:3px;color:#000000;font-size:14px;font-weight:bold}

#page apc 上一页和下一页{color:#3399CC;font-size:14px;font-weight:bold}

#page apc:visited{color:#3399CC}

#page api 页码（可点击）{padding:3px;color:#3399CC;font-size:14px}

#page api:visited{color:#3399CC}

--------------------------------------------------------------------------------

模块

mod {margin-bottom:10px}

modhandle{cursor:move}

modth 模块标题栏主体{height:24px}

modhead{padding:4px 4px 0 4px}

modopt 模块 *** 作区（如写新文章）{padding:4px 4px 0 0}

modtit 模块标题区（如文章列表）{color:#FFFFFF;font-size:12px;font-weight:bold}amodtit{color:#FFFFFF}amodtit:visited{color:#FFFFFF}

modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}amodtitlink{color:#FFFFFF;text-decoration:none}amodtitlink:visited{color:#FFFFFF;text-decoration:none}amodtitlink:hover{color:#FF5100;text-decoration:underline}

modact *** 作文字链接（如文章列表）{color:#FFFFFF;font-size:12px}amodact:link{color:#FFFFFF}amodact:visited{color:#FFFFFF}

modbox 模块内容区{padding:10px 10px 0 10px;background-color:#FFFFFF}

modtl 模块左上角背景{background:url(temp1/ptitlgif) no-repeat top left;line-height:1px}

modtc 模块中上背景{background:url(temp1/ptitcgif) repeat-x}

modtr 模块右上角背景{background:url(temp1/ptitrgif) no-repeat top right;line-height:1px}

modbl 模块左下角背景{background-color:#FFFFFF;line-height:1px}

modbc 模块中下背景{background-color:#FFFFFF;line-height:1px}

modbr 模块右下角背景{background-color:#FFFFFF;line-height:1px}

--------------------------------------------------------------------------------

文章区域

#m_blog divtit 文章标题{font-size:14px;font-weight:bold}

#m_blog divtit a 文章标题链接{color:#333333;font-size:14px;font-weight:bold}

#m_blog divtit a:visited{color:#333333}

#m_blog divdate 文章发表日期{margin:5px 0 8px 0;color:#666666}

#m_blog divcnt 文章内容{color:#333333;line-height:20px;font-size:14px}

#m_blog divmore{margin:14px 0 16px 0}

#m_blog divmore a 阅读全文链接{color:#3399CC;font-size:14px}

#m_blog divmore a:visited{color:#3399CC}

#m_blog divopt 文章 *** 作区（如编辑、评论等）{color:#666666;font-size:12px}

#m_blog divopt a 文章 *** 作链接{color:#3399CC;font-size:12px}

#m_blog divopt a:visited{color:#3399CC}

#m_blog divline 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#m_blog divnone 无文章提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}

--------------------------------------------------------------------------------

个人档案区域

#m_pro a 链接{color:#3399CC}

#m_pro a:visited{color:#3399CC}

#m_pro divimage 个人头像{text-align:center}

#m_pro divact *** 作区（如加为好友、发送消息）{margin-top:10px}

#m_pro divuser 用户名{margin-top:10px;color:#333333;font-size:12px;font-weight:bold}

#m_pro divdesc 用户简介{color:#333333;font-size:12px}

#m_pro divline 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#m_pro td{color:#333333;line-height:24px;font-size:14px}

--------------------------------------------------------------------------------

相册区域

#m_album divimage 照片{text-align:center}

#m_album divpage {color:#666666;font-size:12px;text-align:center}

#m_album divpage a{color:#0000CC;font-size:12px}

#m_album divpage a:visited{color:#0000CC}

--------------------------------------------------------------------------------

友情链接区域

#m_links divitem 子项{color:#333333;font-size:12px}

#m_links divitem a 名称（链接）{color:#3399CC;font-size:12px;text-decoration:none}

#m_links divitem a:visited{color:#3399CC}

#m_links divline 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

文章分类

#m_artclg divitem 子项{color:#666666;font-size:12px}

#m_artclg divitem a 分类名称（链接）{color:#3399CC;font-size:12px}

#m_artclg divitem a:visited{color:#3399CC}

#m_artclg divline 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

CSS 的预处理程序分别都有哪些优缺点

发表评论

评论列表（0条）