|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 CSS中有時可能會發生代碼的沖突,并且無法執行變量,算術計算等。通過使用CSS預處理器可以進行編寫接近變量和四規計算等程序的寫法,所以,接下來的這篇文章就來給大家分享關于如何使用CSS預處理器的方法。我們先來看一下什么是CSS預處理器? 默認的CSS是到現在為止不可能實現的描述,CSS預處理器是為了有效地描述CSS的東西。 但是,CSS預處理器不能在瀏覽器中使用。 雖然有各種各樣的Sass,Less,但到目前為止它似乎仍然很難再CSS中描述,不過是被稱為“新的CSS擴展版本”。 主要的預處理器類型 Sass Sass是一個通過轉換scsss的CSS文件,擴展名是“.scss”使用變量和公式添加到CSS編程風格中。 通過轉換(編譯)“style.scss”的Sass文件,您可以創建“style.css”。 要使用它,你必須安裝ruby。 LESS LESS就轉換(編譯)像Sass這樣的LESS文件。 變量的概念可以更少,因此您可以計算它,也可以分層次地編寫。 但是,如果不安裝node.js來使用“style.less”,則不會轉換“style.css”。 我們來看具體的例子 如何寫LESS的情況 HTML <h1>hello,php中文網!</h1> <h2>hello,php中文網!</h2> LESS @mycolor: blue;
h1 {
font-size: 30px;
font-color: @mycolor;
}
h2 {
font-size: 20px;
font-color: @mycolor;
}瀏覽器顯示效果如下:
HTML <h1>hello,php中文網!</h1> <h2>hello,php中文網!</h2> style.css文件 h1 {
font-size: 30px;
font-color: blue;
}
h2 {
font-size: 20px;
font-color: blue;
}這種情況下,如果要將顏色變色,在全部變色的情況下,如果想要改變2個h1h2的話,就用變量進行如下的描述。 @mycolor: blue;
h1 {
font-size: 30px;
font-color: @mycolor;
}
h2 {
font-size: 20px;
font-color: @mycolor;
}以上就是CSS預處理器怎么使用的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!