Web前端开发 课件 第6章 CSS基础_第1页
Web前端开发 课件 第6章 CSS基础_第2页
Web前端开发 课件 第6章 CSS基础_第3页
Web前端开发 课件 第6章 CSS基础_第4页
Web前端开发 课件 第6章 CSS基础_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

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

文档简介

第6章CSS基础主讲教师：朱铁樱《Web前端开发》

思维导图6.1CSS概述随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。

6.1CSS概述代码繁琐格式的一致性差可维护性差网页现实效果缺乏动态性与交互性HTML标记的不足之处不利于代码的阅读维护困难

6.1CSS概述CSS提供了丰富的样式font:属性值;字体属性颜色属性背景属性浮动属性边框属性color:属性值;background:属性值;float:属性值;border:属性值;CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

6.1CSS概述

6.1CSS概述1996年CSS1定义了网页的基本属性：字体、颜色、补白、基础选择器等1998年在CSS1的基础上添加了高级功能：浮动和定位、部分高级选择器2004年修改CSS2中的错误，增加一些扩展内容发布时间是一个时间段，还没定稿。各主流浏览器已经支持其中的绝大部分特性。遵循模块化开发CSS1CSS2CSS2.1CSS3CSS发展史

6.1CSS概述由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义了自己的私有属性，以便让用户更好的体验CSS的新特性。私有前缀相关浏览器-msIE浏览器-webkitChrome浏览器、Safari（苹果）-mozFirefox浏览器-oOpera浏览器推荐写法：把带前缀的写在前面，最后再写一个不带私有前缀的。

6.1CSS概述由于功能的加强，CSS3能够用更少的图片或脚本制作图形化网站。在进行网页设计时，减少标签的嵌套和图片的使用数量，网页页面加载也会更快。CSS3的新功能帮我们摒弃了冗余的代码结构，远离很多JavaScript脚本或者Flash代码。网页设计者不再需要花大把时间去写脚本，极大的节约了开发成本。节约成本提高性能CSS3优势如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。6.2结构与表现分离结构与表现相分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。HTML身体CSS衣服6.3CSS语法基础选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。选择器属性属性值属性属性值属性属性值声明声明声明CSS样式规则的结构示意图

6.3CSS语法基础CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。

6.3CSS语法基础如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。呈现效果一样代码块1：代码块2：可读性更高代码块3：

6.4CSS注释CSS注释使用"/*"和"*/"符号表示注释，符号之间的内容不会被浏览器解析，主要用于对程序进行补充说明，CSS注释有多行注释和单行注释两种，都必须以/*开始、以*/结束，中间加入注释内容。

6.5在网页中嵌入CSS行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下:行内式内嵌式链入式<标记名style="属性1:属性值1;属性2:属性值2;>

内容

</标记名>内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标签定义，其基本语法格式如下:<head><styletype="text/css">

选择器{属性1:属性值1;属性2:属性值2;}</style></head>行内式内嵌式链入式

6.5在网页中嵌入CSS链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中，其基本语法格式如下:<head><linkhref="CSS文件的路径"

type="text/css"rel="stylesheet"/></head>

6.5在网页中嵌入CSS行内式内嵌式链入式

6.6CSS三大特性CSS是层叠式样式表的简称，层叠性和继承性是其基本特征。所谓层叠性是指多种CSS样式的叠加。相同选择器设置相同的样式会覆盖另一种冲突样式。层叠性原则：样式冲突，遵循就近原则样式不冲突，不会层叠

6.6CSS三大特性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性当使用

p元素作为选择器编写一个字体相关的样式规则时，规则将应用于文档中所有的段落和这些段落包含的内联文本。与字体相关的属性不能应用于图像。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性以下属性不具有继承性边框属性内/外边距属性背景属性定位属性布局属性元素宽高属性01、文字控制属性基本都可以继承；02、标题文本h不会继承父级的文字大小，因为自身有默认字号样式；03、超链接a标签不能继承父级元素的颜色color，因为自身有颜色属性；04、应用于具体元素的任何属性将覆盖该属性的继承值。

6.6CSS三大特性定义CSS样式时，使用两个或更多规则在同一元素上，就会产生优先级。选择器相同，则执行层叠性选择器不同，则根据选择器权重执行定义一个!important命令，该命令被赋予最大的优先级，大于一切。综述：•行内样式>内嵌样式>外部链入样式>浏览器默认样式•!important>内联>ID>伪类|类|属性>

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

温馨提示

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

最新文档

评论

0/150

提交评论