CSS 標籤整理

tags: `網頁` `CSS`

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

基本HTML範例












<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style></style>
</head>
<body>
	<p>Hello CSS!</p>
	<p>These paragraphs are styled with CSS.</p>
</body>
</html>

CSS 基本語法

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Selector(選擇器) - 通常是元素、類別或ID
Declaration(宣告) - 由Property(屬性)和Value(值)所組成，宣告間以分號區隔，最外圍用大括號括住。

CSS 套用方法

行內載入
寫在元素標籤後面，原始的寫法，較不易更改和維護


<p style="color:red; font-size:20px;">

內部載入
格式放在<head>的<style>中，設定相對應選擇器的格式，可同時做新增、修改










<head>
    <style>
        p
        {
            width: 200px;
            height: 40px;
            background: #b6ff00;
        }
    </style>
</head>

外部載入
將CSS格式獨立寫成*.css檔，從HTML內部載入外部的檔案即可，寫法是在<head>使用<link>，或是在<style>中使用@import載入外部檔案



<head>
    <link href="basis.css" rel="stylesheet"/>
</head>





<head>
    <style type=text/css>
        @import url(basis.css);
    </style>
</head>

CSS 各類選擇器

類別選擇器
可多重繼承









<style>
    .name
    {
        color: red;
    }
</style>
<body>
    <p class="name"></p>
</body>

ID選擇器
只能單一繼承









<style>
    #id01
    {
        color: red;
    }
</style>
<body>
    <p id="id01"></p>
</body>

標籤選擇器
可指定標籤名稱，所有相同標籤名稱都會套用此格式










<style>
    p
    {
        color: red;
    }
</style>
<body>
    <h2></h2>  <!--這項不套用紅字-->
    <p></p>    <!--這項套用紅字-->
</body>

群組選擇器
可將多個指定的選擇器套用相同的格式










<style>
    h2,p
    {
        color: red;
    }
</style>
<body>
    <h2></h2>  <!--這項套用紅字-->
    <p></p>    <!--這項套用紅字-->
</body>

屬性選擇器
可指定屬性套用相同的格式，有多種寫法
1. 標籤[屬性]
  選擇標籤元素指定的屬性
2. 標籤[屬性 = "值"]
  選擇標籤元素指定的屬性和值(需一模一樣)
3. 標籤[屬性 ~= "值"]
  選擇標籤元素指定的屬性包含值的設定，設定包含值使用空格隔開單字，只要一個單字符合，即套用相同格式
4. 標籤[屬性 |= "值"]
  選擇標籤元素的屬性值是開頭文字加上-符號
5. 標籤[屬性 ^= "值"]
  選擇標籤元素的指定屬性，其值符合開頭文字
6. 標籤[屬性 $= "值"]
  選擇標籤元素的指定屬性，其值符合結尾文字
7. 標籤[屬性 *= "值"]
  選擇標籤元素的指定屬性，其值符合任何一處文字
後代選擇器
指定父標籤下的所有子標籤套用CSS格式





父名稱 子名稱
{
    屬性1: 值1;
    屬性2: 值2;
}

子選擇器
和後代選擇器差不多，只差在層級須完全相同





父名稱>子名稱
{
    屬性1: 值1;
    屬性2: 值2;
}

CSS 虛構類別

a:link 未照訪的網站
a:visited 照訪過的網站
選擇器:hover 游標觸碰到的狀態
選擇器:active 點擊時的狀態
選擇器:focus 按下元件後的狀態
選擇器:enable 啟用元件的狀態，通常是input元件
選擇器:disable 未啟用元件的狀態，通常是input元件
選擇器:first-child 該選擇器中第一個出現的
選擇器:last-child 該選擇器中最後一個出現的
選擇器:n-child(odd) 選擇器中的奇數個出現的
選擇器:n-child(odd) 選擇器中的偶數個出現的

CSS 虛構元素

選擇器::first-line 選擇器中第一行的狀態
選擇器::first-letter 選擇器中第一行第一個字母的狀態

選擇器::before 選擇器緊臨前方位置的狀態




h1::before 
{
  content: url(image.gif);
}

選擇器::after 選擇器緊臨後方位置的狀態




h1::after 
{
  content: url(image.gif);
}

選擇器::selection反白部分的狀態

CSS 顏色

範例 : CSS08.htm

color:值 設定文字顏色，可以顏色名稱、數字和百分比來呈現
- 顏色名稱，如red、blue
- 數字，如#ff00a3、rgb(255,255,0)
- 百分比，如rgb(100%,50%,0%)
- rgb(紅色,綠色,藍色)
- rgba(紅色,綠色,藍色,透明度)
opacity:值 設定透明度(圖片)
屬性是0~1小數，數字越小代表透明度越高

漸層

background:radial-gradient(形狀/大小/指定位置,色彩停止點1,色彩停止點2,...,色彩停止點n) 放射漸層
- 形狀，如circle、ellipse
- 距離，度量單位，代表從中心點向外的半徑
- 指定位置，如 at + top、bottom、left、right
- 色彩停止點，色彩後空一格加上百分比或度量單位
圓黑外漸

圓黑20像素

圓心在上
background:linear-gradient(方向,色彩停止點1,色彩停止點2,...,色彩停止點n) 線性漸層
- 方向，如0deg、90deg
- 指定位置，如 to + top、bottom、left、right
標題常用

由下而上

由左而右

彩虹
background:repeating-radial-gradient(屬性值) 重複漸層
background:repeating-linear-gradient(屬性值)

重複

圓型重複

上下間隔

CSS 文字

font-size:值 改變字體大小
- px 像素點
- cm 公分
- mm 公釐
- em 上層元素的相對大小
- xx-small、x-small、small、medium、large、x-large、xx-large 預設大小
- 200% 相對大小
font-family:字型1,字型2,... 改變文字字型
靠左優先，無法顯示時則顯示新細明體
- 標楷體
- 微軟正黑體
- 也可以從網路上抓取字型，如Google字型
font-style:值 斜體字
- iralic 斜體字
- normal 正常
font-weight:值 改變文字粗細
- 數值，100~900數字越大越粗
- lighter、normal、bold、bolder，預設值
font:斜體字文字粗細字體大小文字字型 設定font簡便寫法
text-decoration:值 裝飾線
- underline 底線
- overline 頂線
- line-through 刪除線
text-transform:值 英文大小寫轉換
- uppercase 全部大寫
- lowercase 全部小寫
- capitalize 字首大寫
line-height:值 行高
text-indent:值 首行縮排
word-spacing:值 文字間距
letter-spacing:值 字母間距
text-shadow:水平移動量垂直移動量模糊值色彩
可設定雙重陰影，兩者間用,符號隔開
box-shadow:水平移動量垂直移動量模糊程度色彩
可設定雙重陰影，與text-shadow相似
text-stroke:粗細顏色 文字外框線
- 粗細，thin、medium、thick
- 顏色
NEW YORK
text-align:值 文字對齊方式
- center 置中
- left 靠左
- right 靠右
vertical-align:值 文字垂直對齊方式
- top 對齊顯示區域上緣
- text-top 對其前標籤上緣
- bottom 對齊顯示區域下緣
- text-bottom 對其前標籤下緣
- middle 對其前標籤中緣

CSS 清單項目

list-style-type:值 項目清單符號
- disc 實心圓點
- circle 空心圓點
- square 實心方塊
- decimal 阿拉伯數字
- decimal-leading-zero 阿拉伯數字(兩位)
- lower-roman 小寫羅馬字母
- upper-roman 大寫羅馬字母
- lower-alpha 小寫英文字母
- lower-greek 小寫希臘字母
- cjk-ideographic 中文數字
list-style-image:url(路徑) 項目清單圖片
list-style-position:值 清單位置
- outside 靠外
- inside 靠內

CSS 背景

background-color:顏色值 設定背景顏色

設定背景顏色
background-image:url(圖片檔案路徑) 設定背景圖片
background-repeat:屬性值 背景圖片重複設定
- no-repeat 不重複顯示
- repeat-x X軸方向重複
- repeat-y X軸方向重複
- repeat X軸和Y軸方向重複
- space 重複且圖片完整與自動調節間距
- round 重複且圖片完整與自動調節間距(和space差不多)
background-position:X座標 Y座標 設定背景圖片位置
- X座標
  - left 靠左
  - center 置中
  - right 靠右
- Y座標`
  - top 置頂
  - center 置中
  - bottom 置底
background-origin:原點位置 設定原點位置
- padding-box 以內距的左上角為原點，預設值
- border-box 以框線的左上角為原點
- content+box 以內容的左上角為原點
background-clip:裁切位置 設定背景裁切方式
- border-box 將框線以外的部分去除，預設值
- padding-box 將內距以外的部分去除
- content-box 將內容以外的部分去除
background-attachment:屬性值 設定背景圖片捲動跟隨
- fixed 隨之跟隨
- scroll 停留原地

補充 - 浮動廣告

讓廣告可以跟著畫面移動，點擊即可進入連結





<div style="position:fixed; right:10px; top:10px;">
    <a href="連結">
    <img src="圖片/star.jpg" style="opacity:0.5;">
    </a>
</div>

background-size:屬性值 設定背景圖片大小
- 度量單位
- 百分比
- contain 符合區塊大小
- cover 覆蓋區塊大小
- auto

CSS 版面定位

box model

margin 外距
- margin-top:屬性值 設定上方外距
- margin-bottom:屬性值 設定下方外距
- margin-left:屬性值 設定左方外距
- margin-right:屬性值 設定右方外距
- margin:上右下左 設定全方向外距(簡便寫法)
  - 度量單位
  - 百分比
  - auto
onuline 外框線
下節有詳細介紹
border 框線
下節有詳細介紹
padding 內距
- padding-top:屬性值 設定上方內距
- padding-bottom:屬性值 設定下方內距
- padding-left:屬性值 設定左方內距
- padding-right:屬性值 設定右方內距
- padding:上右下左 設定全方向內距(簡便寫法)
content 內容
- max-width:屬性值 設定內容最大寬度
- min-width:屬性值 設定內容最小寬度
- max-height:屬性值 設定內容最大高度
- min-height:屬性值 設定內容最小高度
overflow:屬性值 內容溢出處置
- visible 超出部分顯示
- hidden 超出部分隱藏
- auto 隨內容自動顯示卷軸
- scroll 有無溢出都會顯示卷軸
display:狀態值 設定元素狀態
- none 隱藏元素
- block 區塊元素，會自動分行
- inline 行內元素，為預設值
- inline-block 行內元素與區塊元素隨文字段落顯示
- list-item 清單項目
- flex 浮動元素，之後章節獨立說明
visibility:屬性值 設定元素可見/不可見
- visible 可見
- hidden 不可見
flaot:屬性值 浮動元素
- none 不變
- left 置左
- right 置右
clear:屬性值 去除浮動元素
- none 無動作
- left 去除左側
- right 去除右側
- both 去除兩側
position:屬性值 設定元素位置
- static 預設值，不指定位置
- relative 相對定位，以該元素為基準點
- absolute 絕對定位，以父元素制定的位置為基準點
- fixed 固定定位，以瀏覽器左上角為基準點
box-sizing:屬性值 設定Box尺寸
設定Box設定Box的尺寸，設定的尺寸就是看到的尺寸，省去調整內外距的麻煩

CSS 框線設定

border-style:屬性值 設定框線樣式
- none 預設值，不顯示框線
- solid 單線框線
- double 雙線框線
- dotted 點狀虛線
- dashed 線狀虛線
- groove 3D立體內凹框線
- ridge 3D立體外凸框線
- inset 內凹框線
- outset 外凸框線
- border-top-style:屬性值 也可針對單邊進行設定
border-width:屬性值 設定框線寬度
- thin 細
- medium 中
- thick 粗
- 度量單位
- 百分比
- border-top-width:屬性值 也可針對單邊進行設定
border-color:顏色 設定框線顏色
- border-top-color:屬性值 也可針對單邊進行設定
border-radius:圓角半徑 設定圓角框線
- border-top-left-radius:圓角半徑 左上角
- border-top-right-radius:圓角半徑 右上角
- border-bottom-left-radius:圓角半徑 左下角
- border-bottom-right-radius:圓角半徑 右下角
border: 寬度樣式顏色 框線簡便寫法
- border: 寬度樣式顏色 也可針對單邊進行設定

CSS 外框線設定

outline-style:屬性值 設定外框線樣式
outline-width:屬性值 設定外框線寬度
outline-color:顏色 設定外框線顏色
與border相同屬性值，參照"CSS 框線設定"
outline:樣式寬度顏色 外框線簡便寫法
不可針對單邊進行設定
outline-offset:數字 設定框線和外框線的間距

CSS 表格框線

border-collapse:屬性值 表格框線分離/不分離
- separate 分離
- collapse 重疊
border-spacing:屬性值 表格框線距離
- 度量單位
table-layout:屬性值 設定版面編排
- auto 預設值，隨著內容改變
- fixed 固定
empty-cells:屬性值 設定空白儲存格顯示/影藏
- show 顯示
- hide 影藏
caption-side:屬性值 表格標題位置
- top 表格上
- bottom 表格下

CSS Flex

祕訣一: 要讓內元件有效果，要在外元件加上 display:flex
祕訣二: 每個 HTML 標籤，能同時擁有內元件跟外容器身份

Flex 主軸與交錯軸觀念(測試工具)

flex-direction : 決定軸線
- row : 水平
- row-reverse : 水平，但順序相反
- column : 垂直
- column-reverse : 垂直，但順序相反
justify-content : 主軸對齊
- flex-start : 對齊靠左
- center : 對齊置中
- flex-end : 對齊置左
- space-between : 平均分散
- space-around
- space-evenly
flex-wrap : 換行屬性
- nowrap
- wrap
align-item : 交錯軸對齊(垂直置中)
- flex-start
- center
- flex-end
- stretch
- baseline

參考

體驗營第二週講義

Flex 補充資源

CSS 變形效果

範例 : CSS15.htm

對照組

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

transform:屬性值
translate(x位移量,y位移量) 移動
translateX(x位移量)
translateY(y位移量)
- x位移量(px) 水平位置
- y位移量(px) 垂直位置

scale(x位移量,y位移量) 縮放
scaleX(x位移量)
scaleY(y位移量)

rotate(角度) 旋轉
- 角度，以deg為單位

skew(x位移量,y位移量) 傾斜
skewX(x位移量)
skewY(y位移量)

CSS 2D轉場效果

範例 : CSS17.htm

transition-duration:秒數 轉場時間

transition-property:css屬性 指定轉場屬性
transition-timing-function:屬性值 轉場模式
- linear 線性轉換，保持相同的速度轉場
- ease 先慢再快再慢，預設值
- ease-in 先慢再快
- ease-out 先快再慢
- ease-in-out 先慢再快再慢，速度變化較ease平均，相對平穩

transition-delay:秒數 轉場延遲

transition:轉場時間轉場屬性轉場模式轉場延遲

CSS 動畫效果

@keyframes 動畫關鍵影格

from…to





@keyframes arrow-animaion01
{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}

百分比






@keyframes arrow-animaion02
{
	0%{transform:rotate(0deg);}
	50%{transform:rotate(360deg);}
	100%{transform:rotate(0deg);}
}

animation-name:關鍵影格名稱 動畫名稱設定
animation-duration:秒數 動畫持續時間
animation-time-function:屬性值 動畫轉換模式
- 和"轉場模式"一樣
animation-iteration-count:重複次數 重複次數設定
- 數字，代表動畫重複的次數，如animation-iteration-count:2代表重複2次
- infinite，無限次數播放，永遠不會停
animation-direction:播放方向 播放方向設定
- normal 代表從動畫開頭到結束，預設值
- reverse 代表從動畫結束倒帶回開頭，和normal相反效果
- alternate 從動畫開頭到結束，再從動畫結束倒帶回開頭。
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  注意，開頭到結束算第1次播放，結束倒帶回開頭算第2次播放，所以設定播放次數必須大於1次，才能正常顯示效果
- alternate-reverse 動畫結束倒帶回開頭，再從動畫開頭到結束，與alternate相反效果

animation-delay:秒數 播放延遲設定
animation-play-state:播放狀態 播放狀態設定
- paused 暫停播放
- running 開始播放

animation:影格名稱動畫時間轉換效果重複次數播放次數延遲時間播放狀態

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

RWD 響應式網站

格式

@media 裝置 and (裝置屬性: 值)
例子：@media screen and (min-width: 900px)

@media 媒體 不同裝置
- all 預設值，全部
- screen PC、手機瀏覽器都是
- print 印表機
min-width 求最大寬度
max-width 求最小寬度
min-height 求最大高度
max-height 求最小高度
min-device-width 求最大螢幕寬度
max-device-width 求最小螢幕寬度
min-device-height 求最大螢幕高度
max-device-height 求最小螢幕高度
<meta name="viewport" content="width=device-width, initial-scale=1.0">
響應式網站常用，放在<head>中

CSS 進階補充

文字填滿圖片























<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style>
		h1
		{
			width:100%;
			text-align:center;
			font-size:200px;
			font-family:Arial Black;
			background-image: url(圖片/NewYork.jpg);
			background-position: center 20%;
			-webkit-background-clip:text;    /*圖片裁切:以文字為標準*/
			-webkit-text-fill-color:transparent;    /*文字顏色改為透明*/
		}
	</style>
</head>
<body>
	<h1>NEW YORK</h1>
</body>
</html>

NEW YORK

font-variant:字體 轉換特殊字體
- normal 預設值
- small-caps 以大寫小字顯示小寫
Small Caps
font-size-adjust:長寬比 自動調整文字大小
- 百分比
text-emphasis:樣式填滿顏色 強調標記
text-emphasis-position:顯示位置 強調標記的顯示位置
- 樣式，dot、circle、double-circle、triangle等等
- 填滿，filled、open
- 顏色
- 顯示位置，如over、under
紐約是美國第一大城

紐約是美國第一大城
writing-mode:直書或橫書 指定直書或橫書
- horizontal-tb 橫書，預設值
- vertical-rl 直書，欄從右到左排列
- vertical-lr 直書，欄從左到右排列
z-index:屬性值 設定圖層順序
- auto 和上層元素相同，預設值
- 數字數字大的會擋住數字小的元素，如1>(-1)，1就會擋住(-1)
- 詳細
cursor:游標形狀 設定游標形狀
- auto 預設值
- all-scroll
- grab
- none
- not-allowed
- pointer
- progress
- wait
- 更多
CSS 導航欄

垂直導航欄

範例 : CSSad01.htm

水平導航欄

範例 : CSSad02.htm

詳細

CSS 下拉式功能表

文字

範例 : CSSad03.htm

按鈕

範例 : CSSad04.htm

圖片

範例 : CSSad05.htm

詳細

CSS 導航欄+下拉式功能表

範例 : CSSad06.htm

CSS 3D轉場效果
- rotateX() 以X軸為軸心做旋轉
- rotateY() 以Y軸為軸心做旋轉
- rotateZ() 以Z軸為軸心做旋轉

CSS 標籤整理

tags: 網頁 CSS

基本HTML範例

CSS 基本語法

CSS 套用方法

CSS 各類選擇器

CSS 虛構類別

CSS 虛構元素

CSS 顏色

漸層

圓黑外漸

圓黑20像素

圓心在上

標題常用

由下而上

由左而右

彩虹

重複

圓型重複

上下間隔