css自学使用教程.pdf

CSS 教程 CCSSSS 语语法法 实实例例 查看 实例 1 查看 实例 2 CCSSSS 实实例例 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器 常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性 （property ）是您希望设置的样式属性 （style attribute）。每个属性有一个值。属性和值被冒号分开。 CCSSSS 实实例例 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: p {color:red;text-align:center;} 为了让CSS可读性更强，你可以每行只描述一个属性: 实实例例 p { color:red; text-align:center; } 尝尝试试一一下下 »» CCSSSS 注注释释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注注释释以以 /* 开开始始, 以以 */ 结结束束, 实例如下: /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } CCSSSS IIdd 和和 CCllaassss iidd 和和 ccllaassss 选选择择器器 如果你要在HTML元素中设置CSS样式，你需要在元素中设置id 和 class选择器。 iidd 选选择择器器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 # 来定义。 以下的样式规则应用于元素属性 id=para : 实实例例 #para1 { text-align:center; color:red; } 尝尝试试一一下下 »» ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 ccllaassss 选选择择器器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点.号显示： 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。 实实例例 .center {text-align:center;} 尝尝试试一一下下 »» 你也可以指定特定的HTML元素使用class。 在以下实例中, 所有的 p 元素使用 class=center 让该元素的文本居中: 实实例例 p.center {text-align:center;} 尝尝试试一一下下 »» 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 CCSSSS 创创建建 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 如如何何插插入入样样式式表表 插入样式表的方法有三种: 外部样式表 内部样式表 内联样式 外外部部样样式式表表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以 过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在 （文档的）头部： head link rel=stylesheet type=text/css href=mystyle.css /head 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr {color:sienna;} p {margin-left:20px;} body {background-image:url(/images/back40.gif);} 不要在属性值与单位之间留有空格。假如你使用 margin-left : 20 px 而不是 margin-left : 20px ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法 正常工作。 内内部部样样式式表表 当单个文档需要特殊的样式时，就应该