前端知識體系之CSS及其預處理器SASS LESS

2022-05-10 12:42:10 字數 693 閱讀 5211

如果你是個前端設計師,很多時候我們都在寫css,css是定義頁面樣式的指令碼,並不是一種程式語言,只是一行行單純的描述頁面元素的樣子,如果對英語熟練的話,它像說話一樣簡單,這裡舉個簡單的例子:

body

描述的是元素body,背景色白色,文字顏色黑色,寫css是一項簡單而繁瑣的工作。

ps:很多人把css和css3相提並論,尋找異同,其實就像html和html5一樣,css3是css的乙個版本,它已經被ie9以上的遵循w3c標準的現代瀏覽器所支援。

上面說道,寫css是一項簡單而繁瑣的工作,那麼能不能從把前端從枯燥無味的工作中解放出來,去做較複雜的工作呢,答案就在下面,誕生了一種叫css預處理器的語言。

css預處理器(css preprocessor)。它的基本思想是,用一種專門的程式語言,進行網頁樣式設計,然後再編譯成正常的css檔案。

一、什麼是css預處理器

css預處理器定義了一種新的語言,基本的思想是用一種專門的程式語言,開發者只需要使用這種語言進行編碼工作,減少枯燥無味的css**的編寫過程的同時,它能讓你的css具備更加簡潔、適應性更強、可讀性更加、層級關係更加明顯、更易於**的維護等諸多好處。

二、種類

目前最主流的三個預處理器 less、sass 和 stylus

三、用法

前端知識體系梳理

高頻考題 盒模型 動畫 css3 預處理器 sass less postcss.基礎其他題目 書籍推薦基礎 原型 繼承 事件流 事件委託 變數 作用域 閉包 this 上下文 事件迴圈 前端快取 正則 跨域 settimeout setinterval requestanimationframe 深...

前端知識體系 CSS相關 CSS基礎知識強化

第一優先順序 無條件優先的屬性只需要在屬性後面使用 important。它會覆蓋頁面內任何位置定義的元素樣式。ie6支援上有些bug 第二等 id選擇器,如 header,權值為0100.第三等 類選擇器 如 bar,權值為0010.第四等 型別 標籤 選擇器和偽元素選擇器,如 div first ...

web前端 css知識體系 初學者

1 選擇器 常用的選擇器有類選擇器 標籤選擇器 id選擇器 偽類選擇器 屬性選擇器等。css權重即優先順序順序是 內聯樣式 id選擇器 偽類選擇器 屬性選擇器 類選擇器 標籤選擇器 需要特別注意的是,important 會覆蓋所有樣式規則,即 important 的優先順序最高。2 定位 定位有相對...