Skip to content

week3.md

Jump to bottom
qwezxca123 edited this page Apr 7, 2021 · 52 revisions

第三週筆記

階層式樣式表( CSS | Cascading Style Sheets )

目標選擇器:

<style>
p{}
</style>

鎖定所有<p></p>

<style>
#p123{}
</style>

鎖定擁有屬性 id="p123" 的元素

<style>
.p123{}
</style>

鎖定擁有屬性 class="p123" 的元素

  • 名有大小寫區別且不可以數字開頭
  • Javascript只能收到id
  • 單個id選擇器在一個文件只能被使用一次
  • 可混搭，如:
<style>
p.abc{}
</style>

鎖定<p class="abc"></p>

  • 通用選擇器
<style>
*{}
</style>

將套用到所有元素上

  • 同時套用多個選擇器
<style>
h1,p,.c,#a {}
</style>

CSS使用方式

  • 外部
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

rel屬性為導入文件類型
mystyle.css為CSS檔案

  • 內部
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
</html>
  • 內聯
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

註解

/* 限CSS中使用，CSS外應使用↓ */
<!-- 這個 -->

不透明度(opacity)

div {
  background-color: green;
  opacity: 0.3;
}

opacity會連同文字一同變透明，若只想背景透明應使用↓

div {
  background: rgba(0, 128, 0, 0.3) 
}

背景圖片

body {
  background-image: url("paper.gif");
}

將body背景設為同資料夾中的paper.gif，預設為x及y軸重複以填滿背景
重複模式可更改，如:

body {
  background-image: url("paper.gif");
  background-repeat: repeat-x;
}

只在x軸重複
其他還有repeat-y,no-repeat
圖片位置可更改，如:

body {
  background-image: url("paper.gif");
  background-repeat: no-repeat;
  background-position: right top;
}

圖片將出現在右上角

文字修飾(Decoration)

text-decoration:
overline頂線
line-through刪除線(或中線)
underline底線

文字轉換(Transformation)

text-transform:
uppercase轉大寫
lowercase轉小寫
capitalize字首轉大寫

Clone this wiki locally