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

liangxitao123

liangxitao123

2016-01-29 12:04

CSS技术在网页设计中的运用,CSS技术在网页设计中的运用
多层模式表单(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置标进行扩充,使网页充满活力,显示出更加完美的效果。
展开更多 50%)
分享

猜你喜欢

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

Html CSS布局 Div+CSS XHTML
CSS技术在网页设计中的运用

CSS样式表在网页设计中的运用

Web开发
CSS样式表在网页设计中的运用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

图解对称技巧在网页设计中的运用

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
图解对称技巧在网页设计中的运用

手绘涂鸦元素在网页设计中的运用

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
手绘涂鸦元素在网页设计中的运用

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页设计留白 留白在网页中的运用

网页设计 设计
网页设计留白 留白在网页中的运用

合适的配色方案在网页设计中的运用方案

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
合适的配色方案在网页设计中的运用方案

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

表单制作方式大比拼

表单制作方式大比拼

CSS入门教程之CSS的语法

CSS入门教程之CSS的语法
下拉加载更多内容 ↓