css和html的四種結合方式

  發布時間:2018-10-31 16:50:49   作者:佚名   我要評論

這篇文章主要介紹了css和html的四種結合方式,需要的朋友可以參考下

(1)在每個HTML標簽上面都有一個屬性 style,把css和HTML結合在一起   

<div style="background-color:red;color:blue;">我是一只小小鳥</div>

  (2)使用HTML的一個標簽實現,<style>標簽:寫在head里面

     <style type="text/css">
      css代碼;
    </style>
<style type="text/css">
div {
background-color:red;
color:gray;
}
</style>

  (3)在style標簽里面 使用語句(在某些瀏覽器下不起作用)

  @import url(css文件路徑);

  - 第一步:創建一個css文件

   <style type="text/css">
    @import url(div.css);
  </style>

  (4)使用頭標簽link,引入外部css文件

  - 第一步:創建一個css文件

 - <link rel="stylesheet" type="text/css" href="div.css"/>

 

  *** 第三種結合方式缺點:在某些瀏覽器下不起作用,一般使用第四種方式

  *** 優先級(一般情況)

    由上到下,由外到內,優先級由低到高

    *** 后加載的優先級高

    *** 格式 選擇器名稱 {屬性名:屬性值; 屬性名:屬性值; ......}

  完整代碼:

<html>
    <head>
        <title>World</title>
        <style type="text/css">
            div {
                background-color:gray;
                color:white;
            }
        </style>
    </head>
    <body>
        <div style="background-color:red;color:blue;">我是一只小小鳥
        </div>
        <div>愿有歲月可回首,且以深情共白頭!</div>
    </body>
</html>

<html>
    <head>
        <title>World</title>
        <style type="text/css">
            @import url(div.css);
        </style>
    </head>
    <body>
        <div>愿有歲月可回首,且以深情共白頭!</div>
    </body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>world</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
    <div>愿有歲月可回首,且以深情共白頭!</div>
</body>
</html>

總結

以上所述是小編給大家介紹的css和html的四種結合方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • 使用CSS屬性選擇器來拼接HTML的DNA的方法

    CSS屬性選擇器非常神奇,它們可以幫你避免添加數不勝數的類名,從另一方面來指出你代碼里的一些問題。接下來通過本文給大家介紹使用CSS屬性選擇器來拼接HTML的DNA的方法,
    2018-11-02
  • css和html的四種結合方式

    這篇文章主要介紹了css和html的四種結合方式,需要的朋友可以參考下
    2018-10-31
  • 詳解CSS Sprite雪碧圖的應用

    這篇文章主要介紹了詳解CSS Sprite雪碧圖的應用,CSS雪碧圖該方法是將多個小圖標和背景圖像合并到一張圖片上,非常具有實用價值,需要的朋友可以參考下
    2018-10-31
  • CSS去除移動端點擊時元素產生的背景色 (推薦)

    這篇文章主要介紹了CSS去除移動端點擊時元素產生的背景色 (推薦),代碼很簡單,需要的朋友跟隨小編一起看看吧
    2018-10-30
  • 詳解css外邊距折疊(margin collapsing)

    外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距,本文詳細的介紹了一下css外邊距折疊的實現,分為3種情況,非常具有實用價值,需要的朋友可以參考下
    2018-10-30
  • 使用CSS transition和animation改變漸變狀態的實現方法

    CSS漸變特性對于我們的幫助已經非常強大了,它們可以幫助我們繪圖、 創建圖片占位符 、制作環形進度條等等。接下來通過本文給大家介紹使用CSS transition和animation改變漸
    2018-10-29
  • css中grid屬性的使用詳解

    這篇文章主要介紹了css中grid屬性的使用詳解的相關資料,詳細的介紹了grid屬性,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-26
  • 純css實現Material Design中的水滴動畫按鈕

    這篇文章主要介紹了純css實現Material Design中的水滴動畫按鈕的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-26
  • Flexbox 布局的最簡單表單的實現

    彈性布局(Flexbox)逐漸流行,越來越多人使用,本文章主要介紹了Flexbox 布局的最簡單表單的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過
    2018-10-25
  • 詳解關于flex-shrink如何計算的冷知識

    本篇文章給大家帶來的內容是關于flex-shrink如何計算?flex-shrink的計算方法介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助
    2018-10-25

最新評論

时时彩包赢公式0369