P9-前端基礎-CSS簡介

阿新 • • 發佈：2021-01-16

P9-前端基礎-CSS簡介

1.概述

網頁分成三個部分：

結構(HTML)

表現(CSS)

行為(JavaScript)

層疊樣式表CSS

網頁實際上是一個多層的結構，通過CSS可以分別為網頁的每一個層來設定樣式
而最終我們能看到只是網頁的最上邊一層
總之一句話，CSS用來設定網頁中元素的樣式

2.CSS第一種方式內聯樣式，行內樣式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" 
>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
        網頁分成三個部分：
            結構(HTML)
            表現(CSS)
            行為(JavaScript)
        CSS
            - 層疊樣式表
            - 網頁實際上是一個多層的結構，通過CSS可以分別為網頁的每一個層來設定樣式
                而最終我們能看到只是網頁的最上邊一層
            - 總之一句話，CSS用來設定網頁中元素的樣式    
     --> 



     <!-- 
         使用CSS來修改元素的樣式

         第一種方式(內聯樣式，行內樣式)：
            - 在標籤內部通過style屬性來設定元素的樣式
            - 問題：
                使用內聯樣式，樣式只能對一個標籤生效，
                    如果希望影響到多個元素必須在每一個元素中都複製一遍
                    並且當樣式發生變化時，我們必須要一個一個的修改，非常的不方便

            - 注意：開發時絕對不要使用內聯樣式

      --> 


  <p style="color: red; font-size: 60px;">少小離家老大回，鄉音無改鬢毛衰</p>
  <p style="color: coral; font-size: 60px;"> 落霞與孤鶩齊飛，秋水共長天一色</p>
</body>
</html>

3.CSS第二種方式內部樣式表

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 
        第二種方式（內部樣式表）
            - 將樣式編寫到head中的style標籤裡
                然後通過CSS的選擇器來選中元素併為其設定各種樣式
                可以同時為多個標籤設定樣式，並且修改時只需要修改一處即可全部應用
            - 內部樣式表更加方便對樣式進行復用
            - 問題：
                我們的內部樣式表只能對一個網頁起作用，
                    它裡邊的樣式不能跨頁面進行復用
     -->
     <style>
       p {
         color: coral;
         font-size: 20px;
       }
     </style>
</head>

<body>

  <p>落霞與孤鶩齊飛，秋水共長天一色</p>

  <p>少小離家老大回，鄉音無改鬢毛衰</p>
  
</body>

</html>

4.CSS第三種方式外部樣式表

html檔案引用css檔案，css檔案修改html檔案內容的樣式。

在這裡插入圖片描述

4.1.引用外部css檔案

p {
  color: chartreuse;
  font-size: 50px;
}

4.2.Html檔案

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 
        第三種方式 （外部樣式表） 最佳實踐
            - 可以將CSS樣式編寫到一個外部的CSS檔案中,
                然後通過link標籤來引入外部的CSS檔案
            - 外部樣式表需要通過link標籤進行引入，
                意味著只要想使用這些樣式的網頁都可以對其進行引用
                使樣式可以在不同頁面之間進行復用
            - 將樣式編寫到外部的CSS檔案中，可以使用到瀏覽器的快取機制，
                從而加快網頁的載入速度，提高使用者的體驗。
     -->
     <!-- 引用外部css樣式檔案 -->
   <link rel="stylesheet" href="./style.css">  

</head>

<body>

  <p>落霞與孤鶩齊飛，秋水共長天一色</p>

  <p>少小離家老大回，鄉音無改鬢毛衰</p>
</body>

</html>