Chito's Blog

圖源： https://unsplash.com/photos/7iSEHWsxPLw 我們先回顧一下 個人履歷的成品 ，學完HTML和CSS後，是否能順利做出來呢? Reset CSS 其實Chrome瀏覽器內建就有一些CSS的樣式，像超連結是藍字底線等等。然而對追求質感的網頁來說，那並不好看，所以需要將預設的CSS覆蓋掉，我們用 Eric A. and Kathryn S. Meyer 在2011年整理出的 Reset CSS ，雖然隔了10年，但還是可以work! 用法也很簡單，將CSS整段複製，貼在你的CSS上方就好了。 架構說明 網站的基本架構如下： 以下就一個個區塊介紹，順便帶一下程式碼。 這個版型大家可以拿去做成自己的個人履歷，只要將上面的資料改成自己的資料就可以使用了，使用前不需要先告知我。 container 基於閱讀時通常會將注意力放在中間，所以 container 我讓它寬度為70%並置中。 .container { width : 70% ; margin : 50px auto; } main 放頭像、姓名和個人資訊的地方，因為我希望是區塊並列的，所以我在 main 使用Flex容器，但我為了讓 avatar 和 name 可以靠得比較近，所以用另外用個Flex容器 name-container 包住 avatar 和 name 。 < div class = "main" > < div class = "name-container" > < div class = "avatar" > < img src = "avatar.jpg" alt = "" > </ div > < div class = "name" > ...

昨天講完的CSS的文字和區塊屬性後，今天要接續介紹版面佈局的屬性，以及一個非常好用的佈局容器 - Flex，上完這堂課，你的網頁佈局就可以更加彈性囉~ 那麼，我們廢話不多說，就開始今天的介紹吧! CSS版面佈局 首先，你按 F12 打開開發人員工具，應該會在 Elements >> Styles 滑到最底下看到這個畫面(Chrome一定有，其他瀏覽器不確定)： 記好這個圖，因為他就是CSS版面佈局的概念圖。 我們看這個圖，發現他像箭靶一樣一圈圈的包圍起來，主要有三層， 從外到內分別是margin、border和padding 。border我們昨天已經說過了，所以接下來我只著重在介紹margin和padding這兩個屬性該如何使用。 margin margin，又稱外距。顧名思義就是元素外側到其他元素或邊界的距離，通常用於在兩個元素間留下空間，畢竟東西都緊貼在一起也不好看對吧? 我們就用以下例子認識margin： HTML(都同一個，之後例子我就不放了)： < div class = "outside" > < div class = "inside" ></ div > </ div > CSS： .outside { width : 200px ; height : 200px ; background-color : rgb ( 138 , 138 , 138 ); margin : 50px ; } .inside { width : 100px ; height : 100px ; background-color : rgb ( 92 , 92 , 92 ); } 顯示結果為： 我們按F12打開開發者工具，點上方的紅框的圖示，接著將游標移動到淺灰色的方塊上，就會顯示如同上方的畫面。 我們可以看到橘色的部分代表margin，往淺灰色的方塊上下左右推了50px的空間。 ...

大家早安~昨天介紹完CSS的語法和選擇器後，今天要來實際告訴大家究竟有哪些常見屬性可以使用呢? CSS文字 文字顏色 color 屬性用於設定文字顏色，屬性值可以是 顏色名稱 、HEX十六進位色碼、RGB色碼或HSL色碼。 HTML： <h1 class =" name "> This is colored by name </ h1 > < h1 class =" hex "> This is colored by HEX </ h1 > < h1 class =" rgb "> This is colored by RGB </ h1 > < h1 class =" hsl "> This is colored by HSL </ h1 > CSS： .name { color : red; } .hex { color : #00946f ; } .rgb { color : rgb ( 30 , 27 , 180 ); } .hsl { color : hsl ( 298 , 71% , 46% ) } 顯示結果為： 想換成其他顏色只要到 這個網頁 挑選好顏色，再複製色碼就好了。 背景顏色 使用 background-color 屬性設定背景顏色，屬性值和文字顏色的屬性值一樣。 HTML： < h1 > 這是一般的文字 </ h1 > < h1 class = "c0" > 這是有背景顏色的文字 </ h1 > CSS： .c0 { background-color : yellow; } 顯示結果為： 文字透明度 使用 opacity 屬性設定透明度，屬性值為0~1的浮點數，數字越小越透明。 HTML： ...

CSS是什麼? CSS ，全名為 Cascading Style Sheets ，中文為 階層式樣式表 。跟HTML一樣，CSS既非標準程式語言，也不是標記語言，而是一種風格頁面語言，它能為你的HTML文件中的元素套用不同的樣式(ex: 顏色、字體…等)。CSS也分為好幾代，目前主流使用的是CSS3，而CSS3可以相容於多數的瀏覽器。 就像前面提到的，CSS就像HTML的衣服，決定了網頁的顏色以及圖案。 CSS基本語法 Selector ：選擇器，用於定位HTML元素，通常為標籤名稱、class名稱或id名稱。 Declaration ：宣告區域，用於宣告元素的屬性，包含了 屬性(Property) 和 屬性值(Value) 兩個區塊。用兩個大括號包圍，宣告間用分號分隔。 Property ：屬性，搭配屬性值使用，屬性和屬性值間用冒號區隔。 Value ：屬性值，設定前方屬性的值。 簡單講，上面那段範例所代表的意思就是： HTML文件中所有的 h1 元素，將文字顏色設為 藍色 ，字體大小設為 12px 。 CSS套用方式 CSS有三種套用的方法，分別是行內載入、內部載入和外部載入。 行內載入 直接寫在元素標籤的後面，優點是相當直覺，缺點則是較不易更改和維護。 < p style = "color: red; font-size: 20px;" > Hello, CSS! </ p > 你可能已經發現了，這不是我們學HTML時就已經用過了嗎? 沒錯! 其實你早就已經偷學到一點點CSS的語法了，只不過我會講其他更好的載入方式。 內部載入 將CSS寫在 <head> 的 <style> 中，語法如同上面的CSS語法。優點是可以大量套用格式，而且方便管理和維護，但缺點是如果CSS數量一多，整個HTML文件會顯得很冗長。 < head > ...