金魚都能懂網頁設計入門 : 網頁裝潢師CSS

CSS

Cascading Style Sheet 階層式樣式表

• inline-style：比較少使用，維護性、彈性都不方便
• style 標籤：較方便、維護性較高，大部分寫在 head 中
  寫法：

選取器（selector）{
 屬性（property）: 屬性的值（value）;
}

選擇 class 寫法

 .special{
   color: #f00;
  }

金魚都能懂 網頁設計入門 : CSS撰寫位置

CSS 撰寫位置
寫在 head 中，在 title 後方

<title></title>
<link href="style.css", rel="stylesheet">
</head>

金魚都能懂網頁設計入門 : 怎麼學CSS ?

工具介紹

• CSS 大全
  （買得到第四版）
• XMind
  • Enter鍵：新增主題
  • Tab鍵：新增子主題
  • 插入備註：添加長文字筆記
• MDN

最喜歡的一句話

不要把別人的努力，講得好像是他天資聰穎一樣

金魚都能懂網頁設計入門 : 區塊尺寸計算

佔據空間的計算

預設情況下，一個物件在畫面上所佔據的空間，包含 margin（外距）、width（寬度）、 padding（內距）以及 border（邊框）

可見尺寸的計算

包含 width、 padding 以及 border