成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

BlackHole1 / 1138人閱讀

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



作者：陳大魚頭


github： KRISACHAN

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

CSS語法 1. 基本規(guī)則 
CSS規(guī)則主要由兩部分組成：選擇器(selector)與聲明(declarations)。

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

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

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

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

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

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

CSS中的注釋以 /* 開始并以 */ 結(jié)束。

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

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

這是基本規(guī)則，具體規(guī)則請看CSS 基礎(chǔ)語法。

2. 樣式表書寫規(guī)則 
每個(gè)HTML元素都有初始的樣式，但是也可以經(jīng)過開發(fā)者書寫而改變樣式規(guī)則。

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

內(nèi)部樣式表（寫在標(biāo)簽內(nèi)部）


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

內(nèi)聯(lián)樣式（寫在HTML標(biāo)簽中）


<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. @規(guī)則（at-rule） 
一個(gè)at-rule就是一個(gè)CSS語句，以@開頭，后接標(biāo)識符，最后以；結(jié)束。

@charset

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

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

@import

@import用于導(dǎo)入外部CSS樣式表文件。

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

@namespace

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

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

@media

@media用于定義在一個(gè)或多個(gè)設(shè)備類型、具體特點(diǎn)和環(huán)境的媒體查詢來應(yīng)用樣式。

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

@page

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

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

@keyframes

@keyframs通過定義動(dòng)畫序列中的關(guān)鍵幀來控制CSS動(dòng)畫不同步驟的狀態(tài)。

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

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

@supports

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

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

@viewport

@viewport用于設(shè)置視口（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用于給網(wǎng)頁指定文本字體。

/*
 * @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如果滿足條件組的條件，則規(guī)則生效（推延至 CSS Level 4 規(guī)范）

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

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

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

CSS是如何工作的？

頁面渲染機(jī)制

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

頁面渲染可分為下面5個(gè)步驟：

    處理HTML來創(chuàng)建DOM tree；

    處理CSS來創(chuàng)建CSSOM tree；

    根據(jù)DOM跟CSSOM來合并render tree；

    根據(jù)render tree來布局；

    繪制render tree。

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

CSS的工作流程

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

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

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

重排：render tree的重新構(gòu)建叫重排。也就是當(dāng)頁面布局或者DOM元素的幾何屬性發(fā)生變化時(shí)，就會(huì)發(fā)生瀏覽器重排。以下5種情況便會(huì)引發(fā)瀏覽器回流：

頁面渲染初始化；

DOM元素的增刪；

DOM元素的位置、尺寸以及引起尺寸變化的內(nèi)容改變；

resize事件發(fā)生時(shí)。

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

注：后面的文章會(huì)仔細(xì)講解重排（reflow）跟重繪（repaint）以及相關(guān)的性能問題與優(yōu)化。

參考資料：

瀏覽器是如何工作的？

CSS是如何工作的？

CSS語法

CSS參考 MDN

層疊樣式表

瀏覽器渲染頁面的過程

【Hello CSS】系列

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



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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7394.html

相關(guān)文章

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

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

    kelvinlee 評論0 收藏0

  • 從css到頁面樣式渲染

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

    Nekron 評論0 收藏0

  • CSS Conf -《新時(shí)代CSS布局》學(xué)習(xí)總結(jié)

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

    番茄西紅柿 評論0 收藏0

  • CSS Conf -《新時(shí)代CSS布局》學(xué)習(xí)總結(jié)

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

    libxd 評論0 收藏0

  • webpack V3.X 入門指南(完)

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

    Object 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<