css3增加樣式,div添加css樣式

哪些css3的樣式需要加

這些css3的樣式需要加

創(chuàng)新互聯(lián)建站主營(yíng)錦江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開發(fā)定制,錦江h(huán)5小程序開發(fā)搭建,錦江網(wǎng)站營(yíng)銷推廣歡迎錦江等地區(qū)企業(yè)咨詢

這些css3的樣式加上以后 會(huì)使得頁(yè)面變的極為絢麗

使人流連忘返

CSS3新增的哪些選擇器和常見的屬性是哪些？

一、新增的選擇器

CSS3新增的屬性選擇器 {除ie6外的大部分瀏覽器支持）

1 ? ?E[att^="val"] ? ?屬性att的值以"val"開頭的元素 ? ?div[id^="nav"] { background:#ff0; }?

2 ? ?E[att$="val"] ? ?屬性att的值以"val"結(jié)尾的元素 ? ?? ?

3 ? ?E[att*="val"] ? ?屬性att的值包含"val"字符串的元素 ? ?? ?

結(jié)構(gòu)偽類選擇器（過濾選擇器）

(注：FireFox 1.5/2.0/3.0支持E:root，F(xiàn)ireFox 3.0支持E:last-child、E:only-child、E:empty。

由于IE6/7/8不支持，沒辦法，選擇合適的場(chǎng)合用吧。)

4 ? ?E:root ? ?匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素 ? ?? ?

5 ? ?E:nth-child(n) ? ?匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1 ? ?p:nth-child(3) { color:#f00; } ?

6 ? ?E:nth-last-child(n) ? ?匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 ? ?p:last-child { background:#ff0; } ?

7 ? ?E:nth-of-type(n) ? ?與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素 ? ?p:nth-of-type(2){color:red;}選擇父元素的第n個(gè)子元素p ?

8 ? ?E:nth-last-of-type(n) ? ?與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 ? ?? ?

9 ? ?E:last-child ? ?匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1) ? ?? ?

10 ? ?E:first-of-type ? ?匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1) ? ?? ?

11 ? ?E:last-of-type ? ?匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) ? ?? ?

12 ? ?E:only-child ? ?匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) ? ?p:only-child { background:#ff0; } ?

13 ? ?E:only-of-type ? ?匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) ? ?? ?

14 ? ?E:empty ? ?匹配一個(gè)不包含任何子元素的元素，注意，文本節(jié)點(diǎn)也被看作子元素 ? ?p:empty { background:#ff0; } ?

與用戶界面(UI)有關(guān)的偽類(ie6 7 8不支持)? ??

15 ? ?E:enabled ? ?匹配表單中激活的元素 ? ?? ?

16 ? ?E:disabled ? ?匹配表單中禁用的元素 ? ?input[type="text"]:disabled { background:#ddd; } ?

17 ? ?E:checked ? ?匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素 ? ?? ?

18 ? ?E::selection ? ?匹配用戶當(dāng)前選中的元素 ? ?? ?

級(jí)元素通用選擇器

ie6不支持?

19 ? ?E ~ F ? ?匹配任何在E元素之后的同級(jí)F元素 ? ?p ~ ul { background:#ff0; } ?

反選偽類

(ie6 7 8 firefox3.0以下 Opera9.0不支持) ?

20 ? ?E:not(s) ? ?匹配不符合當(dāng)前選擇器的任何元素 ? ?:not(p) { border:1px solid #ccc; } ?

:target 偽類

(ie6 7 8不支持) ?

21 ? ?E:target ? ?匹配文檔中特定"id"點(diǎn)擊后的效果 ? ?? ?

二、css3新增屬性

一. box-shadow(陰影效果)

使用:

box-shadow: 20px 10px 0 #000;

-moz-box-shadow: 20px 10px 0 #000;

-webkit-box-shadow: 20px 10px 0 #000;

支持:

FF3.5, Safari 4, Chrome 3

二. border-colors(為邊框設(shè)置多種顏色)

使用:

border: 10px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

說明:

顏色值數(shù)量不固定, 且FF的私有寫法不支持縮寫: -moz-border-colors: #333 #444 #555;

支持:

FF3+

三. boder-image(圖片邊框)

使用:

-moz-border-image: url(exam.png) 20 20 20 20 repeat;

-webkit-border-image: url(exam.png) 20 20 20 20 repeat;

說明:

(1). 20 20 20 20 --- 邊框的寬度, 分別對(duì)應(yīng)top, right, bottom, left邊框, 改變寬度可以實(shí)現(xiàn)不同的效果;

(2). 邊框圖片效果(目前僅實(shí)現(xiàn)了兩種):

repeat --- 邊框圖片會(huì)平鋪, 類似于背景重復(fù);

stretch --- 邊框圖片會(huì)以拉伸的方式來鋪滿整個(gè)邊框;

(3). 必須將元素的邊框厚度設(shè)置為非0非auto值.

支持:

FF 3.5,?Safari 4, Chrome 3

四. text-shadow(文本陰影)

使用:

text-shadow:?[顏色水平偏移縱向偏移模糊半徑] ||?[水平偏移縱向偏移模糊半徑顏色];

說明:

(1)?顏色和模糊半徑是可選的, 當(dāng)顏色未指定時(shí), 將使用文本顏色; 當(dāng)模糊半徑未指定時(shí), 半徑值為0;

(2)?shadow可以是逗號(hào)分隔的列表, 如:

text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3)?陰影效果會(huì)按照shadow list中指定的順序應(yīng)用到元素上;

(4)?這些陰影效果有可能相互重疊, 但不會(huì)疊加文本本身;

(5)?陰影可能會(huì)跑到容器的邊界之外, 但不會(huì)影響容器的大小.

支持:

FF 3.5, Opera 10, Safari 4, Chrome 3

五.??text-overflow(文本截?cái)?

使用:

text-overflow: inherit | ellipsis | clip ;

-o-text-overflow: inherit | ellipsis | clip;

說明:

(1) 還有一個(gè)屬性ellipsis-word, 但各瀏覽器均不支持.

支持:

IE6+, Safari4, Chrome3, Opera10

六. word-wrap(自動(dòng)換行)

使用:

word-wrap: normal | break-word;

支持:

IE6+, FF 3.5, Safari 4, Chrome 3

七. border-radius(圓角邊框)

使用:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

支持:

FF 3+, Safari 4 , Chrome 3

八. ? opacity(不透明度)

使用:

opacity: 0.5;

filter: alpha(opacity=50); /* for IE6, 7 */

-ms-filter(opacity=50); /* for IE8 */

支持:

all

九. box-sizing(控制盒模型的組成模式)

使用:

box-sizing: content-box | border-box; // for opera

-moz-box-sizing:?content-box | border-box;

-webkit-box-sizing:?content-box | border-box;

說明:

1. content-box:

使用此值時(shí),?盒模型的組成模式是, 元素寬度 = content + padding + border;

2. border-box:

使用此值時(shí),?盒模型的組成模式是, 元素寬度 = content(即使設(shè)置了padding和border, 元素的寬度

也不會(huì)變).

支持:

FF3+, Opera 10, Safari 4, Chrome 3

十. resize(元素縮放)

使用:

resize:? none | both | horizontal | vertical;

說明:

1. 必須將元素的overflow屬性設(shè)置為auto或hidden, 該屬性才能起作用(overflow設(shè)置為visible時(shí), 無(wú)效);

2. 屬性值說明:

(1). none -- 禁用縮放;

(2). both -- 可同時(shí)縮放寬度和高度;

(3). horizontal -- 僅能縮放寬度;

(4). vertical -- 僅能縮放高度;

支持:

safari 4, chrome 3

十一. outline(外邊框)

使用:

outline: 邊框厚度 邊框樣式 邊框顏色;

outline-offset: 偏移值;

說明:

outline-offset需要獨(dú)立寫, 簡(jiǎn)寫是無(wú)效的.

支持:

FF3+, safari 4, chrome 3, opera 10

十二. background-size(指定背景圖片的尺寸)

使用:

-o-background-size: [length | percentage] {1, 2};

-webkit-background-size:?[length | percentage] {1, 2};

例如:

-o-background-size: 50px 60px;

-webkit-background-size:?50px 60px;

這會(huì)將背景圖片的寬設(shè)置了50px, 高60px.

支持:

safari 4, chrome 3, opera 10

十三. background-origin(指定背景圖片從哪里開始顯示)

使用:

-webkit-background-origin: border | padding | content;

-moz-background-origin: border | padding | content;

說明:

(1) border --?從border區(qū)域開始顯示背景;

(2) padding --?從padding區(qū)域開始顯示背景;

(3) content --?從content區(qū)域開始顯示背景;

注意:

1. 必須先指定background屬性, 然后才能指定該屬性, 如果該屬性出現(xiàn)在background屬性之前,

會(huì)無(wú)效.

支持:

safari 4, chrome 3, FF 3+ ?? ?? ?

十四. background-clip(指定背景圖片從什么位置開始裁切)

使用:

-webkit-background-origin: border-box | padding-box | content-box | no-clip;

說明:

(1)?border-box?--?從border區(qū)域向外裁剪背景;

(2)?padding-box?--?從padding區(qū)域向外裁剪背景;

(3)?content-box?--?從content區(qū)域向外裁剪背景;

(4) no-clip -- 不裁切背景.

注意:

1. 必須先指定background屬性, 然后才能指定該屬性, 如果該屬性出現(xiàn)在background屬性之前,

會(huì)無(wú)效.

支持:

safari 4, chrome 3

十五. ?background(為一個(gè)元素指定多個(gè)背景)

使用:

background:? [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

例子:

background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;

支持:

safari 4, chrome 3

十六. hsl(通過色調(diào), 飽和度, 亮度來指定顏色值)

使用:

hsl: (?length?||?percentage?||?percentage);

說明:

(1) length: h(色調(diào)), ?0(或360)表示紅色, 120表示綠色, 240表示藍(lán)色;

(2) percentage: s(飽和度), ?取值為0%到100%之間的值;

(3) percentage: l(亮度), ?取值為0%到100%之間的值;

例子:

background: hsl(240, 50%, 100%);

color: hsl(100, 80, 100%);

支持:

safari 4, chrome 3, FF3, opera 10

十七. hsla(在hsl的基礎(chǔ)上上增加了一個(gè)透明度設(shè)置)

使用:

hsla: (?length??||??percentage??||??percentage || opacity);

說明:

(1) opacity: a(透明度), 取值在0到1之間;

例子:

background: hsl(240, 50%, 100%, 0.5);

color: hsl(240, 50%, 100%, 0.5);

支持:

safari 4, chrome 3, FF3, opera 10

十八. rgba(基于r,g,b三個(gè)顏色通道來設(shè)置顏色值, 通過a來設(shè)置透明度)

使用:

rgba: (r, g, b, opacity);

說明:

(1) r: 紅色,?正整數(shù) | 百分?jǐn)?shù);

(2) g: 綠色,?正整數(shù) | 百分?jǐn)?shù);

(3) b: 藍(lán)色,?正整數(shù) | 百分?jǐn)?shù);

(4) a: 透明度, 取值在0到1之間;

(5) 正整數(shù)在0到255之間, 百分?jǐn)?shù)在0%到100%之間.

例子:

rgba: (100%, 244, 0, 0.5);

支持:

safari 4, chrome 3, FF3, opera 10

十九、?transition（a標(biāo)簽hover漸隱效果）

a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}

-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

html5新增了哪些標(biāo)簽？css3新增了哪些屬性？

一、 h5是html的最新版本，是14年由w3c完成標(biāo)準(zhǔn)制定。增強(qiáng)了，瀏覽器的原生功能，減少瀏覽器插件（eg：flash）的應(yīng)用，提高用戶體驗(yàn)滿意度，讓開發(fā)更加方便。?

- h5新增的標(biāo)簽：

video ： ?表示一段視頻并提供播放的用戶界面 ?

audio ： 表示音頻 ?

canvas： 表示位圖區(qū)域 ?

source： ?為video和audio提供數(shù)據(jù)源 ?

track ： ? 為video和audio指定字母 ?

svg： ?定義矢量圖 ?

code： 代碼段 ?

figure ： 和文檔有關(guān)的圖例 ?

figcaption ： 圖例的說明

time： ?日期和時(shí)間值 ?

mark： 高亮的引用文字 ?

datalist ： 提供給其他控件的預(yù)定義選項(xiàng) ?

keyge： 秘鑰對(duì)生成器控件 ?

output ： ?計(jì)算值 ?

rogress ： ? 進(jìn)度條 ?

menu： ? ?菜單 ?

embed： ?嵌入的外部資源 ?

menuitem： 用戶可點(diǎn)擊的菜單項(xiàng) ?

menu： 菜單

二、 css3被劃分為模塊，最重要的幾個(gè)模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉(zhuǎn)換、動(dòng)畫、多列布局、用戶界面。

新增屬性：

選擇器

框模型

背景和邊框?

border-radius、box-shadow、border-image、?

background-size：規(guī)定背景圖片的尺寸?

background-origin：規(guī)定背景圖片的定位區(qū)域?

background-clip：規(guī)定背景的繪制區(qū)域

文本效果（常用）?

text-shadow：設(shè)置文字陰影?

word-wrap：強(qiáng)制換行?

word-break?

css3提出@font-face規(guī)則，規(guī)則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D轉(zhuǎn)換?

transform：向元素應(yīng)用2/3D轉(zhuǎn)換?

transition：過渡

動(dòng)畫

@keyframes規(guī)則：?

animation、animation-name、animation-duration等

用戶界面（常用）?

box-sizing、resize?

css3新增偽類?

：nth-child()?

：nth-last-child()?

：only-child?

：last-child?

：nth-of-type()?

：only-of-type()?

：empty?

：target 這個(gè)偽類允許我們選擇基于URL的元素，如果這個(gè)元素有一個(gè)識(shí)別器（比如跟著一個(gè)#），那么:target會(huì)對(duì)使用這個(gè)ID識(shí)別器的元素增加樣式。?

：enabled?

：disabled?

：checked?

：not

怎么新建CSS3樣式

個(gè)人總結(jié)css3.0增加了選擇器的書寫語(yǔ)法，有學(xué)過jquery的會(huì)發(fā)現(xiàn)跟jquery的選擇器語(yǔ)法很像，另外css3.0增加了一些屬性（如圓角、漸變、盒模型等）和單位（如角度）。

css3加載樣式問題

如果你說的是第一次不執(zhí)行動(dòng)畫的話。那么問題就是第一次加在不到是你第一次是append在文檔后面添加div，你第一次操作div不存在，當(dāng)你添加出div，因?yàn)閐iv是直接被顯示出來，而你的open類是執(zhí)行動(dòng)畫，你添加出div你的div是顯示的，open類也是執(zhí)行動(dòng)畫顯示div，div已經(jīng)顯示出來了所以不會(huì)執(zhí)行動(dòng)畫，而你后面的能執(zhí)行因?yàn)閐iv已經(jīng)存在，他能正確的執(zhí)行動(dòng)畫。如果要正確就是div直接寫出來不要用js返回，或者用js去操作動(dòng)畫。我所理解的是這樣，不知道對(duì)你有幫助不。

html5新增了哪些標(biāo)簽？css3新增了哪些屬性

h5是html的最新版本，是14年由w3c完成標(biāo)準(zhǔn)制定。增強(qiáng)了，瀏覽器的原生功能，減少瀏覽器插件（eg：flash）的應(yīng)用，提高用戶體驗(yàn)滿意度，讓開發(fā)更加方便。

- h5新增的標(biāo)簽

新增元素

說明

video ? ?表示一段視頻并提供播放的用戶界面 ?

audio ? ?表示音頻 ?

canvas ? ?表示位圖區(qū)域 ?

source ? ?為video和audio提供數(shù)據(jù)源 ?

track ? ?為video和audio指定字母 ?

svg ? ?定義矢量圖 ?

code ? ?代碼段 ?

figure ? ?和文檔有關(guān)的圖例 ?

figcaption ? ?圖例的說明 ?

main ?

time ? ?日期和時(shí)間值 ?

mark ? ?高亮的引用文字 ?

datalist ? ?提供給其他控件的預(yù)定義選項(xiàng) ?

keygen ? ?秘鑰對(duì)生成器控件 ?

output ? ?計(jì)算值 ?

progress ? ?進(jìn)度條 ?

menu ? ?菜單 ?

embed ? ?嵌入的外部資源 ?

menuitem ? ?用戶可點(diǎn)擊的菜單項(xiàng) ?

menu ? ?菜單 ?

template ?

section ?

nav ?

aside ?

article ?

footer ?

header ?

- css3

css3被劃分為模塊，最重要的幾個(gè)模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉(zhuǎn)換、動(dòng)畫、多列布局、用戶界面

選擇器

框模型

背景和邊框

border-radius、box-shadow、border-image、

background-size：規(guī)定背景圖片的尺寸

background-origin：規(guī)定背景圖片的定位區(qū)域

background-clip：規(guī)定背景的繪制區(qū)域

文本效果（常用）

text-shadow：設(shè)置文字陰影

word-wrap：強(qiáng)制換行

word-break

css3提出@font-face規(guī)則，規(guī)則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D轉(zhuǎn)換

transform：向元素應(yīng)用2/3D轉(zhuǎn)換

transition：過渡

動(dòng)畫

@keyframes規(guī)則：

animation、animation-name、animation-duration等

用戶界面（常用）

box-sizing、resize

css3新增偽類

：nth-child()

：nth-last-child()

：only-child

：last-child

：nth-of-type()

：only-of-type()

：empty

：target ?這個(gè)偽類允許我們選擇基于URL的元素，如果這個(gè)元素有一個(gè)識(shí)別器（比如跟著一個(gè)#），那么:target會(huì)對(duì)使用這個(gè)ID識(shí)別器的元素增加樣式。

：enabled ?

：disabled

：checked

：not

當(dāng)前文章：css3增加樣式,div添加css樣式
文章鏈接：http://muchs.cn/article12/phgsgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站導(dǎo)航、域名注冊(cè)、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)