实习三css基本语法.docx

  1. 1、本文档共5页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
实习三CSS基本语法 一、 实验目的 了解 XHTM;L 掌握在网页中引用 CSS 的方法; 掌握 CSS 的基本语法规则; 掌握 CSS 的常用选择器; 掌握使用 Dreamweaver 定义 CSS 的方法。 二、 实验内容 CSS 的引入和基本选择器应用; 利用 CSS 对网页进行控制; 利用 W3school 网站进行 CSS 的练习。 三、 实验步骤 CSS 的引入和基本选择器应用; (1) 内嵌样式表 将定义的样式以 <Style type= ” text/css ” >样式定义 <Style> 形式插入到文档的 Head 区,此种方法样式将影响当前整个页面。 建立网页 Css1.htm ,代码如下: <html><head><title>Css 技术的应用一 </title> <Style type= ” text/css ”> H1{color:red; Font-family: ”华文行揩” , ”宋体” ;} Body{color:black;Font-size:9pt;} </style> </head> <body> <h1>这是标题一 v/h1> 这是正文… <p class=fnt> 这是使用 Fnt 类后的效果 </body></html> (2) 行内样式 将定义的样式以标记的属性形式插入,如: <P Style= ” color:blue ”>, 此种方法 样式 只影响当前标记所影响的区域。 建立网页 Css2.htm ,代码如下: -8- <html><head><title>Css 技术的应用一 </title> <Style type= ”text/css ”> H1{color:red; Font-family: ”华文行揩” , ”宋体” ;} Body{color:black;Font-size:9pt;} .fnt{color:blue;Font-family: ”隶书” ; Font-size:14pt;} </style> </head> <body> <h1>这是标题一 </h1> 这是正文… .. <p class=fnt> 这是使用 Fnt 类后的效果 <p style二” color:tea;font-size:30 ” >这是中效果只使用于此段… . </body></html> (3) 外部样式表 将所有样式的信息存放在一个单独的文件中(扩展名为 Css),然后用<LINK>把它 链接到 每个HTML页面中。如果你希望样式能够影响你站点上的所有文件,这是很好的办 法。链接 格式: <LINK Rel=StyleSheet Type= ” text/css ” Href= ” yourStyle.css ” > 利用 CSS 对网页进行控制; 用Dreamweave创建如图3-1所示页面(css3.htm )。 图 3-7 未使用 CSS 样式前的网页 建立样式文件 style.css ,格式化上面页面如图 3-8 所示,要求: 标题:字体为"华文彩云","华文琥珀","华文行楷";字号40pt ;字色红色; 勻匕 背 景色:#FFFFCC导航条:背景色为 #33CCFF 导航栏:标题背景色为#FFFFCC上边框为:实线,2pt宽,色值:#FFCC00 内容 背景色:#FFCCFF导航栏右边框为:点划线, 1pt宽,色值:#0033FF。底框: 背景 色:#99CCFF上边框:双线,2pt宽。 文本框:背景色:#FFFFCC边框:宽度1pt,实线 正文字号: 9pt 。(除标题) 超级链接:正常色:黑色,无修饰;鼠标悬停时:红色,加下划线;激活时: 红 色,加下划线;访问过的链接:黑色,无修饰。 图 3-8 应用样式后的效果 利用 W3school 网站进行 CSS 的练习。 W3school 网站是一个很好的学习网站,其上面有很多的学习资源,并且也提供了 很多在线 测试的例子。 打开网站,找到 CSS 相关部分并作练习。 四、 实习要求 根据指导书实例和操作步骤,独立完成实习内容。 记录实验中出现的问题,以用解决办法。 五、 思考问题 HTML与XHTML的区别,在网页设计中各有什么用处? 区别: XHTM文档必须在文档的第一行有一个文档类型的声明( DOCT YF) XHTM文档可以定义命名空间 XHTM文档里面必须具有html, head, body, title 这些元素。 在XHTM语言规范的基础上,对标记的语言还有一些额外的要求。 HTM既用来表现文档的结构,又能表示文档的内容,但是描述文档表现的能力很 弱,代码重用性低。XHTM实现了结构和表现分离,用 XHT M确定网页的内容,CSS 控制页面的表现形式。 CSS 的基本思想。 CSS勺全称是Casc

您可能关注的文档

文档评论(0)

youbika + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档