CSS层迭样式表实用

上传人：s*** IP属地：上海上传时间：2023-01-17 格式：PPTX 页数：36 大小：747.08KB 积分：20 举报 版权申诉

已阅读5页，还剩31页未读，继续免费阅读

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

文档简介

会计学1CSS层迭样式表实用本章目标理解样式表对控制页面元素外观的作用掌握样式规则的语法理解各种选择器理解样式代码在什么位置编写及它们的作用范围掌握常用的样式属性第1页/共36页CSSCascadingStyleSheet层叠样式表或级联样式表。专门用于控制网页文档的显示风格。解决了网页内容与表现分离的问题。即由HTML的标签告知浏览器网页中有哪些内容，由CSS的规则告知浏览器这些内容应该如何表现。第2页/共36页CSS样式规则CSS样式规则用于告知浏览器网页元素应该如何表现。样式规则一般放在网页头部<head></head>内部的<style></style>标签中。selector{ property:value; property:value; ……}第3页/共36页样式规则示例<html> <head> <title>样式规则声明</title>

<styletype="text/css“> body{background-image:url(image/eg_bg.gif>);} p{text-indent:32px;font-size:16px;} </style> </head> <body> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

</body></html>第4页/共36页选择器样式规则声明中包含选择器，它的作用是说明这条样式规则在网页中的适用范围，或者说网页中的哪个地方或哪些地方将要用到这条规则。HTML选择器类选择器ID选择器伪类选择器伪元素选择器上下文选择器群组联合选择器第5页/共36页HTML选择器使用某种HTML标签的名称作为选择器，当浏览器解析这种标签时，即采用这条样式规则。这样做的目的是为了覆盖浏览器内部对这种标签显示方式预先定义的规则。第6页/共36页HTML选择器示例<styletype="text/css"> h1{text-align:center;font-size:18pt;} input{border:1pxsolidgray;background-color:#fedcba;color:blue;} a{text-decoration:none;}</style><h1>在此登录</h1><form>

用户名:<inputtype="text"/><br/>

密码:<inputtype="password"/><br/>

<inputtype="submit"value="登录"/>

<inputtype="reset"></form><ahref="#">注册</a><ahref="#">回到首页</a>第7页/共36页类选择器将多个应共享同一种外观的标签归为一类。第8页/共36页类选择器示例<styletype="text/css"> .txt{ border:1pxdashedgray; background-color:#fedcba; color:blue; height:20px; } .btn{ border:1pxsolidblue; background-color:#cccccc; color:red; font-weight:bold; }</style> <form> <inputtype="text"class="txt"/> <inputtype="password"class="txt"/><br/> <inputtype="submit"class="btn"/> <inputtype="reset"class="btn"/></form> 第9页/共36页ID选择器为页面特定的某个标签定制外观。第10页/共36页ID选择器示例<styletype="text/css"> td{ border:1pxsolidblue; } #mytable{ width:260px; border-width:5px; border-style:double; border-color:gray; border-collapse:collapse; } #mytd{ background-color:#fedcba; text-align:center; font-size:16px; font-style:italic; }</style><tableid="mytable"> <tr> <td>单元格</td>

<tdid="mytd">单元格</td>

</tr>

<tr>

</tr></table>第11页/共36页伪类选择器用于向其他选择器指定适用范围内的特定元素或特定状态制定样式。使用得比较多的场景是使用锚伪类为页面中的超链接制定在不同状态下不同的外观。第12页/共36页伪类选择器示例<styletype="text/css"> a{text-decoration:none;font-size:14px;} a:link{color:blue;} a:visited{color:gray;} a:hover{color:red;font-size:16px;text-decoration:underline;} a:active{font-style:italic;}</style><ahref="5.1.html">样式规则声明</a><ahref="5.2.html">HTML选择器</a><ahref="5.3.html">类选择器</a><ahref="5.4.html">ID选择器</a>第13页/共36页伪元素选择器伪元素用于向其他选择器指定适用范围内的元素特定部分制定样式。一般应用于文本块的首行或文本块的首字字符。第14页/共36页伪元素选择器示例<styletype="text/css"> p{font-size:14px;} p:first-line{font-size:16px;text-decoration:line-through;} h1{font-size:18pt;color:black;} h1:first-letter{font-size:24pt;color:red;border:1pxsolidblue;padding:3px;}</style><p>这是一个段落，它的第一行文字将有删除线修饰，字号比其他行要大。这是一个段落，它的第一行文字将有删除线修饰，字号比其他行要大。这是一个段落，它的第一行文字将有删除线修饰，字号比其他行要大。</p><h1>这是一级标题，注意它的第一个字符</h1>第15页/共36页上下文选择器又称为派生选择器，用于根据上下文关系来确定某个标签是否使用上下文选择器的样式规则。第16页/共36页父子标签形成上下文示例<styletype="text/css"> olli{list-style-type:upper-alpha;font-size:14px;} ulli{list-style-image:url(image/li.gif);font-weight:bold;} </style><p>XX公司三亚之旅第一天行程</p><ol>

<li>07:00之前在新大新广场前集合</li>

<li>07:15乘坐机场大巴前往黄花机场</li>

<li>08:30集体办理登机手续</li>

<li>09:15乘机飞往三亚</li>

<li>11:00抵达三亚机场</li>

<li>11:30由地接大巴送到旅社</li>

<li>12:30集体吃海鲜自助餐</li>

<li>下午自由活动</li></ol> <p>海鲜自助餐重点推荐</p><ul>

<li>口味大肉蟹</li>

<li>盐焗濑尿虾</li>

<li>蒜蓉清蒸小鲍</li>

<li>辣椒炒海瓜子</li>

<li>哈贝冬瓜汤</li></ul> 第17页/共36页类选择器或ID选择器与标签形成上下文示例<styletype="text/css"> table{border:2pxsolidblack;border-collapse:collapse;} #mytable{width:280px;} #mytable

td{border:1pxsolidgray;} .myp{font-size:14px;} .mypspan{font-weight:bold;font-size:16px;}</style><tableid="mytable"> <tr> <td>单元格</td>

</tr>

<tr>

</tr></table><table> <tr> <td>单元格</td>

</tr>

<tr>

</tr></table><pclass="myp">这是一个段落，其中有<span>某些文字</span>的样式需要设置。这是一个段落，其中有<span>某些文字</span>的样式需要设置。</p><p>这是一个段落，其中有<span>某些文字</span>的样式需要设置。这是一个段落，其中有<span>某些文字</span>的样式需要设置。</p>第18页/共36页群组联合选择器多个样式规则的定义相同，但选择器名称不同。可以将这些样式规则合并成为一个样式规则，选择器名称之间使用逗号分隔。第19页/共36页群组联合选择器示例<styletype="text/css"> h1,h2,h3{color:black;text-align:center;font-family:"微软雅黑";}

h1{font-size:24px;}

h2{font-size:16px;}

h3{font-size:12px;}</style><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>第20页/共36页将样式规则声明编写在何处样式规则声明编写在网页头部<head></head>中的<style></style>标签内部，称为内部样式表或内嵌样式表。样式规则声明编写在需要这个样式的特定的标签内部，称为行内样式表或内联样式表。样式规则声明编写在HTML文档之外，由独立的CSS文件包含，称为外部样式表或外联样式表。第21页/共36页行内样式表示例<bodystyle="background-color:#fedcba;"> <pstyle="font-size:16px;color:gray;"> 本页面演示<spanstyle=“color:blue;”>内联样式表</span>，内联样式其实就是把样式规则直接写在要使用这个规则的标签里，用为标签的<spanstyle=“text-decoration:underline;font-weight:bold;”>style</span>属性的值。 </p></body>第22页/共36页外联样式表示例body{background-color:#abcdef;}a{text-decoration:none;font-size:14px;}a:link{color:blue;}a:visited{color:gray;}a:hover{color:red;font-size:16px;text-decoration:underline;}a:active{font-style:italic;}p{font-size:14px;}h1{font-size:18pt;color:black;}.txt{ border:1pxdashedgray; background-color:#fedcba; color:blue; height:20px;}.btn{ border:1pxsolidblue; background-color:#cccccc; color:red; font-weight:bold;}<head> <linkrel="stylesheet"type="text/css"href="my.css"/></head><body> <h1>在此登录</h1>

<p>以下是一些测试用的链接</p>

<p><ahref="5.1.html">样式规则声明</a><ahref="5.2.html">HTML选择器</a><ahref="5.3.html">类选择器</a><ahref="5.4.html">ID选择器</a></p></body>第23页/共36页常用的CSS样式属性背景边框文本字体列表…第24页/共36页背景属性说明background-color设置元素的背景颜色。可使用rgb颜色，十六进制颜色和颜色名称及透明色。background-image把图像设置为背景。url(图像的URL地址)或none。background-repeat设置背景图像是否及如何重复平铺。repeat、repeat-x、repeat-y、no-repeatbackground-attachment背景图像是否固定或者随着页面的其余部分滚动。scroll、fixedbackground-position设置背景图像的起始位置。left、center、right、top、center、bottombackgroundbackground-color、background-image、background-repeat、background-attachment、background-position第25页/共36页背景属性示例<styletype="text/css"> body{ background-color:#abcdef; background-image:url(image/eg_bg.gif); background-repeat:repeat-x; background-attachment:fixed; background-position:bottomleft; } #mytable{ width:300px; height:150px; background:#fedcbaurl(image/eg_bg.gif)no-repeatscroll20%20px; } #myp{background-color:#cccccc;}</style><body> <pid="myp">这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

<tableid="mytable">

<tr>

</tr>

<tr>

</tr>

</table></body>第26页/共36页边框属性说明border-top|right|bottom|left-width顶、右、底、左边框的宽度。border-top|right|bottom|left-style顶、右、底、左边框的线型。border-top|right|bottom|left-color顶、右、底、左边框的颜色。border-width顶、右、底、左边框的宽度值，各个值之间用空格分隔。border-style按顶、右、底、左的顺序依次设置各个边框的线型。border-color按顶、右、底、左的顺序依次设置各个边框的颜色。border-top、border-right、border-bottom、border-left按宽度、线型、颜色的顺序依次提供值。border按宽度、线型、颜色的顺序依次提供值。第27页/共36页边框属性示例<styletype="text/css"> #mytable{ width:300px;height:120px; border-collapse:collapse; border:4pxdoublegray; } #mytabletd{ border-width:1px;border-style:dashed; border-color:blue; } #myp{ border:none;border-top:4pxsolidblue; border-bottom:2pxdottedred; }</style><pid="myp">这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><tableid="mytable">

<tr>

</tr>

<tr>

</tr></table>第28页/共36页文本属性说明color设置文本颜色。letter-spacing设置字符间距。像素值或normal。text-align元素中文本的水平对齐。left、right、center、justify。text-decoration向文本添加修饰。none、underline、overline、line-through。text-indent缩进元素中文本的首行。像素值或百分比。text-transform控制元素中的字符的大小写转换。none、capitalize、uppercase、lowercase。word-spacing设置字间距。像素值或normal。第29页/共36页文本属性示例<styletype="text/css"> p{font-size:14px;} #myp{color:red;text-indent:28px;} .myspan{ color:blue; text-decoration:underline; letter-spacing:10px; } #mytable{width:350;height:120px;} #mytabletd{ border:1pxsolidgray; text-align:center; text-transform:uppercase; }</style><pid="myp">这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这里有一个文字块</span>这是一个段落。这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这里有一个文字块</span>这是一个段落。这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这里有一个文字块</span>这是一个段落。</p><tableid="mytable">

<tr>

<td>thisisatd</td><tdstyle="word-spacing:14px;">datadatadatadatadatadatadatadatadata</td>

</tr>

<tr>

<tdstyle="text-transform:capitalize;">secondrow,firstcol</td><td>thisisatd</td>

</tr></table>第30页/共36页字体属性说明font-style设置字体样式。normal、italic、obliquefont-variant以小型大写字体或者正常字体显示文本。normal、small-caps。font-weight设置字体的粗细。normal、bold、bolder、lighter或100,200,...,900等数字。font-size设置字体的尺寸。xx-small、x-small、small、medium、large、x-large、xx-large或像素值或磅值。font-family字体类型名称或者字体组列表，各字体名称之间用“,”逗号分隔。font依次设置font-style、font-variant、font-weight、font-size、font-family六个属性，各个值之间用空格分隔。其中font-size可由line-height属性代替。第31页/共36页字体属性示例<styletype="text/css"> body,p,td{font-family:微软雅黑,宋体;}

h1,h2,h3{font-family:黑体,宋体;}

h1{font-size:24pt;}

h2{font-size:18px;}

h3{font-size:15pt;}

.myp{

font-style:normal; font-variant:normal;

font-weight:400; font-size:16px;

font-family:宋体; line-height:24px;

}

.myspan{font:italicnormalbold14px微软雅黑,宋体;}</style><body> <h1>这是一级标题</h1>

<pclass="myp">这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这是段落中包含的文字块。</span>这是一个段落。这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这是段落中包含的文字块。</span>这是一个段落。这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这是段落中包含的文字块。</span>这是一个段落。这是一个段落。这是一个段落。这是一个段落。<spanclass="myspan">这是段落中包含的文字块。</span>这是一个段落。</p></body>第32页/共36页列表属性说明list-style-type设置列表项标记的类型。disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha。list-style-position设置列表中列表项标记被放置的位置。inside、outside。list-style-image将图像设置为列表项标记。图像的地址或none。list-style依次设置list-style-type、list-style-position、list-style-image，各个值之间用空格分隔。第33页/共36页列表属性示例<styletype="text/css"> ul.disc{

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

温馨提示

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

CSS层迭样式表实用

文档简介

温馨提示

最新文档

评论

CSS层迭样式表实用

文档简介

温馨提示

最新文档

评论

相关文档