iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

網頁前端基礎&Vue.js系列 第 7

認識與建立CSS樣式表(DAY7)

  • 分享至 

  • xImage
  •  

在第一篇介紹時提到Html就像禮物的實體,而我們現在要認識的CSS樣式表就像是禮物的外包裝,要如何包裝呈現給收到禮物的人;把自己的網站美化成自己和使用者喜歡且舒服的感覺,並且設計出所需要的風格。


在認識CSS各項元素和屬性前,必須先認識一下如何定義和使用CSS

  • 如何使用和定義CSS

共有4種使用方法:

  1. 將style屬性寫在html元素中(inline)
    <body style="background-color:aquamarine"></body>
  2. 在html文件的head區塊定義stlye標籤(internal)
<head>
    <style>
body {
 background-color:aquamarine;
}
</style>
</head>
  1. 建立一個CSS檔案,再與Html連結或匯入(external)
    在visual studio中先建立CSS檔案
    1. 在下圖mark的部分(鐵人project)按下滑鼠右鍵
      https://ithelp.ithome.com.tw/upload/images/20210918/20140225yLcwo7kyTY.png
    2. 按下滑鼠右鍵後可以看到下圖,然後點選 加入,再點選樣式表,這樣就建立完成了。
      https://ithelp.ithome.com.tw/upload/images/20210918/20140225x9KMN1OIfv.png
      3.在html中連結匯入CSS樣式表
連結方法:
<head>
    <link rel="stylesheet" href="樣式表名稱.css" />
</head>
匯入方法:
<head>
    <style>@import url("樣式表名稱.css")
    </style>
</head>

以上就是建立CSS的4種方式,那如果這四種方式同時使用,會優先使用哪一種呢?基本上是inline->internal->external(先->後)

結語

這篇文章短短的介紹了CSS和如何建立CSS的4種方式,下一篇將進入CSS樣式表的主軸(元素和屬性),這些元素和屬性非常非常的多,我將會介紹比較常用到和比較重要的功能。


上一篇
Html表單元素(DAY6)
下一篇
CSS選擇器(Selector)(DAY8)
系列文
網頁前端基礎&Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言