版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《Web应用技术》物联网Web应用技术项目三CSS样式任务二温湿度环境监测界面样式CSS语法CSS样式表回顾3..如何使用CSS设置背景图片?1.如何使用CSS设置边框效果？2.如何使用CSS设置元素位置?任务引入任务描述:温湿度环境监测界面样式设计与程序编写任务教学目标：掌握CSS的基本样式掌握CSS的定位掌握CSS的框模型。任务概要教学内容CSS基本样式CSS定位CSS盒子模型温湿度环境监测界面设计一二三四CSS基本样式知识点一CSS基本样式设置CSS样式属性一般包括：
背景
文本
字体
链接
列表
表格
轮廓（一）CSS背景CSS背景属性用于定义HTML元素的背景。CSS属性定义背景效果：background-color
背景颜色background-image
背景图片background-repeat
背景图像平铺background-attachment背景图形固定或随页面滚动background-position背景图形位置（一）CSS背景
body{background-color:grey;}1.背景颜色background-color属性定义了元素的背景颜色。页面的背景颜色使用在body的选择器中。/*h1、p、和div元素拥有不同的背景颜色*/h1{background-color:#6495ed;}p{background-color:#e0ffff;}div{background-color:#b0c4de;}CSS中颜色值通常以以下方式定义：十六进制，如“#ff0000”；RGB，如“rgb(255,0,0)”；颜色名称，如“red”。（一）CSS背景
body{background-image:url('./img/paper.gif');}2.背景图片background-image属性描述了元素的背景图像。（一）CSS背景body{background-image:url('gradient2.png');}2.背景图片-平铺默认情况下background-image属性会在页面的水平或者垂直方向平铺。如gradient2.png像素尺寸为比窗口小，在水平方向与垂直方向平铺。background-repeat属性描述了图像平铺，属性值如下：repeat-x，仅在水平方向平铺；repeat-y，仅在垂直方向平铺；no-repeat，不平铺。（一）CSS背景body{background-image:url('gradient2.png');background-repeat:repeat-x;}2.背景图片-平铺图像只在水平方向平铺（repeat-x）。（一）CSS背景body{background-image:url('img_tree.png');background-repeat:no-repeat;}2.背景图片-平铺不让图像平铺（no-repeat）。不平铺和平铺显示效果（一）CSS背景body{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:righttop;}2.背景图片-设置定位background-position属性设置图像在背景中的位置。background-position属性值有：lefttop、leftcenter、leftbottom；righttop、rightcenter、rightbottom；centertop、centercenter、centerbottom。（一）CSS背景body{background:#ffffffurl('img_tree.png')no-repeatrighttop;}3.背景简写属性页面的背景通过了很多的属性来控制，为了简化属性的代码，可以将多个属性合并在同一个属性中。背景的简写属性为“background”。当使用简写属性时，属性值的顺序为：rbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-position（二）CSS文本CSS文本属性包括：文本颜色对齐方式修饰文本转换缩进HTML元素中设置CSS样式，需要在元素中设置“id”和“class”选择器。（二）CSS文本body{color:red;}h1{color:#00ff00;}h2{color:rgb(255,0,0);}1.文本颜色颜色属性被用来设置文字的颜色，颜色定义方式如同CSS背景中所描述。（二）CSS文本body{color:red;}h1{color:#00ff00;}h2{color:rgb(255,0,0);}1.文本颜色颜色属性被用来设置文字的颜色，颜色定义方式如同CSS背景中所描述。2.文本对齐方式文本排列属性是用来设置文本的水平对齐方式。text-align设置对齐方式，属性值为：center文本可居中
right
左对齐
left右对齐
justify
两端对齐（每一行被展开为宽度相等，左、右外边距是对齐）h1{text-align:center;}p.date{text-align:right;}p.main{text-align:justify;}（二）CSS文本a{text-decoration:none;}3.文本修饰text-decoration属性用来设置或删除文本的装饰。text-align设置对齐方式，属性值为：underline文本下划线
overline
文本上方的线
line-through
穿过文本下的线
blink文本闪烁
none标准的文本
h1{text-decoration:overline;}h2{text-decoration:line-through;}h3{text-decoration:underline;}（二）CSS文本p.uppercase{text-transform:uppercase;}p.lowercase{text-transform:lowercase;}p.capitalize{text-transform:capitalize;}4.文本转换文本转换属性是用来指定在一个文本中的大写和小写字母。text-transform设置文本转换，属性值为：none标准的文本
capitalize
每个单词首字母大写
uppercase仅有大写字母
lowercase
无大写字母，仅有小写字母（二）CSS文本p{text-indent:50px;}5.文本缩进文本缩进属性是用来指定文本的第一行的缩进。text-indent设置文本缩进，属性值为：length固定的缩进量。默认值：0
%
基于父元素宽度的百分比的缩进
（三）CSS字体1.CSS字形颜色属性被用来设置文字的颜色，颜色定义方式如同CSS背景中所描述。在CSS中，有五个通用字体族：衬线字体（Serif）-在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。无衬线字体（Sans-serif）-字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。等宽字体（Monospace）-这里所有字母都有相同的固定宽度。它们创造出机械式的外观。草书字体（Cursive）-模仿了人类的笔迹。幻想字体（Fantasy）-是装饰性/俏皮的字体。CSS字体属性定义字体，加粗，大小，文字样式。（三）CSS字体1.CSS字形（三）CSS字体1.CSS字形font-family设置字形；font-family属性应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，将尝试下一种字体。以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。p{font-family:"TimesNewRoman",Times,serif;}（三）CSS字体p.normal{font-style:normal;}p.italic{font-style:italic;}p.oblique{font-style:oblique;}2.字体样式字体样式font-style主要是用于指定文字的字体样式属性。font-style属性值为：normal
正常，正常显示文本italic
斜体，以斜体字显示的文字oblique
倾斜的文字，文字向一边倾斜（和斜体类似）（三）CSS字体h1{font-size:40px;}h2{font-size:30px;}p{font-size:14px;}3.字体大小font-size属性设置文本的大小；字体大小的值可以是绝对或相对的大小；默认大小和普通文本段落一样，是16像素（16px=1em）。设置字体大小像素（三）CSS字体h1{font-size:2.5em;}/*40px/16=2.5em*/h2{font-size:1.875em;}/*30px/16=1.875em*/p{font-size:0.875em;}/*14px/16=0.875em*/用em来设置字体大小body{font-size:100%;}/*<body>元素的默认字体大小的是百分比*/使用百分比和EM组合（四）CSS链接a:link{color:#000000;}/*未访问链接*/a:visited{color:#00FF00;}/*已访问链接*/a:hover{color:#FF00FF;}/*鼠标移动到链接上*/a:active{color:#0000FF;}/*鼠标点击时*/1.链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。CSS有四个链接状态：a:link，正常，未访问过的链接；a:visited，用户已访问过的链接；a:hover，当用户鼠标放在链接上时；a:active，链接被点击的那一刻。设置链路状态的样式顺序规则：la:hover必须跟在a:link和a:visited后面；la:active必须跟在a:hover后面。（四）CSS链接a:link{color:#000000;}/*未访问链接*/a:visited{color:#00FF00;}/*已访问链接*/a:hover{color:#FF00FF;}/*鼠标移动到链接上*/a:active{color:#0000FF;}/*鼠标点击时*/1.常见链接样式常见链接样式有：链接颜色、文本修饰、背景颜色。（1）链接颜色：color属性用于制定链接颜色（四）CSS链接a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:underline;}a:active{text-decoration:underline;}1.常见链接样式（2）文本修饰：text-decoration属性主要用于删除链接中的下划线（四）CSS链接a:link{background-color:#B2FF99;}a:visited{background-color:#FFFF85;}a:hover{background-color:#FF704D;}a:active{background-color:#FF704D;}1.常见链接样式（3）背景颜色：背景颜色属性指定链接背景色：（五）CSS列表CSS列表属性作用如下：设置不同的列表项标记为有序列表；设置不同的列表项标记为无序列表；设置列表项标记为图像。在HTML中，有两种类型的列表：无序列表，列表项标记用特殊图形（如小黑点、小方框等）；有序列表，列表项的标记有数字或字母；使用CSS，可以列出进一步的样式，并可用图像作列表项标记。（五）CSS列表ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}/*大写罗马数字(I,II,III,IV,V,等。)*/ol.d{list-style-type:lower-alpha;}/*小写英文字母*/1.不同的列表项标记list-style-type属性指定列表项标记的类型是：（五）CSS列表ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}/*大写罗马数字(I,II,III,IV,V,等。)*/ol.d{list-style-type:lower-alpha;}/*小写英文字母*/1.不同的列表项标记list-style-type属性指定列表项标记的类型是：（五）CSS列表1.不同的列表项标记（五）CSS列表ul{list-style-image:url('sqpurple.gif');}2.列表项标记的图像指定列表项标记的图像，使用列表样式图像属性：（五）CSS列表ul{list-style-type:none;padding:0px;margin:0px;}3.浏览器兼容性解决方案在所有的浏览器放置同样的形象标志，实例：ulli{background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px5px;padding-left:14px;}（五）CSS列表ul{list-style:squareurl("sqpurple.gif");}4.列表-简写属性在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。为列表使用简写属性，列表样式属性设置如下：可以按顺序设置如下属性：list-style-typelist-style-position（有关说明，请参见下面的CSS属性表）list-style-image。如果上述值丢失一个，其余仍在指定的顺序就可正常设置。（六）CSS表格table,th,td{border:1pxsolidblack;}1.表格边框指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框。注意：在上面的例子中的表格有双边框。这是因为表和th/td元素有独立的边界。（六）CSS表格table{border-collapse:collapse;}table,th,td{border:1pxsolidblack;}2.折叠边框border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开。（六）CSS表格table{width:100%;}th{height:50px;}3.表格宽度和高度Width和height属性定义表格的宽度和高度。下面的例子是设置100％的宽度，50像素的th元素的高度的表格。（六）CSS表格td{text-align:right;}4.表格文字对齐text-align属性设置水平对齐方式，向左，右，或中心；垂直对齐vertical-align属性设置垂直对齐，比如顶部，底部或中间。td{height:50px;vertical-align:bottom;}（六）CSS表格td{padding:15px;}5.表格填充如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性。（六）CSS表格table,td,th{border:1pxsolidgreen;}th{background-color:green;color:white;}6.表格颜色下面的例子指定边框的颜色，和th元素的文本和背景颜色。（七）CSS轮廓轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。（七）CSS轮廓轮廓属性表：属性说明值outline在一个声明中设置所有的轮廓属性outline-color、outline-style、outline-width、inheritoutline-color设置轮廓的颜色color-name、hex-number、rgb-number、invert、inheritoutline-style设置轮廓的样式none、dotted、dashed、solid、double、groove、ridge、inset、outset、inheritoutline-width设置轮廓的宽度thin、medium、thick、length、inherit（七）CSS轮廓p.one{ border:1pxsolidred; outline-style:solid; outline-width:thin;}设置轮廓的样式、颜色和宽度。CSS定位方式知识点二CSS定位方式position属性指定了元素的定位类型。position属性的五个值：
staticrelativefixedabsolutesticky（一）static定位HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top、bottom、left、right影响。div.static{position:static;border:3pxsolid#73AD21;}（二）fixed定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。p.pos_fixed{position:fixed;top:30px;right:5px;}Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。（三）relative定位相对定位元素的定位是相对其正常位置。h2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}h2.pos_top{position:relative;top:-50px;}移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。（四）absolute定位绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。h2{position:absolute;left:100px;top:150px;}absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。（五）sticky定位sticky定位，被称为粘性定位，基于用户的滚动位置来定位。position:sticky;/*基于用户的滚动位置来定位。*/粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。当页面滚动在目标区域时，就像position:relative;当页面滚动超出目标区域时，固定在目标位置，就像position:fixed;元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。指定top、right,、bottom或left四个阈值其中之一，才可使粘性定位生效。注意：InternetExplorer、Edge15及更早IE版本不支持sticky定位。Safari需要使用-webkit-prefix。。（五）sticky定位div.sticky{position:-webkit-sticky;/*Safari*/position:sticky;top:0;background-color:green;border:2pxsolid#4CAF50;}（六）重叠的元素img{position:absolute;left:0px;top:0px;z-index:-1;}z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面CSS盒子模型知识点三CSS盒子模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距
边框
填充
实际内容盒子模型（BoxModel）CSS盒子模型CSS盒模型不同区域说明：Margin（外边距），清除边框外的区域，外边距是透明的；Border（边框），围绕在内边距和内容外的边框；Padding（内边距），清除内容周围的区域，内边距是透明的；Content（内容），盒子的内容，显示文本和图像。盒子模型（BoxModel）（一）元素的宽度和高度div{width:300px;border:25pxsolidgreen;padding:25px;margin:25px;}当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完整大小的元素，还必须添加内边距，边框和边距。计算例子中的宽度：300px（宽）+50px（左+右填充）+50px（左+右边框）+50px（左+右边距）=450px（一）元素的宽度和高度div{width:220px;padding:10px;border:5pxsolidgray;margin:0;}设置总宽度为250像素的元素：元素的总宽度和总高度计算公式：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距（二）CSS边框CSS边框的属性包括：边框样式宽度颜色（二）CSS边框1.边框样式边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式。border-style值：（二）CSS边框2.边框宽度为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em（单位为px、pt、cm、em等）；使用关键字thick、medium（默认值）和thin。p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;}（二）CSS边框3.边框颜色border-color属性用于设置边框的颜色。设置颜色的方式：name，指定颜色的名称，如“red”；RGB，指定RGB值,如“rgb(255,0,0)”；Hex，指定16进制值,如“#ff0000”。border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式p.one{
border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}（二）CSS边框4.边框-单独设置各边可以指定不同的侧面不同的边框：p{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}也可以设置一个单一属性：border-style:dottedsolid;border-style属性可以有1-4个值。
border-style:dottedsoliddoubledashed上边框是dotted右边框是
solid底边框是
double左边框是
dashedborder-style:dottedsoliddouble;上边框是
dotted左、右边框是
solid底边框是
doubleborder-style:dottedsolid;上、底边框是
dotted右、左边框是
solidborder-style:dotted;四面边框是
dotted（二）CSS边框5.边框简写属性可以在一个属性中设置边框。在“border”属性中设置：border-widthborder-style(required)border-colorborder:5pxsolidred;（三）CSS外边距CSSmargin（外边距）属性定义元素周围的空间。margin清除周围（外边框）元素区域。margin没有背景颜色，是完全透明的。margin可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性：（三）CSS外边距margin取值表：值说明auto设置浏览器边距。这样做的结果会依赖于浏览器length定义一个固定的margin（使用像素，pt，em等）%定义一个使用百分比的边距Margin可以使用负值，重叠的内容（三）CSS外边距1.Margin-单边外边距属性在CSS中，可以指定不同的侧面不同的边距：margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;（三）CSS外边距2.Margin-简写属性为了缩短代码，使用一个属性中margin指定的所有边距属性：margin:100px50px;margin:25px50px75px100px;上边距为25px右边距为50px下边距为75px左边距为100pxmargin:25px50px75px;上边距为25px左右边距为50px下边距为75pxmargin:25px50px;上下边距为25px左右边距为50pxmargin:25px;所有的4个边距都是25px（四）CSSpadding（填充）CSSpadding（填充），定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用padding属性可以改变上下左右的填充。（四）CSSpadding（填充）padding取值表：值说明length定义一个固定的填充（像素,pt,em,等）%使用百分比值定义一个填充%定义一个使用百分比的边距（四）CSSpadding（填充）1.填充-单边内边距属性在CSS中，可以指定不同的侧面不同的填充：padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;（四）CSSpadding（填充）2.Margin-简写属性填充属性的简写属性是padding：padding:25px50px;padding:25px50px75px100px;上填充为25px右填充为50px下填充为75px左填充为100pxpadding:25px50px75px;上填充为25px左右填充为50px下填充为75pxpadding:25px50px;上下填充为25px左右填充为50pxpadding:25px;所有的填充都是25px家庭温湿度采集界面知识点四（一）创建外部CSS文件在项目资源管理器中选择刚才新建的项目，依次点击“文件”、“新建”，并选择“css文件”按下Ctrl+N，W可以触发快速新建（MacOS请使用Command+N，然后左键点击css文件）：（二）设计温湿度环境监测界面CSS样式
/*选择全部元素*/*{ margin:0; padding:0; font-size:18px;}1.设置全部元素CSS样式（二）设计温湿度环境监测界面CSS样式/*class选择器*/ .container{ position:relative; margin:50pxauto; width:500px; height:500px; background-color:peachpuff; border-radius:10px;/*圆角*/ box-shadow:1px1px30px#ffffff;/*阴影*/}2.设置class选择器container元素样式添加样式container位置为relative（相对定位）；外边距，上下边距为50，左右边距为浏览器边距；宽度500，高度500；背景颜色为peachpuff；边框为圆角，半径10；边框阴影，水平阴影1，垂直阴影1，阴影模糊距离30，阴影颜色#ffffff。（二）设计温湿度环境监测界面CSS样式/*浮动*/.container.title{ float:left; margin:10px000; color:#ffffff; background-color:grey; padding:5px;}3.设置浮动标题样式设置浮动标题参数Float设置左侧浮动；外边距，上边距为10，下边距为0，左右边距为0；标题颜色为#ffffff；背景颜色为grey；内边距为5。（二）设计温湿度环境监测界面CSS样式.content{ width:300px; height:300px; text-align:center;line-height:30px; background-color:Aqua; border:10pxsolidlightgoldenrodye
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 护理文书的案例分析
- 护理团队激励与团队建设
- 烫伤护理中的信息技术应用
- 密克罗尼西亚建筑业市场供需趋势分析及投资风险评估规划研究报告
- 2025-2030中东主权基金对新能源项目投资偏好转变研究报告
- 医疗机构年度校验工作总结（5篇）
- 押题宝典中级会计职称之中级会计财务管理综合练习试卷A卷附答案
- 压阻式压力传感器芯片悬空型无引线封装结构的设计与实验
- 新课标七年级数学寒假作业设计快速提升分数
- 2026-2030中国藏红花行业营销策略及消费趋势预测研究报告
- 2026广东梅州综保区开发建设有限公司招聘2人考试备考题库及答案详解
- 安全监理策划方案
- 广东省珠海市香洲区2024-2025学年五年级下学期期末数学试题（含答案）
- 2026年高考真题-历史（陕晋青宁卷） 含解析
- 2026《危险化学品安全法》对标自查表（Excel适配版）
- 2026-2030中国有机液态氢行业产能预测与投资战略规划可行性研究报告
- 2026云南昆明市延安医院招聘编外人员备考题库及一套参考答案详解
- 2026年江苏高中提前自主招生考试数学试卷试题（含答案详解）
- 陕西国硒谷富硒产品研发中心有限公司招聘笔试题库2026
- 2026年出版社编辑岗位招聘笔试练习题及答案
- 2026年生产安全事故应急预案编制导则全文
评论
0/150
提交评论