#HTML 什麼是HTML,和他ML... 網頁可以比作一個裝修好了的,可以娶媳婦的房子. 房子分為:毛坯房,精裝修 毛坯房的修建: 磚,瓦,水泥,石頭,石子.... 精裝修的房子:在毛坯房的基礎上進行粉刷,覆蓋,雕琢,修飾等操作.... HTML標簽 相當於蓋毛坯房用的石子,磚瓦....:房子成功 ...
#HTML
什麼是HTML,和他ML...
網頁可以比作一個裝修好了的,可以娶媳婦的房子.
房子分為:毛坯房,精裝修
毛坯房的修建: 磚,瓦,水泥,石頭,石子....
精裝修的房子:在毛坯房的基礎上進行粉刷,覆蓋,雕琢,修飾等操作....
HTML標簽 相當於蓋毛坯房用的石子,磚瓦....:房子成功,但是不會很好看.
CSS屬性 相當於裝修時候使用的刷子,塗料,扣板...: 可以讓毛坯房變得更加美觀
HTML
超文本標記語言. HyperText Markup Language
HTML標簽的格式:
格式:
<標簽名 屬性名="屬性值" 屬性名="屬性值"....>內容</標簽名>
註意: 標簽可以嵌套使用.嵌套包含時必須被另外一個標簽完全包含.
HTML常用標簽:
全局架構標簽: 網頁中必不可少的部分.
<!DOCTYPE html>
<html>
<head>
書寫內容不可見的部分;
</head>
<body>
書寫內容可見;
</body>
</html>
#BODY體
---
body標簽
屬性:
bgcolor backgroundcolor 背景顏色
---
標題標簽
h1 表示當前頁面的最主要內容,一個h1標簽在一個頁面中軍允許使用一次.
h2 表示當前頁面的次要內容,允許使用多個.
h3 表示其他信息內容標題,比次要內容等級還要低..
h4 .... 不推薦使用
h5 .... 不推薦使用
h6 .... 不推薦使用
標題標簽的作用:
用於書寫標題.
標題的標簽的特征:
所有標簽內容都是粗體,
字體大小從h1-h6逐漸減小
自帶回車換行效果
----
樣式標簽:
b 粗體標簽,僅用於表示樣式 bold
i 斜體標簽 italic
u 下劃線標簽 underline
strong 粗體標簽 ,還在頁面中起到一個強調的作用,對搜索引擎而言
em 斜體標簽,,還在頁面中起到一個強調的作用,對搜索引擎而言,更強烈一點
city 斜體標簽,還在頁面中起到一個強調的作用,對搜索引擎而言
font 字體樣式標簽
屬性:
color 顏色
size 大小 1-7
face 字體類型,都是在用戶的電腦中獲取字體類型
----
格式標簽:
p 段落標簽
hr 水平線標簽
br 強制換行標簽
註意:hr和br標簽比較特殊,這類標簽只有開始沒有結束,單標簽或者自封閉標簽
成對標簽: <body></body>
單標簽: <hr />
----
列表標簽:
ul 無序列表 unorder list
格式: 常用與製作導航
<ul>
<li>鋤禾日當午</li>
<li>清明上河圖</li>
<li>造血乾細胞</li>
<li>班長兼學位</li>
</ul>
ol 有序列表 order list
格式:
<ol>
<li>英雄聯盟</li>
<li>地下城與勇士</li>
<li>穿越火線</li>
<li>御龍在天</li>
</ol>
註意:有順序關係的併列內容使用ol,沒有順序關係的列表使用ul.
dl 定義列表 defined list
dt 定義列表的標題
dd 定義列表的屬性
定義列表僅用於定義一個事物.
格式:
<dl>
<dt>杜子騰</dt>
<dd>身高:170cm</dd>
<dd>體重:50kg</dd>
<dd>胸圍:C-cup</dd>
<dd>性別:女</dd>
</dl>
---
表格標簽:
table 用於定義表格的範圍
屬性:
border: 設置邊框的粗細
width: 設置表格的表格的總寬度
height: 設置表格的總高度
align : 設置表格水平方向的對其方式
值: left 左對齊 center 居中對其 right 右對齊
bgcolor: 設置背景顏色
tr 定義表格的行
bgcolor 設置行的背景顏色
td 定義表格的單元格
bgcolor 設置單元格的背景顏色
rowspan 設置單元格的跨行數量
colspan 設置單元格的跨列數量
就近原則概念:
如果具有嵌套關係的標簽設置了同一種屬性,那麼離標簽越近的屬性優先順序別越高.
表格的書寫格式:
<table border="1">
<tr>
<td>曹操</td>
<td>張苞</td>
<td>張郎</td>
</tr>
<tr>
<td>曹操</td>
<td>張苞</td>
<td>張郎</td>
</tr>
.....
</table>
th 單元格標簽的一種,用法和td是一樣的
th標簽專門用於製作表格的表頭部分,字體預設粗體,水平居中對其
caption 表格描述標簽,用於為表格添加一個標題
----
超鏈接
在網頁中,通過點擊操作能夠打開新的頁面的結構就是超級鏈接,簡稱超鏈接.
a 標簽
target屬性 設置目標地址的打開方式
_self 在當前頁面打開 預設值
_blank 在新頁面打開
href屬性 設置連接的目標地址
在web中的地址問題:
絕對連接: 帶有協議的連接就是絕對連接
http://www.itxdl.cn 他的協議是http:// 超文本傳輸協議
https://www.taobao.com 他的協議是 https:// 帶有安全'套接字'的超文本傳輸協議
ftp:// ftp協議 文件傳輸協議
ftps://....
file:// 本地文件協議
相對連接: 沒有協議的連接就是相對連接
./a/bcd/1.html
../a/bcd/2.html
a/bcd/1.html
. 表示在當前頁面所在的文件夾中查找
.. 表示在當前頁面所在文件夾的上層文件夾查找
----
圖片標簽
img標簽
src 設置圖片來源,圖片地址
width 設置圖片的寬度
height 設置圖片的高度
border 設置圖片邊框粗細
alt 設置圖片描述信息
title 設置圖片的描述信息
----
表單標簽:
在頁面中用於和用戶交互的空間都是表單標簽.主要作用是向伺服器端發送數據.
form 定義表單的範圍及表單的提交方式標簽
屬性:
action 設置當前表單內容的提交地址
method 設置當前表單提交內容的方式,get 和post 方式
get方式: 信息明文傳送,可以直接觀察到,get方式傳輸數據量有限.(明信片)
post方式:信息非明文傳輸,不可以直接觀測到,post傳輸方式數據量非常大.(寫信)
enctype 設置傳輸信息的加密方式
multipart/form-data 上傳文件專用
---
input 輸入標簽
該標簽通過改變type屬性,可以獲取9中不同風格的表單
type="text" 文本輸入框
type="password" 密碼輸入框
type="radio" 單選表單
type="checkbox" 覆選表單
type="file" 文件選取表單
type="hidden" 隱藏表單
type="submit" 提交按鈕
type="reset" 重置按鈕
type="image" 圖片提交按鈕
input標簽常用屬性:
type 設置表單類型
name 設置表單名稱
value 設置表單值
----
select 下拉列表或者多選列表標簽
name 設置表單的名稱,value在option中設置
multiple 設置是否為多選列表
下拉列表
<select name="city1">
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="東京">東京</option>
<option value="西京">西京</option>
</select>
多選列表
<select name="city2" multiple>
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="東京">東京</option>
<option value="西京">西京</option>
</select>
option 多選列表的列表標簽
textarea 文本域標簽/多行文本標簽
name 設置表單的名稱
cols 設置表單的列數(寬度)
rows 設置表單的行數(高度)
button 自定義按鈕標簽
type 設置按鈕的類型 submit提交按鈕 reset 重置按鈕 button 普通按鈕
----
頁面佈局標簽:
div 用於頁面佈局操作,沒有特殊意義
span 內容標簽
塊狀元素:div
塊狀元素獨占一行
塊狀元素可以設置寬度高度
內聯元素:span
內聯元素可以在一行共存
內聯元素高度和寬度無效
----
#head頭信息
title 設置網站的標題,顯示在標簽欄中
meta 設置瀏覽器信息或者設置搜索引擎相關信息
為瀏覽器設置信息
字元集設置
<meta charset="utf-8" /> H5
<meta http-equiv="content-type" content="text/html;charset=utf-8"> H4
為搜索引擎設置信息
關鍵字
<meta name="keywords" content="關鍵字,關鍵字....." />
描述
<meta name="description" content="寫人話,對戰網的簡潔描述" />
base 基準連接標簽
href 為頁面中所有相對連接設置一個基礎的絕對地址.對絕對連接無效
target 為頁面中沒有設置target屬性的連接,強制設置為當前設定值
##表示顏色的方式
HTML中表示顏色的方式有三種:
英文單詞 : red,green,blue....
RGB格式 : R red G green B blue
僅IE支持,不推薦在HTML中使用RGB格式
RGB(紅色值,綠色值,藍色值);
每種顏色的取值 0-255
HEX模式 :
#紅色值綠色值藍色值
#FF9900 紅色 FF 綠色99 藍色00
##SEO和SEM
SEO: 搜索引擎優化,長期的規程要有耐心,不花錢就可以提升自然排名
SEM: 搜索引擎影響,投入金錢,短期見效.
##關於字元集
可以認為字元集就是語言種類
頁面字元集:文件本身的字元集類型就是頁面字元集.
聲明字元集:通知瀏覽器文件中字元的字元集類型.
保證頁面不亂碼: 保證頁面字元集和聲明字元集一致即可.
中文字元集:
utf-8 國際統一字元集,能夠表示世界上絕大多數的語言.
gbK 國家標準的擴展版本,包含所有中文文字
gb2312 國家2312標準字元集,包含5000個常用漢字
big5 繁體中文字元集
#HTML和XHTML
XHTML也是超文本標記語言的一種,是嚴格語法的HTML語種.
HTML規範比較鬆散:
單標簽可以不封閉
屬性值 可以使用單雙引號也可以不用....
XHTML 8大語法要求:
1.所有標簽名和屬性名必須小寫
2.所有標簽必須封閉,單標簽需要自封閉
3.所有標簽嵌套必須合法
4.所有屬性必須有值,multiple值為本身 multiple ="multiple"
5.所有屬性必須使用雙引號
6.所有圖片標簽必須使用alt屬性
7.所有註釋內容中不可以出現-,可以使用=代替橫線
8.所有特殊字元必須使用實體字元表示
##HTML中的註釋
作用:僅僅用於頁面中的內容描述 不會影響顯示和效果
格式:
<!--註釋內容-->
##實體字元
用於在頁面中輸出特殊字元的字元格式就是實體字元;
常用實體字元
空格
< 小於號
> 大於號
#關於HTML5
故事講完了!~
html5標準的改變
html5依舊是鬆散語法的HTML版本,繼承HTML4而來的.
Xhtml5也是被官方預設的一個版本.
1.DTD聲明的改變
<!DOCTYPE html>
2.標簽的改變
不可以寫結束標簽的表
br ,hr ,img,....
可以省略結束標簽的標簽
li,option,tr,td...
可以完全省略的標簽
html,head,body,....
##針對搜索引擎的優化
為了讓搜索引擎更好的識別和收錄頁面內容.HTML5為搜索引擎新增了一系列的結構標簽
header 用於表示網站結構頂部的標簽
footer 用於表示網站底部結構都而標簽
aside 用於 表示網站側邊欄的標簽
section 用於表示網站主體區域的標簽
nav 用於表示網站導航區域的標簽
article 用於表示頁面文章的標簽
figure 用於信息描述的標簽
figcaption 用於信息描述的配合標簽
hgroup 網站標題組標簽
details 信息詳解標簽
time 時間標簽
address 地址標簽
mark 標註標簽
總結:不要害怕,以上標簽都是div標簽
##多媒體標簽
audio 音頻標簽
屬性:
src 引入音樂文件地址
controls 設置是否具有控制面板屬性
loop 設置是否迴圈播放屬性
autoplay 設置是否自動播放屬性
<!--音頻標簽-->
<audio src="./_WStyle.mp3" controls></audio>
<!--相容性的音頻標簽寫法-->
<audio controls loop>
您的破瀏覽器不支持該標簽
<source src="_WStyle.mp3" type="audio/mp3">
<source src="_WStyle.ogg" type="audio/ogg">
</audio>
video 視頻標簽
src 引入視頻地址
controls 設置是否具有控制面板
poster 設置視頻的預覽圖
width 設置視頻的寬度
height 設置視頻的高度
autoplay 自動播放視頻
<!--簡單寫法-->
<video src="movie.webm" controls></video>
<!--完整寫法-->
<video controls poster="2.jpg" width="1000" height="500">
您的破瀏覽器不支持視頻標簽.
<source src="./movie.webm" type="video/webm" />
<source src="./movie.webm" type="video/webm" />
<source src="./movie.webm" type="video/webm" />
</video>
canvas 畫布標簽
可以用於繪畫操作,製作畫圖板,
可以用於游戲製作....
embed 媒體標簽
用於在在頁面中引入flash文件
<embed src="旋轉的文字.swf" width="500" height="300"></embed>
##智能表單
對HTML4中的表單用法和標簽類型進行了擴展.
URL表單 type="url"
郵箱表單 type="email"
電話表單 type="tel"
顏色表單 type="color"
滑塊表單 type="range"
搜索表單 type="search"
數字表單 type ="number"
日期表單 type="date"
時間表單 type="time"
周選取表單 type="week"
月選取表單 type="month"
日期時間表單 type="datetime" 僅Opera瀏覽器識別
日期時間表單 type="datetime-local"
註意:以上所有新增表單都是HTML5為input 標簽新增的表單類型
新增的智能表單用法:
在HTML4中 表單標簽必須放在Form標簽之中才可以被提交到伺服器,
如果頁面中存在多個form表單並且在頁面佈局時比較分散,不適合排版很難處理
HTML5中允許將表單標簽和form標簽進行分離操作:
1.為form標簽添加一個id屬性
2.為制定的需要提交的屬性當前form的表單標簽添加form屬性,值為form的id值
#CSS
css是什麼?
CSS的作用用於修飾頁面中的HTML標簽.
層疊樣式表!
##瀏覽器
瀏覽器一共有五大廠商:
IE瀏覽器 微軟公司
chrome瀏覽器 谷歌
firefox瀏覽器 MOZ組織
Opera瀏覽器 歐朋/360
safari瀏覽器 apple公司
瀏覽器首碼:
如果CSS屬性沒有最終實現而是出於實驗階段,使用屬性的時候需要對當前CSS進行私有屬性標註才可以生效. 標註的部分稱之為瀏覽器私有屬性首碼:
IE瀏覽器 -ms-
chrome瀏覽器 -webkit-
firefox瀏覽器 -moz-
Opera瀏覽器 -o-/-webkit- 早期/後期
safari瀏覽器 -webkit-
#取值和單位
顏色:
英文單詞模式
RGB模式
HEX模式
新增顏色模式
RGBA模式
在RGB模式基礎上增加了透明度設置的顏色方式
RGBA(紅色值,綠色值,藍色值,透明度)
透明度的取值 0-1之間的小數 0 完全透明 1 完全不透明
HSL模式
H 色相(顏色的類型) S 飽和度 L 亮度
格式:
HSL(色相,飽和度,亮度);
色相: 0-360的正數
飽和度: 0% -100%
亮度: 0% -100%
HSLA模式
格式:
HSLA(色相,飽和度,亮度,透明度);
透明度的取值 0-1之間的小數 0 完全透明 1 完全不透明
----
長度單位:
px 像素 用於表示一個顏色的點就是像素
像素是一個相對單位,可以有系統進行調整.相對單位
mm 毫米 不允許使用,絕對單位
cm 釐米 不允許使用,絕對單位
em 一個漢字的大小
ex 一個小寫x的大小
##CSS的使用方式
分為四種使用方式:
外鏈式CSS
<link href="one.css" type="text/css" rel="stylesheet" />
導入式CSS
<style>
@import url(./two.css);
</style>
嵌入式CSS
<style>
.three{
width:100px;
height:100px;
background:cyan;
}
</style>
內聯式CSS
<div class="four" style="width:100px;height:100px;background:purple;"></div>
##CSS的格式
CSS的具體格式:
CSS選擇器{
CSS屬性名:屬性值;
CSS屬性名:屬性值;
...
}
CSS的選擇器:
用於選中頁面中制定的標簽添加樣式,這種選擇的語法就是選擇器.
HTML選擇器
直接使用HTML標簽的名稱進行選擇,選中所有的同名的HTML標簽
標簽名{css樣式}
CLASS選擇器
為需要選取的標簽添加class屬性,並且定義值,
在CSS中使用.class屬性值就可以選取具有class值的標簽,可以添加多個元素
.class名{css樣式}
ID選擇器
為需要選擇的頁面添加id屬性,並且自定義一個值
在CSS中使用#id值就可以選中這個標簽,一個頁面中禁止出現兩個以上的同名ID
#id名{CSS樣式}
關係選擇器
選中制定標簽內部的所有指定標簽.
選擇器1 選擇器2{css樣式}
組合選擇器
同時使用多個選擇器,中間使用逗號分隔,可以選中所有的符合選擇器的元素添加樣式
選擇器1,選擇器2{css樣式}
通用選擇器
* 用於選中頁面中的所有標簽.使用時需要慎重,並且一般配合組合選擇器使用
----
屬性選擇器
選擇器[屬性]
選中具有執行屬性名稱的標簽
選擇器[屬性="值"]
選中具有執行屬性且名稱和指定名稱相同的標簽
選擇器[屬性^="字元"]
選中具有執行屬性,且屬性以制定字元開頭的標簽
選擇器[屬性$="字元"]
選中具有執行屬性,且屬性以制定字元結尾的標簽
選擇器[屬性*="字元"]
選中具有執行屬性,且屬性包含制定字元的標簽
---
結構選擇器
child系列
first-child
格式: 選擇器:first-child{CSS樣式}
last-child
格式: 選擇器:last-child{CSS樣式}
nth-child
格式: 選擇器:nth-child(位置){CSS樣式}
位置可以使用數字,奇偶單詞或者帶有n的表達式
nth-last-child
格式: 選擇器:nth-last-child(位置){CSS樣式}
位置可以使用數字,奇偶單詞或者帶有n的表達式
註意:child系列的選取方式規則:
1.選擇符合選擇器(:前面的部分)的元素
2.選擇所有選中元素的所有父元素
3.找到所有父元素中制定位置的子元素
4.驗證第三步中找到的子元素是否符合第一步中用於選中元素的選擇器(:前面的部分),如果符合則選中,如果不符合則拋棄
of-type系列
first-of-type
格式: 選擇器:first-of-type{CSS樣式}
last-of-type
格式: 選擇器:last-of-type{CSS樣式}
nth-of-type
格式: 選擇器:nth-of-type(位置){CSS樣式}
位置可以使用數字,奇偶單詞或者帶有n的表達式
nth-last-child
格式: 選擇器:nth-last-of-type(位置){CSS樣式}
位置可以使用數字,奇偶單詞或者帶有n的表達式
註意:of-type系列的選取方式規則:
1.選中頁面中所有符合選擇器(:前面的部分)的元素
2.選中所有符合選擇器元素(:前面的部分)的所有父元素.
3.將所有父元素中所有有符合選擇器(:前面的部分)的元素組成一個新的集合
4.在新的集合中選擇指定位置的元素
偽類選擇器
選擇器:link
選中符合選擇器的元素的正常連接狀態,僅適合於A標簽
選擇器:hover
選中符合選擇器的元素的滑鼠經過狀態,適用於所有元素
選擇器:active
選中符合選擇器的元素的點擊狀態,僅適合於A標簽
選擇器:visited
選中符合選擇器的元素的訪問過後的連接狀態,僅適合於A標簽
偽對象選擇器
選擇器::first-letter
選中符合選擇器的內容中第一個字元,添加樣式
選擇器::first-line
選中符合選擇器的內容中的第一行文字,添加樣式
選擇器::before
選中符合選擇器的內容中的前半部分
選擇器::after
選中符合選擇器的內容的後半部分
##字體屬性
font-size :
設置字體的大小
font-weight:
設置字體的粗細
color :
設置字體的顏色
font-style :
設置是否為斜體
font-family:
設置字體的累心,需要註意依然需要使用本地系統的字體庫
##背景屬性
background
background-color 設置元素的背景顏色
background-image 設置元素的背景圖片
格式:
background-image:url(圖片地址);
background-repeat: 設置背景圖片的重覆方式
重覆方式:
repeat 橫向和縱向重覆
no-repeat 不重覆
repeat-x 橫向重覆
repeat-y 縱向重覆
background-position-x: 設置背景圖片的橫向位置
background-position-y: 設置背景圖片的縱向位置
所有位置都可以使用長度單位或者百分比
除此之外,橫向位置可以使用left center right 縱向位置 top center bottom
background-size: 設置背景圖片的大小
##透明度設置
opacity 設置整個元素的透明度
取值範圍 0 -1 0 透明 1不透明
##盒子模型
任何元素在瀏覽器中都會被以盒子模型的方式進行解析,解析只有具有盒子模型的屬性.
margin 外間距
margin: 設置四個方向的外間距
margin-left: 設置元素左側的外間距
margin-right 設置元素右側的外間距
margin-bottom 設置元素底部的外間距
margin-top 設置元素頂部的外間距
border 邊框
border: 設置邊框的綜合屬性
按照方向劃分四個屬性
border-top: 設置頂部邊框的顏色風格和寬度
border-bottom 設置底部邊框的顏色風格和寬度
border-left 設置左側邊框的顏色風格和寬度
border-right 設置右側邊框的顏色風格和寬度
按照值劃分三個屬性
border-width 設置四個邊的寬度
border-style 設置四個邊的樣式
border-color 設置四個邊的顏色
按照值和方向劃分12個屬性
border-top-width: 設置頂部邊框的寬度
border-top-style 設置頂部邊框的風格
border-top-color 設置頂部邊框的顏色
border-bottom-width: 設置底部邊框的寬度
border-bottom-style 設置底部邊框的風格
border-bottom-color 設置底部邊框的顏色
border-left-width: 設置左側邊框的寬度
border-left-style 設置左側邊框的風格
border-left-color 設置左側邊框的顏色
border-right-width: 設置右側邊框的寬度
border-right-style 設置右側邊框的風格
border-right-color 設置右側邊框的顏色
邊框圓角屬性
border-radius:邊框圓角綜合屬性,設置四個角
水平和垂直半徑相同:
border-radius: 半徑;
水平和垂直半徑不同:
border-radius: 水平半徑/垂直半徑;
border-top-left-radius: 設置左上角的圓角
水平和垂直半徑相同:
border-top-left-radius: 半徑;
水平和垂直半徑不同:
border-top-left-radius: 水平半徑 垂直半徑;
border-top-right-radius: 設置右上角圓角
水平和垂直半徑相同:
border-top-right-radius: 半徑;
水平和垂直半徑不同:
border-top-right-radius: 水平半徑 垂直半徑;
border-bottom-left-radius: 設置左下角圓角
水平和垂直半徑相同:
border-bottom-left-radius: 半徑;
水平和垂直半徑不同:
border-bottom-left-radius: 水平半徑 垂直半徑;
border-bottom-right-radius : 設置右下角圓角
水平和垂直半徑相同:
border-bottom-right-radius: 半徑;
水平和垂直半徑不同:
border-bottom-right-radius: 水平半徑 垂直半徑;
padding 內補白
padding 同時設置四個方向的內間距
padding-left 設置元素左側的內間距
padding-right 設置元素右側的內間距
padding-top 設置元素頂部的內間距
padding-bottom 設置元素底部的內間距
註意: border和padding會增加元素的整體大小,margin不會
##佈局屬性
佈局屬性的作用就是為了設計頁面而存在的CSS屬性.
display : 設置元素的顯示方式
none 不顯示元素
block 顯示為塊狀元素
inline 顯示為內聯元素
inline-block 顯示為行內塊狀元素
...
float: 設置元素的浮動屬性
方式:
left: 左浮動
right: 右浮動
none:不浮動
註意:浮動元素和正常的非浮動元素不在同一個層面,所元素浮動之後,當前元素下麵的區域可以存放其他元素,為了防止其他元素在浮動元素之下擺放需要使用clear屬性進行設置
clear : 清除浮動元素對當前元素的影響
值:
left 清除左浮動
right 清除右浮動
both 清除左右浮動
visibility: 設置元素是否可見
hidden 設置元素不可見
visible 設置元素可見
註意: visibility設置為hidden時元素不可見但是依舊占用物理空間,而display設置為none時元素不可見,並且不占用物理空間.
overflow: 設置元素中內容溢出的處理方案
值:
visible 超出元素依舊顯示內容
hidden 超出元素部分隱藏
scroll 超出元素時添加滾動條
#漸變效果
漸變效果分為兩大類:
線型漸變: 單線型漸變和重覆的線型漸變
徑向漸變: 單徑向漸變和重覆的徑向漸變
單線型漸變
簡單漸變:
linear-gradient(顏色,顏色,顏色....)
帶有方向的漸變
linear-gradient(方向,顏色,顏色,顏色....)
方向取值:
to top 自下而上進行漸變
to bottom 自上而下進行漸變
to left 從右向左漸變
to right 從左到右漸變
角度取值
帶有顏色起始位置的漸變
linear-gradient(方向,顏色 位置,顏色 位置,顏色 位置...);
註意: 在顏色後面進行設置的不是顏色占有的比例而是當前顏色純色出現的位置,純色之外採取漸變或者完全純色填充的原則.
單徑向漸變
簡單的徑向漸變
radial-gradient(顏色,顏色....)
設定形狀的徑向漸變
radial-gradient(形狀,顏色,顏色...);
形狀取值: circle 圓形 ellipse橢圓形
設定圓心的徑向漸變
radial-gradient(at 圓心坐標 ,顏色,顏色....);
圓心坐標可以使用長度單位,也可以使用位置單詞
水平 left center right
垂直 top center bottom
設置漸變終點的徑向漸變
radial-gradient(漸變終點,顏色,顏色...);
漸變終點:
closest-side 從圓心漸變到最近的邊
closest-corner 叢圓心漸變到最近的角
farthest-side 從圓心漸變到最遠的邊
farthest-corner 叢圓心漸變到最遠的角
長度值
設置顏色位置的徑向漸變
radial-gradient(顏色 位置,顏色 位置....);
最完整的徑向漸變設置
radial-gradient(形狀 漸變終點 at 圓心位置,顏色 位置,顏色 位置...);
重覆的線型漸變
repeating-linear-gradient(方向,顏色 位置,顏色 位置...)
一般情況下重覆線型漸變僅最後一個顏色設置位置,而且最後一個顏色位置點決定重覆的次數
重覆次數計算方式 = 100% / 最後一個顏色點的位置百分比
重覆的徑向漸變
repeating-radial-gradient(形狀 漸變終止點 at 圓心坐標 , 顏色 位置,顏色 位置....)
一般情況下重覆線型漸變僅最後一個顏色設置位置,而且最後一個顏色位置點決定重覆的次數
重覆次數計算方式 = 100% / 最後一個顏色點的位置百分比
註意:一般情況下我們設置最開始的顏色和結束顏色一致,保證重覆漸變式顏色不會太突兀.
##角度單位
度 deg 一個圓劃分為360度
周 turn 一個圓就是一個turn
弧度 rad 一個圓就是2π弧度
梯度 grad 一個圓劃分為400梯度
