week4 - stayjay/wp109b GitHub Wiki

CSS偽類

什麼是偽類？偽類用於定義元素的特殊狀態。

例如，它可以用於：用戶將鼠標懸停在元素上時為其設置樣式訪問和未訪問鏈接的樣式不同獲得焦點時為元素設置樣式句法偽類的語法：

selector:pseudo-class {
  property: value;
}

CSS不透明度/透明度

該opacity屬性指定元素的不透明度/透明度。

透明圖像

該opacity屬性的取值範圍為0.0-1.0。值越低，越透明

透明懸停效果

該opacity屬性通常與:hover 選擇器一起使用以更改鼠標懸停時的不透明度

導航欄

易於使用的導航對於任何網站都很重要。使用CSS，您可以將無聊的HTML菜單轉換為美觀的導航欄。導航欄=鏈接列表導航欄需要標準HTML作為基礎。在我們的示例中，我們將從標準HTML列表構建導航欄。導航欄基本上是鏈接列表，因此使用

元素很有意義：示例說明：
```
list-style-type: none;-刪除子彈。導航欄不需要列表標記
設置margin: 0;並padding: 0; 刪除瀏覽器默認設置
上面示例中的代碼是垂直和水平導航欄中使用的標準代碼
```
CSS下拉列表

HTML）使用任何元素打開下拉內容，例如或元素。使用容器元素（如
）創建下拉內容，並在其中添加任何內容。將
元素環繞在元素周圍，以使用CSS正確放置下拉內容。 CSS）的.dropdown類用途position:relative，當我們想要的下拉內容這是需要正下方的下拉按鈕（使用放置position:absolute）。本.dropdown-content類保存實際下拉內容。默認情況下它是隱藏的，並且將在懸停時顯示（請參閱下文）。注意min-width設置為160px。隨時更改此設置。提示：如果希望下拉內容的寬度與下拉按鈕一樣寬，請將設置width為100％（並overflow:auto啟用在小屏幕上滾動）。我們沒有使用邊框，而是使用CSSbox-shadow屬性使下拉菜單看起來像“卡片”。該:hover選擇器被用來顯示在下拉菜單中，當用戶在該下拉按鈕移動鼠標。
CSS圖像精靈

圖像精靈圖像精靈是放在單個圖像中的圖像的集合。包含許多圖像的網頁可能需要很長時間才能加載並生成多個服務器請求。使用圖像精靈將減少服務器請求的數量並節省帶寬。代替使用三個單獨的圖像，我們使用以下單個圖像（“ img_navsprites.gif”）：

導航圖

使用CSS，我們可以僅顯示所需圖像的一部分。在以下示例中，CSS指定顯示“ img_navsprites.gif”圖像的哪一部分

CSS [屬性]選擇器

所述[attribute]選擇器用於選擇具有指定的屬性的元素。下面的示例選擇所有具有target屬性的元素：例子
```
a[target] {
  background-color: yellow;
}
```
CSS [attribute =“ value”]選擇器

所述[attribute="value"]選擇器用於選擇具有指定的屬性和值的元素。下面的示例選擇所有具有target =“ _ blank”屬性的元素：例子
```
a[target="_blank"] {
  background-color: yellow;
}
```
CSS [attribute〜=“ value”]選擇器

該[attribute~="value"]選擇器用於選擇與含有指定單詞的屬性值的元素。下面的示例選擇具有title屬性的所有元素，其中title屬性包含以空格分隔的單詞列表，其中一個單詞是“ flower”：例子
```
[title~="flower"] {
  border: 5px solid yellow;
}
```
CSS表格

HTML表單的外觀可以通過CSS大大改善：面的示例適用於所有元素。如果只想設置特定輸入類型的樣式，則可以使用屬性選擇器：
```
input[type=text] -僅選擇文本字段
input[type=password] -僅選擇密碼字段
input[type=number] -僅選擇數字字段
```
填充輸入

使用該padding屬性可在文本字段內添加空間。提示：當彼此之間有很多輸入時，您可能還想添加一些margin，以在它們之外添加更多空間

帶計數器自動編號

CSS計數器就像“變量”。變量值可以通過CSS規則遞增（該規則將跟踪它們的使用次數）。要使用CSS計數器，我們將使用以下屬性：
```
counter-reset -創建或重置計數器
counter-increment -增加計數器值
content -插入生成的內容
```
counter()或counters()函數-將計數器的值添加到元素要使用CSS計數器，必須先使用創建它counter-reset。

CSS網站佈局

網站佈局網站通常分為頁眉，菜單，內容和頁腳：

內容

本節中的佈局通常取決於目標用戶。最常見的佈局是以下佈局之一（或將它們組合在一起）： 1欄（通常用於移動瀏覽器） 2欄（通常用於平板電腦和筆記本電腦） 3列佈局（僅用於台式機）

CSS單位

CSS有幾種表示長度的不同單位。許多CSS屬性採取“長度”的值，例如width，margin，padding， font-size，等。長度是一個數字後跟一個長度單位，例如10px， 2em等

CSS特異性

什麼是特異性？如果有兩個或兩個以上指向同一元素的衝突CSS規則，則瀏覽器將遵循一些規則來確定哪一個是最具體的，因此勝出。

將特異性視為得分/等級，可以確定最終將哪些樣式聲明應用於元素。

通用選擇器（*）具有較低的特異性，而ID選擇器具有較高的特異性！

注意：特殊性是CSS規則不適用於某些元素（儘管您認為應該適用）的常見原因。

特異性層次

每個選擇器在特異性層次結構中都有其位置。有四個類別定義了選擇器的特異性級別：

內聯樣式-內聯樣式直接附加到要設置樣式的元素。示例：
```
<h1 style =“ color：#ffffff;”>。
```
ID -ID是頁面元素的唯一標識符，例如#navbar。類，屬性和偽類-類別包括.class，[attributes]和偽類，例如：hover，：focus等。元素和偽元素-此類別包括元素名稱和偽元素，例如h1，div，：before和：after。如何計算特異性？記住如何計算特異性！從0開始，為style屬性添加1000，為每個ID添加100，為每個屬性，類或偽類添加10，為每個元素名稱或偽元素添加1。

CSS重要規則

重要！

!importantCSS中的規則用於增加屬性/值的重要性。

實際上，如果您使用該!important規則，它將覆蓋該元素上該特定屬性的所有以前的樣式規則！
```
CSS border-radius屬性
CSS border-radius屬性定義元素角的半徑。
提示：此屬性使您可以向元素添加圓角！
```
CSS邊框圖像屬性

CSSborder-image屬性允許您指定要使用的圖像，而不是元素周圍的普通邊框。

該屬性分為三個部分：
```
用作邊框的圖像
在哪里切片圖像
定義中間部分是重複還是拉伸
```
CSS多種背景

您還將了解以下屬性：
```
background-size
background-origin
background-clip
```
CSS多種背景

CSS允許您通過background-image屬性為一個元素添加多個背景圖像。不同的背景圖像用逗號分隔，並且圖像彼此堆疊，其中第一幅圖像最靠近查看者可以使用單個背景屬性（如上）或background速記屬性來指定多個背景圖像。

CSS背景大小

CSSbackground-size屬性允許您指定背景圖像的大小。可以通過長度，百分比或使用以下兩個關鍵字之一來指定大小：“包含”或“覆蓋”。

CSS顏色關鍵字

本節會解釋的transparent，currentcolor和 inherit關鍵字。currentcolor關鍵字該currentcolor關鍵字是像其保持元件的顏色屬性的當前值的變量。如果希望特定顏色在元素或頁面中保持一致，則此關鍵字很有用。透明關鍵字該transparent關鍵字是用來製造一個彩色透明的。這通常用於使元素具有透明的背景色。

CSS線性漸變要創建線性漸變，您必須至少定義兩個色標。色標是您要呈現平滑過渡的顏色。您還可以設置起點和方向（或角度）以及漸變效果。句法 background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

CSS陰影效果使用CSS，您可以在文本和元素上添加陰影。在這些章節中，您將了解以下屬性：
```
text-shadow
box-shadow
CSS文字陰影
```
CSStext-shadow屬性將陰影應用於文本。最簡單的用法是只指定水平陰影（2px）和垂直陰影（2px）：文字陰影效果！例子
```
h1 {
  text-shadow: 2px 2px;
}
```
接下來，為陰影添加顏色：

文字陰影效果！

例子
```
h1 {
  text-shadow: 2px 2px red;
}
```
然後，向陰影添加模糊效果：

文字陰影效果！

例子
```
h1 {
  text-shadow: 2px 2px 5px red;
}
```
下面的示例顯示帶有黑色陰影的白色文本：例子
```
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
```
以下示例顯示了紅色的霓虹燈發光陰影：

文字陰影效果！

例子
```
h1 {
  text-shadow: 0 0 3px #FF0000;
}
```
多個陰影

要在文本中添加多個陰影，可以添加以逗號分隔的陰影列表。以下示例顯示了紅色和藍色的霓虹燈發光陰影：文字陰影效果！例子
```
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
```
以下示例顯示帶有黑色，藍色和深藍色陰影的白色文本：

文字陰影效果！

例子
```
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
```
您還可以使用text-shadow屬性在某些文本周圍創建純邊框（無陰影）：

文字周圍有邊框！

例子
```
h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
```
CSS文字效果

CSS文字溢出，自動換行，換行規則和書寫模式在本章中，您將學習以下屬性：
```
text-overflow
word-wrap
word-break
writing-mode
```
CSS Web字體

CSS @ font-face規則 Web字體允許Web設計人員使用用戶計算機上未安裝的字體。找到/購買了想要使用的字體後，只需將字體文件包括在Web服務器上，它將在需要時自動下載給用戶。您的“自有”字體是在CSS@font-face規則中定義的。使用您想要的字體在@font-face規則中首先定義字體的名稱（例如myFirstFont），然後指向字體文件。提示：字體URL始終使用小寫字母。大寫字母可能會在IE中產生意外結果。要將字體用於HTML元素，請通過font-family屬性引用字體的名稱（myFirstFont）

CSS 2D轉換

CSS轉換允許您移動，旋轉，縮放和傾斜元素。將鼠標懸停在下面的元素上可以查看2D轉換： CSS 2D轉換方法通過CSStransform屬性，您可以使用以下2D轉換方法：
```
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
```
CSS 3D轉換

CSS還支持3D轉換。

CSS 3D轉換方法

通過CSStransform屬性，您可以使用以下3D轉換方法：
```
rotateX()
rotateY()
rotateZ()
```
rotationX（）方法

該rotateX()方法將元素繞其X軸旋轉給定角度：例子
```
#myDiv {
  transform: rotateX(150deg);
}
```
rotationY（）方法

旋轉Y 該rotateY()方法將元素繞其Y軸旋轉給定角度：例子
```
#myDiv {
  transform: rotateY(150deg);
}
```
rotationZ（）方法

該rotateZ()方法將元素繞其Z軸旋轉給定角度：例子
```
#myDiv {
  transform: rotateZ(90deg);
```
CSS過渡

CSS過渡允許您在給定的時間內平穩地更改屬性值。

將鼠標懸停在下面的元素上可以查看CSS過渡效果：在本章中，您將學習以下屬性：
```
transition
transition-delay
transition-duration
transition-property
transition-timing-function
```
筆記中的文章與程式碼均引用了w3schools

week4 - stayjay/wp109b GitHub Wiki

CSS偽類

CSS不透明度/透明度

透明圖像

透明懸停效果

導航欄

CSS下拉列表

CSS圖像精靈

導航圖

CSS [屬性]選擇器

CSS [attribute =“ value”]選擇器

CSS [attribute〜=“ value”]選擇器

CSS表格

填充輸入

帶計數器自動編號

CSS網站佈局

內容

CSS單位

CSS特異性

特異性層次

CSS重要規則

重要！

CSS邊框圖像屬性

CSS多種背景

CSS多種背景

CSS背景大小

CSS顏色關鍵字

文字陰影效果！

文字陰影效果！

文字陰影效果！

多個陰影

文字陰影效果！

文字周圍有邊框！

CSS文字效果

CSS Web字體

CSS 2D轉換

CSS 3D轉換

CSS 3D轉換方法

rotationX（）方法

rotationY（）方法

rotationZ（）方法

CSS過渡

筆記中的文章與程式碼均引用了w3schools

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️