Home思洋影视事业部网站建设知识库
0 Comments

详解CSS布局技巧十则(1)

发布于：2013-08-12  |   作者：广州网站建设  |   已聚集：人围观

本文向大家描述一下CSS技巧十则，主要包括CSS字体属性简写规则，CSSborder的缺省值，CSS图片替换技巧，CSS用于文档打印等内容，相信本文介绍一定会让你有所收获。

CSS技巧十则详解

这十则CSS技巧汇编于网络，作为老手已经司空见惯了，也没有什么新意，但温故而知新，或许阅读一遍也有一定的启发，本文主要面对CSS新手朋友，有一些东西或许不是搞的很明白。而这十则CSS技巧能促进你的学习与编码技巧，更多的知识浏览51cto.com的教程。希望大家能认真阅读。
广州网站建设,网站建设,广州网页设计,广州网站设计

一、CSS字体属性简写规则

一般用CSS设定字体属性方法：　



    
	
  1. 
		　font-weight:bold;  
    2. 
	
  2. 
		font-style:italic;  
    3. 
	
  3. 
		font-varient:small-caps;  
    4. 
	
  4. 
		font-size:1em;  
    5. 
	
  5. 
		line-height:1.5em;  
    6. 
	
  6. 
		font-family:verdana,sans-serif;  
    7. 




	可以把它们全部写到一行上去：　




    
	
  1. 
		　font:bolditalicsmall-caps1em/1.5emverdana,sans-serif;  
    2. 
	
  2. 
		 
    3. 




	这样看起来是不是简单多了，只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight,font-style,以及font-varient，他们会使用缺省值，这点要记上。



	二、CSSborder的缺省值



	通常可以设定边界的颜色，宽度和风格，如： 




    
	
  1. 
		border:3pxsolid#000;  
    2. 
	
  2. 
		 
    3. 




	这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。 如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	三、给元素同时使用两个类



	一般一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样： …

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。 补充：对于一个ID，不能这样写…


	 

也不能这样写


	 



	四、CSS用于文档打印



	许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。 也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：　




    
	
  1. 
		　<linktypelinktype=”text/css”rel=”stylesheet”href=”stylesheet.css”media=”screen”/> 
    2. 
	
  2. 
		<linktypelinktype=”text/css”rel=”stylesheet”href=”printstyle.css”media=”print”/> 
    3. 
	
  3. 
		 
    4. 




	第1行就是显示，第2行是打印，注意其中的media属性。 但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用display:none这个命令来关掉一些装饰图片，再关掉一些导航按钮等。


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机