2. 程式人生 > 其它 >快速掌握CSS知識(1)

快速掌握CSS知識(1)

阿新 • • 發佈：2020-12-22

技術標籤：前端# CSShtmlcssjava前端

CSS層疊樣式表(1)

一、CSS 簡介

  CSS 的主要使用場景就是美化網頁，佈局頁面的。

1.1 HTML 的侷限性

  HTML是隻關注內容的語義。比如 <h1> 表明這是一個大標題，<p> 表 明這是一個段落，<img> 表明這兒有一個圖片，<a> 表示此處有連結。雖然 HTML 可以做簡單的樣式，但是帶來的是無盡的臃腫和繁瑣…

1.2 CSS 網頁的美容師

  CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱。有時我們也會稱之為 CSS 樣式表

或級聯樣式表。CSS 是也是一種標記語言，CSS 主要用於設定 HTML 頁面中的文字內容(字型、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、 邊距等)以及版面的佈局和外觀顯示樣式。CSS 讓我們的網頁更加豐富多彩，佈局更加靈活自如。簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面佈局更簡單。

  CSS 與 HTML 的關係可以形象的用下圖表示。

HTML和CSS關係
  • HTML 主要是做結構的，顯示元素內容。
  • CSS 主要是美化網頁的，佈局頁面的。
  • CSS 最大的價值：讓 HTML 專注去做結構呈現，樣式講給 CSS，即將結構（HTML）與樣式（CSS）相分離。

1.3 CSS 的語法規範

  使用 HTML 時，需要遵從一定的規範，CSS 也是如此。要想熟練地使用 CSS 對網頁進行修飾，首先需要了解 CSS 樣式規則。

  • CSS 規則由兩個主要的部分構成：選擇器以及一條或多條宣告。

    CSS語法構成

  • 注意事項：

    • 選擇器是用於指定 CSS 樣式的 HTML 標籤，花括號內是對該物件設定的具體樣式
    • 屬性和屬性值以“鍵值對”的形式出現
    • 屬性是對指定的物件設定的樣式屬性，例如字型大小、文字顏色等
    • 屬性和屬性值之間用英文 “:” 分開
    • 多個“鍵值對”之間用英文 “;” 進行區分

  • 所有的樣式，都包含在 <style> 標籤內，表示是樣式表。<style> 一般寫到 </head> 上方。

    <head>
    <style>
        p {
            color: blue; 
            font-size: 30px;
        }  
    </style>
</head>
<body>
    <p>我是一個被改了樣式的段落</p>
</body>
    CSS改樣式示例

  • CSS 程式碼風格

    • 強烈推薦樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外
    • 屬性值前面，冒號後面，保留一個空格
    • 選擇器(標籤)和大括號中間保留空格

二、CSS 基礎選擇器

2.1 CSS 選擇器的作用

  選擇器(選擇符)就是根據不同需求把不同的標籤選出來這就是選擇器的作用。 簡單來說，就是選擇標籤用的。

  • CSS 樣式其實就做兩件事

    1.找到所選擇的標籤。 選擇器(選對人)。

    2.設定這些標籤的樣式，比如顏色為紅色(做對事)。

2.2 CSS 選擇器分類

  選擇器分為基礎選擇器和複合選擇器兩個大類，我們這裡先講解一下基礎選擇器。後序會講解複合選擇器。

  • 基礎選擇器是由單個選擇器組成的
  • 基礎選擇器包括：標籤選擇器、類選擇器、id 選擇器和萬用字元選擇器

2.3 標籤選擇器

  標籤選擇器(元素選擇器)是指用 HTML 標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的 CSS 樣式。

  • 語法

    標籤名 {
	屬性1: 屬性值1; 
  屬性2: 屬性值2; 
  屬性3: 屬性值3; 
  ...
}

  • 作用： 標籤選擇器可以把某一類標籤全部選擇出來，比如所有的 <div> 標籤和所有的 <span> 標籤。

  • 優點： 能快速為頁面中同類型的標籤統一設定樣式。

  • 缺點： 不能設計差異化樣式，只能選擇全部的當前標籤。

2.4 類選擇器

  如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器.

  • 語法

    .類名 {
	屬性1: 屬性值1; 
	...
}

    類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點 “.” 號顯示。每一個結構，如 <p> 、<div> 、<span> 等都可以用 class 屬性來定義它所屬的類，可以所屬多個類。

  • 注意事項

    1.類選擇器使用 “.” (英文點號)進行標識，後面緊跟類名(自定義，我們自己命名的)。

    2.可以理解為給這個標籤起了一個名字來表示。

    3.長名稱或片語可以使用中橫線來為選擇器命名。

    4.不要使用純數字、中文等命名，儘量使用英文字母來表示。

    5.命名要有意義，儘量使別人一眼就知道這個類名的目的。

  • 常見類命名推薦

    類命名含義類命名含義
    header頭content/container內容
    footer尾nav導航欄
    sidebar側欄column欄目
    wrapper頁面佈局寬度left/right/center左右中
    loginbar登入條logo標誌
    banner廣告main頁面主題
    hot熱點news新聞
    download下載subnav子導航
    menu選單submenu子選單

  • 多類名

    我們可以給一個標籤指定多個類名，從而達到更多的選擇目的。 這些類名都可以選出這個標籤.。簡單理解就是一個標籤有多個名字。

    <style>
  .box {
    width: 400px;
    height: 50px;
    font-size: 20px;
  } 
  .red {
    background-color: red;
  }
  .green {
    background-color: green;
  }
</style>

    <body>
  <div class="box red">紅色</div>
  <div class="box green">綠色</div>
  <div class="box red">紅色</div>
</body>
    多類名示例

    上述的三個 div 都呼叫了兩個類名來控制自己的樣式。

  • 注意事項：

    • 在標籤 class 屬性中可以寫多個類名
    • 多個類名中間必須用空格分開
    • 這個標籤就可以分別具有這些類名的樣式
    • 可以把一些標籤元素相同的樣式(共同的部分)放到一個類裡面
    • 這些標籤都可以呼叫這個公共的類,然後再呼叫自己獨有的類
    • 從而節省CSS程式碼，統一修改也非常方便

2.5 id 選擇器

  id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML 元素以 id 屬性來設定 id 選擇器，CSS 中 id 選擇器以 “#" 來定義。

  • 語法

    #id名 {
	屬性1: 屬性值1; ...
}

  • 注意：id 屬性只能在每個 HTML 文件中出現一次。

  • 口訣：樣式#定義，結構id呼叫, 只能呼叫一次, 別人切勿使用。

  • id 選擇器和類選擇器的區別

    • 類選擇器(class)好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用。
    • id 選擇器好比人的身份證號碼，全中國是唯一的，不得重複。
    • id 選擇器和類選擇器最大的不同在於使用次數上。
    • 類選擇器在修改樣式中用的最多，id 選擇器一般用於頁面唯一性的元素上，經常和 JavaScript 搭配使用。

2.6 萬用字元選擇器

  在 CSS 中，萬用字元選擇器使用 “ * ” 定義，它表示選取頁面中所有元素(標籤)。

  • 語法

    * {
  屬性1: 屬性值1;
  ...
}

  • 注意事項

    • 萬用字元選擇器不需要呼叫， 自動就給所有的元素使用樣式
    • 特殊情況才使用，例如清除所有的元素標籤的內外邊距的程式碼如下
    * {
	margin: 0;
	padding: 0;
}
    沒清楚內外邊距 沒清楚內外邊距

    上圖左邊是沒清除 HTML 標籤預設帶有的內外邊距，可以看到我們的元素距離瀏覽器左側和上側都有一定的空間，而使用萬用字元清除了之後就不會有，如上圖右邊所示。

三、CSS 字型屬性

  CSS Fonts(字型)屬性用於定義字體系列（font-family: “Microsoft Yahei”, Arial）、大小（font-size: 20px）、粗細（font-weight: bold）、文字樣式（font-style: normal）。

3.1 字體系列（font-family）

  CSS 使用 font-family 屬性定義文字的字體系列，即文字用什麼字型顯示。

  • 語法：

    p { font-family:"微軟雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微軟雅黑";

  • 注意點：

    1.各種字型之間必須使用英文狀態下的逗號隔開，當給出多個字型時，瀏覽器依次選擇系統擁有的字型渲染文字字型。

    2.一般情況下,如果有空格隔開的多個單片語成的字型那麼就要加引號，例如上面的 Arial 字型名稱沒有空格隔開，則不需要加引號，而 Microsoft Yahei （即微軟雅黑）字型名稱中間有空格，則要用引號。

    3.儘量使用系統預設自帶字型，保證在任何使用者的瀏覽器中都能正確顯示。

    4.最常見的幾個字型：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

3.2 字型大小（font-size）

  CSS 使用 font-size 屬性定義字型大小。

  • 語法：

    p {
  font-size: 20px;
}

  • 注意點：

    1.字型大小單位是畫素（px），是我們網頁的最常用的單位。

    2.谷歌瀏覽器預設的文字大小為16px。

    3.不同瀏覽器可能預設顯示的字號大小不一致，我們儘量給一個明確值大小，不要預設大小。

    4.可以給 body 指定整個頁面文字的大小。

3.3 字型粗細（font-weight）

  CSS 使用 font-weight 屬性設定文字字型的粗細。

  • 語法：

    p {
  font-weight: bold;
}

  • 屬性值介紹

    屬性值描述
    normal預設值（不加粗的）400
    bold定義粗體 700
    100-900400及是 normal, 700 及是 bold ，注意這個數字後沒有單位

  • 注意點

    1.該屬性常用於讓加粗標籤(比如 h 和 strong 等) 不加粗，或者其他標籤加粗。

    2.實際開發時，我們更喜歡用數字表示粗細。

3.4 文字樣式（font-style）

  CSS 使用 font-style 屬性設定文字的風格。

  • 語法：

    p {
  font-style: normal;
}

  • 屬性值介紹：

    屬性值描述
    normal預設值。瀏覽器顯示一個標準的字型樣式。
    italic瀏覽器會顯示一個斜體的字型樣式。
    oblique瀏覽器會顯示一個傾斜的字型樣式。
    inherit規定應該從父元素繼承字型樣式。

  • 注意：

    1.平時我們很少給文字加斜體，反而要給斜體標籤(em，i)改為不傾斜字型。

3.5 字型的複合屬性

  • 語法：

    body {
  font: font-style font-weight font-size/line-height font-family;
}

  • 注意點：

    1.使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開。

    2.不需要設定的屬性可以省略(取預設值)，但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用。

四、CSS 文字屬性

  CSS Text（文字）屬性可定義文字的外觀，比如文字的顏色、文字對齊、裝飾文字、文字縮排、行間距等。

4.1 文字顏色（color）

  color 屬性用於定義文字的顏色。

  • 語法：

    p {
  color: red;
}

  • color 屬性值：

    1.預定義的顏色值：red、green、blue、pink 等

    2.用十六進位制數：#FF0000、#FF6600、#0F0（#00FF00)（開發中最常用）

    3.RGB程式碼：rgb(255,0,0) 或 rgb(100%,0%,0%)

4.2 文字對齊（text-align）

  text-align 屬性用於設定元素內文字內容的水平對齊方式。

  • 語法：

    div {
  text-align: center;
}

  • 屬性值介紹：

    屬性值描述
    left預設值。左對齊
    right右對齊
    center居中對齊

4.3 文字裝飾（text-decoration）

  text-decoration 屬性規定新增到文字的修飾。可以給文字新增下劃線、刪除線、上劃線等。

  • 語法：

    a {
  text-decoration:underline;
}

  • 屬性值介紹：

    屬性值描述
    none預設值。沒有裝飾線
    underline下劃線，連結 <a>自帶下劃線
    overline上劃線
    line-through刪除線

4.4 文字縮排（text-indent）

  text-indent 屬性用來指定文字的第一行的縮排，通常是將段落的首行縮排。

  • 語法：

    div {
  text-indent: 10px;
}
p {
  text-indent: 2em;
}

  • 屬性值：

    1.通過設定該屬性為一定的畫素值，所有元素的文字內容第一行都可以縮排一個給定的長度，甚至該長度可以是負值。

    2.em 是一個相對單位，就是當前元素(font-size) 1 個文字的大小, 如果當前元素沒有設定大小，則會按照父元素的 1 個文字大小。

4.5 行間距（line-height）

  line-height 屬性用於設定行間的距離(行高)。可以控制文字行與行之間的距離。

  • 語法：

    p {
  line-height: 26px;
}

  • 注意：

    行間距單位為畫素，包括文字的高度、上間距、下間距。如下圖

    行間距示例圖

4.6 文字屬性總結

屬性表示注意點
color文字顏色通常用16進製表示，簡寫形式#fff
text-align文字水平對齊設定文字水平對齊方式，預設為靠左
text-indent文字第一行的縮排通常用相對單位 2em
text-decoration文字修飾一般用於下劃線的取消
line-height行高控制行與行之間的距離

五、CSS 引入方式

  在 html 文件中引入 CSS 樣式表有三種引入方法：

  1. 內部樣式表（嵌入式）
  2. 行內樣式表（行內式）
  3. 外部樣式表（連結式）

5.1 內部樣式表

  內部樣式表(內嵌樣式表)是寫到 html 頁面內部。是將所有的 CSS 程式碼抽取出來，單獨放到一個 <style> 標籤中。

內部樣式表

  • 注意

    1.<style> 標籤理論上可以放在 HTML 文件的任何地方，但一般會放在文件的 <head> 標籤中。

    2.通過此種方式，可以方便控制當前整個頁面中的元素樣式設定。

    3.程式碼結構清晰，但是並沒有實現結構與樣式完全分離。

    4.使用內部樣式表設定 CSS，通常也被稱為嵌入式引入，這種方式是我們練習時常用的方式。

5.2 行內樣式表

  行內樣式表(內聯樣式表)是在元素標籤內部的 style 屬性中設定 CSS 樣式。適合於修改簡單樣式。

行內樣式表

  • 注意

    1.style 其實就是標籤的屬性。

    2.在雙引號中間，寫法要符合 CSS 規範。

    3.只可控制當前的標籤設定樣式。

    4.簡單樣式可以用，複雜的不推薦用。

    5.使用行內樣式表設定 CSS ，通常也別稱為行內式引入。

5.3 外部樣式表

  實際開發都是用外部樣式表。適合於樣式比較多的情況。核心是：樣式單獨寫到CSS 檔案中，之後把CSS檔案引入到 HTML 頁面中使用。

  • 引入外部樣式表分為兩步：

    1.新建一個字尾名為 .css 的樣式檔案，檔案中沒有 <style> 標籤，直接寫樣式把所有 CSS 程式碼都放入此檔案中。

    2.在 HTML 頁面的 <head>中，使用<link> 標籤引入這個檔案。

    <link rel="stylesheet" href="css檔案路徑">
行內樣式表

相關推薦

快速掌握CSS知識(1)

技術標籤：前端# CSShtmlcssjava前端 CSS層疊樣式表(1) 一、CSS 簡介   CSS 的主要使用場景就是美化網頁，佈局頁面的。

3分鐘快速掌握Css彈性盒子佈局，不看血虧！

彈性盒子（flex） 1.語法：display：flex（定義當前元素為彈性盒子） ①彈性盒子是一種佈局方式

一文快速掌握華為雲IPv6基礎知識及使用指南

隨著5G、物聯網等新興技術領域的發展，IP空間需求巨大，IPv6成為萬物互聯的基礎，勢在必行；華為雲作為IPv6成熟商用開拓者，針對金融、廣電、媒資等不同行業推出IPv6解決方案，助力企業平滑升級到IPv6基礎架構。本文

【CSS】快速掌握CSS3中的flex佈局

技術標籤：CSScssflexhtmlcss3html5 一、flex佈局是什麼 flex佈局：彈性佈局、彈性盒子、伸縮佈局、伸縮盒子 常用於在webapp、小程式、混合app中，簡單好用

零基礎Python入門，《Python程式設計：從入門到實踐》快速掌握程式設計教程知識！

前言 Python是什麼？ Python 是一種跨平臺的計算機程式設計語言，是一個高層次的結合瞭解釋性、編譯性，互動性的面向物件的指令碼語言。目前在網際網路領域應用非常廣泛，它是一種入門非常簡單的程式語言，程式碼的

css擴充套件知識1

1.清除浮動的方法 新建一個樣式選擇器CSS命名為“.clear”，並且對應選擇器樣式為“clear:both”，然後我們在父級“”結束前加此div引入“class=“clear””樣式。這樣即可清除浮動。

快速掌握NIO和BIO的區別

NIO和BIO對比 NIO(non blocking I/O)非阻塞I/O,jdk1.4引入的新I/O，平時接觸的檔案的I/O操作是BIO，即阻塞I/O

通過3分鐘快速掌握MongoDB中regex的幾種用法

背景 Part1:寫在最前 使用MySQL或其他關係型資料庫的朋友們都知道，使用模糊查詢的用法類似於：

CSS 知識總結

註釋：/* */ CSS reset （去除預設樣式） *{ margin: 0; padding: 0; box-sizing: border-box; } ul,ol {

03-Django模型知識1

模型：是python中的類對應資料庫中的表。 ORM：物件關係對映 1、基礎示例 學生類模型欄位

快速掌握和使用Flyway的詳細教程

什麼是Flyway? 轉載：https://blog.waterstrong.me/flyway-in-practice/ Flyway is an open-source database migration tool. It strongly favors simplicity and convention over configuration.

看看吧！月薪20K以上的程式設計師才能全部掌握RabbitMq知識，你掌握了多少

一、RabbitMq基礎知識 0、概述 訊息佇列的作用就是接收訊息生產者的訊息，然後將訊息傳送到消費者

搞大資料，Java 工程師需要掌握哪些知識？

先看再點贊，給自己一點思考的時間，微信搜尋【沉默王二】關注這個有顏值卻假裝靠才華苟且的程式設計師。本文 GitHub github.com/itwanger 已收錄，裡面還有一線大廠整理的面試題，以及我的系列文章。

資料庫知識(1)

資料庫事務 事務（Transaction）是由一系列對系統中資料進行訪問與更新的操作所組成的一個程式執行邏輯單元。事務是DBMS中最基礎的單位，事務不可分割。

初入Linux的知識1

一：shell是什麼 1：Linux系統中執行的一種特殊程式 2：在使用者和核心之間充當“翻譯官” 3：使用者登入Linux系統時，自動載入一個Shell程式 4：Bash是Linux系統中預設使用的Shell程式

徹底掌握css動畫【transition】

說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發者習慣了用JavaScript來做動畫，所以就導致了許多程式設計師比較排斥來學習css動畫（至少我是），但是一個不懂css動畫的前端工程師

不要再看視訊了，也只有這份文件，能讓你快速掌握微服務體系

背景 隨著公司業務量的飛速發展，平臺面臨的挑戰已經遠遠大於業務，需求量不斷增加，技術人員數量增加，面臨的複雜度也大大增加。在這個背景下，平臺的技術架構也完成了從傳統的單體應用到微服務化的演進。

【通用技術】快速掌握JDBC資料庫開發

什麼是JDBC JDBC（Java Data Base Connectivity,java資料庫連線）是一種用於執行SQL語句的Java API，可以為多種關係資料庫提供統一訪問，它由一組用Java語言編寫的類和介面組成。JDBC提供了一種基準，據此可

快速掌握Eclipse Plugin / RCP開發思想

2019獨角獸企業重金招聘Python工程師標準>>> 快速掌握EclipsePlugin/RCP開發思想

讓你30分鐘快速掌握vue3教程

經過了漫長的迭代，Vue 3.0終於在上2020-09-18釋出了，帶了翻天覆地的變化，使用了Typescript 進行了大規模的重構，帶來了Composition API RFC版本，類似React Hook 一樣的寫Vue，可以自定義自己的hook ，讓使用者更