我们是使用HTML进行布局头部、段落、表单、图像和列表,将网页上的每个元素合理地做出标记,定义元素在整个框架中的作用。但仅仅用XHTML创建出来的页面样式过于平淡简单。此时,则需要引入CSS将网页的元素样式化,使其产生不同的视觉表现。
总结XHTML中引入CSS的四种方法 :行内式、内嵌式、链接式和导入式。
1、 行内排版样式:在标记的style属性中设定CSS样式
格式:<标记名称 style=”属性1:属性值1;属性2:属性值2”>…</标记名称>
标记名称:<span>、<div>
2、内嵌式排版样式:将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
可以分为三种:标记定义型、class定义型、id定义型
①标记定义型:
格式: <head>
<style type="text/css">
标记名称{属性1:属性值1;属性2:属性值2;}
...
</style>
</head>
<body>
<标记名称>...</标记名称>
</body>
②class定义型:
格式:<head>
<style type=”text/css”>
.定义名称{属性1:属性值1;属性2:属性值2;}
.定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
③id定义型格式:<head>
<style>
#定义名称{属性1:属性值1;属性2:属性值2;}
#定义名称1,#定义名称2{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
CSS规定,范围越小,优先级越高。行内的优先级高于id级,id的优先级高于class级,class的优先级高于标记定义行。
3、链接排版样式:将一个独立的.css文件引入HTML文件中,它在网页的<head>...</head>标签对中使用<link>标记来引入外部样式。
格式: <head>
<link rel=”stylesheet” type=”text/css” href="mystyle.css" />
</head>
4、导入排版样式:将一个独立的.css文件引入HTML文件中,它在网页的在<head>…</head>之间<style>...</style>标签对中使用<@import >标记来引入外部样式。
格式:<head>
<style type="text/css">
@import "style.css"
</style>
</head>
~Jvst_Live_洋。