★文章內容學習來源：拉勾教育大前端就業集訓營

【14】CSS基礎（1）——認識CSS

在這里插入圖片描述

一、產生背景

從HTML產生開始，樣式屬性就是存在的；隨著HTML發展、設計者頁面要求的增多、HTML又添加了很多樣式屬性、功能（比如文本格式化標簽點擊查看），但是HTML頁面也變得越來越“臃腫”，
CSS便產生了，HTML結構與樣式分離，不再混亂，

二、概念

（一）含義

1.CSS：cascading style sheet層疊樣式表，是一種用來表示HTML樣式的計算機語言；
2.作為前端三層（點擊查看）中的樣式層，從美觀的角度描述頁面樣式；

（二）作用

1.靜態地修飾網頁，并且可以配合各種腳本語言動態地對網頁各元素進行格式化；
示例：沒有css的網頁（部分）

示例：有css的網頁（部分）
在這里插入圖片描述

三、組成

（一）cascading層疊式

CSS中貫穿始終的加載特性：層疊性、繼承性；

（二）style樣式

定義如何顯示HTML元素（比如：文字文本、背景、盒模型、浮動、定位、其它），

四、語法

（一）CSS規則概述（第三部分會詳解）

選擇器，以及一潭訓多條宣告：
如下圖
在這里插入圖片描述

（二）代碼書寫位置

1.行內式

（1）含義及舉例：

①行內式，也被習慣叫做行內式;
②書寫位置：在 HTML 標簽之上的style 屬性中書寫 CSS樣式;
所有的 CSS樣式屬性總體組成標簽的style屬性的屬性值，
如下示例

<div style="width:500px;height:500px;color:red;font-size:14px;">
  行內式/行內式書寫位置如上在HTML的div標簽內
</div>

在這里插入圖片描述

（2）實際應用情況：

★實際作業不會使用行內式（行內式）撰寫CSS代碼，原因如下：
行內式（行內式）缺點：
①行內式必須寫在標簽上，沒有完全脫離 HTML 標簽；
② css 樣式代碼讓標簽結構繁重，不利于 HTML 結構的解讀；
③一個行內式的 css 代碼，只能給一個標簽使用，如果多個標簽有相同的樣式，同樣的 css 代碼需要書寫多次，增加代碼量，

2.內嵌式

（1）含義及舉例：

①書寫位置：在 HTML 檔案中，<head>標簽內部有一個<style>標簽；
<style> 標簽書寫在< title> 標簽后面，所有 CSS代碼書寫在<style>標簽內部；
<style> 標簽有一個標簽屬性叫做type，屬性值是 “text/css”，
如下示例
HTML常用標簽中制作表格相關標簽，合并單元格部分，迷宮圖例子中<style>部分
點擊查看迷宮圖完整代碼及瀏覽器顯示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table {
            width :810px;
            height :810px;
        }
        td {
            text-align:center;
        }
    </style>
</head>

（2）實際應用情況：

★寫單個檔案練習的時候可以使用，比較方便，但是在寫大專案的時候不便使用，原因如下：
內嵌式特點

①優點

a、實作了結構和樣式的初步分離， css 只負責樣式，HTML 負責結構;
b、多個標簽可以利用一段代碼設定相同的樣式，節省代碼量，

②缺點

a、結構和樣式并沒有完全分離，代碼依舊書寫在 HTML 檔案的<style>標簽內部；
b、css 樣式只能給一個 HTML 檔案使用，不能夠被多個 HTML 檔案同時利用；
c、在 HTML 中如果 css 代碼太多，會造成檔案頭重腳輕，`

3. 外聯式

（1）含義及舉例：

外聯式 ?外聯式 CSS，也可以叫做外鏈式 CSS、外部 CSS， ?書寫位置：在一個單獨的擴展名為 .css 的檔案中， ?書寫語法：內部代碼與內嵌式樣式表中

（2）實際應用情況：

外聯式優點 ①實作了 HTML 和 css 完全分離， ②多個 HTML 檔案可以共用一個 css 檔案，便于提取公共 css，減少代碼量， ③可以實作一個 css 變化，多個 HTML 頁面同時變化，減少作業量， ④一個 HTML 檔案可以引入多個 css 檔案，可以實作同一個頁面中 css 代碼分層，

4.匯入式

（1）含義及舉例：

匯入式 ?書寫位置：在內嵌式樣式表

（2）實際應用情況：

匯入式問題 ?匯入式樣式表的作用與外聯式樣式表基本相同， ?但是由于匯入式在瀏覽器中加載時，會在 HTML 結構加載完畢后再進行編譯，如果網速比較慢時，會導致網頁出現沒有 css 樣式的效果，給用戶的體驗不好， ?實際作業中，較少使用匯入式，推薦使用外聯式樣式表，

★書寫位置總結

實際應用 ?小型案例：可以使用內嵌式 CSS， ?實際作業、大型網站專案：推薦使用外聯式 CSS，

（三）CSS規則詳解

1.以內嵌式為例:

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table {
            width: 810px;
            height: 810px;
        }
        td {
            text-align: center;
        }
    </style>
</head>

（1）所有的 css 代碼都必須書寫在<head>標簽內部的一對 <style>標簽內;
（2）css 在給某個標簽設定樣式前，必須使用選擇器先選中標簽;
（3）css 樣式的屬性，屬性名和屬性值的鍵值對寫法為k:v?；
（4）給每個選擇器添加的樣式屬性都必須寫在一對大括號 {}之內;
（5）給一個標簽添加的所有需要的樣式，都要在 {} 內部一一羅列出來，

2. 注意事項

（1）分號必要性：每條屬性后面的分號必須寫，如果不寫，會導致后面所有的代碼加載錯誤；
（2） css 中所有屬性與屬性之間對空格、換行、縮進不敏感，
以下二者等價

p { width: 300px; font-size: 14px; }

p { width: 300px; 
   font-size: 14px; }

（四）CSS注釋語法

1.語法格式：

/*中間部分為注釋內容*/

（五）習慣的代碼風格

代碼風格是實際開發中的書寫方式，并非強制標準，

1.CSS樣式格式

①展開格式：開發程序使用，代碼可讀性強，便于調錯，

<styLe>
   div {
       width: 200px; 
       height: 200px;
       background-color: skyblue; 
       margin-bottom: 10px; 
     }
</styLe>

②緊湊格式：上傳服務器時使用，減少不必要的空白字符，壓縮檔案大小，利于傳輸，

<styLe>
   div{width:200px;height:200px;background-color:skyblue;margin-bottom:10px;}
</styLe>

2.英文大小寫

CSS 中的英文可以使用大寫，也可以使用小寫；
★建議：css 中的選擇器和樣式屬性名、屬性值等都使用小寫英文，特殊情況除外，

<styLe>
   /*大寫*/
   Div {
       width: 200px; 
       height: 200px;
     }
</styLe>

<styLe>
   /*小寫*/
   div {
       width: 200px; 
       height: 200px;
     }
</styLe>

3.空格規范（方便閱讀）

①選擇器與大括號 { } 之間保留一個空格；
② 冒號后面，屬性值前面，保留一個空格，

<style>
    selector(空格){
    k:(空格)v;
    }
</style>

<style>
    p {
      color: blue;
    }
</style>

下篇繼續:CSS基礎（2）——選擇器

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255229.html

標籤：其他

上一篇：flex布局快速入門

下一篇：Vue中動態渲染排序按鈕，并傳到后端進行排序