CSS——(1)CSS的三种引入形式

CSS

CSS(Cas cading Style Sheet,即“层叠样式表”)，是一组格式设置规则，用于控制web页面的外观。

如何让一个标签具有样式？

  1. 必须保证引入方式正确

  2. 必须让css和html元素产生关联，也就是说得先找到这个元素

  3. 用相应的css属性去修改html元素的样式

CSS的三种引入形式

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

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

(1)外部样式表/链接样式表

外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。

<!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf‐8" />
          <title></title>
          <link rel="stylesheet" type="text/css" href="index.css"/>
      </head>
      <body>
          <div id="box"></div>
      </body>
  </html>

(2)内部样式表

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码是放在<style>标签对内的。

<!DOCTYPE html>
<html>
<head>  
  <title></title>    
  <!--这是内部样式表，CSS样式在style标签中定义-->    
  <style type="text/css">
          p{color:Red;}      
   </style>
 </head>
 <body>   
   <p>博客园</p>  
 </body>

(3)内联样式表

内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在标签对中定义，而是在标签的style属性中定义。

<!DOCTYPE html> 
<html>
<head>
    <title></title>
</head>
<body>
    <p style="color:Red; ">博客园</p>
</body>
</html>

下一篇：
CSS选择器

posted @ 2021-08-19 11:14  夏虫语冰&  阅读(102)  评论(0)    收藏  举报