css对网页样式控制

浏览数：23 / 时间：2015年06月09日

　　1、方便修改网页格式：css对网页样式的控制可以独立地进行，因而修改、更新起网页起来都显得异常轻松容易。

　　2、轻松增加网页的特殊效果：在网页中过多的使用图像会破坏原有文字的存储格式，并且会加长下载时间，如果使用了css中的图像滤镜，就可以在不增加网页体积的情况下实现一些特殊的视觉效果，为网页添加生气。

　　3、使用网页元素更准确的定位：之前HTML中使用的表格用来定位表格元素，而且表格只适用于规则的网页排版，对于复杂的不规则的网页结构就显得力不从心，而css能很好的解决排版问题。

　　4、良好的适应性：许多浏览器都支持css。

　　同时我们更深刻的了解了css样式表的功能：

　　1、灵活定制网页元素风格：用css可以将元素逐个地定义其在页面中的显示风格。如果想让某种元素有多种外观，可以创建这种元素的多个类，把网页中的该元素用不同的类定义就可以了。

　　2、迅速更新网站风格：使用css，可以把整个网站的风格信息集中在外部css样式表的文件中，它的扩展名为.css，从而，HTML或XML可以通过一定的语句对这个文件样式进行引用。

　　3、组合不同风格的网页：每个人制作网页的风格和思路是不一样的，最后把每个人的网页和已开发出的网页完美组合起来是相当困难的，而css技术可以让每个人把自己的内容直接放到网页中去后，然后将网页与相应的css文件相连接，组合后的风格就较为一致，也节省了许多不必要的麻烦。
　　

　　怎样做CSS布局呢? CSS文件的链接方式
　　1、附加链接：外部CSS文件
　　2、导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中

　　CSS规则定义有三种
　　1、类比如“.RedText”、“.BlueText”和“.BigText”等等
　　2、标签针对原有HTML标签做的重新CSS定义　　

　　3、高级伪类、定义了ID的元素，以及综合性定义

　　CSS规则的应用
　　1、只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。
　　2、class与id的区别
　　3、标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
　　4、高级多运用，定义“#id li”比定义“li”要好得多。

　　CSS规则的执行顺序
　　1、按照CSS代码的执行先后顺序
　　2、如果有重复的规则，按照后执行的定义
　　3、最终规则是多个定义规则的综合

　　重点：高级规则定义
　　1、对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)
　　2、一页中的多种超级链接样式定义
　　3、多个相同规则不同对象的CSS共同定义
　　4、对于同一对象定义的多种CSS方式考虑哪种更科学(扩展性和代码精简性)
　　
　　

　　overflow与text-indent:-9999px

　　通常偏移掉字体的方式是
　　使用text-indent:-9999px;
　　可是他有一个局限性他只适用于块级元素block
　　而我们往往有时候想偏移掉的a上的字体
　　所以问题就来了
　　text-indent:-9999px;虽然用起来比较惬意
　　将a转化成block的话往往他身后的的元素就被他赶到下一行了
　　如果正好这个a后面是一个a按钮
　　就要用float来浮动以使他身后再出现簇拥者

　　这样是不是有些麻烦呢
　　所以推荐使用
　　line-height:0;
　　font-size:0;
　　overflow:hidden;
　　能完美“隐藏”掉你background之上的字体
　　经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

　　而针对input value的隐藏这个方式就有些吃力了
　　所以还是只能用block加text-indent来“偏移”模拟隐藏了
　　display:block;
　　font-size:0;
　　line-height:0;
　　text-indent:-9999px;
　　经测试 ie6.0 、 7.0 、firefox 3.010 通过

　　网站重构

　　一、使用css缩写

　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

　　二.明确定义单位，除非值为0

　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

　　三.区分大小写

　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

　　四.取消class和id前的元素限定

　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:

　　div#content {  }
　　fieldset.details {  }

　　可以写成

　　#content {  }
　　.details {  }

　　这样可以节省一些字节。

　　五.默认值

　　通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:

　　* {
　　margin:0;
　　padding:0;
　　}

　　六.不需要重复定义可继承的值

　　CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

　　七.最近优先原则

　　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

　　Update: Lorem ipsum dolor set

　　在CSS文件中，你已经定义了元素p，又定义了一个classupdate

　　p {
　　margin:1em 0;
　　font-size:1em;
　　color:#333;
　　}
　　.update {
　　font-weight:bold;
　　color:#600;
　　}

　　这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。

　　八.多重class定义

　　一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。

　　.one{width:200px;background:#666;}
　　.two{border:10px solid #F00;}

　　在页面代码中，我们可以这样调用

　　这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

　　九.使用子选择器(descendant selectors)

　　CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

<div id=subnav>

Item 1

Item 1

Item 1

　　这段代码的CSS定义是：

div#subnav ul {  }
div#subnav ul li.subnavitem {  }
div#subnav ul li.subnavitem a.subnavitem {  }
div#subnav ul li.subnavitemselected {  }
div#subnav ul li.subnavitemselected a.subnavitemselected {  }

　　你可以用下面的方法替代上面的代码

<ul id=subnav>

Item 1
<li class=sel> Item 1
  Item 1

　　样式定义是:

　　#subnav {  }
　　#subnav li {  }
　　#subnav a {  }
　　#subnav .sel {  }
　　#subnav .sel a {  }

　　用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

　　十.不需要给背景图片路径加引号

　　为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如:

　　background:url(images
　　margin:0 auto;
　　}

　　但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

　　body {
　　text-align:center;
　　}
　　#wrap {
　　width:760px;
　　margin:0 auto;
　　text-align:left;
　　}

　　第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

　　十五.导入(Import)和隐藏CSS

　　因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

　　@import url(main.css);

　　然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法:

　　@import main.css;

　　这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

　　十六.针对IE的优化

　　有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

　　1.注释的方法

　　(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

　　html>body p {
　　
　　}

　　(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

　　* html p {
　　
　　}

　　(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧:

　　
　　* html p {
　　declarations
　　}
　　

　　2.条件注释(conditional comments)的方法

　　另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。

　　十七.调试技巧:层有多大?

　　当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

　　另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

　　十八.CSS代码书写样式

　　在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式:

　　selector1,
　　selector2 {
　　property:value;
　　}

　　当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

　　我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

　　最后，关闭的大括号}单独写一行。

　　空格和换行有助与阅读。

用XHTML+CSS创建基于Web标准的网页

　　这是一篇很久以前的文章了，现在看来，其中的思想很值得大家学习，在52CSS.com学习案例的同时，不仿学习一些理论的知识，对您知识的突破会很有帮助。大家加油！

　　自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》（第2版）一书，感受颇深，坚定了我用web标准的思想，去开发实践我们的项目。但是仅知道一些什么是web标准以及如何应用到实际项目中，还是远远不够的。必须对web标准中的每个组成部分，逐一学习应用，各个击破，方能发现它们的本质！对于像我这样的web开发设计人员，懂得这个道理，进行针对性的学习与实践，我相信我们一定会收获的更多，同时也算是为web标准在中国的应用做一点贡献！（呵呵，这个可能有些吹牛，但是的确是我们大多数软件从业人员的理想。）

　　现在是web2.0乃至3.0的时代，是XHTML,XML,CSS,ECMAScript和DOM的时代。虽然它们不是最终的技术，但它们组合起来就成为一个解决方案——我们规划建立一个向后兼容的网站的基础，同时也是做符合web标准的网站的必要的技术基础。我们不仅要做到希望获得更多的用户支持与访问，更要建立长久的，漂亮的网站长时间吸引他们的注意力。我相信学会使用CSS来改善我们的网站，是吸引他们注意力的好办法，也是在web2.0时代中时髦的发展趋势。下面我仅就CSS技术谈一下我从中获得到的经验。

　　想成为一名CSS专家，仅仅熟练使用CSS选择符（selectors）是远远不够的。还在于对工作的整体规划，工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站，而写CSS本身就是一种享受。那么我们应该如何创建更具吸引力的样式表？你的样式表应该具有哪些特性呢？通过学习并结合我自己的工作经验，总结出一套制作精美样式表的好方法。

　　一、不要让CSS有过多的标记

　　链接或者导入样式表听起来好像是一种无头绪的工作。我看过很多的网站开发都有着整洁的、组织严密的css文档，但是慢慢的，由于可能达不到在短期内快速更新，或者懒得再去管理，这使得先前创建的精致的样式表变成了垃圾。如果我们工作在需要发布上百条内容的庞大网站上面。因为时间有限，所以你需要通过嵌套或者排列css来进行快速修改或更新。随着时间的推移，这种习惯维持着，直到有一天你被告知这个网站要完全推翻重新设计（但是内容还是一样）而且你只有一周的时间去创建（包括测试）。一般来说，更新样式表还算是一个非常简单的方法，除非你长时间对网站零散的区域做修改，你就不能对网站样式表结构有一个整体的把握。

　　链接或者导入你的样式表不是随意的事情。创建干净整洁的样式表并保持下去，工作就会更开心。注意：如果你试图在每次更新或者添加新内容的时候创建新的样式表，那你肯定是自找麻烦。过多的链接和导入样式表会使消除bug变得异常困难，让样式表很难维持。大一点的网站分别建立不同部分的样式表这是可以理解的。就是小心不要走极端。添加很多的样式表，会增加更多的http请求，可能还会影响到后面的工作。

　　二、语义定义明确易懂

　　除了选择最合适的，最有意义的元素来表述外，还要确定选择class 和id属性值。定义明确可以让维护变得简单，小组里的成员都会看懂。看这个定义：

　　.l10k { color: #369; } ，.left-blue { color: #369; } ，如果是我做的我可能知道是啥意思，但是比人不一定就懂了。即使今天知道它的意思，但是能保证很多年后还知道它的意思吗？最好不要在类属性里面去加入颜色或者长宽的尺寸。更恰当的命名规范：. work-description { color: #369; }

　　三、知道什么时候添加有条件的注释和运用技巧

　　很多文章写过一些关于问题解决的技巧，有条件的注释是控制IE发布的一个好方法。我同意有条件的注释比在你的css文档里乱写要好得多，但是最近我开始慢慢意识到，很多证据表明，这并不是最好的解决办法。想在一个元素中设置它的最低高度，但是IE6浏览器却不执行它，所以你知道自己能够使用的高度，也同样会被同样的处理。重新建一个样式表，然后把有条件的注释加入到你的标识中，你所有的需要都是要遵循这个规定？保持最低的高度和高度的规则在一起，选择一个小技巧在同样的css文档里，这样会更好吗？在这种情况下，我觉得用这种方法很难奏效。

　　四、应用CSS到网页中尽量使用外部样式表

　　好处吗？大家都比较清楚，当然有一点是不可否认的，可以最大限度的实现代码的重用及最优化配置网站文件。
　　好了，以上就是我的一些个人见解，希望各位朋友们多给提意见，您的建议是我挑战困难的动力！谢谢！
　　

DreamweaverCS3中的CSS布局规则

　　虽然一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局，但依然很多朋友在使用。建立您可以使用DW的代码编辑器进行CSS代码的编写。今天向大家介绍Dreamweaver CS3网页制作中的CSS布局规则。
　　CSS文件的链接方式
　　·附加链接：外部CSS文件
　　·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中
　　CSS规则定义有三种
　　·类比如“.RedText”、“.BlueText”和“.BigText”等等
　　·标签针对原有HTML标签做的重新CSS定义
　　·高级伪类、定义了ID的元素，以及综合性定义
　　CSS规则的应用
　　·只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。
　　·class与id的区别
　　·标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
　　·高级多运用，定义“#id li”比定义“li”要好得多。
　　CSS规则的执行顺序
　　·按照CSS代码的执行先后顺序
　　·如果有重复的规则，按照后执行的定义
　　·最终规则是多个定义规则的综合
　　重点：高级规则定义
　　·对于不同表格的文字样式定义。（不同表格使用不同ID、使用类样式定义）
　　·一页中的多种超级链接样式定义
　　·多个相同规则不同对象的CSS共同定义
　　·对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）
　　

CSS3 备受期待的八大功能

　　CSS3 仍遥遥无期，还是指日可待，这不是一个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C标准的旧浏览器的问题。CSS3 备受期待是肯定的，CSS Tricks 网站做了一次投票调查，票选备受期待的 CSS 功能，一共有7000人参与，结果如下。有趣的是结果的前三名非常的接近。

　　#1) 圆角 (22.0%, 1,541 票)
　　这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。

　　#2) 多背景(22.0%, 1,523 票)
　　这个功能是我最期待的，但向后兼容会是一个很大的问题。

　　#3) @font-face (21.0%, 1,424 票)
　　Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。

　　#4) 动画与渐变(12.0%, 818 票)
　　Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。

　　#5) 渐变色 (8.0%, 535 票)
　　定义一个固定色背景很简单，但渐变色就没有那么简单了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。

　　#6) Box 阴影(4.0%, 271 票)
　　阴影也是一种渐变色，以往是通过背景图片实现的，如果考虑到多方向的阴影，事情会变得更复杂，Box 阴影机制让一切问题迎刃而解。

　　#7) RGBa - 加入透明色 (3.0%, 234 票)
　　RGBa 中的 a 代表透明色，透明对设计者来说非常重要，目前除了 IE，这一功能正在被广泛采用。

　　#8) 文字阴影(2.0%, 140 票)
　　也属于渐变色的概念，让文字拥有阴影，以前甚至无法通过图片背景实现，因此这将为设计者带来前所未有的方便。
　　

　　CSS布局口诀 - CSS BUG顺口溜查看全文2009-05-04 23:44:22
　　在进行CSS网页布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSS BUG编成了顺口溜了！看看好不好记住呢？

　　一、IE边框若显若无，须注意，定是高度设置已忘记；

　　二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

　　三、三像素文本慢移不必慌，高度设置帮你忙；

　　四、兼容各个浏览须注意，默认设置行高可能是杀手；

　　五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

　　六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

　　七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

　　八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

　　九、IE浮动双边距，请用display：inline拘。

　　十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。