CSS的基础概念_1

1.CSS的特点

1.可以更灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置

2.可以灵活地设置一段文本的行高、缩进，并可以为其进入三维效果的边框

3.可以方便地为网页中的任何元素设置不同的背景的颜色和背景图片

4.可以精确地控制网页个元素的位置

5.可以为网页的元素设置各种过滤器，从而产生如阴影、模糊、透明等效果

6.可以与脚本语言相结合，从而产生各种动态效果

7.基于是直接的HTML格式的代码。因此可以底稿页面打开的速度

2. CSS 的类型

1.自定义CSS样式

下面自定义 CSS样式

.font01{
font-family:"宋体";//设置字体
font-size:12px;//设置字体大小
color:#000000;//定义颜色
text-decoration:none;//清除文本修饰
}

如先得代码为一个自定义的CSS样式代码：

<td class="font01">

2.HTML样式

下面是HTML样式代码：

body{
background-color:#ffffff;//设置背景颜色
background-image:yrl(images/001.jpg);//设置背景
background-reped:raped-x;//设置背景重复
margin: 0px;//设置边界
}

3. CSS选择符样式

可以通过该样式重新定义一些特定的标记组合或包含ID属性的标记

列如下面代码 CSS 选择符样式代码：

a:linek表示超链接为被单击

a:visited 表示超链接已被单击

a:hover 表示鼠标放在超链接上未单击

a:active 是介于hover和visited之间的一个状态，即超链接被按下时候的状态。

a:link{
color:#000000;
font-family:"宋体";
text-decoration:none;
}
a:hove{
color:#006600;
font-family:"宋体";
text-decoration:underline;//为文本添加下划线
}
a:visited{
color:#009990;
font-family:"宋体";
text-decoration:none;
}

3.CSS的基本语法

css语言由选择符合属性构成

CSS选择器{属性1：属性值1；属性2：属性值2；...}

下面介绍的是在HTML页面内直接引用CSS样式的代码。该方法必须打样式信息包括在<style>....</stylr>标签中，为了设样式在种个页面中产生作用，应把该组标签及内容放在<head>...</head>标签中。

列如，需要设置HTML也页面所有<p>内的问文字显示为红色，其代码如下：

提示：

CSS文件是纯文本格式文件，在编辑CSS时，可以使用一些简单的纯文本编辑工具。也可以使用专业的CSS编辑工具。

4.CSS样式的基本用法

在HTML内插入样式

在HTML内插入样式，可分为3种，分别是内联式样式、嵌入式样式和外部样式，在应用是可以根据需要任意用以上3种，最近目标的样式定义优先权最高，高优先样式将继承低优先权样式的未重叠的定义。

* 内联式样式：直接写在HTML标签

* 嵌入式样式：用<style>...</style>嵌入到HTML文件的头部。

* 外部样式：以css为扩展名，在<head>内使用<link>将外部CSS样式文件链接到HTML文件内。

5.应用CSS到网页中

1.内链样式

内联式式将CSS样式写在XHTML标签中，其格式如下

<p style="font-family: 宋体;color: #000000;font-size: 18px;">这是网页</p>

2.嵌入样式

嵌入样式有称为内部样式，是将CSS样式统一放置在页面中一个固定的位置，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本语法</title>
<style type="text/css">
	*{
		padding: 0px；
		margin: 0px;
		border: 0px;
	}
	body{
		font-family:"宋体";
		font-size: 12px;
		color: #000;
	}
</head>

<body>
	<p >内部嵌入样式</p>
</body>
</html>

3.外部样式

外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独编写在一个独立的文件之中，由网页进行调用，多个网页可以调用同一个外部样式文件，因此能够实现代码的最大化折佣及网站文件的最优化配置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本语法</title>
<style type="text/css">
	*{
		padding: 0px；
		margin: 0px;
		border: 0px;
	}
	body{
		font-family:"宋体";
		font-size: 12px;
		color: #000;
	}
	</style>
	<link type="text/css" rel="stylesheet" href="css.css">
</head>

<body>
	<p >内部嵌入样式</p>
</body>
</html>

提示

推荐使用外部样式，有点如下：

※ 独立于HTML文件，便于修改。

※ 多文件可以同一个样式文件。

※ 样式文件只需要下载一次，就可以在其他链接了该文件的页面内使。

※浏览器会显示HTML内容，然后在根据样式文件进行渲染，从而使访问者可以更快看到内容。

2. CSS 的类型

3.CSS的基本语法

4.CSS样式的基本用法

5.应用CSS到网页中

猜你喜欢