最实用的CSS+div教程.pptVIP

CSS语言 一、CSS简介 二、CSS基本语法 提示：如果值为若干单词，则要给值加引号： p {font-family: sans serif;} 提示：如果要定义不止一个声明，则需要用分号将每个声明分开。 p { text-align: center; color: black; font-family: arial; } 三、如何创建 CSS 外部样式表 内部样式表 内联样式 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在（文档的）头部： head link rel=stylesheet type=text/css href=mystyle.css / /head 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 link rel=stylesheet type=text/css href=mystyle.css / rel：用于定义链接文件和XHTML文件的关系， rel=“stylesheet” 代表指定一个固定或首选的样式，固定样式表激活时总被应用。还可以这样设置：rel=“alternate stylesheet” href:外部链接表的位置 内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样: head style type=text/css h1 {color: sienna;} p {font-size : 20px;} /style /head 内联样式 用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 p style=color: blue; font:30px 这是一个段落标签 /p 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 多重样式 例如，外部样式表拥有针对 h1选择器的三个属性： h1 { color: red; text-align: left; font-size: 8pt; } 而内部样式表拥有针对 h1选择器的两个属性： h1 { text-align: right; font-size: 20pt; } 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h1 得到的样式是： color: red; text-align: right; font-size: 20pt; 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。 四、CSS选择器 选择器的类型 标记选择器：用于定义html标签的样式，例如：bodyp等 类别选择器：以“.”开始，样式一旦定义，可应用于任何相同class的html元素。 Id选择器：以“#”开始，样式一旦定义，只对相同的id的html元素有效。 包含选择器：也叫派生选择器，可指定元素A中包含的原素B的样式。 分组选择器：可同时定义具有相同样式的选择器，选择器之间用逗号分割。 1、标记选择器 标记选择符：指网页中已有的标签类型作为名称的选择符。如body、h1等 如： h1{color:#ff0000;} 2、 类别选择器 在 CSS 中，类别选择器以一个点号显示： .center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。 h1 class=“center” 学习类选择符 /h1 p class=center 学习类选择符 /p 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 3、 id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 #red {color：red;} #green {color：green;} p id=red这个段落是红色。/p p id=green这个段落是绿色。/p 注意：id 属性只能在每个 HTML 文档中出现一次。 4、 包含选择器 包含选择器是根