01-css的引入方式

# 前端 2024-05-05 04:50 0 36 来源：云博客

一、css介绍

css，Cascading Style Sheet：又称层叠样式表。

从审美的角度负责页面样式。

二、css的三种引入方式

1、行内样式

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6  7 </head> 8 <body> 9 10 <div>11 <p style="color: green;">我是一个段落</p>12 </div>13 14 </body>15 </html>

2、内接样式

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7  p{ 8  color: green; 9  }10 </style>11 12 </head>13 <body>14 15 <div>16 <p>我是一个段落</p>17 </div>18 19 </body>20 </html>

3、外接样式

链接式

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <link rel="stylesheet" href="./index.css"> 7  8 </head> 9 <body>10 11 <div>12 <p>我是一个段落</p>13 </div>14 15 </body>16 </html>

导入式

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 @import url(‘./index.css‘); 8 </style> 9 10 </head>11 <body>12 13 <div>14 <p>我是一个段落</p>15 </div>16 17 </body>18 </html>