前端工程師的CSS學問裡,邊框當然不可或缺,今天就一起KO它!
在 CSS 中常見的邊框 (border) 屬性，分別介紹如下：
目錄
border-width: 邊線的寬度
border-style：邊框樣式
border-color：邊線的顏色
border-top/left/bottom/right: 上/左/下/右框線
border: 四邊框線 |
border-width: 邊線的寬度
border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數值單位。
/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.
border-width：邊線的樣式
border-style 屬性指定邊框的樣式。以下列出常見的 border-style 屬性以及顯示的結果：
/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.
border-color: 邊線的顏色
border-color 屬性是用來設定邊框的顏色。範例如下：
/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.
border-top/left/bottom/right: 上/左/下/右框線
我們可以將上下左右方向和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說，border-top-style 屬性就是用來設定上邊框的樣式。
讓我們再為前端工程師舉以下幾個例子：
/*上邊框為實線，下邊框為點線*/
.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線，且寬度中等*/
.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線，下邊框為紅色虛線*/
.leftbottom{border-left-style:solid;
border-bottom-style:dashed; border-bottom-color:#00FF00;}
See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.
border: 四邊框線
若前端工程師遇到四邊的邊框屬性都一樣的情形，就可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色，而不必四個邊都描述一次。
container{...
border: 1px solid #000000;
...}See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(139)
前端工程師接下來要分享另一個標籤-
<span>,快來看看它和Div標籤的不同!布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(1,447)
前端工程師必定要會的:CSS嵌入HTML的四種方法,今天就直接送你吧!在這篇中提到：CSS 是替 HTML 「化妝」用的，為 HTML 起裝飾作用。因此 CSS 不能單獨使用！畢竟有了需要化妝的「客戶」－HTML，CSS 才能發揮其效用，這樣才有生意上門嘛！HTML 負責確定網頁中有哪些內容，而 CSS 確定以何種外觀 (大小、粗細、顏色、對齊和位置) 展現這些元素。那要如何串接 CSS 的樣式到 HTML 檔案上，才能讓 CSS 發揮它的效用呢? 前端工程師都知道的，四種套用 CSS 樣式到 HTML 檔案上的方式，列舉如下：
目錄
1. 概述
2. 將 CSS 套用入 HTML 文件中的四種方法
2-1. 行內套用 (Inline)
2-2. 嵌入套用 (Embed)
2-3. 外部連接 (External Link)
2-4. 外部匯入 (Import)
3. 優先順序 |
2-1. 行內套用 (Inline)若只有少部分的地方需要改變樣式的話，我們可以在 HTML 檔案中對應的那一行內直接宣告 CSS 樣式。範例如下：
<p style='font-family:標楷體; font-size:14;'>
這是行內套用，樣式為標楷體，字體大小為 14。</p>
<p style='font-family:微軟正黑體; font-size:16;'>
這是行內套用，樣式為微軟正黑體，字體大小為 16。</p>
<p style='font-family:微軟正黑體; font-size:16; color:blue;'>
這是行內套用，樣式為微軟正黑體，字體小為 16。，顏色為藍色</p>則結果如下所示(左邊為 HTML、右邊為顯示結果)： 2-2. 嵌入套用 (Embed)CSS 樣式可以嵌入於 HTML 文件中：通常是嵌入在 <head> 內，以 <style type="text/css"> 宣告 。如下圖所示： 2-3. 外部連接 (External Link)若網頁內容較多，則所套用的 CSS 樣式也會比較多，這時就可將所有的 CSS 碼另外集中在一個獨立的「.css」檔案中。並在 HTML 文件的 <head> 與 </head> 標籤中，輸入以下代碼來宣告：<link rel="stylesheet" type="text/css" href="外部CSS檔案.css">如此一來，「外部CSS檔案.css」這個檔案中所宣告的 CSS 樣式，則會被加入 HTML 網頁中，如下面範例所示：註：左邊的格子顯示其 HTML 碼與 「外部CSS檔案.css」的 CSS 碼(須按左上方按鈕切換)；右方則為網頁顯示效果在 HTML 中套用 CSS，最常見的就是這個方式。而這個方法的優點，就是多個網頁可以共用同一個 CSS！如此一來，不僅對前端工程師，對一般人來說，維護檔案就相對容易很多。 2-4. 外部匯入 (Import)跟使用外部連接 (External Link)的作用一樣，@import 這個指令，可讓外部網頁上的 CSS 樣式表檔案被匯入進 HTML 文件中。語法如下所示：
<style type="type/css">
<!--
@import url(https://外部網頁上的CSS檔案網址)；
-->
</style>
如以下範例所示，左方的 HTML 碼在 <style> 與 </style> 間加入了 @import 指令與 CSS 樣式表的網址：
既然套用外部 CSS 樣式表的方法已經有「2-3. 外部連接 (<link href="外部css檔案的路徑">的方法)」，那為何還多出一個「@import 指令」? 其時 @import 指令最初的用意，是為了能針對不同的瀏覽器 (如 IE、火狐...或是 Apple 的 Safari 等) 而運用不同的樣式。不過現在已經沒有這個必要。 那麽，以上 4 種套用方法，HTML 套用 CSS 樣式表的優先順位又是如何呢？ 優先順序若一個 HTML 文件中，相同屬性卻包含多個 CSS 樣式表時，應該要套用哪一個呢？ 基本原則是，越接近 HTML 本身的樣式，優先權越高。因此，「行內套用」的 CSS 樣式表，通常會有第一名的優先權，因為它最接近 HTML 的元素。而排名第二的是「嵌入套用」的樣式表 - 因為這一類的樣式表是在 HTML 的 <head> 內就已經宣告的。再下來分別是匯入套用和外部連接套用的樣式表。若有多個樣式表被匯入或被連接，越後被匯入或越後被連接的，優先權就越高。優先權由最高到最低的順序如下： 行內套用的樣式表 (Inline stylesheet)嵌入套用的樣式表 (Embedded stylesheet)匯入套用的樣式表 (Imported stylesheet)外部連接套用的樣式表 (Linked stylesheet)瀏覽器本身的樣式表 (Browser's own stylesheet) 延伸閱讀：
覺得電子書很死板?多虧HTML5教學,你該改觀囉!
HTML5教學之CSS一把罩!---只要和文字有關,通通交給我
HTML5教學之CSS一把罩!---邊框和區塊和文字有相同地位 狂賀!!上Python課程的同學們你們出運了!
不懂網路行銷課程的"黑帽"跟"白帽",小心吃虧的是你!
選錯捷徑差很大,Python課程開發你的斜槓能力,讓你把斜槓變專業達內教育開幕 培養台灣IT人才進入全球企業
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(123)
今天前端工程師讓你了解,原來HTML也有像人類一樣的父子繼承關係!?聽起來也太有趣了吧
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(36)
前端工程師該如用將Div標籤應用在CSS樣式中?看完這篇,似懂非懂的知識直接KO!
不管是前端工程師，或其他業餘或初學者，在撰寫 HTML 網頁時，都知道可以用 <div> 或 <span> 標籤包住多種圖文、表格等元素，則這些被包起來的元素就被視為一個區塊。<div> 與 <span> 的用法很相似，都能將 HTML 的內容分為不同的區域。差別是被 <span> 標籤包起來的元素，被瀏覽器視為一行；而被 <div> 包起來的元素，則被視為一個區塊。
<div> 或 <span> 的元素沒有特定的含意，如果與 CSS 一同使用， <div> 可針對較大的區塊內容定義其樣式；<span> 則是為行內部分內容或細節設定樣式。
目錄
1. 概述
2. Div 與 Span 標籤概述
2-1. Div 標籤概述
2-2. Span 標籤概述 |
Div 這個標籤可以解釋為區塊，目的是將內容分為不同的區塊 (block)，而每一個 Div 區塊可以根據 CSS 中宣告的樣式而定義其外觀。用 DIV 標籤包起來 (格式大致上是這樣<div>...</div>) 的元素，會被瀏覽器會視為一塊物件。你可以用 div 將網頁內容的各元素 (圖、文、表格等等) 包起來，再針對各區塊，去做 CSS 的排板。Div 是一個區塊級容器 (block-level container)，這代表在<div>與</div> 標籤後會換行。 前端工程師都如何將 CSS 樣式套用至 <div> 區塊?通常要讓 <div> 區塊都會加個 「class 選擇器」 或是 「id 選擇器」 來套用 CSS 樣式，其語法格式會是 「 <div class="CSS 的 class 名稱">...</div> 」 或是 「 <div id="CSS 的 id 名稱">...</div> 」。「class 選擇器」 以及 「id 選擇器」 的說明，請見此兩篇： <CSS 的 ID 選擇器宣告法>、<CSS 的 Class 選擇器宣告法> 舉例來說，我們已經定義了以下的 CSS 樣式 .block-1 {
color: blue;
font-family:微軟正黑體;
font-size: 20pt;
}
.block-2 {
color: red;
font-family:新細明體;
font-size: 16pt;
}
.block-3 {
color: green;
font-family: 標楷體;
font-size: 18pt;
}
要如何使用 <div> 來套用其 CSS 樣式，其 HTML 碼如下所示: <body>
<div class="block-1">這裡是網頁<h1>第一個區塊</h1>的內容</div>
<div class="block-2">這裡是網頁<span class="block-3">第二</span>個 <span class="block-1">區</span>塊的內容</div>
<div class="block-3">這裡是網頁<h3>第三個區塊</h3>的內容</div>
</doby>
則結果如下所示(左邊為 HTML、右邊為顯示結果)：在以上的例子中，我們可以知道： 1. <div> 是一個獨立的區塊容器 (block-level container)，所以會獨自占用一行。如以上的例子中，左邊的 HTML 碼沒有使用 <br> 來斷行，而是讓三個 <div> 藉由其區塊的特性而自動分行 2. 每個 DIV 包起來的區塊裡面都可以各自加入 <h1>、 <h3> 或 <span> 等標籤做規劃。如以上的例子中，第一個區塊 (<div class=".block-1">) 中就包含了 <h1> 標籤；第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤、第三個區塊 (<div class=".block-3">) 中就包含了 <h3> 標籤 3. SPAN 包起來元素，有別於 DIV 區塊，被瀏覽器視為一行。如以上的例子中，第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤，但都在同一行內 延伸閱讀：
蛤?HTML繼承關係?前端工程師課程大解密
前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你! HTML5教學三個基礎懶人包一:初學者開從何開始?
網路行銷課程還能教什麼?當然要教主關鍵字的相關詞呀! 到底還有什麼事是python課程做不到的?
Java課程讓你不完美履歷也變完美!人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？ 布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(1,882)
因為受到外界的推崇而開始尋找Python相關資訊的我,在網路上找到了一篇介紹超詳細的文章,立馬讓我進入狀況!
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(285)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(46)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(24)
前端工程師的選擇器學起來要人命?你錯了!現在立馬簡單地分析給你聽!
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(103)
前端工程師們都不告訴你的網頁顏色代碼,今天偷偷把精隨都告訴你啦!布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(223)
