CSS基础：xhtml的id和class属性
发布时间：2010年3月30日 文章分类：xhtml+css 文章作者：Hitomi 浏览次数：次
从这节课开始正式讲解CSS和xhtml知识的结合，首先说一下如何在xhtml中插入CSS，方法有三种
第一种是内联在xhtml文档，和xhtml代码混杂在一起，这种写法是直接在标签后面的style属性中写CSS样式，这种不建议实际操作中使用，可以平时自己测试CSS效果用，用法如下：
- <div style="样式语句">被修饰的内容</div>
第二种是内联在xhtml文档，但是与xhtml文档分离，这种写法是用<style type="text/css"></style>标签在<head></head>中写样式，这样写的好处是<head></head>中写样式，<body></body>中写xhtml结构，相互不冲突，独立运作，维护起来很方便，信息量大需要每个页面单独维护的时候建议这样写，门户类网站多数都这么写，比如：网易、腾讯等，具体写法如下：
- 此处省略文档类型声明
- <html>
- <head>
- <title>网页标题</title>
- <style type="text/css">
- 这里书写css样式语句
- </style>
- </head>
- <body>
- </body>
- </html>
第三种是外联css文档，在xhtml中用<link />标签引用css，这种写法完全分离xhtml和css，是web标准最合理的方式，建议都用这种方法，对小型网站维护极为便利，方法如下：
- <html>
- <head>
- <title>网页标题</title>
- <link href="mystyle.css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- </body>
- </html>
PS:这里的href="mystyle.css"与<a>标签用法一样，用于填写css文档的路径。
说完css的插入方法，再说下CSS的基本语法，CSS修饰网页主要针对xhtml标签、id属性、class属性来说的，举例说明：
- <html>
- <head>
- <title>网页标题</title>
- <style type="text/css">
- div{background:#FFF;}
- .class1{background:#FCC;}
- .class2{background:#CCF;}
- #id1{color:#F00;}
- #id2{color:#00F;}
- </style>
- </head>
- <body>
- <div>没有id和class</div>
- <div class="class1">class1的样子</div>
- <div class="class1">class1的样子</div>
- <div class="class1" id="id1">class1并且id1的样子</div>
- <div class="class2">class2的样子</div>
- <div class="class2">class2的样子</div>
- <div class="class2" id="id2">class2并且id2的样子</div>
- </body>
- </html>
这里面div{background:#FFF;}是修饰<div>标签用的，可以看到div前面没有任何标记
.class1{background:#FCC;}和und:#CCF;}是修饰class属性的，在名称前加.表示class属性名
#id1{color:#F00;}和#id2{color:#00F;}是修饰id属性的，在名称前加#表示id属性名
这里的
div{background:#FFF;}修饰所有<div>标签的样式背景颜色为#FFF白色
.class1{background:#FCC;}修饰所有属性class="class1"的标签
#id1{color:#F00;}修饰属性id="id1"的标签
注意
class名称可以重复使用，代表一个集合，class="class1"用了三次
同一个id名称只能用一次，代表唯一，id="id1"只能用一次
由此我们可以得到css的通用格式：
- 选择符{
- 属性1:属性1的值;
- 属性2:属性2的值;
- 属性3:属性3的值;
- 属性4:属性4的值;
- .......
- }
选择符就是指标签、id名、class名
属性就是高度height、宽度width、背景background、边框border等
属性值就是对应的属性所赋予的值
本节课就到这里，下节课讲解CSS的float、width、height、background和border配合xhtml的div标签和id属性进行网页布局练习！
