注冊登錄
首頁 > 課程庫 > less從入門到精通
less從入門到精通

less從入門到精通

less從入門到精通

Web前端開發

24章節|66639次播放

查看課程視頻 學習交流群
304894765
6小時學習時長
更全面的職業課程大綱立即查看
  • css學習

    less學習路線

    學習任務1)了解less相關內容2)工欲善其事必先利其器適用對象網站開發人員、維護人員、管理人員學習目標學完之後能夠使用less中的變量、函數、嵌套、混合、作用域、表達式、運算。 學習簡介1. 初見less;(主要講解什麽是less,less的注釋)2. 正確使用less;(介紹less開發工具的下... 查看原文

  • css學習

    初見less

    什麽是less Less是一個Css預編譯器,意思是指它可以擴展Css語言,添加功能如允許變量(variables),混合(mixins),函數(functions)和許多其他技術,讓你的Css更具維護性、主題性、擴展性。例如PHP就不能直接和css定義變量,而通過學習less就可以進行編寫。使用l... 查看原文

  • css學習

    正確使用less

    如何使用lessLess文件只有在被編譯後才能被浏覽器識別使用。 less編譯工具1.Koala,國人開發的全平台的less編譯工具,網址http://koala-app.com。(在本次課程中,主要使用本編譯器,簡單方便實用)2.WinLess,Windows下的less編譯軟件,網址 http:... 查看原文

  • css學習

    less變量

    普通的變量Css默認不支持變量,當我們使用less之後就可以使用。其定義方式是 @變量名:值 ,如下,我們定義一個變量green,設置一個顔色green,然後將網頁背景設置爲綠色:@green: #801f77;header {  background: @green;  }注意:由于變量只能定義一... 查看原文

  • css學習

    less混合簡介

    普通混合什麽是混合混合就是一種將一系列屬性從一個規則集引入(“混合”)到另一個規則集的方式。實例.font_hn{  color: red;  font-family: microsoft yahei, "黑體", Arial, Simsun, "Arial Unicode MS", Mingliu... 查看原文

  • css學習

    less帶多個參數的混合

    帶多個參數的混合什麽是多參數:1.一個組合可以帶多個參數,參數之間可以用分號或者逗號分割。2.但是推薦使用分號分割,因爲逗號符號有兩個意思。它可以理解爲mixins參數分隔符或者css列表分隔符。官方闡述:1. 兩個參數,並且每個參數都是逗號分隔的列表:.name(1,2,3;something.e... 查看原文

  • css學習

    less嵌套規則

    嵌套規則他模仿了HTML的結構,讓我們的css代碼更加簡潔明了清晰。下面是傳統的css寫法和less寫法的對比:傳統寫法header{  width: 960px;}header h1 {  font-size: 18px;  color: green;} less寫法header{  width:... 查看原文

  • css學習

    less運算

    運算說明:任何數值,顔色和變量都可以進行運算。數值運算Less會爲你自動推斷數值的單位,所以你不必每一個值都加上單位。注意:運算符與值之間必須以空格分開,涉及優先級時以()進行優先級運算實例.wp{  margin: 0 auto;  background: forestgreen;  width:... 查看原文

  • css學習

    less函數

    這裏我們初步的了解一下函數,在最後進行詳解。Less提供了許多用于轉換顔色,處理字符和進行算術運算的函數,這些函數使用起來非常方便。最常見的rgb函數實例.bgcolor{ background:rgb(0,133,0); }Css結果:.bgcolor{ background:#008500; }... 查看原文

  • css學習

    less作用域

    Less中的作用域與編程語言中的作用域概念非常相似。首先會在局部查找變量和混合,如果沒找到,編譯器就會在父作用域中查找,依次類推使用實例@clolor:#ffffff;.bgcolor{  width: 50px;  a{    color: @clolor;  }}@clolor:#ff0000;... 查看原文

  • css學習

    less引入和關鍵字

    引入你可以引入一個或多個less文件,然後這個文件中的所有變量都可以在當前的less項目中使用!一些常用的引入 @import (reference) "main.less";  //引用LESS文件,但是不輸出@import (inline) "main.less";  //引用LESS文件,但是... 查看原文

  • css學習

    less條件表達式

    條件表達式其實就是我們在less中使用比較運算符或者表達式的判斷來輸入我們的值,根據不同的條件來輸出不同的值。比較運算符有以下幾種>,>=,=,=<,<,true。使用實例.mixin (@a) when (lightness(@a) >= 50%) {   //255/2=127.5  backg... 查看原文

  • css學習

    less循環和合並屬性

    循環在less中,混合可以調用它自身。這樣,當一個混合遞歸調用自己,再結合Guard表達式和模式匹配這兩個特性,就可以寫出循環結構。以下是我們的使用實例:.loop(@counter) when (@counter > 0) {  .loop((@counter - 1));    // 遞歸調用自... 查看原文

  • css學習

    less其它函數

    函數庫函數庫包含了許多函數,我們要講的是以下九種:① 其它函數;② 字符串函數;③ 長度相關函數;④ 數學函數;⑤ 類型函數;⑥ 顔色值定義函數;⑦ 顔色值通道提取函數;⑧ 顔色值運算函數;⑨ 顔色混合函數其它函數在這裏面就包含了五個函數如下:Color()函數解析顔色,將代表顔色的字符串轉換爲顔色... 查看原文

  • css學習

    less字符串函數

    和字符串函數相關的有4個,如下:escape()函數將輸入字符串的url特殊字符進行編碼處理不轉義的編碼:, , / , ? , @ , & , + , ‘ , ~ . ! , $轉義的編碼:# , ^ ( , ) { , } , | , ; . , : , > , < , = , [ , ]實例如... 查看原文

  • css學習

    less長度函數和數學函數

    長度相關函數1)length()函數返回集合中的條數。例子:length(1px solid #0080ff);輸出:32)extract()函數返回集合中指定索引的值。例子:@list:”banana”,”tomato”,”peach”;N:extract(@list,1);輸出:N:banana... 查看原文

  • css學習

    less類型函數

    類型相關函數一共有9個1).如果一個值是一個數字,返回真(true),否者返回(false):isnumber()2).如果一個只是一個字符串,返回真(true),否者返回(false):isstring()3).如果一個值是一個顔色,返回真(true),否者返回(false):iscolor()4... 查看原文

  • css學習

    less顔色值定義函數

    顔色值定義函數共有7個1).通過十進制紅色,綠色,藍色三種值(RGB)創建不透明的顔色對象:rgb()2).通過十進制紅色,綠色,藍色,以及alpha四種植(RGBA)創建帶alpha透明的顔色對象:rgba()3).創建格式爲#AARRGGBB的十六進制(hex representation)顔色... 查看原文

  • css學習

    less顔色值通道提取函數

    顔色值通道提取函數一共有12個1).從HSL色彩空間中提取顔色對象的色相值:hue()2). 從HSL色彩空間中提取顔色對象的飽和度值:saturation()3). 從HSL色彩空間中提取顔色對象的亮度值:lightness()4). 從HSV色彩空間中提取顔色對象的色相值:hsvhue()5).... 查看原文

  • css學習

    less顔色值運算函數

    顔色值運算函數一共有11個1).增加一定數值的顔色飽和度:saturate()2).降低一定數值的顔色飽和度:desaturate()3).增加一定數值的顔色亮度:lighten()4).降低一定數值的顔色亮度:darken()5).降低顔色的透明度(或增加不透明度),令其更不透明:fadein()... 查看原文

  • 課程源文件所屬章節:課程源文件
    下載
Web前端開發朱朝兵

朱朝兵

TA的課程

自由職業,DZ起點網創始人,一直專注前端技術與Discuz模板設計與制作! 2014年爲“中國網”旗下子網站“聚焦中國夢”欄目進行創建。

更專業的職業課程

Web前端開發23671位同學正在學習

Web前端開發

免費領取價值1888元求職寶典!

客服熱線 400-862-8862

回到頂部