CSS基础 PPT.pptVIP

提出问题 在HTML静态网页当中，设计者因为某些需要，要将页面当中的一些属性进行修改，如标题大小、字体颜色等等。 那么设计者只能逐个的修改网页中的各个标记或属性来完成这个操作，如果网页内容很多，那可想而知，设计人员将耗费大量的重复劳动。 解决问题 以上出现的弊端，我们可以通过CSS样式表定义来解决，通过将显示和结构分开的方法，在修改样式的时候甚至不用打开HTML文档。 Web标准的定义 Web标准就是结构化的语言(HTML和XML),解释性语言(CSS)，和脚本语言(JavaScript)。更形象的理解就是结构，表现和行为相分离。 CSS是什么 W CSS的作用 功能强大 页面布局 可以重用 易于维护 内部样式表 内部样式表定义 style type=text/css 选择符 { 样式属性:属性值; 样式属性:属性值;……} 选择符 { 样式属性:属性值; 样式属性:属性值;……} …… /style 样式表中的内部选择符 类型选择符--选择符是HTML标记的名称 类选择符—使用HTML元素的CLASS属性 ID选择符—使用HTML元素的ID属性 类型选择符示例 HTML HEAD STYLE TYPE=text/css P{font-style:italic; font-weight:bold; color:limegreen} /STYLE /HEAD Body P这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。/P /BODY /HTML 练习1 将示例网页通过加入样式表，使用包含选择符，将h2的样式设置为：字体（font-family）设置为华文彩云，字型（font-type）设置为斜体（italic）颜色(color)设置为蓝色。 类选择符示例 练习2 将示例网页通过的样式表，改为类选择符方式。 ID选择符示例 HTML HEAD TITLEID选择符/TITLE STYLE TYPE=text/css #control {color:red} /STYLE /HEAD BODY P id=control这是火焰的颜色/P BR P本段没有应用样式/P /BODY /HTML ID和Class* ID：用于标识页面唯一的区块，比如说导航条，正文，版权，用于脚本编程，唯一。 Class：用于可以重用的标记。 注意：不要滥用ID和Class。 练习3 将示例网页通过的样式表，改为ID选择符方式。 内嵌样式表 只对当前标记里的内容有效 外部样式表 链入外部样式表文件 link rel=stylesheet type=text/css href=样式表文件的地址 外部样式表 导入外部样式表文件 style type=text/css @import url(样式表的地址)； 选择符 { 样式属性:属性值; 样式属性:属性值;……} 选择符 { 样式属性:属性值; 样式属性:属性值;……} …… /style 和以前使用的样式一样 样式表冲突 当多种样式作用于同一标记的同一属性时会发生样式表冲突 优先原则 同一选择符，按就近原则 不同选择符：内嵌ID类类型外部 写CSS样式需要注意 如果属性的值是多个单词组成，则必须使用引号（ ）将属性值括起来。 如果要对一个选择符指定多个属性，则需要使用分号（;）将所有的属性和值分开。 可以将具有相同属性和属性值的选择符组合起来，用逗号（,）将其分开，这样可以减少样式的重复定义。 练习4 CSS中文名为_______ CSS内部样式表的选择符分为：______，______，______ 类选择符使用____+样式名称定义，ID选择符使用____+样式名称定义，类型选择符直接使用____名称定义 类选择符使用_____属性应用样式，ID选择符使用_____属性应用样式 案例 ID具有唯一性，CLASS具有普遍性。 Phoenixtv.jpg 文档中布局唯一的区块使用ID命名，文档中不唯一或者非区块使用Class命名，除非有编程的需要。 所谓的网站重构就是使用web标准来重构网站的html代码。 第7讲 CSS基础 js css Html 结构 表示 行为 Web标准化 学习内容 CSS是什么 CSS语法 如何添加CSS CSS多种使用方式 CSS书写注意事项 CSS是什么？ CSS简介 Cascading （级串联、层叠） Style（样式） Sheet（表） CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面。 简单的说，CSS相当于网页的化妆品！ 孩童时代画画的例子 HTML内容 HTML CSS内容+样式 CSS