css的基本概念课件

上传人：1*** IP属地：河南上传时间：2024-01-06 格式：PPT 页数：45 大小：716.50KB 积分：6 举报 版权申诉

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

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

文档简介

第2章CSS基本概念

1学习目标理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。ppt中所有实例参考网页设计与制作电子教材及源代码22.1CSS的概念CSS(CascadingStyleSheet)中文译为层叠样式表，是一系列格式规则，用于控制网页内容的外观(样式)并允许将样式信息和网页内容分离的一种标记语言。HTML与CSS的关系就是“网页结构”与“表现形式”的关系3演示——样式的作用无样式层叠样式表示例4无样式示例假设现在要在网页中为所有的“标题1”标记符（H1）应用“居中”对齐方式和“楷体”字体那么如果使用HTML方式解决，则必须在每次出现该标记符时使用align=“center”属性，并将标题中文字用FONT标记符括起来以设置字体，如右所示：代码：<HTML><HEAD><TITLE>使用HTML方式〈/TITLE〉〈/HEAD〉〈BODY〉<H1align=center><FONTface="楷体_GB2312">一级标题</FONT></H1><P>...其他正文...</P><H1align=center><FONTface="楷体_GB2312">一级标题</FONT></H1>〈/BODY〉〈/HTML〉5示例演示效果图6样式定义的语法

H1{text-align:center;font-family:黑体}选择器样式定义样式属性属性取值92.3常用Selector类型标记选择器

类别选择器

ID选择器虚类（伪类）集体声明嵌套声明继承性10标记选择器一个HTML页面中由很多不同的标记组成，而CSS标记选择器就是用来声明哪些标记采用哪种CSS样式的。因此每一种HTML标记的名称都可以作为相应的标记选择器名称。例如：H1{text-align:center;color:red}使所有用H1标记符修饰的内容都居中和用红色显示。11演示——HTML选择器效果演示效果12效果浏览13类别选择器.类名{属性:值…}标记选择器一旦声明，那么页面中所有的相应标记都会产生变化。如果希望其中的某一个不产生变化，这时仅靠标记选择器是不够的，还要引入类别(class)选择器。它表示任何class属性为类名的标记符都采用所定义的样式。14<html><head><title>class选择器</title><styletype="text/css">.one{ color:red; /*红色*/ font-size:18px; /*文字大小*/}.two{ color:green; /*绿色*/ font-size:20px; /*文字大小*/}.three{ color:cyan; /*青色*/ font-size:22px; /*文字大小*/}</style></head><body> <pclass="one">class选择器1</p> <pclass="two">class选择器2</p><pclass="three">class选择器2</p> <h3class="two">h3同样适用</h3></body></html>15<html><head><title>class选择器与标记选择器</title><styletype="text/css"></style></head><body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <pclass="special">class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p> </body></html>16类别选择器标记名.类名{属性:值…}可以通过class选择器和标记选择器配合使用表示标记名中的class属性为类名的标记符都采用所定义的样式。17<head><title>标记选择器.class</title><styletype="text/css"></style></head><body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <pclass="special">使用于别的标记</p></body></html>18例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用<P>这个标记。代码如下：<html><head><title>Thisisasample</title>

<styletype="text/css">

<!–p.first{text-indent:0.5in}p.second{text-indent:1.0in}

-->

</style>

</head><bodybgcolor="#FFFFFF">……<pclass=“first”>这个段落将缩进0.5in</p><pclass=“second">这个段落将比上面缩进一倍距离</p>

……</body></html>19<html><head><title>同时使用两个class</title><styletype="text/css"></style></head><body> <h4>一种都不使用</h4> <h4class="one">同时使用两种class，只使用第一种</h4> <h4class="two">同时使用两种class，只使用第二种</h4> <h4class="onetwo">同时使用两种class，同时使用</h4> <h4>一种都不使用</h4></body></html>同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到个标记中。

20ID选择器#idname{property:value…}表示任何ID属性为idname的标记符都采用所定义的样式。用户定义ID与class的作用完全相同，一般使用其中之一即可。21<html><head><title>ID选择器</title><styletype="text/css"></style></head><body> <pid="one">ID选择器1</p> <pid="two">ID选择器2</p> <pid="two">ID选择器3</p> <pid="onetwo">ID选择器3</p>/*用法错误ID选择器不支持class选择器那样多风格同时使用*/</body></html>22ID选择器注意：将ID选择器用于多个标记是错误的，因为每个标记的ID不只是CSS可以调用，JavaScript等其他脚本语言同样可以调用。如果一个HTML中有两个相同的id的标记，将导致JavaScript在查找id时出错。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。23伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visitedlinks(已访问的连接)和activelinks(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符:伪类{属性:值}或选择符:伪元素{属性:值}伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符.类:伪类{属性:值}或选择符.类:伪元素{属性:值}24定位锚伪类伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visitedlinks)和可激活连接(activelinks)。定位锚元素可给出伪类link、visited或active。A:link{color:red}A:active{color:blue;font-size:125%}A:visited{color:green;font-size:85%}首个字母伪元素

首个字母伪元素用于加大(dropcaps)和其他效果

P:first-letter{font-size:300%;float:left}25选择器的集体声明在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，这时可以利用集体声明的方法，将风格相同的CSS选择器同时声明，例如：全局声明符*

26<html><head><title>集体声明</title><styletype="text/css"></style></head><body> <h1>集体声明h1</h1> <h2class="special">集体声明h2</h2> <h3>集体声明h3</h3> <h4>集体声明h4</h4> <h5>集体声明h5</h5> <p>集体声明p1</p> <pclass="special">集体声明p2</p> <pid="one">集体声明p3</p></body></html>27<html><head><title>全局声明</title><styletype="text/css"></style></head><body> <h1>全局声明h1</h1> <h2class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <pclass="special">全局声明p2</p> <pid="one">全局声明p3</p></body></html>28选择器的嵌套声明在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当<p>与</p>之间包含<b></b>标记时，就可以使用嵌套选择器进行相应的控制，代码如下：29<html><head><title>CSS选择器的嵌套声明</title><styletype="text/css"></style></head><body> <p>嵌套使<b>用CSS</b>标记的方法</p> 嵌套之外的<b>标记</b>不生效</body></html>30选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记定义class或id，内层标记能通过嵌套表示的则利用嵌套方式，而不需要再定义class或id。只有当子标记无法利用此规则时，才能单独进行声明，例如一个<ul>标记中包含多个<li>标记，需要对其中某个<li>单独设置CSS样式时才给该<li>一个单独的class或id，而其他<li>同样采用ulli{…}的嵌套方式来设置。31选择器的继承性在HTML页面中，有时需要将两个标记的样式定义混合使用，使两个标记嵌套的内容，既有第一个标记样式的特点，也有第二个标记样式的特点，这就是样式表的继承性。父标记和子标记的概念包含在外面的标记为父标记被包含在里面的标记为子标记32<html><head> <title>父子关系</title><style></style></head>33<body> <ul> <liclass="li1">关系1 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ol> </li> <liclass="li2">关系2 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ol> </li> </ul></body></html>342.4使用CSS控制页面一般说来，可以通过四种不同的方法将样式表添加到页面中。这四种方法是：行内样式内嵌式样式链接式样式导入样式35行内样式行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，如下例所示：<html><head><title>页面标题</title></head><body><pstyle="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p><pstyle="color:#000000;font-style:italic;">正文内容2</p><pstyle="color:#FF00FF;font-size:25px;font-weight:bold;">正文内容3</p></body></html>行内样式最为简单的CSS使用方法，但由于需要为每个标记设置style属性，后期维护成本高，网页容易过胖，因此不推荐使用。36内嵌式样式内嵌式样式表就是将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明。使用该方法将所有CSS的代码部分被集中在同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的相同标记都希望采用同样的风格时，该方法显得有些麻烦，维护成本也不低。因此仅使用于特殊的页面设置单独的样式风格。样式表。37演示——用STYLE定义样式<HTML><HEAD><TITLE>在STYLE标记符中定义样式信息〈/TITLE〉<style></STYLE></HEAD><BODY><H1>一代人</H1><p>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P></BODY>〈/HTML〉38链接式样式链接式CSS样式表将HTML页面本身与CSS样式分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。而且对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量大大减少。格式：在HTML文件的<head>和</head>标记之间加上<LINKrel=“stylesheet”type=“text/css”href=“stylesheet.css”>39演示——链接外部样式表文件主要代码：---网页源文件---<HTML><HEAD><TITLE>链接外部样式表文件〈/TITLE〉<LINKrel="stylesheet"type="text/css"herf="mycss.css"></HEAD><BODY><H1>一代人</H1><p>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P></BODY>〈/HTML〉---与网页源文件同一目录下的mycss.css文件---P{style="font-size;24px;text-align:center“}H1{style="font-family;黑体;text-align:center}40演示效果：41导入样式导入样式表与链接样式表的功能基本相同，只是语法和运作上略有不同。在HTML文件中导入样式表，常用如下几种@import语句，可以选择任意一种放在<style>和</style>标记之间。@importurl(sheet1.css);@importurl(“sheet1.css”);@importurl(‘sheet1.css’);@importsheet1.css;@import“sheet1.css

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

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

css的基本概念课件

文档简介

温馨提示

最新文档

评论

css的基本概念课件

文档简介

温馨提示

最新文档

评论

相关文档