初識H5-CSS3.md
HTML5新標籤與特性
文檔類型設定
| 文檔類型 | 文檔開頭 |
|---|---|
| HTML | |
| XHTML | |
| HTML5 |
字符設定
- ：HTML與XHTML中建議這樣去寫
- ：HTML5的標籤中建議這樣去寫
經常使用新標籤
w3c 手冊中文官網 : w3schoolphp
- header：定義文檔的頁眉 頭部
- nav：定義導航連接的部分
- footer：定義文檔或節的頁腳 底部
- article：定義文章。
- section：定義文檔中的節（section、區段）
- aside：定義其所處內容以外的內容 側邊
<header> 語義 :定義頁面的頭部 頁眉</header>
<nav> 語義 :定義導航欄 </nav>
<footer> 語義: 定義 頁面底部 頁腳</footer>
<article> 語義: 定義文章</article>
<section> 語義： 定義區域</section>
<aside> 語義： 定義其所處內容以外的內容 側邊</aside>
- datalist 標籤訂義選項列表。請與 input 元素配合使用該元素
<input type="text" placeholder="輸入明星" list="star"/> <!-- input裏面用 list -->
<datalist id="star"> <!-- datalist 裏面用 id 來實現和 input 連接 -->
<option>周杰倫1</option>
<option>周杰倫2</option>
<option>周杰倫3</option>
<option>周杰倫4</option>
<option>周杰倫5</option>
<option>周杰倫6</option>
</datalist>
- fieldset 元素可將表單內的相關元素分組，打包 legend 搭配使用
<fieldset>
<legend>用戶登陸</legend> 標題
用戶名: <input type="text"><br /><br />
密 碼: <input type="password">
</fieldset>
新增的 input type 屬性值
| 類型 | 使用示例 | 含義 |
|---|---|---|
| 輸入郵箱格式 | ||
| tel | 輸入手機號碼格式 | |
| url | 輸入url格式 | |
| number | 輸入數字格式 | |
| search | 搜索框（體現語義化） | |
| range | 自由拖動滑塊 | |
| time | 小時分鐘 | |
| date | 年月日 | |
| datetime | 時間 | |
| month | 月年 | |
| week | 星期 年 |
經常使用新屬性
| 屬性 | 用法 | 含義 |
|---|---|---|
| placeholder | 佔位符 當用戶輸入的時候 裏面的文字消失 刪除全部文字，自動返回 | |
| autofocus | 規定當頁面加載時 input 元素應該自動得到焦點 | |
| multiple | 多文件上傳 | |
| autocomplete | 規定表單是否應該啓用自動完成功能 有2個值，一個是on 一個是off on 表明記錄已經輸入的值 1.autocomplete 首先須要提交按鈕 2.這個表單您必須給他名字 |
|
| required | 必填項 內容不能爲空 | |
| accesskey | 規定激活（使元素得到焦點）元素的快捷鍵 採用 alt + s的形式 |
多媒體標籤
- embed：標籤訂義嵌入的內容
- audio：播放音頻
- video：播放視頻
多媒體 embed
embed能夠用來插入各類多媒體，格式能夠是 Midi、Wav、AIFF、AU、MP3等等。url爲音頻或視頻文件及其路徑，能夠是相對路徑或絕對路徑。存在兼容問題.css
<embed src='http://player.youku.com/player.php/sid/XMzU4MzIzMzY1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle'
allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
多媒體還能看到 iframe 標籤html
<iframe style="width:704px;height:436px;" src="http://cdn.aixifan.com/player/ACFlashPlayer.out.swf?vid=6550021&ref=http://www.acfun.cn/v/ac4839859"
id="ACFlashPlayer-re" frameborder="0"></iframe>
多媒體 audio
HTML5經過<audio>標籤來解決音頻播放的問題。html5
<audio autoplay="autoplay" loop="loop" controls="controls"> <source src="bgsound.mp3"> <source src="bgsound.wav"> <source src="bgsound.ogg> </audio>
能夠經過附加屬性能夠更友好控制音頻的播放，如：css3
- autoplay 自動播放
- controls 是否顯不默認播放控件
- loop 循環播放 若是這個屬性不寫 默認播放一次
因爲版權等緣由，不一樣的瀏覽器可支持播放的格式是不同的，以下圖供參考：
多瀏覽器支持的方案，
<source />標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
多媒體 video
HTML5經過<video>標籤來解決音頻播放的問題。web
<video autoplay controls loop> <source src="mp4.mp4"> <source src="mp4.ogg"> <source src="mp4.webm"> </video>
一樣，經過附加屬性能夠更友好的控制視頻的播放：瀏覽器
- autoplay 自動播放
- controls 是否顯示默認播放控件
- loop 循環播放
- width 設置播放窗口寬度
- height 設置播放窗口的高度
因爲版權等緣由，不一樣的瀏覽器可支持播放的格式是不同的，以下圖供參考：
多瀏覽器支持的方案，
<source />標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
CSS3
CSS3 選擇器
結構(位置)僞類選擇器（CSS3)
- :first-child :選取屬於其父元素的首個子元素的指定選擇器
- :last-child :選取屬於其父元素的最後一個子元素的指定選擇器
- :nth-child(n) ： 匹配屬於其父元素的第 N 個子元素，不論元素的類型，n 能夠是 2n，2n+1，4n，4n+1
- :nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。n 能夠是數字、關鍵詞或公式
- :nth-child(even) ：偶數個子元素
- :nth-child(odd) ：奇數個子元素
li:first-child { /* 選擇第一個孩子 */
color: pink;
}
li:last-child { /* 最後一個孩子 */
color: purple;
}
li:nth-child(4) { /* 選擇第4個孩子 n 表明 第幾個的意思 */
color: skyblue;
}
屬性選擇器
選取標籤帶有某些特殊屬性的選擇器，如：input[type=text]app
/* 獲取到 擁有 該屬性的元素 */
div[class] { /* class 表示 有屬性的元素 */
color: red;
}
div[class^=font] { /* class^=font 表示 font 開始位置就好了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 結束位置就好了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置均可以 */
color: green;
}
<div class="font12">屬性選擇器</div>
<div class="font12">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="24font">屬性選擇器123</div>
<div class="sub-footer">屬性選擇器footer</div>
<div class="jd-footer">屬性選擇器footer</div>
<div class="news-tao-nav">屬性選擇器</div>
<div class="news-tao-header">屬性選擇器</div>
<div class="tao-header">屬性選擇器</div>
僞元素選擇器（CSS3)
- E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
- E::first-line 文本第一行；
- E::selection 可改變選中文本的樣式；
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
color: skyblue;
}
p::selection {
background-color: pink;
color: orange;
}
- E::before 和 E::after
在E元素內部的開始位置和結束位建立一個元素，該元素爲行內元素，且必需要結合content屬性使用。
div::befor {
content:"開始";
}
div::after {
content:"結束";
}
E:after、E:before 在舊版本里是僞元素，CSS3 的規範裏 「:」 用來表示僞類，「::」 用來表示僞元素，可是在高版本瀏覽器下 E:after、E:before 會被自動識別爲E::after、E::before，這樣作的目的是用來作兼容處理。ide
":" 與 "::" 區別在於區分僞類和僞元素oop
之因此被稱爲僞元素，是由於他們不是真正的頁面元素，html沒有對應的元素，可是其全部用法和表現行爲與真正的頁面元素同樣，能夠對其使用諸如頁面元素同樣的css樣式，表面上看上去貌似是頁面的某些元素來展示，其實是css樣式展示的行爲，所以被稱爲僞元素。是僞元素在html代碼機構中的展示，能夠看出沒法僞元素的結構沒法審查
注意
僞元素 :before 和 :after 添加的內容默認是 inline 元素，這個兩個僞元素的 content 屬性，表示僞元素的內容，設置 :before 和 :after 時必須設置其 content 屬性，不然僞元素就不起做用。
CSS3盒模型
CSS3 中能夠經過 box-sizing 來指定盒模型，便可指定爲 content-box、border-box，這樣咱們計算盒子大小的方式就發生了改變。能夠分紅兩種狀況：
1.box-sizing: content-box 盒子大小爲 width + padding + border content-box: 此值爲其默認值，其讓元素維持W3C的標準 Box Mode
2.box-sizing: border-box 盒子大小爲 width 就是說 padding 和 border 是包含到width裏面的
注：上面的標註的 width 指的是CSS屬性裏設置的 width: length，content 的值是會自動調整的。
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 之前的標準盒模型 w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小爲 width + padding + border content-box: 此值爲其默認值，其讓元素維持W3C的標準Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding border 不撐開盒子 */
border: 15px solid red;
/* 盒子大小爲 width 就是說 padding 和 border 是包含到width裏面的 */
}
過渡(CSS3)
過渡（transition) 是 CSS3 中具備顛覆性的特徵之一，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。
過渡動畫： 是從一個狀態 漸漸的過渡到另一個狀態
幀動畫：經過一幀一幀的畫面按照固定順序和速度播放。如電影膠片
在 CSS3 裏使用 transition 能夠實現補間動畫（過渡效果），而且當前元素只要有「屬性」發生變化時即存在兩種狀態(咱們用A和B代指），就能夠實現平滑的過渡，爲了方便查看用 hover 切換兩種狀態，可是並不只僅侷限於 hove r狀態來實現過渡。
transition: 要過渡的屬性 花費時間 運動曲線 什麼時候開始; 若是有多組屬性變化，仍是用逗號隔開。
| 屬性 | 描述 |
|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。單位是 秒 s，好比 0.5s，s單位必須寫。 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 |
| transition-delay | 規定過渡效果什麼時候開始。默認是 0。 |
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要過渡的屬性 花費時間 運動曲線 什麼時候開始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 過渡的意思 這句話寫到div裏面而不是 hover裏面 */
}
div:hover { /* 鼠標通過盒子，咱們的寬度變爲400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 全部屬性都變化用all 就能夠了 後面倆個屬性能夠省略 */
2D變形(CSS3) transform
transform 是 CSS3 中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，能夠取代大量以前只能靠Flash才能夠實現的效果。
移動 translate(x, y)
translate(50px,50px);使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。
能夠改變元素的位置，x、y可爲負值；
- translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
- translateX(x)僅水平方向移動（X軸移動）
- translateY(Y)僅垂直方向移動（Y軸移動）
讓定位的盒子居中：
.box {
width: 400px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的本身的一半 */
}
縮放 scale(x, y)
transform:scale(0.8,1);能夠對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。
- scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
- scaleX(x)元素僅水平方向縮放（X軸縮放）
- scaleY(y)元素僅垂直方向縮放（Y軸縮放）
scale()的取值默認的值爲1，當值設置爲0.01到0.99之間的任何值，做用使一個元素縮小；而任何大於或等於1.01的值，做用是讓元素放大 1.
旋轉 rotate(deg)
能夠對元素進行旋轉，正值爲順時針，負值爲逆時針：
transform:rotate(45deg);單位是 deg 度數 ，表示順時針旋轉45度。也有
transform-origin能夠調整元素轉換變形的原點
div{
transform-origin: left top;transform: rotate(45deg);
} /* 改變元素原點到左上角，而後進行順時旋轉45度 */
若是是4個角，能夠用 left top這些，若是想要精確的位置， 能夠用 px 像素。
傾斜 skew(deg, deg)
transform:skew(30deg,0deg);經過skew方法把元素水平方向上傾斜30度，處置方向保持不變。可使元素按必定的角度進行傾斜，可爲負值，第二個參數不寫默認爲0。
3D變形(CSS3) transform
2d 只有 x軸 y軸， 3d 還有 z軸
rotateX()
就是沿着 x 立體旋轉.
img {
transition:all 0.5s ease 0s;
}
img:hover {
transform:rotateX(180deg);
}
rotateY()
沿着y軸進行旋轉
img {
transition:all 0.5s ease 0s;
}
img:hover {
transform:rotateX(180deg);
}
rotateZ()
沿着z軸進行旋轉
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg);
}
透視(perspective)
透視能夠將一個2D平面，在轉換的過程中，呈現3D效果。
- 透視原理： 近大遠小 。
- 瀏覽器透視：把近大遠小的全部圖像，透視在屏幕上。
- perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置。perspective 通常做爲一個屬性，設置給父元素，做用於全部3D轉換的子元素
透視距離原理：
目前瀏覽器都不支持 perspective 屬性。Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。
-webkit-perspective:500;
translateX(x)
僅水平方向移動（X軸移動），主要目的實現移動效果
translateY(y)
僅垂直方向移動（Y軸移動）
ranslateZ(z)
transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就必定會說到離什麼參照物遠或近，在這裏參照物就是perspective屬性）。好比設置了perspective爲200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，由於至關於跑到後腦勺去了，正常狀況下，是看不到本身的後腦勺的。
translate3d(x,y,z)
其中，x和y能夠是長度值，也能夠是百分比，百分比是相對於其自己元素水平方向的寬度和垂直方向的高度和；z只能設置長度值。
backface-visibility
backface-visibility 屬性定義當元素不面向屏幕時是否可見。
backface-visibility: visible | hidden; /* 只在 Internet Explorer 十、Firefox、Chrome 以及 Safari 中有效。 */
動畫(CSS3) animation
動畫是CSS3中具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。語法格式：
animation:動畫名稱 花費時間 運動曲線 什麼時候開始 播放次數 是否反方向;
/* 關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意 */
@keyframes 動畫名稱 {
from{ 開始位置 } 0%
to{ 結束 } 100%
}/* from 和 to 能夠變成半分比，能夠添加多個百分比，相似動畫裏面的幀 */
animation-iteration-count: infinite; /* 無限循環播放 默認是1次 */
animation-direction： alternate; /* 動畫應該輪流反向播放 默認是 normal */
animation-play-state: paused; /* 暫停動畫，運行動畫是 running */
伸縮佈局(CSS3)
CSS3 在佈局方面作了很是大的改進，使得咱們對塊級元素的佈局排列變得十分靈活，適應性很是強，其強大的伸縮性，在響應式開中能夠發揮極大的做用。
主軸：Flex 容器的主軸主要用來配置 Flex 項目，默認是水平方向
側軸：與主軸垂直的軸稱做側軸，默認是垂直方向的
方向：默認主軸從左向右，側軸默認從上到下。主軸和側軸並非固定不變的，經過flex-direction能夠互換。
Flex佈局的語法規範通過幾年發生了很大的變化，也給Flexbox的使用帶來必定的侷限性，由於語法規範版本衆多，瀏覽器支持不一致，導致Flexbox佈局使用很少
各屬性詳解
1.flex 子項目在主軸方向縮放比例，不指定 flex 屬性，則不參與伸縮分配
- min-width 表示最小值， min-width: 280px 最小寬度 不能小於 280
- max-width: 1280px 最大寬度 不能大於 1280
2.flex-direction 調整主軸方向（默認爲水平方向）
- flex-direction: column 垂直排列
- flex-direction: row 水平排列
攜程網手機端地址就是用的 flex 佈局，攜程網
文字陰影(CSS3)
給文字添加陰影效果 Shadow 影子
text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色;
/* 前兩項是必須寫的。 後兩項能夠選寫。 */
背景漸變
在線性漸變過程當中，顏色沿着一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或着沿任何任意軸。兼容性問題很嚴重。
/* 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向 */
background: -webkit-linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)；
background: -webkit-linear-gradient(left, red , blue);
或者
background: -webkit-linear-gradient(漸變的起始位置， 顏色， 顏色....)；
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
背景縮放(CSS3)
經過background-size設置背景圖片的尺寸，就像咱們設置img的尺寸同樣，在移動Web開發中作屏幕適配應用很是普遍。
其參數設置以下：
a) 能夠設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高）
b) 設置爲cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，若有溢出部分則會被隱藏。平時用的cover 最多
c) 設置爲contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。
background-image: url('image.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
多背景(CSS3)
以逗號分隔能夠設置多背景，可用於自適應佈局 作法就是 用逗號隔開就行了。
- 一個元素能夠設置多重背景圖像。
- 每組屬性間使用逗號分隔。
- 若是設置的多重背景圖之間存在着交集（即存在着重疊關係），前面的背景圖會覆蓋在後面的背景圖之上。
background: url(test1.jpg) no-repeat scroll 10px 20px/70px 90px, url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
- 1. .md文件初相見
- 2. JavaScript知識點-周1.md
- 3. .md文件的知識
- 4. day02-認識微服務.md
- 5. 前端知識分享.md
- 6. CDMA_EVDO基礎知識.md
- 7. md
- 8. md寫做必備知識點
- 9. MD的一些基礎知識
- 10. H5Css3動畫 背景圖 製做幀動畫
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Markdown 教程 - Markdown 教程
- • 適用於PHP初學者的學習線路和建議
- • Git可視化極簡易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. .md文件初相見
- 2. JavaScript知識點-周1.md
- 3. .md文件的知識
- 4. day02-認識微服務.md
- 5. 前端知識分享.md
- 6. CDMA_EVDO基礎知識.md
- 7. md
- 8. md寫做必備知識點
- 9. MD的一些基礎知識
- 10. H5Css3動畫 背景圖 製做幀動畫