2018 iT 邦幫忙鐵人賽

DAY 6

Modern Web

菜菜菜的前端學習日誌系列第 6 篇

CSS Attribute

2018鐵人賽前端

Andy Tsai

團隊好想工作室第一屆鐵人賽

2017-12-25 00:28:40

3706 瀏覽

分享至

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

Css Attribute

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

CSS撰寫位置

CSS屬性該寫在哪兒呢？！

寫在<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>

直接寫在HTML Tags內，例：

<h1 style="font-size: 16px;"></h1>

另外寫在一個CSS檔案，再引入到HTML檔案內，而引入的方法如下

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

常用屬性

元素類型

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

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

顏色

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

而色碼有以下幾種格式

直接撰寫顏色的英文單字，例如：red、blue、green...等
#000000~#ffffff分別是從黑色到白色，如果是連續2個數字一樣呢就能縮寫，例如：#000000就能簡寫成#000、#ff33bb能簡寫成#f3b
rgb(0,0,0)~ rgb(256,256,256)也是從黑色到白色，參數區間是從0~256
最後是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，但現在因行動裝置普及，單位會使用 % 或是 vh 及 vw 來達到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設置背景的大小，參數有以下幾種

auto: 背景圖片大小會以原始圖片大小顯示
cover: 大小會以撐滿整個容器的大小，如果圖片比例跟容器比例不同，會有部份圖片無法顯示
contain: 主要使用再圖片大小大於容器大小，能夠使背景圖片能夠完整呈現，如果比例不同，會使得背景圖片旁邊會留白(如果背景設定不重複)
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 篇

RSS系列文訂閱系列文

54 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

菜菜菜的前端學習日誌系列 第 6 篇