CSS 入门 | 易学教程

一、CSS简介

CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。

我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下。

HTML、CSS和JavaScript的关系如下：

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

二、内容

1.css的引入方式

在HTML中引入CSS共有3种方式：

（1）外部样式表；
（2）内部样式表；
（3）内联样式表；

下面我们详细为大家介绍这3种CSS引入方式。

一、CSS的3种引用方式

1、外部样式表外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。
举例：

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
 <title></title>
    <!--在HTML页面中引用文件名为index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>   
     <div></div>
</body>
</html>

说明：外部样式表都是在head标签内使用link标签来引用的。
2、内部样式表内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
  <title></title>    
  <!--这是内部样式表，CSS样式在style标签中定义-->    
  <style type="text/css">
          p{color:Red;}      
   </style>
 </head>
 <body>   
  <p>绿叶学习网</p>  
  <p>绿叶学习网</p>
 </body>

来源：CSDN

作者：wuyxinu

链接：https://blog.csdn.net/wuyxinu/article/details/103533178

标签

css

外部样式表

前端开发

html代码

javascript

css样式