课件编号8516235

教科版高中信息技术选修3 5.2.2 CSS 样式表课件(共21张PPT)

日期：2024-05-01 科目：信息技术类型：高中课件查看：75次大小：399033Byte 来源：二一课件通

预览图 1/9 张

教科,高中,信息技术,选修,5.2.2,CSS

高中信息技术网络技术应用 CSS样式表体验与探究打开演示网站，观察网页变化什么是css样式表？ CSS就是Cascading Style Sheets 的缩写。中文翻译为层叠样式表。简称样式表。CSS 样式表作为当前网页制作中的一种常用技术，可以更加精确地控制布局、颜色、背景和其他图文效果。样式1 CSS样式表样式2 …… 三国人物志关羽 { 属性:值; …… } …… 张飞 { 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; …… } css样式表结构体验任务一任务一：打开端午节网站的“index.html”,修改文字样式用Frontpage打开index.htm网页，将以下样式代码复制在区域的段落标签

中，观察效果。 style=“color：red;”或者style=“color：#000000” 例如想规定一个

标记中的文字为蓝色，字体大小为12pt，则可以书写为：

.......

其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开。在HTML标记中使用style样式，直接写入需要定义的属性。 <标签名 style="属性1:值1; ?属性2:值2 ；......">...... 1.嵌入式样式表标签名与样式语句留有空格英文状态标点符号拓展任务用Frontpage打开index.htm网页，将以下样式复制在超链接标签中，观察效果。 style="font-size: 12pt; color: #008080; text-decoration:none; " 请同学们在body区内写入正确的代码。归纳嵌入式样式表的特点； 1.位置：区域； 2.对网页中的单个标记起作用；给整个网页设置相同样式效果体验任务二 1.请将以下代码复制在head区合适的位置，浏览并观察效果。代码如下：请修改其中样式属性代码，并观察效果比较与嵌入式样式表差别 2.内联式样式表，修改网页中所有超链接样式 2.内联式样式表嵌入式样式表局限于某个标签，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内联式样式表。应用方式：在body区，要在应用样式的文字头和尾加上样式组名即可。原则：先定义，后应用。注释语言归纳内联式样式表的特点； 1.位置：区域； 2.对当前整个网页起作用；思考：若将整个网站设置相同的风格页面，该如何操作？是否在每个页面head区中都添加样式表？体验任务三记事本中应该输入以下代码： body {background-image:url(bg1.jpg);} td {text-align:center;} th { color:#669900;} table tr td {border:1px solid green;} a:link { font-size: 12pt; color: #9900CC; text-decoration:none; } a:visited { font-size: 12pt; color: #ccffcc;text-decoration:none; } a:hover { font-size: 12pt; color: #008080; text-decoration:none; } #name1{height:200;background-image:url(banner.jpg);} 保存的时候保存为h3.css 请注意后缀！请把样式代码写到记事本中，保存的文件名称为skin.css，将此页面引用刚才定义的样式。思考：应该添加什么代码？代码添加在什么地方？ skin.css必须与想实现效果的网页保存在同一个目录内。 3.外联式样式表端午佳节(网站1) 添加的代码

　端午节习俗实现的效果归纳外联式样式表 ... ...

教科版 高中信息技术选修3 5.2.2 CSS 样式表 课件(共21张PPT)

同类资源

教科版高中信息技术选修3 5.2.2 CSS 样式表课件(共21张PPT)