iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
0

菜菜菜的前端學習日誌 - Day6

Css Attribute

今天兒呢來一點常用的CSS屬性

CSS撰寫位置

CSS屬性該寫在哪兒呢?!

  1. 寫在<style></style>標籤內,而 style 標籤是寫在<head></head>標籤內
<!DOCTYPE html>                
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
    </style>
</head>
<script>
    
</script>
<body>
    
</body>
</html>
  1. 直接寫在HTML Tags內,例:
<h1 style="font-size: 16px;"></h1>
  1. 另外寫在一個CSS檔案,再引入到HTML檔案內,而引入的方法如下
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

常用屬性

元素類型

display: block元素類型有許多而最常用的如下

  1. display: block上一篇所提到區塊元素預設為此,前後會帶有換行符號,所以設定為此類型之元素該行只會有此元素
  2. display: inline為行內元素預設之類行,前後未帶有換行符號,所以元素會接續排列,無法設定寬高,寬高以內容撐開
  3. display: inline-block排列方式以inline的方式呈現,但擁有block的屬性,可以設定寬高,上下內外距等屬性
  4. display: none設定為此類型,為不顯示該元素
  5. display: flexflex是現今最新最流行的排版方式,布局方式與 block類似,都會強迫換行,卻具備更多彈性的設定

顏色

color="color code"這個屬性主要是用在文字上
例如<h1 style="color: #000000;></h1>

而色碼有以下幾種格式

  1. 直接撰寫顏色的英文單字,例如:red、blue、green...等
  2. #000000~#ffffff分別是從黑色到白色,如果是連續2個數字一樣呢就能縮寫,例如:#000000就能簡寫成#000、#ff33bb能簡寫成#f3b
  3. rgb(0,0,0)~ rgb(256,256,256)也是從黑色到白色,參數區間是從0~256
  4. 最後是rgba(0,0,0,1)前面3個參數跟rgb是一樣的,第4個參數是透明值(opacity)從0~1,例如:rgba(0,0,0,0.4)就能產生半透明的黑色

文字大小

font-size: 16px能夠去設定文字的大小

寬及高

width: 200px
height: 200px

設置元素的寬及高,一般固定大小的元素單位使用px,但現在因行動裝置普及,單位會使用 % 或是 vhvw 來達到RWD(響應式網頁)的效果

背景

背景效果有許多,我們來一一列出吧
background-color: red背景顏色,就跟上面提到的 color是一樣的,只是它是用在背景
background-image: url(URL)背景圖片,URL填入引入圖片之位置
background-repeat: repeat背景重複,設定背景圖片是否重複
背景重複又可分為: repeat 重複、 no-repeat 不重複、 repeat-x 水平重複、 repeat-y 垂直重複

上述屬性能夠寫在一起background: url(URL) no-repeat

background-size: cover設置背景的大小,參數有以下幾種

  1. auto: 背景圖片大小會以原始圖片大小顯示
  2. cover: 大小會以撐滿整個容器的大小,如果圖片比例跟容器比例不同,會有部份圖片無法顯示
  3. contain: 主要使用再圖片大小大於容器大小,能夠使背景圖片能夠完整呈現,如果比例不同,會使得背景圖片旁邊會留白(如果背景設定不重複)
  4. length: 可以設定寬度及長度,例如:
    background-size: 200px 200px第一個參數是第二個參數是
    如果只填寫一個參數background-size: 50%他會是寬度50%、高度auto,他就會以原始圖片比例縮放至寬度50%

區塊模型(Box Model)


~參考來源:w3school~

Box Model定義了外邊距(margin)、邊框(border)、內邊距(padding)

外邊距

外邊距是圍繞在元素邊框的空白區域,margin參數有4個
margin: 1px 1px 1px 1px //依序為上、右、下、左

全部參數相同也能寫成margin: 1px

如果上下或左右相同的話也能寫成margin: 1px 2px //上下1px、左右2px

如果元素類型為block 可以設定左右為auto使該元素置中

也可以針對單一方向設定

margin-top: 1px
margin-right: 1px
margin-bottom: 1px
margin-left: 1px

內邊距

內邊距是圍繞在元素邊框內的空白區域,同margin參數有4個

padding: 1px 1px 1px 1px //依序為上、右、下、左

其屬性規則同margin,也可以針對單一方向設定

padding-top: 1px
padding-right: 1px
padding-bottom: 1px
padding-left: 1px

邊框

邊框是圍繞元素內容和內邊距的線

邊框的屬性也有許多

border-style: solid編筐樣式參數有許多,最常用的有solid實線、dashed虛線、double雙實線、dotted點狀線
border-width: 1px邊框的寬度,常用單位為px
border-color: red邊框顏色,參數填入色碼

而上述這些屬性也能寫在一起
border: 1px solid red

文字對齊

text-align: left預設的文字對齊方式是left
text-align: right靠右對齊
text-align: center置中對齊
text-align: justify分散對齊
text-align: inherit繼承父層對齊方式

垂直對齊方式

常用的垂直對齊方式如下
vertical-align: middle垂直置中
vertical-align: top頂端對齊
vertical-align: bottom底部對齊

定位

參數值有4個: top,right,bottom,left

position: static預設值,沒有定位
position: relative相對定位,以當前位置定位進行位移
position: absolute絕對地位,以除了static之父層定位進行位移
position: fixed絕對定位,以瀏覽器畫面定位進行位移


上一篇
HTML Tags
下一篇
CSS選擇器
系列文
菜菜菜的前端學習日誌30

尚未有邦友留言

立即登入留言