當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端基础入门——升级页面化妆师CSS3

發布時間：2024/3/26 HTML 37 豆豆

生活随笔收集整理的這篇文章主要介紹了前端基础入门——升级页面化妆师CSS3 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS3選擇器

新增基本選擇器

子元素選擇器

相鄰兄弟元素選擇器

通用兄弟選擇器

群組選擇器

屬性選擇器 element[attribute]

偽類選擇器（權值為10）

偽元素（權值為1）

CSS3邊框與圓角

border-radius屬性

box-shadow屬性

border-image屬性

CSS3背景與漸變

CSS3背景圖像區域

CSS3背景圖像定位

CSS3背景圖像大小

CSS3多重背景圖像

CSS3背景屬性整合

CSS3漸變

CSS3線性漸變

CSS3徑向漸變

CSS3文本與字體

CSS3文本陰影

text-shadow屬性?

CSS3換行

word-break屬性

word-wrap屬性

CSS3新文本屬性

text-align-last屬性?

text-overflow屬性?

CSS3 @font-face的語法規則

CSS3 @font-face的取值說明

CSS3 @font-face的字體格式

CSS3 @font-face的字體應用

CSS3 獲取特殊字體

CSS3轉換

CSS3 Transform

CSS3 2D轉換

CSS3 rotate() 旋轉

CSS3 translate() 平移

CSS3 scale() 縮放

CSS3 skew() 扭曲或斜切

CSS3 3D轉換?

CSS3 rotate3d()

CSS3 translate3d()

CSS3 scale3d()

CSS3 perspective3d()

CSS3 Transform與坐標系統

CSS3 矩陣?

CSS3 擴展屬性

transfor-style屬性

perspective屬性?

backface-visibility屬性?

CSS3過渡

transition-property屬性

transition-duration屬性

transition-timing-function屬性

transition-delay屬性

CSS3動畫

CSS3 動畫

CSS3 animation

animation-name屬性

animation-duration屬性?

animation-timing-function屬性?

animation-delay屬性?

animation-iteration-count屬性?

animation-fill-mode屬性?

animation-play-state屬性?

animation屬性?

CSS3 @keyframes

CSS3 will-change

提高渲染速度的方法

will-change屬性?

CSS3選擇器

新增基本選擇器

子元素選擇器

概念

子元素選擇器只能選擇某元素的子元素

注意：是直接后代，不是間接后代

語法格式?

父元素 > 子元素（father > child）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

相鄰兄弟元素選擇器

概念?

相鄰兄弟選擇器可以選擇緊接在另一個元素后的元素，而且他們具有一個相同的父元素

語法格式

元素 + 兄弟相鄰元素（element + sibling）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

通用兄弟選擇器

概念

選擇某元素后面的所有兄弟元素，而且他們具有一個相同的父元素

語法格式

元素 ~ 后面所有兄弟相鄰元素（element ~ siblings）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

群組選擇器

概念

群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“ , ”隔開

語法格式

元素1 , 元素2 , ... , 元素n（element1 , element2 , ... , elementn）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

屬性選擇器 element[attribute]

概念

選擇所有帶有attribute屬性的元素

兼容性

IE8+、Firefox、Chrome、Safari、Opera

舉例

element[attribute="value"] 選擇所有使用attribute="value"的元素

element[attribute~="value"] 選擇所有attribute屬性包含單詞"value"的元素（注意是用空格隔開的單詞）

element[attribute^="value"] 選擇所有attribute屬性以"value"開頭的元素

element[attribute$="value"] 選擇所有attribute屬性以"value"結尾的元素

element[attribute*="value"] 選擇所有attribute屬性包含"value"的元素

element[attribute|="value"] 選擇所有attribute屬性為"value"或以"value-"開頭的元素

偽類選擇器（權值為10）

動態偽類

這些偽類并不存在于HTML中，只有當用戶和網站交互的時候才能體現出來

錨點偽類

:link、:visited

用戶行為偽類

:hover、:active、:focus

UI元素狀態偽類

概念

我們把":enabled"、":disabled"、":checked"偽類稱為UI元素狀態偽類

兼容性

IE9+、Firefox、Chrome、Safari、Opera

CSS3結構類

我們把CSS3的:nth選擇器也成為CSS3結構類

element:fitst-child

選擇屬于其父元素的首個子元素的每個element元素

elment:last-child

選擇屬于其父元素的最后一個子元素的element元素

element:nth-child()

選擇器匹配屬于其父元素的第N個子元素，無論元素的類型（計數時不看類型，但顯示時還是要看類型的）

說明：參數可以取number（某個具體值）、帶n的表達式（n從0開始，依次取0,1,2……）、odd（第奇數個）、even（第偶數個）

element:nth-last-child()

選擇器匹配屬于其父元素的倒數第N個子元素，無論元素的類型（計數時不看類型，但顯示時還是要看類型的）

element:nth-of-type()

選擇器匹配屬于父元素的特定類型的第N個子元素的每個元素（從符合的標簽中數出第N個）

element:nth-last-of-type()

選擇器匹配屬于父元素的特定類型的倒數第N個子元素的每個元素（從符合的標簽中數出倒數第N個）

element:first-of-type

選擇器匹配屬于其父元素特定類型的首個子元素的每個元素

element:last-of-type

選擇器匹配屬于其父元素特定類型的最后一個子元素的每個元素

element:only-child

選擇器匹配屬于其父元素的唯一子元素的每個元素（元素必須是其父元素的唯一子元素才符合，也就是指向自己）

element:only-of-type

選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素（可以有其他類型的元素，但該類型的元素只能有一個）

element:empty

選擇器匹配沒有子元素（包括文本節點，即標簽內沒有文字）的每個元素

否定選擇器

:not（element / selector）

選擇器匹配非指定元素 / 選擇器的每個元素

語法格式

父元素:not（子元素 / 子選擇器）

兼容性

IE9+、Firefox、Chrome、Safari、Opera

偽元素（權值為1）

element::first-line

概念

根據"first-line"偽元素中的樣式對element元素的第一行文本進行格式化

說明

"first-line"偽元素只能用于塊級元素

element::first-letter

概念

用于向文本的首字母設置特殊樣式

說明

"first-letter"偽元素只能用于塊級元素

element::before

概念

在元素的內容前面插入新內容

說明

是其元素的父元素的第一個子元素
是行級元素
常用"content"配合使用，內容通過content寫入
標簽中找不到對應的標簽

element::after

概念

在元素的內容后面插入新內容

說明

是其元素的父元素的最后一個子元素
是行級元素
常用"content"配合使用，內容通過content寫入，多用于清除浮動
標簽中找不到對應的標簽

div::after{display:block;content:""; /*這句不寫不行，如果不寫還是無法撐開父元素*/clear:both; }

element::selection

概念

用于設置在瀏覽器中選中文本后的背景色與前景色（即光標選中區域的效果）

兼容性說明

selection在IE家族中，只有IE9+版本支持，在firefox中需要加上其前綴“-moz”

CSS3邊框與圓角

border-radius屬性

一個最多可指定四個 border -*- radius 屬性的復合屬性，這個屬性允許你為元素添加圓角邊框

語法

border-radius: 1-4 length|% / 1-4 length|%

多值

四個值：分別是左上角、右上角、右下角、左下角（順時針）
三個值：分別是左上角、右上角和左下角、右下角
兩個值：分別是左上角與右下角，右上角與左下角
一個值：四個圓角值相同

兼容性

IE9+、Firefox4+、Chrome、Safari5+、Opera

說明：

單位不僅可以是px，還可以是em、vw、rem等。
用%時，是相對容器本身寬高而言的，會出現圓角不圓的效果。取值為50%時，會變成橢圓。
可以用border-radius-top(bottom)-left(right)來單獨設置

box-shadow屬性

可以設置一個或多個下拉陰影的框

語法

box-shadow-

h-shadow：水平陰影，正值往右

v-shadow：垂直陰影，正值往下

blur：模糊

spread：往四周擴展

color：顏色

inset：內外陰影

border-image屬性

使用border-image-*屬性來構建美麗的可擴展按鈕

語法

border-image-

source：指定要使用的圖像，取值可以是 none | image路徑

slice：指定圖像的邊界向內偏移，取值可以是 number | % | fill （百分比越大，圖片越小）

說明：fill為可選屬性值，假如指定，name中間第九塊不是透明塊，假如不指定，那么為透明圖片處理

width：指定圖像邊界的寬度，取值可以是 number | % | auto

outset：指定在邊框外部繪制 border-image-area的量，取值可以是length | number

repeat：圖像邊界是否重復（repeat）、拉伸（stretch）或鋪滿（round）

兼容性

IE不兼容、Firefox、Chrome、safari6+、Opera不兼容

CSS3背景與漸變

CSS3背景圖像區域

CSS3背景圖像定位

設置背景是相對于內邊距、邊框還是內容框來定位

CSS3背景圖像大小

說明：
percentage 表示占父元素的比例，如果只寫其中一個百分比，另一個為auto，就會按比例進行縮放。如果兩個都寫，就按設置值大小顯示圖片。?
cover 將背景圖片等比縮放以填滿整個容器，多余部分溢出（背景圖片很大時），可以用定位調整背景顯示區域，默認情況下從左上角開始顯示?！?以寬、高較小者為準
contain 將背景圖片等比縮放至某一邊緊貼容器邊緣為止，也就是要么填滿寬，要么填滿高，另一側填不滿就留白?！?以寬高較大者為準

CSS3多重背景圖像

CSS3允許為元素使用多個背景圖像

語法

background-image: url(1.jpg) , url(2.jpg);

注意：元素引用多個背景圖片，前面圖片依次覆蓋后面的圖

CSS3背景屬性整合

建議：background 只寫 color url repeat content-box(h) content-box(v) , background-size / background-oringin / background-clip / background-attachment 另外寫，避免不兼容，有利于排除錯誤

CSS3漸變

CSS3線性漸變

? ??

注意：

第一個元素不設置百分比默認為0%，最后一個元素不設置百分比默認為100%。
百分比意思是從容器的某個位置到某個位置實現兩個顏色的過渡，而這個位置用百分比來定位。

注意：百分比不滿100%的不會自動填充剩余的部分，而是不斷重復同一樣式的漸變?。

CSS3徑向漸變

注意：關鍵字和形狀要寫在同一個參數中，用空格隔開。

CSS3文本與字體

CSS3文本陰影

text-shadow屬性?

說明：

h-shadow：陰影的水平距離
v-shadow：陰影的垂直距離
blur：模糊程度
color：陰影顏色

CSS3換行

word-break屬性

說明：

normal：單詞放不下了，換到下一行。在中文顯示中，若文檔流中最后一行只有一個標點符號，就會和它前面的字符一起排到實際顯示的最后一行。
break-all：單詞放不下了，把字符斷開
keep-all：單詞放不下了，換到下一行，有連字符就從連字符斷開。在中文顯示中，從文檔流中離換行處最近的標點符號處換行。

word-wrap屬性

說明：

normal：即使單詞很長，沒有遇到空格也不會斷開，會直接溢出
break-word：把單詞斷開以防止溢出現象?

CSS3新文本屬性

text-align-last屬性?

說明：

left：左對齊
right：右對齊
center：水平居中
justify：兩端對齊
start：主流文本左對齊則最后一行左對齊
end：主流文本左對齊則最后一行右對齊

text-overflow屬性?

說明：

clip：溢出部分直接減掉
eliipsis：溢出部分用省略號表示
string：溢出部分用自己寫的"string"來表示?

CSS3 @font-face的語法規則

先把字體文件放入服務器，網頁加載時自動下載服務器中的字體文件到客戶本地，從而在用戶的電腦上也能顯示出所需的字體。

CSS3 @font-face的取值說明

注意：source 建議使用相對路徑。?

CSS3 @font-face的字體格式

說明：svg 其實是以圖片的形式渲染出字體的樣式?

CSS3 @font-face的字體應用

說明：

font-family在本地自帶的字體庫中找不到myFont，就會到src指定的url中，自上而下去尋找一個可以兼容的字體格式
最好新建一個font文件夾，把字體都放在這個文件夾下，相對路徑就寫為：url('font/myFont.ttf')

CSS3 獲取特殊字體

Fontsquirrel

http://www.fontsquirrel.com/tools/webfont-generator

從本地上傳字體myFont（自行定義）

Agreement 中點擊Yes，點擊上面的EXPERT

勾選Font Formats 中的.tt .woff .eot（通常為了網頁運行快，選壓縮版本） .svg

點擊download your kit

到所在文件夾打開生成的css文件

復制粘貼到css文件中

到所在文件夾把生成的字體文件放到font目錄下，并把名稱改為我們自己命名的myFont（自行定義）

CSS3轉換

CSS3 Transform

說明：[<transform-function>]* 意思是后面還可以加無數個函數

CSS3 2D轉換

CSS3 rotate() 旋轉

說明：

角度以deg為單位
旋轉一定要有一個旋轉中心，所以必須先用transform-origin來確定旋轉中心，若缺省，默認transform-origin:50% 50%

/*為了兼容各種瀏覽器*/ -webkit-transform:rotate(7deg);-moz-transform:rotate(7deg);-ms-transform:rotate(7deg);-o-transform:rotate(7deg);transform:rotate(7deg);

CSS3 translate() 平移

說明：

translate的單位可以是px、em、rem、vw、% ，x軸取正值向右偏移，y軸取正值向上偏移。
translate(x,y)第一個參數不能缺省，第二個參數可以，不寫時默認為0

CSS3 scale() 縮放

說明：

縮放的標準線在父容器的垂直中線、水平中線或中點上，而不在左上角。
scale()的第一個參數不能缺省，第二個參數可以，不寫時默認和第一個參數一樣
scale的參數是以1為基準的縮放矢量參數，不需要單位，也不能用分數和百分比

CSS3 skew() 扭曲或斜切

說明：角度為正，逆時針轉動，以中線為旋轉中心。?與rotate不同，rotate角度為正順時針轉動，以本元素中點為旋轉中心

skew(x,y)第一個參數不可缺少，第二個參數可以，不寫時默認為0。

CSS3 3D轉換?

CSS3 rotate3d()

說明：角度0~90°，元素被逐漸壓縮，角度90°~180°，元素倒置并逐漸變大。?

說明：以中點為旋轉中心旋轉

說明：

rotate3d(x,y,z,angle)是三種效果疊加的效果。
前三個參數中，取值為1意為該方向順時針旋轉，0為該方向不旋轉，-1位該方向順時針旋轉。

?

CSS3 translate3d()

說明：多用于遮罩

說明：x軸參數指明距離左上角水平平移距離，y軸參數指明距離左上角垂直平移距離，z軸參數指明距離人眼前后平移距離

?

CSS3 scale3d()

說明：scaleZ是厚度的變化?

CSS3 perspective3d()

CSS3 Transform與坐標系統

CSS3 矩陣?

說明：

[x y 1] 若不寫，默認為 [0 0 1]?
ax+cy+e為變換后的水平坐標，bx+dy+f表示變換后的垂直位置。

CSS3 擴展屬性

transfor-style屬性

perspective屬性?

說明：z＞0的部分比正常大，z＜0的部分比正常小

backface-visibility屬性?

說明：z＜0的部分不可見?

CSS3過渡

說明：

從一種形態變到另一種形態，也就是CSS值發生變化
CSS效率非常高，它發生的變化時瞬間變化，速度非常快
視覺發生變化時，前一秒的視覺會在人眼中停留0.1s，而CSS的變化時間絕對小于0.1s，如果1s中經歷有24幀的變化，就可以認為它是瞬間直接變化的。

transition-property屬性

?transition-duration屬性

transition-timing-function屬性

說明：

liner：勻速變化
ease：先慢后快
ease-in：先慢后很快
ease-out：先很快后慢
ease-in-out：先慢后快再慢?

transition-delay屬性

說明：duration 是開始變化到變化完成經歷的時間，delay是開始變化之前等待的時間?

注意：順序一定不能錯

CSS3動畫

CSS3 動畫

CSS3 animation

animation-name屬性

animation-duration屬性?

animation-timing-function屬性?

animation-delay屬性?

建議：CSS中小數點前的0都可以省略掉，如 0.5 用 .5 表示?

animation-iteration-count屬性?

注意：delay的時間不算在每一次動畫循環播放時間之內，它是變化過程之外等待的時間。?

注意：alternate和alternate-reverse必須配合循環屬性使用

animation-fill-mode屬性?

注意：當循環次數為infinity時，顯示不出我們設置的效果?

animation-play-state屬性?

animation屬性?

說明：

animation 屬性中 name 和 duration 是必須的，其余屬性可缺省，如果只有一個時間參數，默認是duration的參數
duration參數如果不設置則默認為0，動畫不會播放

CSS3 @keyframes

CSS3 will-change

提高渲染速度的方法

will-change屬性?

說明：推薦使用<custom-ident>?

注意：勿濫用will-change、使用時提前申明、remove?

總結

以上是生活随笔為你收集整理的前端基础入门——升级页面化妆师CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于javaweb的医院管理系统
下一篇： igmp snooping和igmp s