Day2_CSS_CSS語法及HTML結合


CSS語法及HTML結合

二、CSS語法

 p{color:red;}

 

 選擇器{屬性名:屬性值 ;}

     選擇器後一定是大括號.屬性名後必須用冒號隔開.屬性值後用分號

     屬性名和冒號之間最好不要有空格。

     CSS註釋/*     */

使用選擇器p{ }和<p>標籤的區別:

 p{

font-weight:bold;

font-style:italic;

}

</style>

 </head>

 <body>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<p style = "color:red">你好</p>

三、CSS和HTML的結合方式

 CSS代碼理論上位置是任意的,但通常寫在style標籤裏

 CSS和HTML的結合方式有3種:

  a. 行級樣式表:採用style屬性,範圍只針對此標籤適用

    <div style = "border:1px solid red ;">大家好</div>

  b. 內嵌樣式表:採用<style>標籤完成。範圍針對此頁面

<style type="text/css">

  c. 外部樣式表: 採用建立樣式表文件。針對多個頁面.

   引入樣式表文件的方式:

    1):採用<link>標籤

     eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

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

    2):採用import,必須寫在<style>標籤中,並且必須是第一句

     eg: @import url(a.css) ;

       

    兩種引入方式的區別:

      外部樣式表中不能寫<link>標籤,但是可以寫import語句


<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

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

  <title>Document</title>

<style type="text/css">

 /*

 CSS和HTML的結合方式:

  1. 行級樣式表: 採用style屬性完成

  2. 內部樣式表: 採用style標籤完成

  3. 外部樣式表: 採用外部css文件完成

 */

p{

font-weight:bold;

font-style:italic;

}

</style>

 </head>

 <body>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<p style = "color:red">你好</p>

 </body>

</html>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章