css基本语法.ppt

Css基本语法 授课教师 崔新会 css样式控制html文件的几种方式css选择器几种类型css选择器声明方式css选择器嵌套css选择器继承 如何使用CSS控制页面 以及其控制页面的各种方法 包括 1 内嵌式 2 行内样式 3 链接式 4 导入式 1 CSS样式表控制html页面的几种方式 1 内嵌式CSS一般位于HTML文件的头部 即与标记内 并且以开始 以结束 例如如下的代码定义了 标记使用的字号 body td th font size 12px style 2 行内样式代码style font size 10pt color FF6600 用于控制段落文字的字号和颜色 采用的格式把样式写在HTML中的任意行内 右边的属性设置放入双引号中 多个属性用 分隔 例 3 链接式CSS的定义既可以在HTML文档内部 也可以单独在外部文件 例如style css 中定义 把编辑好的CSS文档保存成外部文件 然后在中添加如下所示的代码 指链接与文档的关系 指链接的是一个样式表文件 4 导入样式 导入样式和链接样式的功能基本相同 只是语法和运作方式上略有区别 导入的样式表在HTML文件初始化时 会被导入到HTML文件内 作为文件的一部分 类似内嵌式的效果 而链接式样式表则是在HTML的标记需要格式时才以链接的方式引用 导如样式表 常用格式 importurl sheet1 css importurl sheet1 css importurl sheet1 css importsheet1 css import sheet1 css import sheet1 css 导入样式表的最大用处在于可以让一个HTML文件导入很多的样式表 我们可以同时用多个 import语句将1 css和2 css等等同时导入到HTML中 标题 importurl 1 css importurl 2 css CSS标题1紫色 粗体 下划线 25px的效果1CSS标题2紫色 粗体 下划线 25px的效果2CSS标题3紫色 粗体 下划线 25px的效果3 2 Css文件 h3 color 00FFFF font style italic font size 40px 1 Css文件 h2 color 0000FF p color FF00FF text decoration underline font weight bold font size 20px Css样式四种嵌入方式优先级 如果在各种方法中设置的属性不一样 比如内嵌式设置字体为宋体 链接式设置颜色为红色 那么显示结果会两者同时生效 为宋体红色字 Css样式四种嵌入方式优先级由高到低 行内样式优先级最高 其次是采用标记的链接式 再次是位于之间的内嵌式 最后是 import导入式 2 css选择器选择器 selector 是CSS中很重要的概念 所有HTML语言中的标记都是通过不同的CSS选择器进行控制的 1 标记选择器一个HTML页面由很多不同标记组成 而CSS标记选择器就是声明哪些标记采用哪种CSS样式 h1 Color red Font size 25px 2 类别选择器 所有标记都可通过class属性设置类选择器 class Color green Font size 20px 例如1 class选择器 one color red 红色 font size 18px 文字大小 two color green 绿色 font size 20px 文字大小 three color cyan 青色 font size 22px 文字大小 class选择器1class选择器2class选择器3h3同样适用我们可以看到3个标记分别呈现不同的颜色以及字体大小 而且任何一个class选择器都适用于所有HTML标记 只需要用HTML标记的class属性声明即可 例如2 class选择器与标记选择器 class选择器与标记选择器1class选择器与标记选择器2class选择器与标记选择器3class选择器与标记选择器4class选择器与标记选择器5class选择器与标记选择器6首先通过标记选择器定义标记的全局显示方案 然后再通过一个class选择器对需要突出的标记进行单独设置 这样大大提高了代码的编写效率 另外类别选择器还有一种很直观的使用方法 就是直接在标记声明后接类别名称 以次来区别该标记 h3 class Color red Font size 23px 例如3 标记选择器 classh3 标记选择器 color blue font size 18px h3 special 标记 类别选择器 color red 红色 font size 23px 文字大小 special 类别选择器 color green 标记选择器 class1标记选择器 class2标记选择器 class3标记选择器 class4标记选择器 class5使用于别的标记以上代码定义了的风格样式 同时单独定义了h3 special 用于特殊控制 而在这个h3 special中定义的风格仅仅适用于标记 而不影响单独的 special选择器 在HTML标记中 还可以同时给一个标记运用多个Class类别选择器 从而将两个类别的样式风格同时运用到一个标记中 例如4同时使用两个class one color blue 颜色 two font size 22px 字体大小 一种都不使用只使用第一种只使用第二种同时使用两种class一种都不使用 3 ID选择器 ID选择器的使用方法跟class选择器基本相同 不同之处在于ID选择器只能在HTML页面中使用一次 因此其针对性更强 在HTML的标记中只需要利用id属性 就可以直接调用CSS中的ID选择器 格式如下 id Color yellow Font size 30px 例如5 ID选择器 ID选择器1ID选择器2ID选择器3ID选择器3 3 选择器声明 在声明各种CSS选择器时 如果某些选择器的风格是完全相同的 或者部分相同 这时便可以利用集体声明的方法 将风格相同的CSS选择器同时声明 例如6集体声明h1 h2 h3 h4 h5 p 集体声明 color purple 文字颜色 font size 15px 字体大小 h2 special special one 集体声明 text decoration underline 下划线 集体声明h1集体声明h2集体声明h3集体声明h4集体声明h5集体声明p1集体声明p2集体声明p3 另外 对于实际网站中的一些小型页面 例如弹出的小对话框和上传附件的小窗口等 希望这些页面中所有的标记都使用同一种CSS样式 但又不希望逐个来加入集体声明列表 这时可以利用全局声明符号 例如2 7 全局声明 全局声明 color purple 文字颜色 font size 15px 字体大小 h2 special special one 集体声明 text decoration underline 下划线 全局声明h1全局声明h2全局声明h3全局声明h4全局声明h5全局声明p1全局声明p2全局声明p3 4 选择器的嵌套 在CSS选择器中 还可以通过嵌套的方式 对特殊位置的HTML标记进行声明 例如之间包含标记时 就可以使用嵌套选择器进行相应的控制 例如8 CSS选择器的嵌套声明pb 嵌套声明 color maroon 颜色 text decoration underline 下划线 嵌套使用CSS标记的方法嵌套之外的标记不生效 通过将b选择器嵌套在p选择器中进行声明 显示效果只适用于之间的标记 而其外的标记并不产生任何效果 嵌套选择器的使用非常广泛 不只是嵌套的标记本身 类别选择器和ID选择器都可以进行嵌套 例如 speciali color red oneli padding left 5px td top top1strong font size 16px 使用了属性 special的标记里包含ID为one的标记里包含的使用了 top类别的标记中包含的 top1类别的标记 其中包含了标记所声明的风格样式 例如 其他内容CSS控制的部分其他内容 5 CSS的继承 1 父子关系所有的CSS语句都是基于各个标记之间的父子关系的 为了更好的理解父子关系 首先从HTML文件的组织结构入手 例如9父子关系h1 color red 颜色 text decoration underline 下划线 h1em 嵌套选择器 color 004400 颜色 font size 40px 字体大小 祖国的首都北京欢迎来到祖国的首都北京 这里是全国政治 经济 文化的中心 在这里 你可以 感受大自然的美丽体验生活的节奏领略首都的激情与活力你还可以 去八达岭爬长城去香山看红叶去王府井逛夜市如果您有任何问题 欢迎联系我们 2 CSS继承的运用 CSS继承是指子标记会继承父标记的所有样式风格 并可以在父标记样式风格的基础上再加以修改 产生新的样式 父子关系 li1 color red li2 color blue li1olli 利用CSS继承关系 font weight bold 粗体 text decoration underline 下划线 关系1页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套 页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套 关系2页面父子关系复杂时页面父子关系