《物联网web应用技术》课件 项目三 任务一光强调节界面样式_第1页
《物联网web应用技术》课件 项目三 任务一光强调节界面样式_第2页
《物联网web应用技术》课件 项目三 任务一光强调节界面样式_第3页
《物联网web应用技术》课件 项目三 任务一光强调节界面样式_第4页
《物联网web应用技术》课件 项目三 任务一光强调节界面样式_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《Web应用技术》物联网Web应用技术项目三CSS样式任务一光强调节界面样式HTML表格HTML布局HTML表单回顾3.如何设置标题的CSS样式?1.如何使用CSS设置页面背景颜色？2.如何使用CSS设置图片样式?任务引入任务描述:光强调节界面设计与程序编写任务教学目标：掌握CSS的语法；掌握CSS的选择器使用；掌握CSS的样式表的创建及引用。任务概要教学内容CSS介绍CSS样式表光强调节界面样式设计实训一二三CSS介绍知识点一CSS可以静态地修饰网页；可以配合各种脚本语言动态地对网页各元素进行格式化。只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。CSS是指层叠样式表（英文全称：CascadingStyleSheets），通常又称为“风格样式表（StyleSheet）”。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。HTMLCSS（一）CSS（二）CSS语法CSS规则由两个主要的部分构成：选择器和声明（一条或多条声明）选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是设置的样式属性（styleattribute）；每个属性有一个值，属性和值被冒号分开。CSS声明总是以分号“;”结束，声明总以大括号“{}”括起来：（二）CSS语法CSS实例：

p{color:red;text-align:center;}/*这是个注释*/p{color:red;text-align:center;/*这是另一个注释*/font-family:arial;}每行只描述一个属性，可读性更强CSS注释以“/*”开始,以“*/”结束，（三）CSS选择器在HTML元素中设置CSS样式，需要在元素中设置“id”和“class”选择器。。#demo1{text-align:center;color:blue;}1.Id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。Id选择器（三）CSS选择器.center{text-align:center;}2.class选择器class选择器用于描述一组元素的样式，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。class选择器拥有center类的HTML元素均为居中p.center{text-align:center;}class指定特定的HTML元素所有的p元素使用class="center"让该元素的文本居中CSS样式表知识点二CSS样式表CSS样式表的方法有三种：外部样式表（Externalstylesheet）内部样式表（Internalstylesheet）内联样式（Inlinestyle）（一）外部样式表当样式需要应用于很多页面时，通常选择外部样式表。在使用外部样式表时，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部。<head> <linkrel="stylesheet"type="text/css"href="mystyle.css"></head>样式表应该以.css扩展名进行保存。文件不能包含任何的html标签。hr{color:blue;}p{margin-left:20px;}body{background-color:grey;}（二）内部样式表当单个文档需要特殊的样式时，一般使用内部样式表。使用<style>标签在文档头部定义内部样式表。<head><style>hr{color:blue;}p{margin-left:20px;}body{background-color:grey;}</style></head>（三）内联样式表将样式和内容在一起描述时，一般使用内联样式。当样式仅需要在一个元素上应用一次时，通常可选择此方法。使用内联样式，需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。<pstyle="color:blue;">这是一个段落。</p>例如，改变段落的颜色和左外边距：（四）多重样式表当某些属性在不同的样式表中被同样的选择器定义，属性值将从更具体的样式表中被继承过来。h3{color:red;text-align:left;font-size:8pt;}例如，外部样式表、内部样式表都拥有针对h3选择器属性：h3{text-align:right;font-size:20pt;}color:red;text-align:right;font-size:20pt;/*对h3选择器的三个属性*//*对h3选择器的两个属性*/页面拥有内部样式表，同时与外部样式表链接，

h3得到的样式是：继承于外部样式表继承于内部样式表继承于内部样式表（五）多重样式表优先级多重样式优先级如下：内联样式（Inlinestyle）>内部样式（Internalstylesheet）>外部样式（Externalstylesheet）>浏览器默认样式。<head>

<!--外部样式style.css--><linkrel="stylesheet"type="text/css"href="style.css"/>

<!--设置：h3{color:blue;}--><styletype="text/css">/*内部样式*/h3{color:green;}</style></head><body><h3>测试！</h3></body>注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。光强度调节界面设计知识点三（一）在head中添加样式

/*选择全部元素*/ *{ padding:0; margin:0; }1.设置全部元素内外边距（一）在head中添加样式/*class选择器*/ .container{ width:600px; color:white; background-color:lightpink; margin:20pxauto; padding:15px; line-height:50px; text-align:center; }2.设置class选择器container元素样式添加样式设置container宽度600；字体颜色为白色；背景颜色为lightpink；外边距上下边距为20，左右边距为浏览器边距；内边距为15；行高50；文本居中显示。（一）在head中添加样式/*标签选择*/ h4{ font-size:20px; }2.设置4级标题样式添加样式设置4级标题，字号为203.设置id选择器details颜色和鼠标悬浮样式添加样式设置id选择器颜色为skyblue；设置鼠标悬浮样式颜色为gray/*id选择器*/#details{ color:skyblue; }/*鼠标悬浮样式*/#details:hover{ color:gray; }（一）在head中添加样式/*设置图片样式*/.container.img{ width:150px; height:150px; margin:0auto; background:url('../img/lamp.png')no-repeatleftcenter; }4.设置图片样式添加样式设置图片宽度150，高度150；外边距上下边距为0，左右边距为浏览器边距；背景透明；图片路径：

../img/lamp.png，图片不平铺，居左且上下居中显示。（二）光强控制页面代码设计<body> <divclass="container"> <h4>光强控制</h4> <divclass="img"></div> <p>当前状态:打开</p> <div> <button>打开</button> <button>关闭</button> </div> <aid="details"href="#">详情</a> </div></body>添加四级标题“光强控制”；添加lamp图片；添加段落：“当前状态：打开”；添加按钮：打开按钮、关闭按钮；Id选择“detail”，连接本页面，链接文本“详情”。如何图片的CSS样式？如何设置标签的CSS样式？思考问题本任务学习了CSS样式。包括如下内容：1.CSS样式语法；2.CSS样式表。

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论