CSS基础知识(用例子来讲解)_第1页
CSS基础知识(用例子来讲解)_第2页
CSS基础知识(用例子来讲解)_第3页
CSS基础知识(用例子来讲解)_第4页
CSS基础知识(用例子来讲解)_第5页
已阅读5页，还剩52页未读， 继续免费阅读

下载本文档

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

文档简介

第四章CSS基础知识本章内容一、CSS简介二、在网页中应用CSS三、CSS基本语法四、CSS选择器五、CSS的继承性六、CSS的层叠和特殊性重点难点复习HTML标记<body><p><h1>，<h2>，<h3><u1>，<li><img><a><div>bodyph1h2h3lililililiulppppimgdivid=“header”divid=“navigation”divid=“mainContent”divid=“mainContent”divid=“footer”CSS的引入W3C组织于1996年推出CSS1.0技术标准，1998年推出CSS2.0技术标准。CSS是CascadingStyleSheets的缩写，译为“层叠样式表”，是用于控制网页样式的一种标记性语言。HTML控制网页内容的结构，CSS控制网页内容的样式。CSS实现了网页的结构与表现相分离。一、CSS简介二、在网页中应用CSS在网页上应用CSS的三种方法：行内样式（InlineStyles）内部样式表（EmbeddingaStyleBlock）外部样式表（LinkingtoaStyleSheet）二、在网页中应用CSS行内样式：在HTML标记的style属性中设置CSS样式。例：<html><head><title>泡泡潜水俱乐部欢迎你</title></head><body><h1>泡泡潜水俱乐部</h1><P>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p></body></html>style=“color:#FFFFFF;background-color:#000080”>泡泡潜水俱乐部</h1>

二、在网页中应用CSS内部样式表：将CSS样式写在<style>和</style>标记之间。例：<html><head><title>泡泡潜水俱乐部欢迎你</title></head><body><h1>泡泡潜水俱乐部</h1><p>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p></body></html><styletype=“text/css”>h1{color:#FFFFFF;background-color:#000080;}</style></head><body><h1>泡泡潜水俱乐部</h1><p>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p></body></html>例：<html><head><title>泡泡潜水俱乐部欢迎你</title></head><body><h1>泡泡潜水俱乐部</h1><p>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p></body></html>二、在网页中应用CSS外部样式表：将CSS样式写在独立的CSS文件中，然后将CSS

文件链接到HTML文件上。<linkhref=“style.css”rel=“stylesheet”type=“text/css”></head><body><h1>泡泡潜水俱乐部</h1><P>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p></body></html>网页文件CSS文件小结：在网页上应用CSS的三种方法：行内样式（InlineStyles）内部样式表（EmbeddingaStyleBlock）外部样式表（LinkingtoaStyleSheet）内部样式表优于行内样式。外部样式表优于内部样式表。CSS样式由“选择器”和“声明”组成。声明由“属性”和“属性值”组成。每条声明之间用“;”

分隔。三、CSS基本语法selectors{property:value;}选择器属性属性值声明四、CSS选择器CSS常用选择器的类型：通配选择器类型选择器类选择器ID选择器后代选择器伪类群选择器四、CSS选择器1.通配选择器（UniversalSelector）*{property:value;}例：*{padding:0;margin:0;}四、CSS选择器2.类型选择器（TypeSelectors）Tag{property:value;}例：body{font:0.75em/1.5"宋体";background:#E0E0E0url(images/bg.gif);}h1{font-size:180%;margin:1em0;}p{margin:1em0;}四、CSS选择器3.ID选择器（IDSelectors）

＃ID{property:value;}

例：#container{width:760px;margin:auto;}#header{height:120px;background:url(images/bg_header.gif)no-repeat;}#content{padding:30px;}四、CSS选择器5.类选择器（ClassSelectors）.className

{property:value;}使用类选择器需要两个步骤：标识类；定义类。四、CSS选择器5.类选择器（ClassSelectors）例：<head><title>散文诗

</title></head><body><h2>《秋夜》</h2><p>鲁迅</p><p>在我的后园，可以看见墙外有两株树，……</p></body><h2class=“center”>《秋夜》</h2><p>鲁迅</p><h2class=“center”>《秋夜》</h2><pclass=“center”

>鲁迅</p><styletype="text/css">.center{text-align:center;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

>鲁迅</p><p>在我的后园，可以看见墙外有两株树，……</p></body><styletype="text/css">.center{text-align:center;}h2.center{color:#0000FF;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

>鲁迅</p><p>在我的后园，可以看见墙外有两株树，……</p></body>四、CSS选择器4.后代选择器（DescendantSelectors）selector1selector2{property:value}

说明：选择所有被selector1包含的selector2。例：#contentp{ text-indent:2em;}四、CSS选择器4.子选择器selector1>selector2{property:value}

说明：选择selector1的第一代元素selector2。例：.food>li{ text-indent:2em;}四、CSS选择器7.伪类（Pseudo-ClassesSelectors）

selector:pseudo-class{property:value}

例：a:link{color:#000000;text-decoration:none;}a:visited{color:#000000;text-decoration:none;}a:hover{color:#FF0000;text-decoration:underline;}a:active{color:#FF0000;text-decoration:underline;}注意：一定要按照link，visited，hover，actived的顺序书写。允许给html不存在的标签(标签的某种状态)设置样式四、CSS选择器6.群选择器（GroupSelectors）selector1，selector2，selector3{property:value;}

说明：当多个选择符设置相同样式时，可以将选择符合并为一组。例：h2,h3{ margin:1em0;}td,th{ border:solid1px#000000; padding:5px;}小结：CSS常用选择器的类型：通配选择器（*）类型选择器（bodyplih1h2h3）ID选择器（#header#navigation#maincontent）后代选择器（#headerp#navigationul#footerp）类选择器（.center.fltrt）伪类（a:linka:visiteda:hovera:active）群选择器（p,lip,h2,h3）五、CSS的继承性继承性是指：如果某个属性具有继承性，则属性作用在父元素的同时，也会作用于其包含的子元素。常用的具有继承性的属性：font-familyfont-sizefont-styleline-heightcolortext-aligntext-indenta:linka:visiteda:hovera:active六、层叠和特殊性选择符的特殊性分成四个等级：用行内样式具有最高特殊性。“ID选择符”比“类选择符”特殊。“类选择符”比“类型选择符”特殊。选择符特殊性行内样式1000ID选择符100类选择符、伪类选择符10类型选择符1练习选择符特殊性style=“”1000#container#content{}200#content.center{}110#contentp{}101#content{}100p.center{}11.center{}10p{}1六、层叠和特殊性……<head><styletype=“text/css”><!--p{ color:#FF0000;}.title{ color:#00FF00;}#s1{ color:#0000FF;}--></style></head><body><pid=“s1”class=“title”>敬业博学求实创新</p></body>……例：……<head><styletype=“text/css”><!--#contentp{ text-align:left;}.center{ text-align:center;}#content.center{ text-align:center;}--></style></head><body><divid=“content”><pclass=“center”>敬业博学求实创新</p></div></body>……例：最近优先原则……<head><styletype=“text/css”>#content{ text-align:left;}.title{ text-align:center;}</style></head><body><divid=“content”><pclass=“title”>敬业博学求实创新</p></div></body>……例：七、盒模型块级元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>内联元素<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>内联块状元素<img>、<input>七、元素分类-块级元素在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，从页使用a元素具有块状元素特点。a{display:block;}块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。七、元素分类-行内元素在html中，<span>、<a>、<label>、<input>、

<img>、<strong>和<em>就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inli

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

温馨提示

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

最新文档

评论

0/150

提交评论