CSS技术在网页设计中的运用

2016-01-29 12:04 10 1 收藏

CSS技术在网页设计中的运用,CSS技术在网页设计中的运用

【 tulaoshi.com - Html 】

多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText 
   Markup Language, 
   HTML)提供增强补充服务的技术,可对每一个HTML的置标(tag)做精雕细刻的修饰。只用HTML制作的网页,对页面内各部分的修饰能力有限且语句烦锁,CSS正是弥补这一缺陷的有力技术,它语句、文法简单,只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。  
  ---- CSS在HTML中以STYLE标识出现,其格式为:一对代表CSS 技术的STYLE置标,内放被修饰的HTML置标,置标的CSS属性放于紧随其后的一对大括号内,每个属性赋值用":",多个属性之间用";"隔开,例:  
  < style  
  a{text-decoration:none; color:yellow} 
  a:hover{text-decoration:underline; color:purple} 
  p{font-size:20; background:red; color:blue} 
  < /style    
  ---- 
   将如上代码插入任一HTML文档后,刷新显示,则所有锚点变为普通字体,颜色为黄,但当鼠标移至其上时,则锚点的提示字符变为带下划线的紫色字体;整个文档中被置标P包围的文字将以红底蓝字、字体大小为20个象素的形式出现。如果其中某段文字需另加修饰,可以单独的的形式出现,例如     
  < p style="font-size:30; font-weight 
  :bolder; background:white;color:blue"  
  ................ 
  < /p    
  ---- 则此段文字白底蓝字,30个象素大小,且字体加粗。随后是一个带有CSS技术的HTML文档的完整例子:  
  < html  
  < head  
  < title  如何使用CSS < /title  
  < /head  
  < body  
  < style  
  a{text-decoration:none; background:red; color:yellow} 
  a:hover{text-decoration:line-through; background:lime} 
  h1{text-align:center; font-weight:900; 
  border-style:ridge; border-width:medium; border-color:red} 
  p.first{font-size:15; font-face:楷体; 
  color:blue; border-style:dotted; 
  border-width:thin; border-color:blue} 
  p.second{font-size:20; word-spacing:10; background:aqua} 
  < /style  
  < h1  带连框的题头1 < /h1  
  < a href=mailto:wow20000@hotmail.com?subject=CSS  
  鼠标移至此处, 背景变化 
  < /a  
  < p  未加CSS修饰的段落 < /p  
  < p class=first  指定CSS修饰的段落 < /p  
  < p class=second  指定另一种CSS修饰的段落 < /p  
  < /body  
  < /html    
  ---- 从上例的显示可以看出,CSS是HTML的一个补充,几乎可以对每一个HTML置标进行扩充,使网页充满活力,显示出更加完美的效果。

来源:http://www.tulaoshi.com/n/20160129/1484478.html

延伸阅读
标签: Web开发
准备去应聘一个 网页设计 的职位。看起来应该去复习一下xHtml(CSS应该不需要多复习吧-_-!!),不过,先来一些CSS 3.0的知识吧。怎么说呢?CSS 3已经非常强大了,圆角+resize则是我喜欢的。 1. 基本的xhtml标记 在开始这个教程之前,让我们来做点xHtml标记,我们需要的几个DIV来完成效果的显示,如下: #round, 这个显示CSS 3圆角 #ind...
标签: Web开发
      在各种网页制作技术论坛中,常常有人询问javascript与Java有什么区别,甚至有人误认为javascript就是Java。javascript与Java确实有一定的联系,但它们并不像我们想象的那样联系紧密,甚至可以肯定地说它们有很大的区别。  什么是javascript ?  javascript 是对...
标签: Web开发
前两章我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表、内部样式表、导入外表样式表和内嵌样式。 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用link标记链接到这个样式表文...
当你欣赏下面这些案例时,留意一下他们如何以及为何使用矩形或正方形元素,会使得你思路大开。此处列举的方块元素,被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。我们来详细了解一下。 使用方块布局的目的是什么? 或许这对你而言有点哲学和理论化,我们来看看别人选择方块布局的原因。(顺便提一句,...
多重字体混合使用不管在哪个行业都是有难度的,尤其是网页设计领域。尽管字体种类成千上万,但是合理的在网页中使用它们不简单呐,所以在面对成千上万的字体时,保持冷静是你应该保持的职业操守,就好比摄影师看见美女一样。有些人说,那我在一个网页中只是用一种字体不就一了百了了吗~错!即使你只是用一种字体那些常见的问题还是会存在。今天...

经验教程

668

收藏

37
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部