& Homepage Design第四章CSS网页样式设计一、一、CSSCSS概述概述?CSS(Cascading Style Sheets,层叠样式表单),专门用于设置网页样式(颜色、字体、背景、定位等样式的网页设计语言。?1996年W3C标准化组织推出CSSI规范(层叠样式表单一级)规范,其控制的网页样式多达50多个。98年3月W3C推出计划标准CSSII。?CSS的作用是解决HTML语言文档结构与样式显示混和的缺陷,使样式描述内容彻底独立于结构文档。用CSS,你可以做什么??你可以将格式和结构分离。?你可以以前所未有的能力控制页面的布局?你可以制作出体积更小、下载更快的网页?你可以更快的维护、更新大量的网页?浏览器将成为最友好的界面示例示例?建立一个网页(),内容如下:<html><head><title>我的第一个样式表</title></head><body><h1>样式表:网页设计的利器!</h1><p>amaze your friends!squash your enemies!</p></body></html>在<head>..</head>之间插入以下代码:<style type=text/css>H1{color:green;font-size:37px;font-family:隶书}p {text-indent:1cm;background:yellow;font-family:courier}</style>在IE浏览器中察看效果示例示例?建立一样式表文件(),内容如下:A:link {font-size: 9pt; line-height: 150%; color:green; text-decoration: none} /*未访问的链接*/ A:visited {font-size: 9pt; color:blue;text-decoration: none} /*已访问的链接*/ A:hover {font-size: 11pt;font-style:italic;color:red; text-decoration: underline;} /*鼠标接近时*/ A:active {font-size: 9pt; color : black;text-decoration: underline}/*正激活的链接*/?建立一网页(),设置几个链接,观察“链接样式表”前后网页上链接处的变化?<link rel="stylesheet" type="text/css" href="">Anchor(链接点)二、使用二、使用CSSCSS的方法的方法?独立建立外部样式表单文件其样式可作用于全部网页?把样式定义直接写在<head>…</head>中其样式可作用于整个网页?把样式定义直接写在<body>…</body>中其样式可作用于网页的个别元素使用外部样式表单文件<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>New Page 1</title><link rel="stylesheet" type="text/css" href=""></head><body><a href= "">主页</a>……</body> </html>链接外部样式表单文件按外部样式表单要求显示链接把样式定义直接写在<head>…</head>中<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>New Page 9</title><style><!--.zdy { font-family: 幼圆; font-size: 24pt; color: #FF0000; font-weight: bold }--></style></head><body><p class=zdy>东方不败</p><p class=zdy>东方必败</p></body></html>定义样式(类)使用样式把样式定义直接写在<body>…</body>中<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>
与网页设计(CSS网页样式设计) 来自淘豆网m.daumloan.com转载请标明出处.
