13 ,CSS 入门基础,行内排版内嵌式排版和外部排版样式

1.认识 CSS

2.传统 HTML 设计网页版面的缺点

3.CSS 的特点

4.CSS 的排版样式

13.1 认识CSS

CSS的英文全名是 Cascading Style Sheets,中文可翻译为串接式排版样式,并且 CSS2规范

也于 1998 年 02 月通过 W3C 的审核与推荐,所以 CSS 并不是专为 XHTML 所设计的,CSS 还

可以被其他标记语言拿来制作排版样本,如 HTML,XML 文件都可以应用 CSS,来美化网页的

设计,大家如果学会 CSS,在 HTML,XHTML,XML 文件中都可以使用.

13.2  传统 HTML  设计网页版面的缺点

使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML

并非完全着眼在网页排版的功能上,而这对 XHTML 而言更是如此,因为 XHTML 有意将原先

HTML 中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor 等

等,所以对 XHTML 文件而言,其排版与显示的功能比 HTML 文件更弱,所以使用 XHTML 来

设计网页更需要搭配 CSS 排版样本.

13.3 CSS 的特点

HTML 排版时的缺点:

设置麻烦,修改麻烦,功能严重不足.

CSS 样式排版的优点:

排版属性功能完整,排版文件可以独立存在,可以共用排版文件

CSS 样式排版的分类:

内行排版样式,,内嵌式排版样式,,链接式排版

13.4 CSS 的排版样式

行内排版样式:

格式:<标记名称 style=”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称>

例 :<p style= ”font-size:20pt;color:red;text-align:center”>排版样式</p>

排版专用标记:<div>与<span>

这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据 .如果

没有一样,则<span> 与</span>该数据显示前后都不会跳行.

内嵌式排版样本:

内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又

必须在<head>..</head>之间.

与其功能,又可以分为三种,

1. 标记定义型

2. class 定义型

3. id 定义型

标记定义型格式:

<head>

<style type=”text/css”>

标记名称{属性 1:属性值 1;属性 2:属性值 2;}

标记名称{属性 1:属性值 2;属性 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 规定,范围越小,优先级越高.

由小到大排列:

1. 行内

2. class 和 id 定义型

3. 标记定义行

id 的优先级高于 class 级.

外部排版样式定义:

独立的样式排版:

标记名称{属性 1:属性值 1;属性 2:属性值 2;}

.定义名称{属性 1:属性值 1;属性 2:属性值 2;}

在<head>…</head>之间使用<link>

格式:

<head>

<link rel=”stylesheet” type=”text/css” href=URL />

</head>

在<head>…</head>之间使用 import

格式:

<head>

<style type="text/css">

@import "style.css"

</style>

</head>

 CSS 行内排版内嵌式排版和外部排版样式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
color:red;
font-size: 40px;
}
.abc{color: green;}
#def{color: orange;}
</style>
</head> <body>
<p style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我是行内排版样式:格式:<标记名称 style=”属性 :属性值 ;属性 :属性值 ”>…</标记名称></p>
<div style="background: red">我DIV是一个区块,我要站一行</div><br/>
<span style="text-align: center;color: red;font-weight: bold;background-color: yellow;">我SPAN是内联,我不占一行</span>
<!--排版专用标记:<div>与<span>
这两个标签都是用来设置涵盖一个区块为主.区块就是表示一行 以上的数据 .如果
没有一样,则<span> 与</span>该数据显示前后都不会跳行.
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又
必须在<head>..</head>之间.
与其功能,又可以分为三种,
. 标记定义型
. class 定义型
. id 定义型
-->
<p id="def">我是id 定义型,我是使用一次的,我对应的是 #号定义的内容</p>
<p class="abc">我是class 定义型,我可以多次使用,我对应的是.号定义的内容</p>
<p class="abc">我是class 定义型,我可以多次使用,我对应的是.号定义的内容2</p>
<p class="abc">我是class 定义型,我可以多次使用,我对应的是.号定义的内容3</p>
<Pre>“行内”和”内嵌式”排版定义的优先级:
CSS 规定,范围越小,优先级越高.
由小到大排列:
. 行内
. class 和 id 定义型
. 标记定义行
id 的优先级高于 class 级.</Pre>
<!--
外部排版样式定义:
独立的样式排版:
标记名称{属性 :属性值 ;属性 :属性值 ;}
.定义名称{属性 :属性值 ;属性 :属性值 ;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之间使用 import
格式:
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
--> </body>
</html>
上一篇:LINQ系列:LINQ to ADO.NET概述


下一篇:慕课网-安卓工程师初养成-2-5 如何命名Java变量