CSS3概述

来源：互联网发布：淘宝联盟手机版怎么推广编辑：程序博客网时间：2024/06/05 21:06

一个美观、大方、简约的页面和高访问量的网站，是网页设计者的追求。然而，仅通过HTML5实现是非常困难的，HTML仅定义了网页结构，对于文本样式没有过多涉及。这就需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制，这种技术就是CSS3。

1、编辑和浏览CSS

css基本语法：

每一条样式规则由三部分构成：选择符（selector）、属性（properties）和属性值（value），基本格式如下：

selector{property：value}

下面给出一条样式规则，如：

p{color:red;font-size:40px}

2、编写CSS

选中标签内的文字，右击并在弹出的快捷菜单中选择【CSS样式】<【新建】命令，然后根据提示操作。

3、在HTML5中使用CSS3的方法

CSS样式表能很好的控制页面显示，以达到分离网页内容和样式代码。CSS样式表控制HTML5页面达到好的样式效果，其方式通常包括行内样式、内嵌样式、链接样式和导入样式。

行内样式：

即直接在HTML标记中使用style属性，该属性的内容就是CSS的属性和值。例如：

<p style="color:red;font-size:20px">此段落使用行内样式修饰</p>

总结：如果需要每一个标记都设置style属性，后期维护成本高，网页容易过胖，故不推荐使用。

内嵌样式：

即将CSS样式代码添加到<head></head>之前，并且用<style></style>标记进行声明。

其格式如下：

<head>

color:orange;

text-align:center;

}

</style>

</head>

总结：如果一个网站，拥有很多页面，对于不同页面的<p>标记都希望采用同样的风格时，内嵌演示就显得有点麻烦。此方式只适用于特殊页面设置单独的样式风格。

链接样式：

链接样式是CSS中使用频率最高也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个或多个文件。

链接样式是指在外部定义CSS样式表并形成以.css为拓展名的文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区，如下：

总结：链接样式最大优势就是将CSS代码和HTML代码完全分离，并且同一个CSS文件能够被不同的HTML所链接使用。

导入样式：

导入样式和链接样式基本相同，都是创建一个单独CSS文件，然后再引入到HTML文件中。只不过语法和运作方式有差别。

导入样式是指在内部样式表<style>标记中，使用@improt导入一个外部样式表，例如：

<head>

@import "1.css"

</style>

</head>

总结：导入方式与链接方式相比较，最大的优点就是可以一次导入多个CSS文件，其格式如下：

<style>

@inport "3.6.css"

@inport "test.css"

</style>

4、优先级问题

如果同一个页面，同时采用了上面四种方式，就会出现优先级问题，他们的优先级如下：

行内样式>内嵌样式>链接样式>导入样式