HTMLCSS入門教程-從0開始經過一個商城實例手把手教你學習PC端和移動端頁面開發第3章初識CSS

時間 2021-01-30

標籤 css html git ide 學習字體 url code orm 視頻欄目無線简体版

原文原文鏈接

本教程案例在線演示

有路網PC端
 有路網移動端css

免費配套視頻教程

免費配套視頻教程html

教程配套源碼資源

教程配套源碼資源git

考慮對人的描述方式ide

人 {
   身高:175cm;   
    體重:70kg;   
    膚色:黃色
}

CSS基本語法結構

選擇器 {
    聲明1;
    聲明2;

    }

h1 {
    font-size:12px;
    color:#F00;
}

style標籤

<style type="text/css">
h1 {
    font-size:12px;
    color:#F00;
}
</style>

標籤選擇器

HTML標籤做爲標籤選擇器的名稱學習

<h1>…<h6>、<p>、<img/>

p { font-size:16px;}

類選擇器

<標籤名 class= "類名稱">標籤內容</標籤名>字體

.類名稱 { font-size:16px;}

ID選擇器

<標籤名 id= "id名稱">標籤內容</標籤名>url

#id名稱 { font-size:16px;}

標籤選擇器直接應用於HTML標籤code

類選擇器可在頁面中屢次使用orm

ID選擇器在同一個頁面中只能使用一次視頻

製做《浣溪沙》

使用標籤選擇器設置標題字體大小爲20px

頁面中全部段落中的文本字體大小爲16px

使用類選擇器設置正文和譯文內容字體顏色爲綠色

使用ID選擇器設置譯文標題顏色爲藍色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>《浣溪沙》</title>
  <style type="text/css">
    h1 {
      font-size: 20px;
    }

    p {
      font-size: 16px;
    }

    .poem {
      color: green;
    }

    #title {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>浣溪沙</h1>
  <hr />
  <p class="poem">一曲新詞酒一杯，<br />
    去年天氣舊亭臺。<br />
    夕陽西下幾時回？<br />
    迫不得已花落去，<br />
    似曾相識燕歸來。<br />
    小園香徑獨徘徊。
  </p>
  <p id="title">譯文</p>
  <p class="poem">聽一支新曲喝一杯美酒，仍是去年的天氣舊日的亭臺，西落的夕陽什麼時候再回來？
    那花兒落去我也迫不得已，那歸來的燕子似曾相識，在小園的花徑上獨自徘徊。</p>
</body>
</html>

CSS複合選擇器

後代選擇器

交集選擇器

並集選擇器

後代選擇器

在CSS選擇器中經過嵌套的方式，對特殊位置的HTML標籤進行聲明.

外層的標籤寫在前面，內層的標籤寫在後面，之間用空格分隔.

標籤嵌套時，內層的標籤成爲外層標籤的後代.

h3 strong{color:blue; font-size:36px;}

交集選擇器

由兩個選擇器直接鏈接構成，選中兩者各自元素範圍的交集.

第一個必須是標籤選擇器，第二個必須是類選擇器或者ID選擇器.

選擇器之間不能有空格，必須連續書寫

p.txt{color:blue; line-height:28px;}

並集選擇器

多個選擇器經過逗號鏈接而成.

利用並集選擇器同時聲明風格相一樣式.

h3,.first,.second,#end{
        font-size:16px; 
        color:green; 
        font-weight:normal;
}

製做《花千骨大結局》

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    p strong,
    h1 strong {
      color: red;
    }
  </style>
</head>

<body>
  <h1><strong>花千骨</strong>大結局</h1>
  <p>人間帝王軒轅郎、無所不知所不能東方彧卿（其實他就是超脫六界以外的異朽君）、妖魔兩界聖君殺阡陌那時都是愛花千骨的，都但願白子畫可以善待花千骨。</p>
  <p>白子畫的善待是八十一根消魂釘，普通仙一根消魂釘就死去活來。花千骨受了17根，又被白子畫用斷念劍看了近百劍，<strong>花千骨內心那個痛苦不言而喻</strong>。然後，花千骨扔到地牢。白子畫替她承受了剩下的消魂釘。
    <strong>白子畫</strong>
    在霓漫天的告知下，白子畫的師兄摩嚴得知花千骨竟然悖逆天理愛上白子畫，用絕情水潑到花千骨的喉嚨裏，臉上，因而花千骨又瞎又啞又毀容，被髮配到了幾乎不可能走出來的蠻荒之地。</p>
  <strong>花千骨又瞎又啞又毀容</strong>
</body>
</html>

HTML中引入CSS樣式

行內樣式
內部樣式表
外部樣式表

行內樣式

<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px; color:green;">直接在HTML標籤中設置的樣式</p>

內部樣式表

CSS代碼寫在<head>的<style>標籤中

優勢
方便在同頁面中修改樣式

缺點
不利於在多頁面間共享複用代碼及維護，對內容與樣式的分離也不夠完全

外部樣式表

CSS代碼保存在擴展名爲.css的樣式表中.

HTML文件引用擴展名爲.css的樣式表，有兩種方式

連接式
導入式
連接外部樣式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

導入外部樣式表

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

CSS繼承特性

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    body{color:red;}    
</style>
</head>
    <body>
        <p>
            父級P
            <strong>子級strong</strong>
            父級P
        </p>
        <ul>    
            <li>子級li1</li>
            <li>子級li2</li>
        </ul>
    </body>
</html>

子標籤能夠繼承父標籤的樣式風格

子標籤能夠覆寫父標籤的樣式，但不會影響父標籤的樣式風格

<h1>勇氣</h1>
<p class="first">三年級時，我仍是一個<strong>膽小如鼠</strong>的小女孩，上課歷來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。
</p>
<p id="second">到了三年級下學期時，咱們班上了一節公開課，老師提出了一個很<strong>簡單</strong>的問題，班裏不少同窗都舉手了，甚至成績比我差不少的，也舉手了，還說着："我來，我來。"我環顧了四周，就我沒有舉手。
</p>

p{color:red;} 
.first strong{color: blue}

CSS的優先級

ID選擇器>類選擇器>標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
p{color:red;}        
.first{color:green;}    
</style>
</head>
<body>
<p class="first" id="pid">三年級時，我仍是一個<strong>膽小如鼠</strong>的小女孩。</p></body>
</html>

p和.first都匹配到了p這個標籤上，green是正確的顏色

在html文件中對於同一個元素能夠有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的先後順序來決定，處於最後面的css樣式會被應用

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    p{color:red;} 
    p{color:green;}
</style>
</head>
<body>
    <p class="first" id="pid">三年級時，我仍是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>

內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red;}        
    p{color:blue;}    
</style>
</head>
<body> 
    <p class="first" id="pid" style="color:green">三年級時，我仍是一個<strong>膽小如鼠</strong>的小女孩。</p> 
</body>
</html>

有些特殊的狀況須要爲某些樣式設置具備最高權值，怎麼辦？這時候咱們可使用!important來解決。

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red!important;}         
    .first{color:blue;}   
</style>
</head>
<body> 
      <p class="first" id="pid" style="color:green">三年級時，我仍是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>