设计师学习HTML/CSS之路-07-优快云博客

本文介绍了CSS样式的三种应用方式：内联式、嵌入式及外部式。详细讲解了每种方式的使用方法及注意事项，并对比了它们之间的优先级。

不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第7章 CSS样式基本知识

7-1 内联式css样式，直接写在现有的HTML标签中

CSS样式代码插入的形式分3种：
1.内联式：把CSS代码直接写在现有的html标签中，如下代码：

这里的文字是红色，字号为12px。

<p style="color:red;font-size:12px">
这里的文字是红色，字号为12px。
</p>
复制代码

css样式要写在style=""双引号中，多条样式代码中间用分号隔开。

7-2 嵌入式CSS样式，写在当前文的文件中

嵌入式的优势在于可以一对多修改样式。

嵌入式css样式代码写在<style type="text/css">...</style>之间。
把需要带有css样式的文字放在<span></span>标签之间。

<head>
 <style type="text/css">
 span{
    color:red;
    font-size:20px;
 }
 </style>
</head>
复制代码

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

7-3 外部式CSS样式，写在单独的一个文件中

外部式css样式是把css代码写在一个单独的外部文件中管理。这个css样式以“.css”为扩展名，在<head>内使用<link>标签。如下：

<link href="h1.css" rel="stylesheet" type="text/css" />
复制代码

<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>外部式css样式是把<span>css代码</span>写在一个单独的外部文件中管理。这个css样式以“.css”为扩展名。
   </P>
</body>
</html>
复制代码

单独外部文件如下：

注意：
1. css样式文件名称以有意义的英文字母命名，如h1.css。<br>
2. 同嵌入式一样，把需要带有css样式的文字放在<span></span>标签之间。<br>
3. rel="stylesheet" type="text/css"是固定写法。<br>
4. <link>标签一般写在<head>内。
复制代码