样式表基础知识及应用.pptxVIP

CSS基础知识及应用信永国际

CSS基础知识及应用CSS选择器4如何创建CSS5CSS入门1CSS基本语法2CSS高级语法3DIV+CSS页面布局（案例分析）6

CSS入门CSS英语意思是：CascadingStyleSheets，即层叠样式表1样式定义如何显示HTML元素2样式通常存储在样式表中3把样式添加到HTML中，是为了解决内容与表现分离的问题4外部样式表可以极大提高工作效率5外部样式表通常存储在CSS文件中6外部样式表可以层叠为一7

CSS基本语法selector{property:value}例如：body{color:blue}CSS语法由三部分构成:选择器,属性和值p{color:#ff0000;}也可简写：#f00p{color:red;}值的不同写法和单位p{font-family:sansserif;}记得写引号(如果值为若干单词，则要给值加引号)p{text-align:center;color:black;font-family:arial;}多重声明：

CSS高级语法选择器的分组 h1,h2,h2,h3,h5,h6{color:green;}继承：通过CSS继承，子元素将继承最高级元素所拥有的属性摆脱继承 body{ font-family:Verdana,sans-serif; } p{ font-family:Times,TimesNew Roman,serif; }

CSS选择器030201派生选择器id选择器类选择器

CSS派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。1li{2font-style:italic;3} 4listrong{5font-style:normal;6}7查看例子8

CSS派生选择器-示例htmlhead title派生选择器简单示例/title styletype=text/css strong{color:red;} h2{color:red;} h2strong{color:blue;} /style/headbodypThestronglyemphasizedwordinthisparagraphisstrongwhatcolor/strong./ph2Thissubheadiswhatcolor./h2h2Thestronglyemphasizedwordinthissubheadisstrongwhatcolor/strong./h2/body/html查看例子

CSSid选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以”#”定义。#red{color:red;}#green{color:green;}pid=red这个段落是红色。/ppid=green这个段落是绿色。/p注：id属性尽可能在每个HTML文档中只出现一次查看例子

在现代布局中，id选择器常常用于建立派生选择器。id选择器和派生选择器p{text-align:left;}01#tablep{02font-style:italic;03text-align:right;04margin-top:5px;05}06查看例子07

CSS类选择器在CSS中，类选择器以一个点号显示： .center{text-align:center}例如：h1class=centerThisheadingwillbecenter-aligned/h1pclass=centerThisparagraphwillalsobecenter-aligned./p注：不要使用数字起始类名！它无法在Mozilla或Firefox中起作用。类选择器和id选择器一样被用做派生选择器

如何创建当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：.内部样式表.外部样式表.内联样式如何插入样式表

外部样式表外部样式表引用格式： head linkrel=stylesheettype=text/css href=mystyle.css/ /head外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。 hr{color:#ff0000;} p{margin-left:20px;} body{background