這有幾種，你可能還沒用過的CSS高級特效// 精通CSS

靠CSS 就寫出創意十足的設計是很困難的。到目前為止，就創建視覺特效而言，CSS 這門語言還是存在諸多限制。想用CSS 寫出Photoshop 般的效果，還差得很遠，個別情況下仍需要各種奇奇怪怪的招術助陣。

以前，要繞過種種限制，不得不犧牲簡潔性（加入大量元素，只為了展示效果的細節），或者犧牲性能（為了展現視覺效果，頁面中放了太多圖片及JavaScript）。

今天，我們就來介紹幾種能夠通過CSS 實現的特效。其中用到的一些CSS 特性還很新，瀏覽器支持不充分，但也有非常成熟的。很多特性在SVG 中已經存在很多年了，最近才加入到CSS 中。

這些技術能夠提升你的設計，就像做菜添加了調味料，平淡無奇的一盤菜也能頓時濃香四溢。使用它們的時候也得小心謹慎，必須考慮漸進式增強。另外也要知道，其中一些技術會有相關的bug。即使在支持它們的瀏覽器中，它們也通常還并不成熟。

圖1 展示了一個頁面（一些天體的介紹），其中包含很多視覺特效。就在幾年前，要通過CSS 實現這些效果幾乎是不可能的。整個頁面布局，就算能做出來，也要借助大量圖片和額外的HTML 元素。

今天，這些效果已經能夠在很多瀏覽器中通過CSS 來呈現了，即使做不到也能平穩地退化為可用版本。在一個頁面上集成大量視覺特效仍須謹慎，因為可能造成性能開銷，代價有大有小。

盡管如此，通過CSS 來完成它們仍然有很多好處，因為可以減少不必要的標記，而且維護起來比較容易。此外，隨著瀏覽器支持相應的規范，性能也會越來越好。

圖1 使用了很多視覺特效的頁面

接下來，我們就以這個“觀星指南”頁面作為例子，逐個講解其中涉及的技術點。

CSS Shapes

大家可能都知道，網頁布局基本上都是由矩形構成的，CSS Shapes 是一個新標準，旨在讓Web 設計者能使用各種形狀。形狀元素不僅會影響界面的外觀，還會影響頁面的內容流。

細說形狀

CSS Shapes 包含兩組新屬性，一組用于設置影響盒子中內容的形狀，另一組用于設置影響形狀元素周邊內容流的形狀。在圖2 中，我們看到一個被設置為圓形的形狀。其中左邊的圖形展示了外部形狀如何影響周邊的內容，而右邊的圖形展示了圓形中的內容如何受到內部形狀的影響。

圖2 外部形狀與內部形狀

這兩種形狀分別由不同級別的CSS Shapes 規范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對比較成熟的。本文不涉及shape-inside，因為目前還沒有瀏覽器實現它，也許在不久的將來會有吧。

shape-outside 屬性只能應用給浮動元素。這個屬性不改變元素自身的外觀，只會通過設置形狀影響其外部內容流。

在我們例子中的“Moon”部分，通過設置shape-outside: circle();實現了文本流環繞月亮圖片的效果（見圖3）。

.fig-moon {
 float: right;
 max-width: 40%;
 shape-outside: circle();
}

圖3 文本圍繞月亮圖片周圍的圓形實現了繞排

在解釋形狀構造原理之前，先了解一下shape-outside 如何影響布局。圖片文件本身的背景是黑色的，如果把這一區塊的背景改成其他顏色，我們會看得更清楚（見圖4）。圖片本身還是方形的，但文本流環繞著其中的圓形。在不支持CSS 形狀的瀏覽器中，文本會像往常一樣環繞矩形。

注意：如圖4 所示，文本流只繞排在浮動元素的左側。只能讓形狀的一側影響文本的行盒子。即使形狀右側有空間，文本也不會填進去。

1. 形狀函數

前面例子中的shape-outside 屬性使用了一個值：circle()。這是一個形狀函數，類似的形狀函數還有ellipse()、polygon()、inset()。前兩個分別用于定義橢圓形和多邊形，inset()則表示嵌入在盒子邊界內的矩形，也可以指定圓角，算是CSS 2.1 中clip 屬性的加強版，只是語法不同而已。

此處圓形和橢圓形的語法，類似于第5 章的放射性漸變的大小及位置的語法：

.shape-circle {
 /* 圓形接受一個半徑值和一個位置值 */
 shape-outside: circle(150px at 50%);
}
.shape-ellipse {
 /* 橢圓形接受兩個半徑值和一個位置值 */
 shape-outside: ellipse(150px 40px at 50% 25%);
}

與漸變函數類似，圓形和橢圓形函數也有合理的默認值。前面月亮圖片的circle()函數并未傳入參數，而默認的參數是以元素中心為圓心，以最近邊為半徑。

inset()函數需要傳入一組長度值，分別表示到上、右、下、左邊的距離，很像margin 和padding 簡寫。同樣，1~3 個值的外邊距和內邊距簡寫規則在這里也適用。此外，還可以通過round關鍵字指定圓角，隨后是半徑值，與border-radius 屬性的類似：

.shape-inset {
 /* 距離外部盒子的上、下邊各20 像素，
 * 距離外部盒子的左、右邊各30 像素，
 * 還有半徑為10 像素的圓角
 */
 shape-outside: inset(20px 30px round 10px);
}

相對復雜一些的是polygon()函數。這個函數接受一系列坐標對，用于在盒子表面指定多個點，坐標相對于盒子的左上角，最終把各個點連接起來就是要創建的形狀。在“Planets”部分，我們為土星創建了一個多邊形。

創建多邊形最簡單的一種方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且會在檢查形狀元素時給出預覽。這個插件會添加額外的工具，因此既可以通過它看到形狀如何影響頁面，也可以通過創建并拖動控制點來創建新形狀（見圖5）。

圖5 在Chrome 中通過Shapes Editor 插件繪制的形狀

然后就可以把得到的多邊形復制粘貼到代碼中：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}

多邊形中每個點的坐標以百分比表示，這樣可以保證最大的靈活度。當然也可以在這里使用任意長度值，比如像素、em，甚至calc()表達式。

2. 形狀圖片

基于復雜的圖片創建多邊形會非常麻煩。好在我們可以直接在圖片的源文件上基于透明度來創建形狀。比如，可以比照預期的形狀新創建一張圖片。但土星的圖片已經是帶透明度的PNG格式了，因此可以直接通過它來生成形狀。我們要做的就是把shape-outside 的值由polygon()函數修改為指向該圖片的url()函數：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
}

如果在Chrome 開發者工具里檢查這張圖片，會看到如圖6 所示的模樣。可以看到，圖片的透明度數據被用于生成形狀了。

圖6 圖片透明區域的輪廓被用于生成形狀

提示：只通過瀏覽器打開HTML 文件是不行的，就算瀏覽器支持CSS Shapes 也不行。必須通過Web 服務器取得這個頁面，這樣引用的圖片才會帶有合適的HTTP 首部信息，告訴瀏覽器該圖片與CSS 來自同一個域。這種安全機制是較新的瀏覽器才有的，是為了防止引用的文件對你的計算機造成危害。

默認情況下，形狀輪廓會沿圖片完全透明區域的邊緣生成，但這個值可以通過shape-imagethreshold 屬性來修改。默認值是0.0（完全透明），而較大的值（最大為1.0）意味著較高的不透明度也可以用于生成形狀邊界。比如，修改土星圖片的不透明度閾值為0.9，則半透明的土星環將不再被包含在形狀內，結果文本會覆蓋其上（見圖7）。

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-image-threshold: 0.9;
}

圖7 使用shape-image-threshold 提高不透明度閾值后，原來圖片中半透明的部分在生

3. 形狀盒子與邊距

除了使用形狀函數或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點不對，畢竟元素盒子都是方形的。不過，形狀也能依照圓角生成。

比如，以前面的月亮圖片為例，如果我們想改變區塊背景的顏色，同時也去掉圖片周圍的黑色區域（如圖11-8 所示），那么可以在圖片上使用border-radius 來創建圓形。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
}

圖8 給月亮圖片應用border-radius

僅有圓角邊框還不能生成形狀，還得通過shape-outside 屬性告訴瀏覽器，以border-box作為生成形狀的依據。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: border-box;
}

這樣外部形狀就變成了環繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個例外。因為形狀是基于浮動區域的，浮動區域也包含外邊距，所以這個關鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。

對于形狀而言，參照盒子為margin-box 時，形狀仍然會參照圓角邊框，但這樣一來就可以像定義常規的外邊距一樣，給月亮圖片周圍添加一些邊距了。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: margin-box;
 margin: 2em;
}

這樣，文本會環繞著弧形的外邊距形狀排布。如果在Chrome 開發者工具中檢查圖片，可以看到此時形狀的樣子，還有原始的外邊距（見圖9）。

圖9 將margin-box 作為形狀的參照后，可以為形狀設置外邊距

如果想給更復雜的土星圖片添加外邊距，可以使用另一個屬性shape-margin，這個屬性用于給整個形狀添加外邊距，與創建形狀的方法無關（見圖10）。

.fig-planet {
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-margin: 1em;
}

圖10 為土星形狀添加shape-margin 屬性

剪切與蒙版

CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變元素形狀的一種方式。實際上，通過把元素的部分區域變透明，是可以影響元素自身形狀的。

剪切（clipping）使用路徑形狀定義硬邊界，可以基于該邊界完全切換元素的可見性。蒙版（masking）不太一樣，它用于將元素的某些區域設置為更透明或更不透明。剪切會影響對象的響應區域，而蒙版不會。比如要觸發懸停，鼠標必須移到剪切后元素的可見區域。而對于加了蒙版的元素，無論鼠標下面的區域是否可見，只要位于該元素上，都會激活:hover 狀態。

一、剪切

剪切最早是在CSS 2.1 中通過clip 屬性引入的。但這個屬性只能應用給絕對定位的元素，而且只能把這些元素剪切為矩形（使用rect()函數）。沒勁！

好在新的clip-path 屬性提供了更多選擇。它可以使用CSS 形狀中的基本形狀函數定義如何剪切元素。它還能使用SVG 文檔剪切元素，只要通過URL 引用一個<clipPath>元素即可。

下面從使用形狀函數定義剪切路徑開始。這個特性之前只有Blink 和WebKit 內核的瀏覽器支持，而且除了不加前綴的屬性，還要使用加-webkit-前綴的屬性。為簡單起見，后面的例子只展示不加前綴的標準屬性。

“觀星指南”頁面中的所有區塊都是被剪切過的，因此都有一些向對角線傾斜（見圖11）。

圖11 頁面中的所有區塊都被剪切過，因此都有點傾斜

每個區塊都有一個stacked 類，其中使用多邊形函數指定了剪切路徑：

.stacked {
 clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}

這個多邊形沒有前面土星的多邊形復雜，因此可以稍微深入地講解一下。多邊形中的每一個點都對應著一對空格分隔的值，值對之間以逗號隔開。

先從左上角開始，0 3vw 表示x 軸剪切長度為0，y 軸剪切長度為3vw。這里使用相對視口的單位保證角度以視口大小為參照。接下來的坐標是右上角坐標100% 0。第三個100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因為這個y 軸坐標是從上方開始計算的。最后，左下角的坐標是0 100%。

因為剪切路徑只影響元素渲染后的外觀，而不會影響頁面流，所以剪切后的元素之間會出現透明間隙（見圖11-12）。為消除間隙，可以給每個堆疊的區塊應用一個負外邊距，而且要比3vm稍大一些，好讓相鄰的區塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應用這個負外邊距，這時候正好可以用上@supports 規則。因為這些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：

@supports ((clip-path: polygon(0 0)) or
 (-webkit-clip-path: polygon(0 0))) {
 .stacked {
 margin-bottom: -3.4vw;
 }
}

圖12 如果只應用剪切，區塊之間會出現間隙

在@supports 規則塊中，我們測試了瀏覽器是否支持最小的多邊形（只有一個點）。增加這些保障后，區塊就可以完美地對齊了。而在不支持clip-path 的瀏覽器中，區塊也會像平常一樣上下相接，不會重疊。

使用SVG

可以使用polygon()、circle()、ellipse()和inset() 函數創建剪切路徑，與創建CSS形狀一樣。對于復雜的形狀，建議大家還是使用圖片編輯器來創建，然后再將最終的圖形作為剪切路徑的源。我們在頁面導航中使用的形狀就是這樣生成的，如圖13 所示。

圖13 導航區中復雜的形狀是基于SVG 源實現的剪切

使用圖形作為剪切源，需要先使用SVG 創建剪切路徑，然后再通過一個URL 引用到形狀函數中。首先，要在Illustrator、Sketch 或Inkscape 之類的圖形編輯器中創建想要的形狀。雖然不那么簡單，但還是可行的。

導航區塊本身是一個包含頁內鏈接的無序列表：

<nav class="stacked section nav-section inverted">
 <ul class="wrapper">
 <li><a href="#moon">The Moon</a></li>
 <li><a href="#sun">The Sun</a></li>
 <li><a href="#planets">Planets</a></li>
 <li><a href="#milky-way">Galaxy</a></li>
 <li><a href="#universe">Universe</a></li>
 </ul>
</nav>

在此，我們就不涉及導航本身的樣式了，大家只要知道這里用到了Flexbox 水平布局導航項目，將它們固定為100 像素見方的方塊就夠了。

然后，在支持SVG 的圖形編輯器（我們用的是Adobe Illustrator）中創建一張圖片。圖片的大小也是100 像素見方（見圖14）。其中的星球由兩個黑色的形狀構成，一個圓形和一個旋轉后的橢圓形。接著把這個圖片保存為SVG 格式，命名為clip.svg。保存過程因編輯器而異，這里

就不說了，我們只關注大體的流程。

圖14 使用Illustrator 創建的星球圖形

下面在代碼編輯器中打開生成的SVG 文件，看上去大概是這樣的：

<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="45"/>
 <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50"
rx="63.9" ry="12.8"/>
</svg>

為了把這個圖片轉換為剪切路徑，需要把其內容包裝在一個<clipPath>元素中，并添加一個ID 屬性：

<svg xmlns="SVG namespace"
 width="100px" height="100px" viewBox="0 0 100 100">
 <clipPath id="saturnclip">
 <circle cx="50" cy="50" r="40.1"/>
 <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50"
 cy="50" rx="62.9" ry="12.8"/>
 </clipPath>
</svg>

最后，就可以在CSS 中引用clip.svg 中的這個剪切路徑了：

.nav-section [href="#planets"] {
 clip-path: url(img/clip.svg#saturnclip);
}

這樣就可以把多個剪切源保存在一個SVG 文件中，然后通過URL 的片段ID 分別引用。

二、蒙版

“觀星指南”頁面的標題好像半隱于地球大氣層的后面（見圖15）。這種透明漸隱效果是通過蒙版實現的。

圖15 頁面標題“Stargazing”通過蒙版實現了漸隱效果

Safari 早在2008 年就實現了蒙版，使用的是非標準屬性-webkit-mask-image。這個屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個像素都有一個阿爾法級別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對應的像素也不可見。相反，蒙版圖片中完全不透明的區域，對應的加蒙版元素的區域也會完全可見。蒙版圖片的顏色與此無關，因此灰度圖常用作蒙版。

除了圖片，還可以使用CSS 漸變來創建蒙版。頁面標題的蒙版效果就是這么做的：

.header-title {
 mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
 rgba(0,0,0,0) 45%,
 #000 70%);
 mask-size: 100% 200%;
}

相信大家都了解這個語法：mask-image 后面的值非常類似background-image 屬性的值，甚至也可以聲明多個蒙版。

除了指定蒙版圖片，還可以指定蒙版的大小和位置。對于我們這個例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們在這里簡單地把漸變圖片移動到下面，那么蒙版圖片的上半部分就會是透明的，結果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對位置關系。

圖16 蒙版圖片看起來就像是位于文本上方

在WebKit 最初實現的基礎上，蒙版相關的屬性得以標準化和擴展，同時也支持了對應的SVG效果。沒錯，就像clip-path 一樣，SVG 中的蒙板也可以應用給HTML 內容。

.header-title {
 /*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
 mask: url(#ellipseMask);
}
與前面CSS 漸變等價的SVG 標記如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
 <radialGradient id="radialfill" r="0.9" cy="1.1">
 <stop offset="45%" stop-color="#000"/>
 <stop offset="70%" stop-color="#fff"/>
 </radialGradient>
</mask>

與剪切路徑一樣，這里也需要使用objectBoundingBox 坐標系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個maskContentUnits 屬性，這里也將其設置為與蒙版形狀相同的坐標系。

SVG 蒙版源使用明度值（luminance）而非阿爾法級別來應用蒙版。這意味著蒙版較暗的區域對應的加蒙版元素區域會較透明，而蒙版較亮的區域對應的加蒙版元素區域會較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。

瀏覽器會在你使用蒙版圖片時使用阿爾法級別，在你使用SVG 蒙版時使用明度值。在對標準的建議中，有一個mask-type 屬性可以切換這個應用蒙版的依據值。

另外，-webkit-前綴版與建議的標準版屬性之間也有一些差異。可以參考MDN 中WebKit實現的完整屬性和語法。

——

本文很大程度上跳出了沉悶單調的頁面盒子世界。我們探討了如何通過CSS 形狀美化頁面中的元素，以及如何通過剪切路徑畫出視覺邊界。使用蒙版則可以進一步控制界面中元素的可見性。

通過這些特效的學習，我們也看到了SVG 與CSS 結合的威力，也極大擴展了我們未來設計的想象空間。

——本文節選自《精通CSS：高級Web標準解決方案（第3版）》

CSS暢銷經典全面升級

CSS作為Web標準的一部分，是現代網頁設計中必不可少的關鍵元素。鑒于CSS標準化的快速發展，想要成為CSS高手，打造出令人驚艷、辨識度高的網站，就必須充分了解當前CSS規范各模塊的新特性、新技術和新思想。

本書是經典CSS參考指南，自第1版出版至今一直暢銷不衰。第3版針對當前瀏覽器支持度足夠好的CSS特性全面改寫，著眼于如何為更大、更復雜的網站編寫優雅、巧妙、易維護的代碼。兩位作者均是技術與寫作才能俱佳的開發高手，他們將自己對現代CSS實踐的深刻理解融入書中，結合大量復雜實現情景，清晰展示了如何利用新技術寫出高度靈活、易維護和可擴展的代碼，并讓這些代碼在不同瀏覽器和不同平臺上跑起來。

第1章　基礎知識

第2章　添加樣式

第3章　可見格式化模型

第4章　網頁排版

第5章　漂亮的盒子

第6章　內容布局

第7章　頁面布局與網格

第8章　響應式Web設計與CSS

第9章　表單與數據表

第10章　變換、過渡與動畫

第11章　高級特效

第12章　品控與流程

tml入門基礎筆記(簡單實用)

一、初識html

1.HTML：Hyper Text Markup Language（超文本標記語言）

java是一門編譯性語言

html是一門解釋性的標記語言

超文本：文字、圖片、音頻、視頻、動畫、超鏈接

標記：就是指組成HTML的各種標簽

2.HTML5的優勢：

1、各大瀏覽器廠商對它的支持

2、市場的需求

3、跨平臺

3.W3C標準：

1、結構化標準：指用什么語言去搭建整個網站（html 5）

2、表現化標準：指用什么去裝飾整個網站（css3）

3、行為標準：指用什么去實現網站的功能（JavaScript，jQuery）

4.html的基本結構：

<html>

<head>

<title>天貓精選-理想生活上天貓</title>

</head>

大家好！！！！！

</body>

</html>

雙標簽：有個兩個標簽成對出現的叫做雙標簽

表示HTML網頁的開始，表示網頁的結束

表示網頁頭部的開始，表示網頁頭部的結束

表示網頁身體的開始，表示網頁身體的結束

表示網頁標題的結束

標題標簽

<h1></h1>....<h6></h6>:會對文字進行加粗，并且改變字體的大小，還會進行換行

段落標簽

<p></p>:表示它獨占一行，會保留段落之間的間距

加粗

<strong></strong>:表示加粗

斜體

<em></em>:表示斜體

字體設置

<font></font>:表示字體

屬性：color顏色

face字體的樣式

size字體的大小

單標簽：只有一個，開始就結束的叫做單標簽

屬性：charset = “utf-8”;utf-8表示國際編碼格式，所有的字符都能識別

換行標簽

<br/>：表示換到下一行

水平線標簽

<hr/>:表示水平線

屬性：width表示水平線的寬度

size表示水平線的厚度

color表示水平線的顏色

align表示水平線的水平位置，left左邊，center中間，right右邊

圖像標簽

src表示的是圖片地址

絕對路徑：直接寫完整圖片所在的位置

相對路徑：先找到和你的網頁所在同一級的圖片所在位置，然后再去在這個基礎

去找圖片的位置，如果圖片在下一級那么使用“/”來找到它，如果

上一級使用“..”來找到它

alt表示的是圖片加載失敗的替代文字

title表示的是鼠標懸浮時圖片的提示文字

width表示圖片的寬度

height表示圖片的高度

特殊標簽：

大于符號：>（great than）

小于符號：<（less than）

空格符號：

版權符號：?

注釋：

5.超鏈接標簽

href表示鏈接的地址，使用相對路徑的方式去使用

target表示連接的方式

_blank表示在新窗口打開

_self表示在本窗口打開

_parent表示在父窗口打開

1、頁面間的鏈接，用于兩個頁面之間相互的跳轉

2、錨鏈接，用于頁面之間定位

①要設置一個錨點，語法錨點

②將點擊之后要跳轉的超鏈接設置跳轉的錨點位置，語法：

如果不在同一個頁面中，先寫好要跳轉頁面所在的位置，然后再寫錨點的名字

3、功能性鏈接 (發郵件、msn、可以打開本地的相應的客戶端)

語法：

二、網頁媒體元素

1.視頻元素<video></video>

屬性：src表示添加視頻的路徑(位置)

controls表示在添加的視頻元素上添加播放控件，只有一個屬性值

/autoplay表示自動播放（慎用），只有一個屬性值

如果屬性只有一個值，屬性值可以省略不寫

source表示引用的視頻源路徑，一般會引用多個源路徑，以避免瀏覽器不兼容的問題

2.音頻元素<audio></audio>

屬性：src表示添加視頻的路徑（位置）

controls表示在添加的音頻元素上添加播放控件，只有一個屬性值

/autoplay表示自動播放（慎用），只有一個屬性值

source表示引用的音頻源路徑，一般會引用多個源路徑，以避免瀏覽器不兼容的問題

3.內嵌框架<iframe></iframe>

屬性：src表示添加內嵌內容的路徑

name表示這個框架的名字

width表示這個框架的寬度

height表示這個框架的高度

frameborder表示內嵌框架的邊框

scrolling表示是否出現滾動條

作用：

1、將多個網頁重復的部分抽取出來，通過內嵌框架的方式，放到各個網頁中

2、使用<a>標簽跳轉到指定的框架中，先在指定要跳轉到的框架中取一個name，使用target=“name的值”

<a>標簽一定要寫href屬性才能生效，如果不想跳轉到任何頁面，那么href="#",表示該超鏈接為空

鏈接，點擊空鏈接會刷新頁面

4.語義化結構標簽：主要是為了讓結構更加清晰化

<header>表示頁面頭部內容

<section>表示頁面主體內容

<footer>表示頁面底部內容

<nav>表示導航欄內容

<aside>表示側邊欄內容

<article>表示頁面獨立文章內容

三、表單元素

1.表單<form></form>

屬性：1、method表示表單的提交方式，有兩個值，第一個叫post，第二個叫get

get方式的請求會將表單中所有表單元素信息顯示在地址欄中

post方式的請求必須有一個服務器來處理請求，所有表單元素的信息不會顯示在地址欄中，在實際開發中一般使用post方式請求

2、action表單要提交的位置

2.表單元素

語法：

屬性： name表示input標簽的名字

value表示input標簽的值

type表示input標簽的元素類型

文本框：專門用來輸入文字

語法：<input type="text" name="userName" value="admin"/>，type的值為text

size表示文本框的長度

maxlength表示允許輸入的最大字符長度

密碼框：用來輸入密碼

語法：<input type="password" name="userName" value="admin"/>，

type的值為password

size表示文本框的長度

maxlength表示允許輸入的最大字符長度

單選按鈕

<input type="radio" name="sex" value="boy"/>男

<input type="radio" name="sex" value="girl"/>女

注意：單選按鈕的每個input中的name值必須相同，不然不能實現選擇一個切換的作用

checked屬性表示默認選中

復選框

<input type="checkbox" name="hobby" value="" />打游戲

<input type="checkbox" name="hobby" value="" checked/>睡覺

<input type="checkbox" name="hobby" value="" />出去約會

復選框可以選擇多個，并且可以取消

checked屬性表示默認選中

下拉列表框

<select>表示定義了一個列表框

<option>表示列表項

</select> selected表示默認選中

按鈕

1、提交按鈕submit，它可以將表單中的信息提交到指定的位置

2、重置按鈕reset，它可以將表單中的信息恢復到默認值

3、普通按鈕button，它只是單純起一個按鈕的作用，需要和JavaScript和jQuery一起使

用，實現各種功能

4、圖片按鈕image，src表示圖片的路徑，也具有提交作用

多行文本域：需要輸入多行文字

<textarea>表示定義了一個多行文本域

cols表示文本域的寬度

rows表示文本域的高度

文件域：上傳文件

需要設置編碼屬性enctype="multipart/form-data"，表示將表單數據分為多部分提交

郵箱：可以進行郵箱驗證

網址：可以進行網址驗證

數字：提供輸入數字

min表示允許的最小值

max表示允許的最大值

step表示每次增加或者減少的數字間隔

value表示默認值

搜索框：可以搜索提示關鍵字的文本框

3.表單的高級應用

1、隱藏域：主要應用于在提交信息時不想讓用戶看到的信息進行隱藏提交

2、只讀和禁用屬性

只讀：表示在網站上用戶只能夠查看，不能夠修改的數據，使用readonly添加只讀

禁用：一般表示在滿足某個條件之后，才能使用的功能，使用disabled添加禁用

3、表單元素的標注

①選擇要點擊后跳轉文本加上<label>標簽

②選擇跳轉對應的表單元素，給它加上id這個屬性（id屬性值在整個網頁只能出現一

次，不可以有重復的id值）

③在<label>中添加for屬性，然后屬性值為對應的id值

4.表單的初步驗證

為什么要進行表單驗證

1、減輕服務器的壓力

2、保證數據的可行性和安全性

5.驗證的方法

1、placeholder表示這個表單元素期待用戶輸入什么信息，它是起提示作用，當用戶輸入

內容時，提示信息隱藏

2、required表示表單元素填寫內容不能為空，使用了required的該表單元素必須填寫

3、pattern表示表單中的內容必須和輸入的正則表達式一致

^表示正則表達式的開始

$表示正則表達式的結束

[]表示在中括號中任選其中一個

\d表示匹配0~9之間的任意一個數

{n}表示前面的一種匹配方式匹配的次數，表示匹配n次

-表示就是-

\w表示匹配所有字母或數字或下劃線

\u4E00-\u9FA5匹配漢字

{4,10}表示匹配前面的一種匹配方式4~10次

A-Z表示匹配大寫的英文字母

a-z表示匹配小寫的英文字母

|表示或者

四、初識CSS3

1.CSS:層疊樣式表，它是專門用來設計網頁風格的

2.CSS的優點

1、內容與表現分離，便于網頁維護

2、網頁的表現統一，統一風格

3、豐富的樣式，使得頁面布局更加靈活

4、減少網頁的代碼量，增加網頁的瀏覽速度

5、運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄

3.CSS樣式的語法

選擇器{

聲明(可以為1~n條)

屬性:屬性值;

}

選擇器：需要添加這些聲明的元素（標簽）

聲明：由屬性和屬性值組成，中間用“:”,使用“;”結尾

4.在html中添加樣式的方式

1、行內樣式

在需要添加樣式的標簽中，添加一個style屬性，在style屬性中添加聲明

2、內部樣式

在里面添加一個,然后通過選擇器和聲明添加樣式

3、外部樣式

它可以實現表現與內容的徹底分離，可以讓樣式表重復使用，便于維護和修改，并且

可以極大的減少代碼量

①鏈接外部樣式表

語法：

href表示引用的哪一個外部樣式表

rel表示使用的是樣式表

type表示文本類型為css類型

②導入外部樣式表

語法：@import url(“css/第一個外部樣式.css”);

區別：鏈接外部樣式表它是先將外部的CSS樣式添加到網頁中進行加載，再加載網頁的

內容，導入外部樣式表是先加載網頁中的內容，再進行外部樣式表的加載

樣式表的優先級別

行內樣式>內部樣式>外部樣式，遵循“就近原則”

5.CSS3中的選擇器

一、基本選擇器

1、標簽選擇器：以標簽名稱作為選擇器的名稱

選擇所有網頁的該標簽元素，比如：p表示選擇該網頁中所有的p標簽

2、類選擇器：以類的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“.”，類

名能夠重復使用

3、id選擇器：以id的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“#”，id

名在該網頁只能出現一次，具有唯一性

選擇器的優先級

id選擇器>類選擇器>標簽選擇器

二、層次選擇器

1、后代選擇器

語法：E F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的后代元素

比如：body p{},表示匹配所有body的后代p元素

2、子選擇器

語法：E>F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的子元素

比如：body>p{},表示匹配所有body的子元素中的p元素

3、相鄰兄弟選擇器

語法：E+F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的相鄰兄弟元素

比如：.p1+p{},表示匹配.p1的相鄰元素并且為p元素，只匹配后面的元素

4、通用兄弟選擇器

語法：E~F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的所有兄弟元素

比如：.p1~p{},表示匹配.p1的所有兄弟元素并且為p元素，只匹配后面的

元素

三、結構偽類選擇器

1、語法：E>F:first-child，E表示的是被匹配的元素，F表示被匹配的F:first-

child表示被匹配的E的子元素中第一個元素并且這個元素是F元素

2、語法：E>F:last-child，E表示的是被匹配的元素，F表示被匹配的F:last-

child表示被匹配的E的子元素中最后一個元素并且這個元素是F元素

3、語法：E>F:nth-child(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-

child(n)表示被匹配的E的子元素中最后一個元素并且這個元素是F元素

even表示匹配所有偶數行

odd表示匹配所有奇數行

4、語法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-

of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n個

E>F:nth-child(n)表示先匹配所有的兒子，再去找第幾個兒子是不是F元素，如果是

就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第幾個元素

四、屬性選擇器

1、E[attr],E表示匹配的E元素，attr表示屬性，匹配具有attr屬性的E元素

2、E[attr=val],匹配具有attr屬性，并且屬性值為val的E元素

3、E[attr^=val],匹配具有attr屬性，并且屬性值以val開頭的E元素

4、E[attr$=val],匹配具有attr屬性，并且屬性值以val結尾的E元素

5、E[attr*=val],匹配具有attr屬性，并且屬性值中包含val的E元素

六、CSS3美化網頁元素

前言：<span>這個標簽沒有任何實際意義，它只是為了突出顯示某個部分，它是一個行內元素，不能夠獨

占一行，并且該元素所占的區域是根據內容大小決定，不會因為改變寬度和高度改變它的大小

<div>這個標簽沒有任何實際意義,它只是為了將某些部分裝起來，它是一個塊元素，會獨占一行，

并且該元素所占的區域是根據它的寬度和高度決定，會因為改變寬度和高度改變它的大小

1.字體樣式：

1、font-family字體類型，字體類型的值有：“楷書”、“隸書”、“微軟雅黑”、英文字體

可以寫多個字體格式，使用“，”隔開，如果同時存在英文和中文字體，英文就顯示

英文字體，中文就顯示中文字體，并且英文字體要放在中文字體前面

2、font-size字體大小，就是改變字體大小，字體大小的單位使用px

3、font-style

字體風格，normal正常的（默認）、italic（傾斜的）、oblique（傾斜的）

4、font-weight字體粗細，bold（粗體）、bolder（更粗的）、lighter（細的）

font字體屬性，需要滿足字體屬性設置順序，風格=》粗細=》大小=》類型

2.文本樣式：

1、color

文本顏色

①使用英文單詞去表示顏色

②使用十六進制的方式表示，并且如果相鄰的兩兩數字相同，可以縮寫為一位

③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值從0~255

a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明

2、text-align

水平對齊方式，設置文本的水平對齊方式

屬性值：center居中，left居左，right居右

3、vertical-align垂直對齊方式，設置文本的水平對齊方式

屬性值：middle居中，top居上，bottom居下

4、text-indent設置文本首行縮進，屬性值一般使用em相對單位，em表示長度為文本字符

大小的長度

5、line-height設置文本行高，屬性值使用px為單位，還可以設置為倍數

6、text-decoration

文本裝飾

屬性值：①none表示沒有任何裝飾

②underline表示下劃線

③overline表示上劃線

④line-through表示刪除線

7、text-shadow文本陰影

語法：text-shadow : color x-offset y-offset blur-radius; color陰影顏色

x-offset表示X軸偏移量，正數往右偏移，負數往左偏移

y-offset表示Y軸偏移量，正數往下偏移，負數往上偏移 blur-radius表示模糊半徑

2.超鏈接偽類

1、a:link單擊訪問前的超鏈接樣式

2、a:visited單擊訪問后的超鏈接樣式

3、a:hover鼠標懸浮的超鏈接樣式

4、a:active鼠標單擊未釋放的超鏈接樣式

列表樣式

1、list-style-type表示設置列表的標記類型

常用類型：none表示沒有標記

disc表示實心圓點

square表示實心正方形

circle表示空心圓點

decimal表示數字

2、list-style-image使用圖像代替標記

3、list-style-position表示在哪個位置使用標記

4、list-style設置列表屬性，通常使用這個屬性

3.背景樣式

1、背景顏色background-color

①使用英文單詞去表示顏色

②使用十六進制的方式表示，并且如果相鄰的兩兩數字相同，可以縮寫為一位

③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值從0~255

a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明

有一個特殊值，transparent表示透明的意思，它是默認值

2、背景圖片background-image

url表示的圖片路徑

3、背景重復方式background-repeat

repeat表示沿水平方向和垂直方向進行重復

no-repeat表示不重復

repeat-x表示沿水平方向重復

repeat-y表示沿垂直方向重復

4、背景位移background-position：X軸方向偏移量 Y軸方向偏移量

①可以使用像素值來表示偏移量，比如：50px 50px;

②可以使用百分比來表示偏移量，比如：20% 50%;

③可以使用英文字母來表示偏移量，比如：center middle;

5、背景屬性設置所有的背景樣式

6、背景尺寸background-size

①auto表示背景圖片保持原樣，默認值

②percentage表示背景圖片大小根據容器大小的百分比決定大小，只寫一個值表示只

對一個值進行設置，另外一個值會根據圖片本身的比例等比例縮放

本身比例為4:3

400px 300px

800px 600px

1200px 900px

③直接使用像素值px來設置圖片大小，只設置一個值和百分比一樣

④cover放大充滿整個容器

⑤contain放大充滿整個容器，如果有一個方向充滿了整個容器，那么不在放大

4.漸變

1、線性漸變

：顏色沿著一條直線過渡

linear-gradient(漸變方向,顏色1，顏色2，顏色n)

不加前綴方向使用“to 方向”表示往哪個方向進行漸變，加上前綴之后使用“方向”

表示從哪個方向開始漸變

2、徑向漸變：從一個起點朝所有方向混合

-radial-gradient(漸變方向,顏色1，顏色2，顏色n)

5.瀏覽器前綴：(避免兼容問題)

IE瀏覽器前綴-ms-

Chrome瀏覽器前綴-webkit-

Safiri瀏覽器前綴-webkit-

Opera瀏覽器前綴-o-

Firefox瀏覽器前綴-moz-

七、盒子模型

1.盒子模型：就是一個虛擬的矩形容器

2.盒子模型的組成：

1、content（內容）：表示主要內容

2、padding（內邊距）：表示內容與邊框之間的距離

3、border（邊框）：表示包著內容的外框，邊框是有一定寬度的

4、margin（外邊距）：表示邊框外部與其他盒子的距離

3.邊框border

1、border-color邊框顏色

①使用英文字母來表示顏色

②使用十六進制來表示顏色

③使用三原色來表示顏色，rgb(),rgba()

所有的塊元素都是一個盒子模型

border-top-color上邊框，border-bottom-color下邊框

border-left-color左邊框，border-right-color右邊框

※※※※※※※

可以使用border-color去設置，可以取1~4個值任意一個

如果設置一個值表示對應所有的方向

如果設置兩個值，第一個值表示上邊框和它對應邊框的值，第二個值表示右邊框和它

對應的值

如果設置三個值，第一個值表示上邊框，第二個值表示右邊框和它對應的值，第三個

表示下邊框的值

如果設置四個值，第一個值表示上邊框，第二個值表示右邊框，第三個值表示下邊框，

第四個值表示左邊框，按照順時針的順序依次設置

2、border-width邊框的粗細

使用像素值去設置邊框的粗細，網頁一般使用這種方式

設置邊框顏色的方式一樣

3、border-style邊框的樣式

none表示沒有邊框

solid表示實線邊框

dashed表示虛線邊框

dotted表示點線邊框

設置邊框樣式的方式和置邊框顏色的方式一樣

border邊框屬性

可以設置邊框的所有屬性，不需要按照順序

border-left設置左邊框的屬性

border-right設置右邊框的屬性

border-bottom設置下邊框的屬性

border-top設置上邊框的屬性

外邊距margin

margin-top設置上外邊距的距離

margin-right設置右外邊距的距離

margin-bottom設置下外邊距的距離

margin-left設置左外邊距的距離

可以使用margin去設置，可以取1~4個值任意一個

和設置邊框顏色的方式一樣

使用margin設置盒子居中，語法：margin：0px auto;需要滿足兩個條件

①必須為塊元素

②必須設置盒子的寬度和高度

內邊距padding

padding-top設置上內邊距的距離

padding-right設置右內邊距的距離

padding-bottom設置下內邊距的距離

padding-left設置左內邊距的距離

可以使用padding去設置，可以取1~4個值任意一個

和設置邊框顏色的方式一樣

4.盒子模型的尺寸

盒子模型的尺存分為盒子模型的寬度和高度

盒子模型的外盒寬度=內容寬度+內邊距的左右寬度+邊框左右寬度+外邊距左右寬度

盒子模型的外盒高度=內容高度+內邊距的上下高度+邊框上下高度+外邊距上下高度

盒子模型的內盒寬度=內容寬度+內邊距的左右寬度+邊框左右度

盒子模型的內盒高度=內容高度+內邊距的上下高度+邊框上下度

5.拯救布局

使用box-sizing拯救布局，有3個值

1、content-box：默認值，表示設置的寬度和高度等于內容的寬度和高度，盒子的寬度和

高度通過計算獲得

2、border-box：表示設置的寬度和高度等于盒子的寬度和高度

3、inherit：繼承父元素的盒子模型模式

6.圓角邊框border-radius：為矩形邊框設置圓角效果

語法：border-radius:可以設置1~4個值;

設置一個值會對四個角進行設置

設置兩個值，第一個值設置左上角和它對角的值，第二值是設置右上角和它對角的值

設置三個值，第一個設置左上角，第二個設置右上角和它對角的值，第三個設置右下角的值

設置四個值，第一個設置左上角，第二個設置右上角，第三個設置右下角，第四個設置左下角

設置圓形

①必須盒子的寬度和高度相同

②圓角邊框的值必須將四個角的值都設置為寬度的一半或者50%

設置上半圓：寬度不變，高度變為一半，第一個值、第二值為一半，第三和第四個為0

設置下半圓：寬度不變，高度變為一半，第一個值、第二值為0，第三和第四個為一半

設置左半圓：寬度為一半，高度變不變，第一個值、第四值為一半，第二和第三個為0

設置左半圓：寬度為一半，高度變不變，第一個值、第四值為0，第二和第三個為一半

扇形：高度和寬度都為一半，需要哪一個方向的就添加哪個角的值，其他都為0

7.盒子陰影box-shadow

語法：box-shadow:inset x-offset y-offset blur-radius color;

第一個參數表示陰影的類型，不寫為外陰影，inset表示為內陰影

第二個參數表示陰影的水平偏移量，正數往右，負數往左

第三個參數表示陰影的垂直偏移量，正數往下，負數往上

第四個參數為模糊半徑，模糊范圍大小，越往外越模糊

第五個參數為陰影顏色

八、塊元素與行內（內聯）元素

1.塊元素與行內（內聯）元素的特性

1、塊元素：獨占一行，并且可以設置元素的寬高(div,h1-h6,p,列表)

2、行內元素：不是獨占一行，設置寬高對它不起作用，寬度由元素內容撐開。

2.display:顯示（元素以哪種形式進行顯示）

1、block：塊級元素的默認值，在元素前后會有換行

2、inline:行內元素的默認值，元素前后沒有換行

3、inline-block:行內塊元素，元素既有行內元素的特性(可以和其他元素顯示在同一行)又有塊級元素的特性（可以設置寬高）。

4、none:該元素不被顯示。

3.float:浮動:使得塊級元素排列在同一行

1、left:左浮動

2、right：右浮動

3、none:元素不浮動，按照標準文檔流顯示

4.clear：清除浮動

1、left：清除元素左邊的浮動

2、right:清除元素右邊的浮動

3、both：清除兩側

4、none:默認值，不清除浮動

5.解決父級邊框塌陷的方法

1、在浮動元素的后面加空div，并且給這個空div設置樣式：clear：both

2、給父級設置高度height

3、給父級添加屬性overflow:auto;

4、給父級添加偽類after

#father:after{

content:’’;

display:block;

clear:both

}

6.overflow:屬性用來處理溢出

1、visible:可見的，內容元素會被顯示出來，但是在父級邊框的外面

2、hidden:內容元素會被顯示在邊框里，但是超出的部分會被隱藏

3、scroll:內容元素會被隱藏，但是瀏覽器會提供滾動條，滾動以顯示超出的內容

4、auto:當內容元素超出父級的高度時就提供滾動條以顯示超出的內容，若內容未超出就不顯示滾動條。

九、定位與動畫

1.定位屬性:position

1、static:默認值，沒有定位

2、relative：相對定位，相對于元素原本的位置進行偏移，元素原來的位置會被保留，浮動元素設置相對定位后，是相對元素浮動以后的位置進行偏移。

3、absolute:絕對定位，相對于離元素最近的已經設置定位屬性的祖先元素為基準進行偏移，元素原來的位置不會被保留，如果沒有已經定位的祖先元素，則以瀏覽器窗口為基準進行偏移。

4、fixed：固定定位，以瀏覽器窗口為基準進行偏移。

5、定位的元素的層級會比未定位的元素的級別更高，相對定位通常用于給父元素設置定位屬性，但是不設置不偏移量，結合絕對定位使用，固定定位用于廣告欄，返回頂部的圖標，樓層導航等。

6、z-index：改變定位元素的堆疊順序，值為整數，值越大，級別越高，顯示在最上面。

2.動畫

1、變形

語法:transform:變形函數;

2、平移函數：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，單位為px；

3、縮放函數：scale(x,y);x代表元素寬度的縮放量，y代表高度的縮放量。

4、傾斜函數：skew(x,y);x代表元素水平方向的傾斜度數，y代表垂直方向的傾斜度數，單位是deg。

5、旋轉函數：rotate(x);x代表旋轉的度數，為正數時順時針旋轉，為負數時逆時針旋轉。

2、過渡transition：是一種動畫轉換過程，漸慢，漸快等。

語法：transition:過渡樣式的屬性過渡花費的時間過渡函數(過渡的速度) 過渡的延遲時間；

1)使用步驟

A、在元素默認樣式中聲明元素默認的樣式

B、聲明元素最終呈現的樣式，如懸浮(hover)，獲取焦點(focus)時的樣式

C、在元素默認的樣式中添加過渡屬性。

3、過渡函數：

1、ease：默認值，由快到慢

2、linear:勻速

3、ease-in:越來越快

4、ease-out:越來越慢

5、ease-in-out:先越來越快再越來越慢

3.動畫animation

1、創建關鍵幀(瀏覽器兼容前綴是加在@與keyframes中間的)

語法：@keyframes 動畫名稱{

0%{元素樣式}

25%{元素樣式}

…

}

4.調用動畫

在元素樣式中調用

語法：animation:動畫名稱動畫次數動畫播放的方向動畫播放狀態

1)、動畫播放次數：為整數，默認值為1，無限循環infinite

2)動畫發生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）

3)動畫播放狀態：running(播放) paused(暫停)

4)動畫播放方向：normal（向前） alternate(偶數次向前)

者：Jiawei Pan

轉發鏈接：https://mp.weixin.qq.com/s/hDdF8rni6MX4U55l3DKLQw

在線咨詢

上一篇：Spring Boot 進階-SpringBoot整合JavaMailSender發送郵件
下一篇：圖片收集、電子雜志詳解-給廣金的禮物iebook

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

這有幾種，你可能還沒用過的CSS高級特效// 精通CSS

CSS Shapes

剪切與蒙版

您的項目需求