网页设计-css语法基础.ppt

CSS语法基础,----网页设计与开发,阅读导航,CSS定义 CSS语法 CSS类型 伪类与伪元素,CSS,CSS的意思就是层叠样式表，使用CSS的优点在于将格式从功能中分离出来它定义了HTML元素的显示，是一种对Web文档添加样式的简单机制优点,在几乎所有的浏览器上都可以使用 以前一些必须通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面 使页面的文字变得更漂亮，更容易编排，是页面更加赏心悦目 你可以轻松地控制页面的布局 你可以将许多网页的风格格式同时更新，不用再逐页地更新了分类,浏览器缺省 外部样式表 内部样式表 行内样式表,基本语法,CSS规则由选择器、属性和值3部分组成基本格式如下：selector{ property:value} 例：body{color:red} 注：如果想在样式中指定多个属性，就必须将每个属性用分号隔开 p{text-align:center;color:red},基本语法,如果属性值为多个单词，则用双引号括起来 例： p{font-family:“sans serif“} p {text-align:right;color:red;font-family:arial },组合,为了提高效率，可以将多个属性和值赋给多个选择器，并用逗号将选择器分开。

h1,h2,h3,h4,h5,h6 {color:blue },选择器类,选择器可以将同一类型的HTML元素定义出不同的样式 p.right{text-align:right} p.center{text-align:center}必须在HTML文档中使用类属性才能显示出效果 居右显示 居中显示,ID选择器,可以使用ID选择器来定义HTML标签的样式ID选择器可用“#“来定义 p# idone{text-align:conter;color:blue} # idone{text-align:conter;color:blue}段落中居中显示,关联选择器,可以为嵌套的其他标签定义样式，其格式为： h3 b{color:blue} h2 em b{color:blue},注释,注释可用来解释代码，方便以后或需要重新编辑这块代码的时候理解这段代码，浏览器会忽略这些注释 CSS注释的开头为“/*“，结束符号为“*/“CSS类型,CSS按其位置不同主要分为以下3种类型：行内样式表内部样式表外部样式表,行内样式表,行内样式表定义在HTML标签中，只对所在的标签有效注：使用行内样式就失去了样式表的优势，将内容和形式混淆了，一般这类方法在个别元素需要改变样式时使用。

内部样式表,内部样式表是使用标签在head区域内定义样式，内部样式表只对所在的网页有效，缺点是不利于多个网页的维护外部样式表,外部样式表可以集中控制和管理多个网页的格式和布局，省去了对这些网页的每个标签都要分别进行格式化的麻烦 与内部样式表不同，外部样式表作为单独的文件存储如果对外部样式表进行修改，结果将影响到引用该样式表的所有网页多重样式表,样式表的优先级依次是行内样式表、内部样式表、外部样式表、浏览器缺省 如果一些属性被相同的选择器设置成不同的样式，值就会被更为具体的样式所继承，也就是按照样式表的优先级进行继承伪类语法,伪类是一种特殊的类选择器，用来指定一个或者与其相关的选择符的状态 伪类由4部分组成：选择器、伪类、属性、值 选择器:伪类{属性:值},锚伪类,最常用的锚伪类包括link、visited、active、hover，分别表示未被访问状态、已被访问状态、活动状态、鼠标悬停状态first-child与lang伪类,first-child与lang伪类均符合CSS2标准，first-child用于将特殊的样式添加到元素的第一个子元素，lang允许创作者定义指定的元素中使用的语言。

伪元素语法与使用,伪元素的语法规则与伪类语法规则类似，伪元素用于为一个选择器添加特殊效果，其语法结构如下: 选择器:伪元素{属性:值},伪元素,first-letter用于实现文本的首个字符特效 first-line用于将特殊样式添加到文本的首行 before为在某个元素前插入内容 after为在某个元素后插入内容 为了达到更好的效果，伪元素还可以混合使用本章小结,本章主要介绍了CSS语法基础，其中包括CSS的类型、伪类与伪元素在CSS的类型中需要注意样式表的优先级以及CSS类型的使用方法，伪类的构成以及使用方式选择器可以使用任何一个字符来定义，而伪类与伪元素则是已经定义好的字符，不能随意改变谢谢观赏,WPS Office,Make Presentation much more fun,@WPS官方微博@kingsoftwps,。