<基礎CSS>

網頁小社第二堂

講師:嗯嗯

複習一下

<h1>這是字大h1標題</h1>
<h6>這是字小h6標題</h6>
<p>這是文字段落</p>
<b>這是粗體字</b>
<i>這是斜體字</i>
<u>這是底線字</u>
<s>這是有刪除線的文字</s>
<!-- 這是註解 -->
<br> <!-- 這是換行 -->
<hr> <!-- 這是水平線 -->
<img src="圖片連結" alt="圖片替代文字">
<a href="連結">顯示的文字</a>

<設計>

漂釀的網頁

什麼是好的網頁

使用100種顏色看起來100色繽紛?

動畫做超多?

盡可能排滿版面?

新細明體?

使用者使用時像走迷宮?

顏色超重要!

選定幾個顏色就好 不要太花

如果是有品牌的建議與品牌logo同色系

適當留白也不錯!

如果版面太多東西會找不到

空白也可以創造酷酷的設計感

但也不要太白啦

動畫不要太複雜

不然使用者會等動畫跑完等到瘋掉

適當動畫可以增加活潑感和質感

還可以變很酷的感覺

字體也重要!!

相信大家對新細明體很有意見吧

太花的字體反而會讓使用者看不懂

使用者操作網頁

絕對不要很複雜 不然會被罵

提示文字要清楚讓使用者找到目的

<CSS>

比HTML更像查資料比賽

他是什麼東東

階層式樣式表(Cascading Style Sheets)

美編、動畫基本上都可以用它

style.css

在HTML的<head></head>裡加<link rel="stylesheet" href="./style.css">

針對物件改變樣式

常用屬性-顏色

color:文字顏色

background-color:背景顏色

#色票#A7D0D9

rgba(r,g,b,透明度0~1)rgba(168, 208, 217, 0.85)

直接寫顏色→redblue

顏色推薦網站-Adobe Color

常用屬性-距離

padding:內距

margin:外距

常用單位:

px:就像cm一樣的道理

vw:螢幕寬度的幾%

vh:螢幕寬度的幾%

常用屬性-距離

margin/padding-top/bottom/left/right:分別設定上下左右

margin/padding:上  下  左  右

margin/padding:上  左右  下

margin/padding:上下  左右

margin/padding:上下左右

auto→剩下空間

margin:auto→置中

margin-left:auto→置右

常用屬性-邊框

border:邊框粗細 邊框顏色 邊框樣式

border-radius:圓角

border-top/bottom/left/right:設定上下左右邊框

常用屬性-邊框

常用屬性-文字

font-size:字體大小

font-family:字型

font-weight:字體粗度

line-height:行距

letter-spacing:文字間距

text-align:靠左(left) or 靠右(right) or 置中(center)

class/id

class:像是一個班級

可以有很多人都是同一個class

一個人也可以有很多個class

 

id:像是身分證

一個id只能有一個人擁有

一個人也只能有一個id

class/id

在HTML中賦予元素

<h2 id="orange">藍色字啦</h2>
<h3 class="red">紅色字啦</h3>
<h3 class="yellow">背景顏色是黃色</h3>
<h3 class="red yellow">字是紅色背景是黃色</h3>

在CSS中選取後調整

#orange{
  color: blue;
}
.red{
  color: red;
}
.yellow{
  background-color: yellow;
}

選擇器

選擇器{

屬性: 值;

}

h1{
  color: red;
  font-size: 16px;
}

自己玩玩看啦

下一堂課會教比較難的CSS喔

北資第二堂網頁小社課

By gracesu307

北資第二堂網頁小社課

  • 260