CSS基础教程、css编程、css代码.ppt

什么是CSS CSS是Cascading Style Sheet的缩写，译为“层叠样式表”或“级联样式表”，是为了弥补HTML在排版样式上的不足而制订的一套样式标准。可以用来： 　　设置页面中的字体 定义层及其在页面中的位置 修改HTML标记 什么是CSS 使用ＣＳＳ的好处： 减少图形文件的使用 集中管理样式内容 共享样式设定 将样式分类使用 什么是CSS CSS使用规则(Rule)的方式进行定义， 　　　如: h1 {color: green} 　一条规则包含两个部分： 选择器(Selector)：表示样式要套用的对象，如h1； 样式定义(Declaration)：设定样式的内容，用｛｝括　 起来的部分，如{color: green}。 什么是CSS 常用的样式属性 CSS的使用 在HTML标签中使用行内样式： 若只需要修改HTML中某个标签的样式，可以使用标签的style属性直接修改样式。它利用现有的HTML标记，把特殊的样式加入到指定的标签中，又称行内(in-line)设定，如： p style=color:red这里显示红色字/p 行内样式 CSS的使用 在HTML页面中嵌入一个样式表 可以直接在HTML网页的标题部分，，使用style/style标签来定义样式，用此方法定义的样式将应用于整个文档。例如： style p {color : red ; font-weight : bold} /style 内嵌样式 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 CSS的使用 在HTML页面中链接一个外部样式表文件 一个外部定义的样式表可以作为一个样式模板应用于多个Web页面。方法为将所有样式部分组合在一起，保存到扩展名为.css的文件。 在HTML网页的head和/head标签之间加上： link rel=stylesheet type=text/css href=样式文件(.css)的路径 / 链接外部样式表 使用LINK（链接）标签 ，语法： HEAD LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” /HEAD CSS的使用 通过import关键字导入样式表 ＠import是在浏览器读取HTML之初便将样式文件的内容全部导入HTML文件中。 导入的方式是将样式文件的内容添加到HTML文档中，因此，＠import必须放在style/style标签之间。可见，通过import关键字导入的方式实质上就是在HTML页面中嵌入样式表的方式。 导入外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import 样式表文件.css; /STYLE /HEAD 选择器 根据选择器的不同，分为： HTML 选择器 CLASS 类选择器 ID 选择器 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 DIV 层标签 SPAN 标签 CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护 课堂重点 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 DIV和SPAN都是容器标签，DIV是块级标签，可包含段落、标题等，SPAN是行级标签，不能包含段落、标题等，只能包含部分文字 讲解要点： 1）先演示：参考TG6-Source文件夹中的”HTML选择器“用例。 2）指出： 品种特征－H2 下面的三段都是段落P， 3）提问：我们应该采用哪些标签的样式呢？ 4）回答：显然是H2和P标签。 5）讲解关键代码，也可以打开源文件讲解。 提问： 1）实现如图所示的细边框效果，我们想想能不能用HTML选择器。 文本框和密码框对应的标签都是INPUT标签。 2）引导：确实是可以的，但是我们的按钮对应的HTML标签也是INPUT， 这样按钮也会变成细边框了