CSS基础 PPT

第7讲CSS基础提出问题在HTML静态网页当中，设计者因为某些需要，要将页面当中的一些属性进行修改，如标题大小、字体颜色等等。那么设计者只能逐个的修改网页中的各个标记或属性来完成这个操作，如果网页内容很多，那可想而知，设计人员将耗费大量的重复劳动。解决问题以上出现的弊端，我们可以通过CSS样式表定义来解决，通过将显示和结构分开的方法，在修改样式的时候甚至不用打开HTML文档。Web标准的定义Web标准就是结构化的语言(HTML和XML),解释性语言(CSS)，和脚本语言(JavaScript)。更形象的理解就是结构，表现和行为相分离。jscssHtml结构表示行为Web标准化学习内容CSS是什么CSS语法如何添加CSSCSS多种使用方式CSS书写注意事项CSS是什么？CSS简介Cascading（级串联、层叠）Style（样式）Sheet（表）CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面。简单的说，CSS相当于网页的化妆品！CSS是什么Wangyexx.com孩童时代画画的例子HTML内容HTMLCSS内容+样式CSS的作用功能强大页面布局可以重用易于维护CSS语法选择符{样式属性名:属性值;……}英文半角{建议插入空格英文半角:建议插入空格多种样式以空格分开英文半角;CSS样式中的使用方式内部样式表内嵌样式表外部样式表内部样式表内部样式表定义styletype=text/css选择符{样式属性:属性值;样式属性:属性值;……}选择符{样式属性:属性值;样式属性:属性值;……}……/style在HTML的head/head里面。只对当前页面有效样式表中的内部选择符类型选择符--选择符是HTML标记的名称类选择符—使用HTML元素的CLASS属性ID选择符—使用HTML元素的ID属性类型选择符示例HTMLHEADSTYLETYPE=text/cssP{font-style:italic;font-weight:bold;color:limegreen}/STYLE/HEADBodyP这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。/P/BODY/HTML包含选择符示例练习1将示例网页通过加入样式表，使用包含选择符，将h2的样式设置为：字体（font-family）设置为华文彩云，字型（font-type）设置为斜体（italic）颜色(color)设置为蓝色。类选择符示例HTMLHEADSTYLETYPE=text/css.water{color:blue}.danger{color:red}/STYLE/HEADBODYPclass=water测试水/PPclass=danger测试危险/PP无样式/PBREMclass=danger斜体/EM/BODY/HTML类选择符示例练习2将示例网页通过的样式表，改为类选择符方式。ID选择符示例HTMLHEADTITLEID选择符/TITLESTYLETYPE=text/css#control{color:red}/STYLE/HEADBODYPid=control这是火焰的颜色/PBRP本段没有应用样式/P/BODY/HTMLID选择器示例ID和Class*a.ID：用于标识页面唯一的区块，比如说导航条，正文，版权，用于脚本编程，唯一。b.Class：用于可以重用的标记。注意：不要滥用ID和Class。练习3将示例网页通过的样式表，改为ID选择符方式。内部样式表类选择符ID选择符类型选择符style.sfont{font-size:12px;color:red;}/stylepclass=sfont...使用class属性应用样式style#sfont{font-size:12px;color:red;}/stylepid=sfont...使用id属性应用样式使用标记名应用样式stylep{font-size:12px;color:red;}/stylep…../p内嵌样式表只对当前标记里的内容有效HTMLHEADTITLE设置属性/TITLE/HEADBODYPstyle=color:aqua;font-Style:italic;本段应用了内嵌样式BRP本段以默认样式显示。BRP您能发现本行中的SPANstyle=color:red不同之处/SPAN吗？/BODY/HTML外部样式表链入外部样式表文件linkrel=stylesheettype=text/csshref=样式表文件的地址解决当很多页面需要用到同样的样式！外部样式表导入外部样式表文件styletype=text/css@importurl(样式表的地址)；选择符{样式属性:属性值;样式属性:属性值;……}选择符{样式属性:属性值;样式属性:属性值;……}……/style和以前使用的样式一样样式表冲突当多种样式作用于同一标记的同一属性时会发生样式表冲突优先原则同一选择符，按就近原则不同选择符：内嵌ID类类型外部写CSS样式需要注意如果属性的值是多个单词组成，则必须使用引号（）将属性值括起来。如果要对一个选择符指定多个属性，则需要使用分号（;）将所有的属性和值分开。可以将具有相同属性和属性值的选择符组合起来，用逗号（,）将其分开，这样可以减少样式的重复定义。练习4CSS中文名为_______CSS内部样式表的选择符分为：______，______，______类选择符使用____+样式名称定义，ID选择符使用____+样式名称定义，类型选择符直接使用____名称定义类选择符使用_____属性应用样式，ID选择符使用_____属性应用样式案例总结CSS是层叠样式表CSS内部样式表分为：类选择符ID选择符类型选择符类选择符使用“.”+样式名称定义ID选择符使用“#”+样式名称定义包含选择符直接使用标记名称类选择符使用class属性应用样式ID选择符使用id属性应用样式