tft每日頭條

 > 生活

 > web前端開發css筆記

web前端開發css筆記

生活 更新时间:2025-01-11 00:24:44

随着html的成長,為了滿足頁面設計者的要求,HTML添加了很多顯示功能。但是随着這些功能的增加,HTML變得越來越雜亂,而且HTML頁面也越來越臃腫。于是css便誕生了。

web前端開發css筆記(CSS的三種導入方式說明)1

Web前端基礎教程,Web前端開發,開課吧Web前端

CSS的三種導入方式

内聯樣式表

  <p style="font-size:50px;color:blue">css内聯樣式表</p>

内部樣式表

  <styletype="text/css">

  p{

  font-size:100px;

  color:red;

  }

  </style>

  <p>css内部樣式表</p>

  外部樣式表

  創建一個cssTest.css的css文件

  p{

  font-size:50px;

  color:green;

  }

  span{

  font-size:50px;

  color:yellow;

  }

使用外部樣式表

  <linkrel="stylesheet"type="text/css"href="../css/cssTest.css">

  <p>優先級:内聯樣式表>内部樣式表>外部樣式表</p>

  <span>外部樣式表</span>

完整測試代碼

  <!--文件名cssTest.html-->

  <!DOCTYPEhtml>

  <htmllang="en">

  <head>

  <metacharset="UTF-8">

  <title>cssTest</title>

  <styletype="text/css">

  p{

  font-size:50px;

  color:red;

  }

  </style>

  <linkrel="stylesheet"type="text/css"href="../css/cssTest.css">

  </head>

  <body>

  <pstyle="font-size:50px;color:blue">css内聯樣式表</p>

  <p>css内部樣式表</p>

  <p>優先級:内聯樣式表>内部樣式表>外部樣式表</p>

  <span>外部樣式表</span>

  </body>

  </html>

css文件

  <!--文件名cssTest.css-->

  p{

  font-size:50px;

  color:green;

  }

  span{

  font-size:50px;

  color:yellow;

  }

css三種導入方式的優先級:内聯樣式表>内部樣式表>外部樣式表

從HTML被發明開始,樣式就以各種形式存在。不同的浏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML隻包含很少的顯示屬性。

以上就是今天酷仔整理提供的“web前端基礎:CSS的三種導入方式說明”一文,希望為學習Web前端的同學提供幫助,以後酷仔每日均會提供Python編程及Web前端相關的知識内容。

特殊說明:以上資料由開課吧提供!

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved