第二章CSS基础解析.ppt

第二章 CSS基础 Css基础语法 样式优先权、代码注释 Css开发环境与调试环境 2.4 Css基础语法 2.4.1 Css语法结构 CSS规则由两个主要的部分构成：选择器以及一条或多条声明。每条声明由一个属性和一个值组成。 Selector { property1:value1； … property n: value n； } 2.4 Css基础语法 例如：将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 h1 {color:red; font-size:14px;} 2.4 Css基础语法 注意： 1.声明要用花括号括起来； 2.注意属性值的不同写法和单位（如颜色值除了英文单词，还可以使用RGB十六进制的颜色值：#RRGGBB）； 3.如果值为若干单词，则要给值加引号 ； 4.CSS规则要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，然而，通常我们在每条声明的末尾都加上分号，这么做的好处是当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。 5.与 XHTML 不同，CSS 对大小写不区分。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。（例1-10.html） 2.4 Css基础语法 2.4.2 常用选择器类型 1.标记选择器 最常见的CSS选择器是标记选择器，指用网页中已有标记符作为名称的选择器。 例如p{ }、h1{ }、body{ }等。 2.4 Css基础语法 2.类选择器 要应用CSS样式而不考虑具体设计的元素，最常用的方法就是使用类选择器，类名前要加一个点号。 例如：.one{ } 、.important{ } 类选择器可以结合标记选择器来使用。例如：p . important {color :red;} 表示“其 class 属性值为 important 的所有段落 ”。（例1-11.html） 2.4 Css基础语法 3.ID选择器 ID 选择器与类选择器相似，ID选择器名前面有一个 # 号 ，ID选择器要引用ID属性中的值。 注意： (1)在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次 。 (2)ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。 (3) ID 选择器是区分大小写的 。(例1-12.html) 2.4 Css基础语法 2.4.3 Css样式应用到网页中 将CSS样式应用到网页中的方法有三种： 1.外部样式表 （1）导入式 style type=text/css @importmystyle.css; /style （2）链接式 link href=mystyle.css rel=stylesheet type=text/css / 2.4 Css基础语法 说明： 1.href 属性规定被链接文档的位置（URL） ； 2. rel 属性规定当前文档与被链接文档之间的关系 ； 3. type 属性规定被链接文档的 MIME 类型 ，MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。（例1-13.html） 2.4 Css基础语法 2.内部样式表（内嵌式） 使用 style 标签在文档头部定义内部样式表，当单个HTML文档需要特殊的样式时，适合使用内部样式表。 （例1-14.html） style type=text/css h1{ color:white; background-color:blue } /style 2.4 Css基础语法 3.内联样式（行内式） 当样式仅需要在HTML文档的一个元素上应用一次时 ，适合使用内联样式。（例1-15.html） p style=“color:red；background-color:blue；”文本/p 注意：由于内联样式将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，所以不推荐使用。 2.4 Css基础语法 2.4.4 选择器的集体声明 把具有相同声明定义的选择符组合在一起，并用逗号隔开。(例1-16.html) 例如h1，.s，#one选择器的声明相同，则可以写成： h1，.s，#one{ } 2.4 Css基础语法 2.4.5 CSS样式的继