Skip to content

week3.md

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

第三週筆記

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

目標選擇器:

<style>
p{}
</style>

鎖定所有<p></p>

<style>
#p123{}
</style>

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

<style>
.p123{}
</style>

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

  • 名有大小寫區別且不可以數字開頭
  • ul 及 ol 也可作選擇器
  • 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字首轉大寫

文字間距

text-indent: 50px ;段落開頭留白
letter-spacing: 3px ;字元間距(空白也算字元)
line-height: 0.8;行距
word-spacing: 10px;單字間距(優先於字元間距)

文字陰影

text-shadow: 2px 2px 5px red;參數為 x座標移動 y座標移動 陰影模糊 陰影顏色

連結樣式

<style>
/* 沒點過的連結 */
a:link {
  color: red;
}

/* 點過的連結 */
a:visited {
  color: green;
}

/* 游標在上時 */
a:hover {
  color: hotpink;
}

/* 點選時 */
a:active {
  color: blue;
}
</style>

可修改color以外屬性，如background-color。

列表樣式

ul {
    list-style-type:circle/square;
    list-style-image: url('圖片網址');
}
ol {
    list-style-type:upper-roman/lower-alpha;
}

展示方式

display: none; /* 不顯示 */
         inline; /* 不換行 */
         block; /* 獨立區塊，不允許其中存在其他塊元素 */

補充:同樣為隱藏元素的

visibility: hidden;

仍會占用頁面

最大寬度和寬度

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

設定max-width，元素將隨頁面變動，最大寬度固定，width則不論頁面大小，寬度都固定。

位置

position: static;/* 為靜態，預設狀態 */

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
} /* 相對頁面位置，相對左方30px距離。 */

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
} /* 相對窗口位置，無論如何滾動頁面，元素都在窗口右下方。 */

position: absolute; /* 用法同上，相對母體位置 */

div.sticky {
  position: -webkit-sticky; /* Safari瀏覽器使用需要，IE則不支援 */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
} */ 當頁面滾動，元素觸碰到視窗上的相對位置時，將固定;當元素回到原來在頁面上位置時，將固定在頁面上。 */

物件重疊

當物件重疊，

z-index: -1;

此屬性值較高的物件，將在更上層。

溢出(overflow)

overflow: visible - 可見(預設)
hidden - 隱藏、不可見
scroll - 添加了滾動條以查看其餘內容
auto- 類似scroll，但僅在必要時添加滾動條

組合器

<style>
div p {
  background-color: yellow;
}
</style>

表在div中的p，不考慮中間是否有其他元素。

筆記算期中成績，占總成績30%，沒有期中考!

有作業(算在40%平時成績) 和 期末專案(30%)

Clone this wiki locally