CSS样式分为哪三种?

html-css028

CSS样式分为哪三种?,第1张

CSS样式分为:内联式css样式、嵌入式css样式、外部式css样式。

对CSS三种样式定义及其实例:

内联式css样式。

内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开(英文状态下)。

嵌入式css样式。

嵌入式css样式,就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色:

<style type="text/css">span{color:red}</style>

嵌入式css样式必须写在之间,并且一般情况下嵌入式css样式写在之间。

外部式css样式。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名(也可以为调用其他网站CSS)。

<link href="style.css" rel="stylesheet" type="text/css" />

注意事项: 

1、css样式文件名称以有意义的英文字母命名,如 main.css。 

2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。 

3、标签位置一般写在标签之内。

掌握好三种CSS三种样式使用方法在Web开发中将节省很多时间。

CSS样式的引用方式有三种:

一、行间样式表

行间样式表是指将CSS样式编码写在HTML标签中,格式如下

<h1 style="font-size:12pxcolor:#000FFF">

我的CSS样式。

</h1>

行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。

二、内部样式表

内部样式表与行间样式表相似都是把CSS代码写在HTML页面中,稍微不同的是前者可以将样式表放在一个固定的位置,格式如下

<html>

<head>

<title>内部样式表</title>

<style type="text/css">

h1{font-size:12px

color:#000FFF

}

</style>

</head>

<body>

<h1>我的CSS样式。</h1>

</body>

</html>

内部样式表编码是初级的应用形式,不能达到跨页面使用所以不适合使用。

三、外部样式表

外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码的最大限度的重用及网站文件的最优化配置,格式如下

<html>

<head>

<title>外部样式表</title>

<link rel="stylesheet" rev="stylesheet" href="style.css">

</head>

<body>

<h1>我的CSS样式。</h1>

</body>

</html>

在style.css中的代码为

h1{font-size:12px

color:#000FFF

}

我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式,并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。