CSS的多重名稱真的有差嗎?前端工程師:可差多了!

 
前端工程師都要會的CSS多重名稱,一些些小細節讓你抓狂嗎?放心,今天讓你一次搞定!
有時在 HTML 中,前端工程師們會對同一個標籤給予兩個以上的 Class 名稱,如以下所示:
<div class="first second"></div>
對於這類有兩個以上的 Class 名稱的 HTML,其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你,分辨得出這些 CSS 有什麼不同嗎?
/*1. 兩個 class 中有空格*/
.first .second
/*2. 兩個 class 中沒有空格*/
.first.second
/*3. 兩個 class 中出現逗號*/
.first,.second
對於 CSS 及前端工程師的初學者來說,上述三種 CSS 因為長得很像,所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號,到底差在哪裡? 別擔心,立刻講解給你聽:
 
1. 兩個 class 中有空格的例子:五個區塊中,階層必須是要在 first 區塊之下的 second 區塊,才會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間有空格的例子 by Tedutw (@Tedutw) on CodePen.
 
2. 兩個 class 中沒有空格的例子:五個區塊中, div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間無空格的例子 by Tedutw (@Tedutw) on CodePen.
 
3. 兩個 class 中有逗號的例子:五個區塊中,只要 div class 名稱中有出現 first 或是 second 的區塊,就會顯示黑底白字的 CSS 設定
See the Pen .first與 .second中間有逗號的例子 by Tedutw (@Tedutw) on CodePen.
註 : 以上三個範例的 HTML 碼都一樣
 
 
延伸閱讀:




CSS必學!前端工程師與Div.Span標籤的應用(上)




蛤?HTML繼承關係?前端工程師課程大解密

那些前端工程師不一定會告訴你的五四三,今天在這裡你有福了!

網路行銷課程還能教什麼?當然要教主關鍵字的相關詞呀!




不想被搜尋引擎搜尋到嗎? 你一定要會SEO優化的robots.txt!!
想到海外工作嗎?選擇達內教育讓你與國際接軌!

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?
 
 
 

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

將這些前端工程師的技能帶上手,希望無窮!

 
你曉得前端工程師應該要有那些技能嗎?今天一手教給你!
曾經聽過很多這樣的說法:會用DIV+CSS,會用 Javascript 寫一些頁面特效,就是前端開發工程師的工作內容!但你知道嗎,其實前端工程師需要做的比這些多更多!下面整理了各大網路資料給你參考:

  • 會設計,不要求精湛,處理圖片,設計個小廣告是要的;




  • 精通HTML+CSS,並能快速處理各瀏覽器兼容問題;




  • 熟練掌握Javascript或Actionscript,精通加分;




  • 熟練使用JS框架,如jQuery/YUI等,並解讀過源碼,熟練多框架加分;




  • 熟悉Ajax技術,必須的;




  • 熟悉開發調試工具,如Firebug等;




  • 代碼語義化,懂優化,壓縮和反壓縮;




  • 對SEO有一定的了解,尤其是HTML結構和標籤的使用;




  • 高效合成CSS Sprite;




  • 了解伺服器方面基本知識;




  • 熟練掌握一門後端語言,如PHP/ASP.NET等,絕對加分項;




  • 有自己的網站(看對網站所有東西的把握);




  • 對移動開發有一定的了解和涉入;




  • 熟練HTML5和CSS3技術(主要用於移動應用開發);




  • 效率開發,精湛的開發軟體操作;




  • 有過用戶體驗研究,更關注人性化頁面開發;




  • 了解瀏覽器工作原理,了解w3c標準,了解web2.0;



  •  
     
     延伸閱讀:



    前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你!



    覺得電子書很死板?多虧HTML5教學,你該改觀囉!



    為了成為前端工程師,我一定要成功-認識ID選擇器



    網路行銷課程贈送學員四字訣:簡單,直白!


    全球頂級AI咖啡師就在你家? 多虧有了Python課程,讓一切成真!!


    妥善運用網路行銷課程,所有客群都靠攏

    NOWnews 今日新聞


     
     

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    想成為前端工程師或後端工程師?先知道他們的差別再說!

     
    要知道你比較適合前端工程師還是後端工程師,繼續看下去就知道了!
     
    有許多接觸網頁開發的新手,或是想要轉行,成為網頁開發工程師的人,都會有這個疑問:什麼是前端工程師、什麼是後端工程師,以及他們到底是需要哪些語言或者是技術呢?今天就讓我們來簡單介紹一下。
     
    前端工程師
    網頁前端開發一般指的是我們看到的網頁,包括裡面靜態的介面、一些酷炫的動態效果,以及用戶的交互操作等。
    網頁前端開發一般由那些技術構成呢?首先是 HTML 這個超文本標記語言,它主要用來展示一些文本,圖片,表格,連結等。
    其次是CSS,它中文翻譯為層疊樣式表,CSS 不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
    最後一門重要的技術叫做 JavaScript,一種直譯式腳本語言,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。
    學習曲線:先易後難,也就是說入門比較簡單,但是後期深入就比較困難了!
     
    後端工程師
    網頁後端開發,一般就是指我們網站的伺服器程序,他們決定了我們網站的運行邏輯,業務核心,我們通過它來處理業務,操作資料庫(增刪改查等)
    主要技術有:
    JavaJava 是一種跨平台的語言,它已經走過了 20 個年頭,見證了 PC 網際網路、移動網際網路、大數據、雲計算等網際網路浪潮,如今依然是使用最多最為廣泛的後端語言,這不僅是因為 Java 語言在發展過程中不斷的優化,更因為在發展的過程中不斷產生的優秀的框架,形成了一個龐大的java生態圈,全世界的軟體和網際網路公司絕大多數都是 Java 的用戶。Java 適合於開發大型的應用系統,應用的前景比較廣闊,系統易維護、可復用性較好。數學運算和資料庫訪問速度來講,Java 的性能也很優秀。實際上,Java 對於跨平台的大型企業之應用系統來講,幾乎已成為唯一選擇。
    PHP:PHP 是一種解釋執行的腳本語言,語法和 C 語言類似,易學又易用。PHP 適合於快速開發一些中小型應用系統,開發成本較低,能夠對變動的需求作出快速的反應,也可以節省開發周期,幫助項目儘快上線試錯。一般剛開始創業的網際網路公司,更適合使用 PHP 開發。
    GO:GO 語言由 Google 開發,其中負責人員包括了開發 Java 、UNIX 以及 C 語言的各個技術大牛,他們總結吸收了之前語言的一些優點並對缺點進行了改良,這樣出身的 GO 不得不讓人羨慕。近年來它也確實成為了開發市場的新寵,從語言排行上來看也是上升最快的語言。可以說未來是前途無限的。GO 語言現在也確實占有了一定量的後端市場,一些公司專門招人學習GO 並使用,但畢竟GO 在程式語言中還是個初生之犢,還有一段路要走。
    學習曲線:Java 曲線較穩定,且業界需求量很高。PHP 相對 Java 較容易上手。而 GO 語言又更簡單些。
     
    延伸閱讀:




    前端工程師要如何將字體單位學得好?看這就對了!-絕對單位篇




    前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇

    前端工程師之"盒子模型"大解密!(上)-邊界
    達內教育就是要幫你把不可能變可能






    網路行銷課程沒特色,網頁淪為蚊子館?
    什麼!?人工智慧竟淪為假新聞寫手?

    達內教育開幕 培養台灣IT人才進入全球企業

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    前端工程師都會的CSS背景五學問,再不學要待何時(5)背景顏色

     

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    前端工程師都會的CSS背景五學問,再不學要待何時(4)背景圖樣

     
    前端工程師都必須要上手的設定背景圖樣,還不會的,還不快點看這篇文章,讓你當個成功的初學者!
     
    除了純色背景之外,前端工程師也可以選擇使用背景圖樣設定(background-image)屬性,使用圖片取代純色作為網頁的背景。若網頁的主題不複雜的話,高質感的圖片可以讓網頁整體看起來更加豐富!使用圖片當背景需要注意網頁在不同的平台(如電腦、手機等裝置),顯示出來的效果是不一樣的!最後必須要確認背景圖片是否能夠與網頁主體和諧搭配得巧妙,且也要避免出現喧賓奪主的失誤。
    背景圖樣設定 (background-image)屬性跟背景顏色設定 (background-color)屬性一樣,能夠設定的範圍除了網頁背景外,前端工程師也可以用之來設計網頁內元素,如表格、DIV 區塊、H1-H6 等的背景圖樣,更可與背景重複屬性(background-repeat)背景固定模式屬性 (background-attachment)背景圖片位置屬性 (background-position)搭配做網頁設計。
     
    CSS background-image 基本語法如下:
    background-image: url("圖片URL位址");
    其中 url 小括號內有三種可以使用的參數,分別為 none(預設值,不顯示圖樣)、inherit(繼承自上一層的圖片)以及本例的「 url("圖片URL位址") 」圖片網址這三種。以下有兩個範例分別為設定整個網頁的背景圖片以及網頁內元素的背景圖片。
     
    CSS background-image 語法範例一、網頁背景
    background-image: url("圖片URL位址");
    請參閱Codeed上的Tedutw@Tedutw的Pen background-image-example
     
    CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定
    div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");}
    請參閱CodeedTedutw@Tedutw的Pen background-image-content-example
    以上的範例中有兩個不同的 DIV 區塊,由第一個 DIV 區塊可以看到 background-image 預設的背景圖片,若背景圖片尺寸小於 DIV 區塊時,圖片則會自動重複到填滿整個區域。而第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態只能沿著垂直方向重複。相關設定請參閱3. 背景重複設定 (background-repeat)
     



    其他常用 CSS background 背景屬性說明連結
    1. 背景顏色設定 (background-color)
    2. 背景圖樣設定 (background-image)
    3. 背景重複設定 (background-repeat)
    4. 背景固定模式設定 (background-attachment)
    5. 背景圖片位置設定 (background-position)





     
     
     
     延伸閱讀:


     前端工程師都會的CSS背景五學問,再不學要待何時(2)背景位置

    前端工程師都會的CSS背景五學問,再不學要待何時(3)重複背景
    前端工程師都會的CSS背景五學問,再不學要待何時(5)背景顏色
    董事長說:AI和網路行銷課程很重要!還愣著幹嗎?還不趕緊報名!
    這些人工智慧產業的領航者,他們正為人類的科技未來努力著! 
    快讓Java課程讓你多擁一項技能 學成馬上展開高薪斜槓高薪人生
    達內課程先就業再付款- 中時電子報
     

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    前端工程師都會的CSS背景五學問,再不學要待何時(3)重複背景

     
    想像前端工程師一樣輕鬆讓背景為重複背景模式,那你絕對不能錯過接下來的技巧!
     
    前端工程師利用CSS background-repeat 來設定背景圖片是否重覆顯示以及重覆顯示的方向,通常與 背景圖樣設定 (background-image) 搭配使用。若背景圖片是比較小的圖片,就可用 background-repeat 將小圖片自動佈滿整個網頁背景,這是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些,以免造成視覺上的雜亂);當背景圖片是一張具有顯示範圍較大的圖片,則可以用 background-repeat 的「no-repeat」指令,此可將圖片限制只顯示一次。
     
    CSS background-repeat 基本語法如下:
    background-repeat: 重複參數;
    有四種可以使用的重複參數讓前端工程師來決定重複方向或是是否重複,分別為 repeat(預設值,圖片會沿著 x 軸與 y 軸重複)、repeat-x(圖片會沿著x軸重複)、repeat-y(圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例:
     
    CSS background-repeat 各種參數的範例
    See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.
    其實除了上例的四個參數,還有一個 inherit 屬性,是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援,可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用,因此在此省略不介紹。
     




    其他常用 CSS background 背景屬性說明連結
    1. 背景顏色設定 (background-color)
    2. 背景圖樣設定 (background-image)
    3. 背景重複設定 (background-repeat)
    4. 背景固定模式設定 (background-attachment)
    5. 背景圖片位置設定 (background-position)





    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    前端工程師都會的CSS背景五學問,再不學要待何時(2)背景位置

     
    你以為背景位置的設定只能靠前端工程師嗎?靠這篇文章,你自己也做得到!
    前端工程師可用CSS background-position 用來定義背景圖片位置,它是 CSS background 的屬性之一,常與 背景圖樣屬性 (background-image)背景重複參數 (background-repeat)搭配做網頁設計,來決定網頁背景圖片顯示位置,可調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。設計時需下水平位置與垂直位置的參數,可以以數字、百分比或方向等為單位,前端工程師便能順利使圖片在正確的位置呈現。
     
    各種方向參數:
    水平方向:left - 靠左對齊、center - 置中對齊、right - 靠右對齊
    垂直方向:top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊
     
    CSS background-position 基本語法如下:
    background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
    通常使用水平方向與垂直方向的組合,來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊。除此之外,還可以微調「靠左與靠上的距離或百分比」來設計,範例如以下所示:
    background-position:right top; // 靠右靠上對齊
    background-position:right center; // 靠右置中對齊

    background-position:right; // 靠右置中對齊(如果您僅定義了一個參數,那麽第二個參數將會默認為「center(置中)」。)

    background-position:right bottom; // 靠右靠下對齊

    background-position:left top; // 靠左靠上對齊

    background-position:left center; // 靠左置中對齊

    background-position:left; // 靠左置中對齊(如果您僅定義了一個參數,那麽第二個參數將會默認為「center(置中)」。)

    background-position:left bottom; // 靠左靠下對齊

    background-position:top center; // 靠上置中對齊

    background-position:bottom center; // 靠下置中對齊

    background-position:center; //背景圖片水平位置與垂直位置均置中對齊


    background-position:30px 60px; //靠左 30px 靠上 60 px 的位置(第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)

    background-position:10% 50%; // 靠左 10% 靠上 50% 的位置(第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)

    background-position:10%; // 效果同上一行,靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值,另一個值默認為 50%。)

     




    其他常用 CSS background 背景屬性說明連結
    1. 背景顏色設定 (background-color)
    2. 背景圖樣設定 (background-image)
    3. 背景重複設定 (background-repeat)
    4. 背景固定模式設定 (background-attachment)
    5. 背景圖片位置設定 (background-position)





    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    前端工程師都會的CSS背景五學問,再不學要待何時(1)固定背景


    要深入了解前端工程師都是如何讓背景固定的,進入狀況是首要之務,快繼續看下去吧!

    CSS background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動,而它有三種不同的呈現方案:


    第一種為當滑鼠上下滾動時,背景圖片與網頁主體跟著上下滾動


    第二種為當滑鼠上下滾動時,背景圖片相對位置固定不動,呈現效果就像是網頁主體與背景是分開的


    第三種為當滑鼠上下滾動時,背景圖片絕對位置固定不動,似乎網頁主體是浮在背景圖之上的感覺。


    前端工程師們通常會將CSS background-repeat 與 背景圖樣設定 (background-image) 搭配設計。


     
    CSS background-attachment 基本語法如下:
    background-attachment: 顯示參數;
    而另外,有三種可以使用的顯示參數,來決定背景圖與網頁主體該以何種方式來搭配顯示,分別為 scroll(預設值,背景圖案的「相對位置」不會隨著滾動機制而移動,而網頁主體則會跟著滾動)、fixed(背景圖案的「絕對位置」不會隨著滾動機制而移動,而網頁主體則還是會跟著滾動,彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用)、local(背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例:
    CSS background-attachment 各種參數的範例
    請參閱CodeedTedutw@Tedutw的Pen background-attachment-example
    現在新一代的網頁多採滿版設計,其中的「background-attachment: fixed;」參數,常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用,做出網頁主體都浮在高質感的背景圖的效果。




    其他常用 CSS background 背景屬性說明連結
    1. 背景顏色設定 (background-color)
    2. 背景圖樣設定 (background-image)
    3. 背景重複設定 (background-repeat)
    4. 背景固定模式設定 (background-attachment)
    5. 背景圖片位置設定 (background-position)





    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()


    前端工程師之"盒子模型"大解密!(下)-邊框.留白


    前端工程師盒子模型的學習終於完整了!今天第二篇的出爐讓我放下心中的大石頭!
     
    複習:在盒子模式中,內容 (content) 是最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
    相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。這篇主要介紹邊框及留白:


    目錄
    1. 邊界 (margin)
    2. 邊框 (border)
    3. 留白 (padding)


     
    邊框
    Border 是邊框,介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定,CSS 碼如下:
    border: 邊界值 實線或是虛線 顏色;
    邊框設定範例如下:
    border: 1px solid #000000;
    See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.
    如以上前端工程師課程的範例,我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可,屬性不需要一個一個下,如:border-width、border-style、border-color 等等。
     
    留白
    padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding,內容的部分就會黏著邊框。padding 就會吃到背景色。

    以下是沒有設定 padding 的例子,可以看見內容的字緊鄰黑色的邊框
     
     
    以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。
    See the Pen margin:上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.
     
    Padding 的上下左右調整,語法跟 Margin 一樣,已身為前端工程師的同學特別強調,順序很重要。列舉如下:

    padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]

    padding:[上面留白值] [左邊與右邊留白值] [下面留白值]

    padding:[上面與下面留白值] [左邊與右邊留白值]

    padding:[上面與下面與左邊與右邊留白值]

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()


     
    前端工程師不能不會的盒子模型,一直不甚了解的你,看完這兩篇,保證你馬上進入狀況!
     
    子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。上圖是盒子模式的式樣(請參考上圖)。
    在盒子模式中,內容 (content) 是最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。其中,邊界是用來設定各個元素之間的距離的。
    相關的 CSS 指令,由外至內依照順序為:邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下:


    目錄
    1. 邊界 (margin)
    2. 邊框 (border)
    3. 留白 (padding)


     
    邊界
    如我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以我們可以對這四個邊逐一設定為:
  • margin-top (上邊界)

  • margin-right (右邊界)

  • margin-bottom (下邊界)

  • margin-left (左邊界)

  •  
    有三種前端工程師常用的方式可以設定邊界:分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼):
    See the Pen Margin by Tedutw (@Tedutw) on CodePen.

    在這裡,上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

    但若是前端工程師這樣寫,會不會太麻煩一些? 會!其實定義邊界尺寸的這四行 CSS 碼,是可以濃縮成一行的!以下會介紹:
     
    Margin 邊界簡化 (一行文) 表示法
    所有四個邊的邊界,都可以同時由一個 margin 屬性設定,只有一行文。它的語法如下:

    margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
     

    我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼):

    See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
    在這裡,邊界的表現跟最前面的例子一樣:上邊界為 50px,左邊界和右邊界為 10%,下邊界為 auto。

    使用這種簡化的表示方法,重點在於數字的順序:第一個值是上邊界的值,第二個值是右邊界的值,第三個值是下邊界的值,而第四個值是左邊界的值。

    這種簡化 CSS 的一行文標示方法,還有其他的方式,介紹如下:

    margin:上 右 下 左; (四個值)

    如上方例子所示

    margin:上 左右 下; (三個值)

    margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
    See the Pen margin:上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
     
    margin:上下 左右; (二個值)

    margin: [上面與下面邊界值] [右邊與左邊邊界值]
    See the Pen margin:上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
     
    margin:上下左右; (一個值)

    margin: [上下左右邊界值]
    See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.
     
    延伸閱讀:


    前端工程師之"盒子模型"大解密!(下)-邊框.留白

    CSS必學!前端工程師與Div.Span標籤的應用(上)

    CSS必學!前端工程師與Div.Span標籤的應用(下)

    白帽SEO黑帽SEO傻傻分不清嗎?網路行銷課程一次就讓你搞懂!!

    人工智慧進駐白色巨塔,預測敗血症高達八成五準確率!

    難受想哭!未來機器人會害你丟工作?快報名Python課程就對了

    中國IT教育領導品牌 達內教育集團第一家海外授權中心

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇

    前端工程師課程都會教的兩種字體單位,再學最後一種簡直如虎添翼!
    CSS ,字體單位可以分為兩大類:絕對 (absolute) 單位以及相對 (relative) 單位:(本篇介紹主要介紹相對單位
    分別介紹如下:


    目錄
    1. 絕對單位
      px (pixel 畫素)
      cm / pt / in / pc / mm
      large, medium, small
    2. 相對單位
    em
    rem
    %
    larger, smaller


     

     


    另一個前端工程師必知的字體單位:相對單位


    em


    em 是相對單位,為每個子元素透過「倍數」乘以它的父元素 (上一層元素) 的值。讓我們為前端工程師舉以下例子:在預設字體為 16px 的前題下,如果我們每一層 div 區都設定為 1.5em,則第一層子元素就是 16px x 1.5 = 24px;第二層子元素就是上一層元素的 1.5 倍,為 24px x 1.5 = 36px;由此類推...到第五層就會是 16px x 1.5 x 1.5 x 1.5 x 1.5 x 1.5 = 121.5px。


    See the Pen #demo-em by Tedutw (@Tedutw) on CodePen.



     


    rem



    rem 是相對單位,跟 em 的差別是,em 是每個元素乘以其上一層元素 (就是父元素) 的值;而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素,通常都是預設大小) 的 px 值。如下例所示:若預設字體大小為 16px,如果每一層 div 都使用 1.5rem,無論是第一層子元素還是第五層的子元素,大小永遠是 16px x 1.5 = 24px。



    See the Pen #demo-rem by Tedutw (@Tedutw) on CodePen.



     


    %



    % 也是CSS字體類別中的相對單位,跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值,差別只是 em 是倍數單位;而 % 就是百分比單位。如在預設字體為 16px 的前題下,如果我們每一層 div 區都設定為 150%,則第一層子元素就是 16px x 150% = 24px;第二層子元素就是上一層元素的 150%,為 24px x 150% = 36px;由此類推...到第五層就會是 16px x 150% x 150% x 150% x 150% x 150% = 121.5px。



    See the Pen #demo-% by Tedutw (@Tedutw) on CodePen.



     


    larger / smaller



    larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位,larger 為父層的 120%,smaller 為父層的 80%。



    See the Pen #demo-larger, smaller by Tedutw (@Tedutw) on CodePen.



    延伸閱讀:


    前端工程師要如何將字體單位學得好?看這就對了!-絕對單位篇



    HTML5教學之CSS一把罩!---邊框和區塊和文字有相同地位




    HTML5教學三個基礎懶人包三:標籤的演變你要跟上!

    未來工作自動化,怕失業?!Python課程幫你擋風雨!




    想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!




    漁民想要養好蝦;人工智慧教你命運自己掌握,不再看天吃飯



    中國IT教育領導品牌 達內教育集團第一家海外授權中心

     
     
     
     
     

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()


    CSS的字體單位讓身為前端工程師的你頭昏腦脹?今天用兩篇來鋪好你的字體基礎之路!
     
    在 CSS ,字體單位可以分為兩大類:絕對 (absolute) 單位以及相對 (relative) 單位:(本篇介紹主要介紹絕對單位
    分別介紹如下:


    目錄
    1. 絕對單位
    px (pixel 畫素)
    cm / pt / in / pc / mm
    large, medium, small
    2. 相對單位
      em
      rem
      %
      larger, smaller


     


    前端工程師必知的字體單位:絕對單位


    px (pixel 畫素)


    px 為 CSS 最常用的單位。無論字體大小、區塊或其他元素的尺寸設定,都少不了它的蹤影。一般認為:px 會依據螢幕解析度而變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢?因為在 CSS 裡面,絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中,無論設定多少 px,它就會精確的呈現,他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示,就是若使用 px 這個單位來設定大小,那麼不管頁面上其他的尺寸設定,都不會影響到他。
    而 px 的定義,理論上就是:一個像素 px 意思就是螢幕上最小的一點:16 px 就是 16 點大小。


    See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.



     


    cm、pt、in、pc、mm



    這些單位比較適用於印刷的排版軟體,在 CSS 比較少用。分別解釋如下:




    1. in:英吋,在 96 dpi 的系統上 1 in = 96 px。

    2. cm:公分,在 96 dpi 的系統上 1 cm = 37.795275593333 px。

    3. mm:公釐,在 96 dpi 的系統上 1 mm = 3.7795275593333 px。

    4. pt:印表機的每個「點」,定義為 1 pt = 1/72 in,如果在 72 dpi 的系統上 1 px = 1 pt,但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。

    5. pc:picas,定義為 1 pc = 12 pt。

    6. in:英吋,在 96 dpi 的系統上 1 in = 96 px。



    See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.



     


    large, medium, small



    字體大小的屬性有七種如下:




    1. xx-small:對應 h6 的標籤文字大小,為 medium 字體的 3/5 倍。

    2. x-small:沒有對應的標籤文字大小,為 medium 字體的 3/4 倍。

    3. small:對應 h5 的標籤文字大小,為 medium 字體的 8/9 倍。

    4. medium:對應 h4 的標籤文字大小,,根據 W3C 的規範,以 medium 預設 16px 為基礎

    5. large:對應 h3 的標籤文字大小,為 medium 字體的 6/5 倍。

    6. x-large:對應 h2 的標籤文字大小,為 medium 字體的 3/2 倍。

    7. xx-large:對應 h1 的標籤文字大小,為 medium 字體的 2/1 倍。



    由上方看出,除了 x-small 沒有對應的標籤文字大小外,其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範,大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小,則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。



    See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.



    而別忘了前端工程師還有另一種不能不知道的字體單位,下集見分曉!

     


    延伸閱讀:





    前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇


    為了成為前端工程師,我一定要成功-認識Class選擇器




    為了成為前端工程師,我一定要成功-認識ID選擇器



    台灣人工智慧在加護病房當守護天使,預測敗血症成功率達八成五!


    全球最大賣場人員自從有了這款人工智慧玩具,每個人都笑顏逐開了?!
    還在看惡評達內PTT? 有判斷力的你直接來達內試試就知道!!
    達內課程先就業再付款- 中時電子報

     

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

    Blog Stats
    ⚠️

    成人內容提醒

    本部落格內容僅限年滿十八歲者瀏覽。
    若您未滿十八歲,請立即離開。

    已滿十八歲者,亦請勿將內容提供給未成年人士。