css基本语法剖析2.ppt

Css基本语法 授课教师：崔新会 css样式控制html文件的几种方式 css选择器几种类型 css选择器声明方式 css选择器嵌套 css选择器继承 （1）内嵌式 CSS一般位于HTML文件的头部，即head与/head标记内，并且以style开始，以/style结束，例如如下的代码定义了body、td、th标记使用的字号。 （4）导入样式 导入样式和链接样式的功能基本相同,只是语法和运作方 式上略有区别. 导入的样式表在HTML文件初始化时,会被导入到HTML 文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引用。 导如样式表，常用格式： @import url(sheet1.css) @import url(“sheet1.css”) @import url(‘sheet1.css’) @import sheet1.css @import “sheet1.css” @import ‘sheet1.css’ 应写在《style》《/style》里面 导入样式表的最大用处在于可以让一个HTML文件导 入很多的样式表，我们可以同时用多个@import语句将1.css和2.css等等同时导入到HTML中。 html head title标题/title style type=text/css @import url(1.css); @import url(2.css); /style /head body h2CSS标题1/h2 p紫色、粗体、下划线、25px的效果1/p h2CSS标题2/h2 p紫色、粗体、下划线、25px的效果2/p h3CSS标题3/h3 p紫色、粗体、下划线、25px的效果3/p /body 2.Css文件: h3{ color:#00FFFF; font-style:italic; font-size:40px; } Css样式四种嵌入方式优先级 如果在各种方法中设置的属性不一样,比如内嵌式设置字体为宋体,链接式设置颜色为红色,那么显示结果会两者同时生效,为宋体红色字. Css样式四种嵌入方式优先级由高到低： 行内样式优先级最高, 其次是采用link标记的链接式, 再次是位于style/style之间的内嵌式, 最后是@import导入式. （2） 类别选择器 所有标记都可通过class属性设置类选择器 例如1: html head titleclass选择器/title style type=text/css .one{ color:red; /* 红色 */ font-size:18px; } /* 文字大小 */ .two{ color:green; /* 绿色 */ font-size:20px; } /* 文字大小 */ .three{ color:cyan; /* 青色 */ font-size:22px; } /* 文字大小 */ /style /head …… 例如2: html head titleclass选择器与标记选择器/title style type=text/css !-- p{ /* 标记选择器 */ color:blue; font-size:18px; } .special{ /* 类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } -- /style /head body pclass选择器与标记选择器1/p pclass选择器与标记选择器2/p pclass选择器与标记选择器3/p p class=specialclass选择器与标记选择器4/p pclass选择器与标记选择器5/p pclass选择器与标记选择器6/p /body /html 首先通过标记选择器定义p标记的 全局显示方案，然后再通过一个class 选择器对需要突出的p标记进行单独 设置，这样大大提高了代码的编写效 率。 另外类别选择器还有一种很直观的使用方法，就是直接在标记声明后接类别名称，以次来区别该标记。 例如3: html head title标记选择器.class/title style type=text/css h3{ /* 标记选择器 */ color:blue; font-size:18px; } h3.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ font-size:23px;