网页制作案例教程HTML5+CSS3 课件 项目3 CSS基础_第1页
网页制作案例教程HTML5+CSS3 课件 项目3 CSS基础_第2页
网页制作案例教程HTML5+CSS3 课件 项目3 CSS基础_第3页
网页制作案例教程HTML5+CSS3 课件 项目3 CSS基础_第4页
网页制作案例教程HTML5+CSS3 课件 项目3 CSS基础_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5CSS3项目3CSS基础网页制作案例教程（HTML5+CSS3）教学目标了解理解掌握熟悉2理解CSS样式规则，能定义简单样式。3熟悉CSS基本选择器，会使用选择器。知道选择器的优先级。会在网页中引入CSS。4了解CSS的发展历史以及主流浏览器的支持情况。11CSS简介2使用CSS3CSS基础选择器4制作“药王-孙思邈”页面任务分解5CSS的优先级、继承与层叠PART0101CSS简介CSS简介CSSbody{background-color:blue;}p{font-size:14px;color:blue；}例CSS(CascadingStyleSheets)，译为“层叠样式表”，用来描述如何显示HTML元素（布局、大小、颜色、间距、边框、背景…）。CSS基础CSS简介CSS11996年12月W3C发布了第一个有关样式的标准CSS1。1985年5月，CSS2正式推出，这个版本开始使用样式表结构。CSS2CSS2.1CSS32004年2月，CSS2.1正式推出。于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS基础CSS标准的发展历程CSS简介CSS3CSS3是CSS的升级版本。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块（选择器模块、媒体查询模块、文本模块、字体模块、基本盒子模型模块…）。CSS3中新增了许多选择器和属性。CSS3中文手册/css3/CSS基础PART0202CSS样式规则CSS样式规则CSS

样式规则基本语法格式选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}选择器用于指定CSS样式作用的HTML元素花括号内是对该元素设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。p{font-size:14px;color:blue；}例CSS基础CSS样式规则按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上引号。p{

font-family:"microsoftyahei";font-size:14px;color:blue；}例CSS基础CSS引入方式CSS引入方式行内式内嵌式链接式CSS基础CSS引入样式行内式行内式也称为内联样式，通过标记style属性来设置元素的样式。语法格式<标记名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名><pstyle="color:blue;font-size:25px;font-weight:bolder">正文标题</p>例CSS基础CSS引入样式CSS基础<pstyle="color:#ff0000;font-size:20px;text-decoration:underline">正文标题1</p><pstyle="color:rgb(0,0,0);font-size:initial">正文标题2</p><pstyle="color:blue;font-size:25px;font-weight:bolder">正文标题3</p>demo1动手

实践CSS引入样式内嵌式内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。语法格式<styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style><styletype="text/css">img{ margin:020px; }p{ color:#ccc;}</style>例CSS基础CSS引入样式CSS基础CSS引入样式链接式链接式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中。语法格式<linkhref="CSS文件的路径"type="text/css"rel="stylesheet"/>CSS基础CSS引入样式CSS基础PART0303CSS基础选择器CSS基础选择器基础选择器标记选择器类选择器id选择器通配

选择器CSS基础标记选择器又称元素选择器，用HTML标记名称作为选择器，根据标记名称来选择HTML元素。语法格式标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器标记选择器img{ margin:020px; }p{ color:#ccc;}例CSS基础类选择器使用“.”（英文点号）进行标识，后面紧跟类名。HTML标记套用类样式时，需要使用class=“类名”。语法格式.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器类选择器.menu{ font-size:16px; text-align:center;} <divclass=“menu”>…….</div>例CSS基础id选择器使用“#”进行标识，后面紧跟id名。HTML标记套用id样式时，需要使用id=“id名”。语法格式#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器id选择器#header{ width:1200px; margin:0auto;} <divid=“header”>…….</div例CSS基础通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。语法格式*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器通配选择器*{ margin:0; padding:0; }例CSS基础后代选择匹配属于指定元素后代的所有元素，其标识是中间有一个空格，把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。CSS基础选择器后代选择器#headera{ color：#666666； }#nava{ color：#0000ff； }例CSS基础并集选择器是各个选择器通过逗号连接而成的。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。CSS基础选择器并集选择器#header，#footer{ width：1200px； margin:0auto; }例CSS基础PART0404制作“药王-孙思邈”页面制作“药王-孙思邈”页面CSS基础标题4标题5段落标题3段落水平线图像我们古代有很多伟大的人物，他们不计个人得失，一辈子默默奉献，以造福民众为己任，把自己的一生奉献给人民。是我们学习的榜样，下面我们制作“药王-孙思邈”网页，介绍一位这样古代医学家。PART0505CSS的层叠性、继承性与优先级层叠性是指多种CSS样式的叠加。就是对一个元素多次设置同一个样式。CSS的优先级、继承与层叠层叠性例样式有冲突，要看样式的级别。级别高的优先显示。CSS基础CSS的优先级、继承与层叠优先级基本选择器的优先级从低到高排序为：标记样式<类别（class）样式<ID样式<行内样式<!important。例CSS基础权重分为不同的等级第一等级：行内样式，权值为1000；第二等级：ID选择器，权值为100；第三等级：calss|伪类选择器|属性选择器，权值10；第四等级：标签|伪对象选择器，权值1；一个复杂的选择器的权重需要计算，如选择器ul#navli.activea，它的权重为1+100+1+10+1=113除此之外，还有一些特殊情况：继承样式的权重为0。权重相同时，CSS遵循就近原则。CSS定义了一个!important命令，该命令被赋予最大的优先级。CSS的优先级、继承与层叠优先级基本选择器的优先级从低到高排序为：元素（标记）样式<类别（class）样式<ID样式<行内样式<!important。例CSS基础CSS的优先级、继承与层叠优先级基本选择器的优先级从低到高排序为：元素（标记）样式<类别（class）样式<ID样式<行内样式<!important。例CSS基础CSS的优先级、继承与层叠优先级基本选择器的优先级从低到高排序为：元素（标记）样式<类别（class）样式<ID样式<行内样式<!important。例CSS基础CSS的优先级、继承与层叠优先级第一等级：代表行内样式，如style=""，权值为1000；第二等级：代表ID选择器，如#id="",权值为100；第三等级：代表calss|伪类|属性选择器，如.class|:hover,:link,:target|[type],权值10；第四等级：代表标签|伪元素选择器，如p|::after,::before,::fist-inline,::selection,权值1；第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；例CSS基础CSS的优先级、继承与层叠优先级继承样式的权重为0。行内样式优先。权重相同时，CSS遵循就近原则。CSS定义了一个!important命令，该命令被赋予最大的优先级。一些特殊情况：CSS基础继承性是指被包在内部的标记将拥有外部标记的样式，即子元素可以继承父元素的属性。CSS的优先级、继承与层叠继承性不可继承的属性：display、border、padding、margin、background、height、width、overflow、position、left、right、top、bottom

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

温馨提示

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

最新文档

评论

0/150

提交评论