Css筆記 111010501簡志融

主題 : Css基礎概念 Css寫法外部Css Class Id 選擇器邊界內距&外距位置文字顏色邊界半徑透明度懸浮顯示佈局動畫其他筆記

Css基礎概念

越裡面的Css style，優先度越高
<div style="color:red">

<h1 style="color:blue">Hello Css !!<h1>

</div>
則h1為藍色
Css不能獨自存在，必搭配Html
Css是網頁不可分割的一部分

Css寫法

另外寫.css檔
寫在<head>裡
<head>
<style>
div{
Css
}
</style>
</head>
寫在 Html tag 後面加 style="Css"
<body style="Css">
<div style="Css">
<h1 style="Css">
以此類推......

引入外部Css

如果另外寫.css檔，便須要自外部引入Css檔案

Class(類別)

<... class="類別名稱類別名稱1">

每個html tag可有多個class標籤，以空格相隔

Id(唯一識別名稱)

<... id="識別名稱">

在整個網頁中，一個id只能給一個html tag，獨一無二

Css selector(選擇器)

可挑選有特定class、id或html tag套用Css

certain html tags
<style>
div{
Css
}
</style>
all html tags
<style>
*{
Css
}
</style>
class
<style>
.classname{
Css
}
</style>
id
<style>
#id{
Css
}
</style>

Border(邊界)

border: X px(寬度) solid(樣式) darkblue(顏色)

樣式:solid(實線), dashed(虛線), double(雙線), dotted(點)......

可分別不同樣式 border-style:solid dotted dashed double; (自上順時鐘)

Padding(內距) & Margin(外距)

Padding為border內的距離(X px, X >= 0)

Margin為border外的距離(X px, X 可為負值, 會重疊)

padding or margin: X px
padding or margin-top: X px
padding or margin-right: X px
padding or margin-bottom: X px
padding or margin-left: X px
padding or margin: X px X px X px X px (自上順時鐘)

Position(位置)

固定在畫面上(捲動位置不變)
<div style="position:fixed;">
<div style="position:fixed; top:X px">
加top、bottom、left、right可調整離邊緣的距離
固定在相對位置上(加上後方才有變化)
<div style="position:relative;">
<div style="position:fixed; top:X px">
加top、bottom、left、right才可調整離原本位置的距離
固定在絕對位置上(類似於第一 + 第二)
區塊如第一種獨立一層，調整如第二種
<div style="position:absolute;">
<div style="position:absolute; top:X px">
加top、bottom、left、right才可調整離原本位置的距離

Text(文字)

文字位置
<... style="text-align: center;">
可放center、left、right
各行等寬
<... style="text-indent: X px;">
可使段落文字開頭空格
段落前空
<... style="text-align: justify;">
可使段落文字每行等寬
行距
<... style="line-height: X;">
可調整段落行距
頂線&底線&劃掉
<... style="text-decoration: underline;">
可放overline、underline、line-through(三者可同時)
文字陰影
<... style="text-shadow: 2px 2px 5px red;">
text-shadow: 水平px 垂直2px 模糊px red;

Color(顏色)

顏色名稱表示
color:darkblue
RGB表示
color:rgb(0(紅色), 0(綠色), 139(藍色))
Hsl表示
color:hsl(240(色相), 100%(飽和度), 27.3%(亮度))
色碼表示
color:#00008B

延伸有border-color、background-color......

border-radius(邊界半徑)

將border的角設成半徑X的圓，方形圖片or區塊的邊長/2=X => 圓形

<... style="border-radius: X px;" > 或 Y%

或 Ipx Jpx Kpx Lpx，表從左上順時鐘的四個角

Avatar Avatar

Opacity(透明度)

<... style="opacity: X;" > X = 0 ~ 1

以下分別為0.25、0.5、0.75、1

Avatar Avatar

Float(懸浮)

float猶如word的版功能，可使文字排在圖片左方或右方;列表也可使用

Display(顯示)

display可改變顯示性質

如<p style="display:inline;">便會使得p從原本占一行，變成有多少占多少

如<span style="display:block;">便會使得span從原本有多少占多少，變成占一行

Flex(佈局)

排版好幫手，但有點難度，較難上手

<style>

.classname{

display:flex;(要先宣告才能使用)

flex:主軸方向;

flex-wrap:換行與否;

justify-content:主軸內容調整;

align-items:錯軸內容調整;

}

.flex-1{

flex: 1;

order: -1;

}

.flex-2{

flex: 2;

order: 0;

}

.flex-3{

flex: 1;

order: 1;

}

</style>

主軸方向(預設column)
column(上到下)、column-reverse(下到上)、row(右到左)、row-reverse(左到右)
換行與否
nowrap(換行)、wrap(不換行)、wrap-reverse(主軸反向換行)
主軸內容調整
center(置中)、flex-start(對齊起始)、flex-end(對其尾端)、space-between(在區塊間平分空白)、space-around(在所有間隙平分空白)
錯軸內容調整
center(置中)、flex-start(對齊起始)、flex-end(對其尾端)、baseline(基準線調整)、stretch(延伸)
flex
依照總數分配占比;如flex-1的flex=1，所以佔四分之一的大小
order
依照數字大小排序，負數也可以

Animation(動畫)

<style>

@keyframes 名稱{

from{Css0}

to{Css1}

}

@keyframes 名稱1{

0%{Css0}

20%{Css1}

40%{Css2}

60%{Css3}

80%{Css4}

100%{Css5}

}

.classname(:hover){

animation-name: 名稱;

animation-duration: 1.5s(時長);

animation-iteration-count: 次數或 infinite(無限);

animation-delay: Xs(網頁載入X秒後執行;非必要);

}