【Hello CSS】第一章-CSS的語法與工作流

BlackHole1 發布于2019-05-23 17:34 / 1120人閱讀

摘要：本篇則主要介紹的語法與是如何工作的。語法基本規則規則主要由兩部分組成選擇器與聲明。屬性與值之間由冒號隔開，聲明與聲明直接由分號隔開。是用來定義使用在樣式表中的命名空間的規則。用來檢測規則組的規則是否生效。

作者：陳大魚頭

github： KRISACHAN

在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生原因以及發展歷史，了解了CSS的存在意義。從正篇篇開始將會正式開始介紹CSS這門語言的特點與功能。本篇則主要介紹CSS的語法與CSS是如何工作的。

CSS語法 1. 基本規則

CSS規則主要由兩部分組成：選擇器(selector)與聲明(declarations)。

選擇器(selector)是開發者希望改變樣式的HTML元素。

聲明(declarations)則是開發者制定的希望HTML改變的元素規則，可以是一條或多條。

每條聲明(declarations)由一個屬性(property)和一個值(value)組成。

屬性(property)是開發者希望設置的樣式屬性（style attribute）。

值(value)為屬性的具體內容。

屬性與值之間由冒號隔開，聲明與聲明直接由分號隔開。

CSS中的注釋以 /* 開始并以 */ 結束。

/* selector {property: value} */
h1 {color:red; font-size:14px;}

上面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。

這是基本規則，具體規則請看CSS 基礎語法。

2. 樣式表書寫規則

每個HTML元素都有初始的樣式，但是也可以經過開發者書寫而改變樣式規則。

HTML的元素樣式修改有以下的書寫規則。

內部樣式表（寫在標簽內部）


<html>
  <head>
    <style>
        h1 {color:red; font-size:14px;}
    style>
  head>
  <body>
  body>
html>

內聯樣式（寫在HTML標簽中）


<html>
  <head>
  head>
  <body>
  	<h1 style="color:red; font-size:14px;">h1>
  body>
html>

外部樣式表（寫在CSS文件中，引入到HTML里）


h1 {color:red; font-size:14px;}



<html>
  <head>
      <link rel="stylesheet" href="style.css">
  head>
  <body>
  	<h1>h1>
  body>
html>

3. @規則（at-rule）

一個at-rule就是一個CSS語句，以@開頭，后接標識符，最后以；結束。

@charset

@charset用于定義樣式表中使用的字符編碼。它必須寫在樣式表的最開頭且前面不可有別的字符。

/* @charset ""; */
@charset "UTF-8";

@import

@import用于導入外部CSS樣式表文件。

/* @import url; */
/* @import url list-of-media-queries; */
@import "custom.css";
@import url("fineprint.css") print;

@namespace

@namespace是用來定義使用在CSS樣式表中的XML命名空間的@規則。

/* @namespace ");
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

@media

@media用于定義在一個或多個設備類型、具體特點和環境的媒體查詢來應用樣式。

/* @media */
@media screen and (min-width: 900px) {
    h1 {
        color:red;
        font-size:14px;
    }
}

@page

@page用于在打印文檔時修改某些CSS屬性。@page規則只能修改margin、orphans、widow 和 page breaks of the document，對其他屬性的修改是無效的。

/*
 *  @page  {
 *    
 *  }
 */
@page {
    size: 10in 20in;
    margin: 10% 20%;
}

@keyframes

@keyframs通過定義動畫序列中的關鍵幀來控制CSS動畫不同步驟的狀態。

/* @keyframes */
@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

@supports

@supports用來檢測規則組的規則是否生效。規則與@media類似

/*
 *  @supports  {
 *    
 *  }
 */
@supports (display: flex) {
    div {
        display: flex;
    }
}

@viewport

@viewport用于設置視口（viewport）的特性。

/*
 * @viewport {
 *    
 * }
 */
@viewport {
	min-width: 640px;
  	max-width: 800px;
}

@viewport {
    zoom: 0.75;
    min-zoom: 0.5;
    max-zoom: 0.9;
}

@viewport {
    orientation: landscape;
}

@counter-style

@counter-style用于自定義counter的樣式

/*
 * @counter-style  {
 *   
 * }
 */
@counter-style circled-alpha {
    system: fixed;
    symbols: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?;
    suffix: " ";
}

.items {
    list-style: circled-alpha;
}

@font-face

@font-face用于給網頁指定文本字體。

/*
 * @font-face {
 *    
 * } 
 */
@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

body { font-family: "Bitstream Vera Serif Bold", serif }

@doucment

@document如果滿足條件組的條件，則規則生效（推延至 CSS Level 4 規范）

/*
 * @document name(guide) {
 *    
 * }
 */
@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*") {
  /* 該條CSS規則會應用在下面的網頁:
     + URL為"http://www.w3.org/"的頁面.
     + 任何URL以"http://www.w3.org/Style/"開頭的網頁
     + 任何主機名為"mozilla.org"或者主機名以".mozilla.org"結尾的網頁     
     + 任何URL以"https:"開頭的網頁 */

  /* make the above-mentioned pages really ugly */
	body {
        color: purple;
        background: yellow;
    }
}

注：上面的@規則屬性并非完整，還有少量相關的沒有列出，需要詳細列表的可以翻閱MDN

CSS是如何工作的？

頁面渲染機制

在講CSS的工作流程之前，首先來簡單看看頁面的渲染機制。

頁面渲染可分為下面5個步驟：

處理HTML來創建DOM tree；

處理CSS來創建CSSOM tree；

根據DOM跟CSSOM來合并render tree；

根據render tree來布局；

繪制render tree。

以上便是頁面渲染的過程。

CSS的工作流程

從上面的頁面渲染流程可以知道瀏覽器在解析了HTML跟CSS之后便開始合并渲染，簡單來說就是繪制帶有樣式的HTML規則。

CSS的工作流程就是把CSS規則定義到DOM tree上。

HTML與CSS具體解析規則屬于編譯原理的內容，在這里就不作展開了。但是有在CSS工作的過程中有兩個詞值得注意的就是重排（reflow）跟重繪（repaint）。

重排：render tree的重新構建叫重排。也就是當頁面布局或者DOM元素的幾何屬性發生變化時，就會發生瀏覽器重排。以下5種情況便會引發瀏覽器回流：

頁面渲染初始化；

DOM元素的增刪；

DOM元素的位置、尺寸以及引起尺寸變化的內容改變；

resize事件發生時。

重繪：render tree中只影響外觀而不影響風格的屬性改變就叫重繪。例如color與background-color的改變。

注：后面的文章會仔細講解重排（reflow）跟重繪（repaint）以及相關的性能問題與優化。

參考資料：

瀏覽器是如何工作的？

CSS是如何工作的？

CSS語法

CSS參考 MDN

層疊樣式表

瀏覽器渲染頁面的過程

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

云服務器 GPU云服務器 css與html的區別 html與css的區別 css與html html與css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/7394.html

【Hello CSS】第一章-CSS的語法與工作流

摘要：本篇則主要介紹的語法與是如何工作的。語法基本規則規則主要由兩部分組成選擇器與聲明。用于自定義的樣式用于給網頁指定文本字體。作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生原因以及發展歷史，了解了CSS的存在意義。從正篇篇開始將會正式開始介紹CSS這門語言的特點與功能。本篇則主要介紹CSS的語法與CSS是如何工...

kelvinlee 2019-08-30 10:49 評論0 收藏0
從css到頁面樣式渲染

摘要：對應多種語法規則可以為指定樣式。渲染頁面繪制到屏幕后，頁面結構的改變也有可能導致渲染樹重新計算，其中重排和重繪是最耗時的部分。寫了這么多class,color,background,display...; 也許有時候會疑惑，怎么就顯示在頁面上，改變元素的樣式。本文簡明介紹整個解析，匹配，渲染過程 css 描述 css 是Cascading Style Sheets的簡寫，是一種樣式...

Nekron 2019-08-30 15:43 評論0 收藏0
CSS Conf -《新時代CSS布局》學習總結

摘要：分享嘉賓簡介新時代布局的分享者是新加坡的國際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經常是令前端開發者頭痛的一塊工作。布局系統在這一小節中，慧晶老師主要分享了跟這新時代布局的三大棟梁。的首個公開工作草案是在發布的，而的則是發布。作者：陳大魚頭 github： KRISACHAN 記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛好者也...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
CSS Conf -《新時代CSS布局》學習總結

摘要：分享嘉賓簡介新時代布局的分享者是新加坡的國際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經常是令前端開發者頭痛的一塊工作。布局系統在這一小節中，慧晶老師主要分享了跟這新時代布局的三大棟梁。的首個公開工作草案是在發布的，而的則是發布。作者：陳大魚頭 github： KRISACHAN 記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛好者也...

libxd 2019-05-23 11:56 評論0 收藏0
webpack V3.X 入門指南(完)

摘要：通俗的說，預處理器用一種專門的編程語言，進行頁面樣式設計，然后再編譯成正常的文件，以供項目使用。在開發過程中，使用擴展名為的文件來編寫樣式 webpack 前言這篇文章是我在學習過程中對自己的一個記錄和總結，也希望可以幫助到和我當初同樣對webpack有困惑的小伙伴我在自學webpack時也參考了很多大神的文章，參考的帖子太多就不一一謝過了，再次感謝各位大神的幫助文章中的每個例...

Object 2019-08-21 17:23 評論0 收藏0

發表評論

登陸后可評論

0條評論

BlackHole1

男|高級講師

我要關注我要私信

TA的文章

#閃購#RackNerd：4核8G內存100G SSD硬盤5TB流量，$89/年，洛杉磯DC02機房

閱讀 2529·2021-09-24 10:29
怎么創建虛擬主機-如何創建虛擬主機？

閱讀 3810·2021-09-22 15:46
操作符sizeof與函數strlen哪些事

閱讀 2580·2021-09-04 16:41
前端每日實戰：56# 視頻演示如何用純 CSS 描述程序員的生活

閱讀 2986·2019-08-30 15:53
移動端項目的注意點

閱讀 1265·2019-08-30 14:24
JavaScript實現簡單的購物車

閱讀 3058·2019-08-30 13:19
CSS中選擇器的權重值

閱讀 2174·2019-08-29 14:17
使用jQuery監聽掃碼槍輸入并禁止手動輸入的實現方法

閱讀 3526·2019-08-29 12:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！