码迷,mamicode.com
首页 > Web开发 > 详细

css对网页样式控制

时间:2015-01-24 17:10:32      阅读:5522      评论:0      收藏:0      [点我收藏+]

标签:


  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> 

      <li class=subnavitem> 
Item 1

      <li class=subnavitemselected> 
 Item 1
        

      <li class=subnavitem> 
 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拘。

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

 

 

 
 

css对网页样式控制

标签:

原文地址:http://www.cnblogs.com/iamzjy/p/4246077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!