2017年12月4日 星期一

HTML CSS (2) - CSS介紹

2-1 CSS介紹及用途

html設計出的網頁文字顏色等能夠改變，設定樣式。
  1. 新增css資料夾
  2. 新增副檔名為css的檔案，如style.css
  3. 在html內的header中新增<link> tag
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
  • rel: 定義該檔案和連結檔案的相對關係，css則需要設定為stylesheet
  • type:連結檔案的格式
  • href: 相對路徑的css檔
CSS可針對html標籤指定樣式 （注意要有中括號，內為屬性＋冒號＋value＋分號）
  • 針對h2標籤內的字體顏色做變化： color
  • 文字大小： font-size
1
2
3
4
h2{
  color: pink;
  font-size: 40px;
}



除錯方式：
使用開發者工具看右邊的欄位css，若有語法等問題則會出現黃色驚嘆號










2-2 CSS class selectors

目的：當頁面有同一個tag，但想讓他們有不同的顏色或文字大小設定時，可使用class selector
  1. html內，在想要特別上訂顏色的tag旁邊加入class name，class name可自己取
    2. <h2 class="info">作品紹介</h2>
  2. 在css內，設定如下 (注意class name前面要有一個點)
    3. .info{
  color: tomato;
}
  3. html內開啟開發者模式，可以看到是哪一個css的第幾行有特別設定











2-3 CSS selectors

用途：可以讓使用者知道這邊的文字或項目可能可以點選或其他用途
  • 滑鼠滑過：:hover
  • 選擇可以點選的超連結時：:active
a:hover{
  color: gray;
  border-bottom: 5px solid red;
}
a:active{
  color: yellow;
}


2-4 使用CSS設定文字段落等樣式


p{
  color: gray;
  font-family: Courier New;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
  text-indent: 36px;
  text-decoration: underline;
}

  • font-family: 文字字體
  • line-height: 行間的高度
  • text-align: align方向
  • text-indent: 縮排
  • text-decoration: 樣式，可以是下底線等(line-through是畫註)

2-5 根據標籤設定邊框


border內順序：border-width, border-style and border-color.

h2 {
  border: 5px dashed #FFF8DC;
}
img{
  border-top: 1px solid black;
  border-left: 1px solid blue;
  border-right: 1px solid pink;
}

可定義標籤的邊框樣式，圖片也可以，只要寫在針對的tag內

  • border: 四周的邊框樣式
  • border-top/left/right/bottom: 可針對任一邊

完成項目：







張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)