CSS笔记-3：CSS样式种类

Sakwe

2018 年 09 月 20 日

5876 次浏览

暂无评论

1687字数

CSS

内联式CSS样式，直接可以写在现有的HTML标签中

CSS样式分为三种：内联式、嵌入式和外部式

内联式：
CSS样式表就是把CSS代码直接写在现有的HTML标签中，如下面代码：
<p style = "color:red">这里文字是红色的</p>

注意要写在元素开始标签里，下面这种写法是错误的；
~~<p>这里的文字是红色的</p style = "color:red">~~

并且CSS样式代码要写在 style = "" 双引号中，如果有多条CSS样式代码可以写在一起，中间用分号隔开，如下代码：
<p style = "color:red ; font-size:12px" >这里文字颜色是红色，大小为12px</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>索尼公司是源自日本的跨国综合企业，以<span style="color:blue">研制电子产品为主要事业</span>，经营领域横跨<span>消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院</span>等，拥有全世界的品牌知名度。其最早前身为1946年5月创立的<span>“东京通信工业株式会社”</span>，由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>

嵌入式CSS样式：

嵌入式CSS样式，就是把CSS样式代码写在<style type = "text/css"></style> 标签之间，如下面代码实现吧三个<span>标签中的文字设置为红色；

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

嵌入式CSS样式必须写在<style>...</style>之间并且一般情况下嵌入式CSS样式写在<head>...<head>之间；

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>索尼公司是源自日本的跨国综合企业，以<span style="color:blue">研制电子产品为主要事业</span>，经营领域横跨<span>消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院</span>等，拥有全世界的品牌知名度。其最早前身为1946年5月创立的<span>“东京通信工业株式会社”</span>，由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>

外部CSS样式：

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

注意：

1、CSS样式文件名以有意义的英文字母命名，如：main.css
2、rel = "stylesheet" type = "text/css" 是固定写法，不可以修改；
3、<link>标签位置一般写在<head>标签内；

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>索尼公司是源自日本的跨国综合企业，以<span style="color:blue">研制电子产品为主要事业</span>，经营领域横跨<span>消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院</span>等，拥有全世界的品牌知名度。其最早前身为1946年5月创立的<span>“东京通信工业株式会社”</span>，由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>

外部CSS 样式：

style.css
span{
   color:red;
   font-size:20px;
}

总结：

三种CSS样式的优先级：

三种CSS样式的优先级排列为：

内联式》嵌入式》外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）