iT邦幫忙

4

[鼠年全馬鐵人挑戰] Week09 - 超新手入門:CSS 的基本語法

大家好啊~~又見面惹~

不知道清明連假大家有沒有乖乖待在家防疫還是有出遠門走走呢?

四天連假只待在離家不遠的地方走走運動,其餘時間就是待在家休息

感覺待在家才是最安全的防疫方式呢~

當然也不忘寫這週的文章啦:)

上次寫完 HTML 的語法介紹,今天來試著寫寫介紹一下我常用的 CSS 語法吧 希望寫出來的文章大家能看的懂/images/emoticon/emoticon07.gif

CSS 基本寫法

在知道有哪些 CSS 語法前,我們要先知道的是如何正確撰寫 CSS :

<html>

 <head>

  <title> </title>
  
   <link rel="stylesheet" href="css/all.css"> 

 </head>

 <body>


 </body>

</html>

一樣的,我們先寫出一個 HTML 的格式出來,然後再加上<link rel="stylesheet" href="css/all.css">才能去抓取我們要的 CSS 檔案(對了,要記得先新增一個CSS檔案才能連動唷)
這段語法中的href="css/all.css"指的就是連結到你指定的 CSS 檔案,所以名稱不一定是 all.css唷~
要視你存的什麼檔名而定(簡單來說,就是自訂檔名囉~)

寫出一個 CSS 檔案

當引入了 CSS 檔案,我們就可以開始寫 CSS 為網頁增加不一樣的風采了,但在寫之前要注意的是寫 CSS 的格式:

footer {
  background-color: #e67683;
  height: 56px;
  margin-top: 50px;
  text-align: center;
  padding-top: 20px;
}


products {
  margin: 0 auto;
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}

這是寫 CSS 時的格式,其中的 footer、products 就是我們自定義的標籤,而我們就是要針對自定義的標籤去寫 CSS 的樣式,就是裡面的程式碼會呈現出不一樣的效果。

常見的 CSS 語法

接下來就是要介紹常用的 CSS 語法,其實 CSS 語法很多全列出來可能讀者也眼花了(誤XD
所以這裡列出常見及我常用的 CSS 語法囉XD

font-size: 字型大小 (很像我們用word寫文章的時候會設定的文字大小)
font-family: 設定字型(例如常見的新細明體、標楷體等等)
color : 字的顏色
background-color : 背景的顏色
background-image : 背景的圖案
border : 框線
a:hover : 滑鼠滑過時的樣式
text-align: center :文字置中
text-align: right :文字靠右對齊
text-align: left :文字靠左對齊
line-height : 設定行高
height : 高
width :寬
margin :外距,設定外邊界距離,可以一次設定四個邊的外距,也可以分別設定每個邊不同的外距。
padding :內距, 可以設定區域的內部距離,也可以設定 HTML 內表格內部的距離。

這些都是我剛開始最常用的語法,基本上新手一剛開始也很常用這些很基本的語法,當然在 CSS 的世界實在是太寬廣啦~要一次把所有的 CSS 語法記熟也不是件很容易的事情呢,基本上在排版過程中有遇到真正去實作到才會學習到這個語法的功能呢!往後的文章我也會慢慢分享我學習不同 CSS 語法的心得筆記,祝大家連假愉快!!!/images/emoticon/emoticon01.gif


1 則留言

0
心原一馬
iT邦新手 2 級 ‧ 2020-04-04 23:31:31

Hi, 連假愉快,
感覺整理的不錯呢,
很貼近新手的感覺~

我要留言

立即登入留言