- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 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
您可能关注的文档
- 完整版菲佣的岗位说明书让基层管理者汗颜.docx
- 完整地看待幼儿和幼儿教育.docx
- 宏业10万锭安全施工组织设计1030.docx
- 完整的设计应包括的内容.docx
- 宏观第二章练习.docx
- 宏观调控政策对郑州投资的影响分析doc12.docx
- 宏观经济学题目.docx
- 宏观经济学试题1.docx
- 宗庆后自我调侃.docx
- 官地水电站大坝rcc施工工法.docx
- 2024年01月湖北武汉市第三医院招考聘用笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月江南大学无锡医学院行政管理人员招考聘用3人笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月江苏盐城东台市招商服务中心选聘2人笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月湖南省衡阳高新技术产业开发区企事业单位2024年度引进10名急需紧缺专业技术人才笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月湖北省食品质量安全监督检验研究院招考聘用笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月江苏苏州市姑苏区教育体育和文化旅游委员会下属事业单位招考聘用教师54人笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月安徽省凤阳县事业单位2024年公开引进21名急需紧缺人才笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月山东省东阿县综合类和教育类事业单位2024年引进16名优秀青年人才笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月广东广州市番禺区新造职业技术学校招考聘用校编合同制教师4人笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
- 2024年01月山东济宁市任城区事业单位招考聘用71人笔试近6年高频考题难、易错点荟萃答案带详解附后.docx
文档评论(0)