給所有元素設置css樣式,怎么用css給div設置樣式

2、css 選擇器

使用 * 可為所有元素設置樣式。

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元海港做網(wǎng)站,已為上家服務,為海港各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

根據(jù)標簽為元素設置樣式

同時設置多個元素組合

類選擇器是為一類狀態(tài)聲明樣式規(guī)則，下面是把文本居中定義為類樣式。

將類選擇器指定為具體標簽。這樣樣式的權重就提高了

注意span.help-block不能寫成 span .help-block。標簽選擇器和類選擇器中間加了空格的話，就變成了 span下面所有class是help-block的選擇器了

HTML中元素是以父子級、兄弟關系存在的。后代選擇器指元素內的元素（不只是子元素，是后代元素，子集，孫子級，所有的。。。）。

子元素選擇器中選擇子元素，不包括孫級及以下元素。

用于選擇緊挨著的同級兄弟元素。

用于選擇后面的所有指定的兄弟元素或者所有元素。

為具有 class 屬性的h1標簽設置樣式

約束多個屬性

具體屬性值設置樣式

^ 以指定值開頭的元素

$ 以指定值結尾的元素

屬性內部任何位置出現(xiàn)值的元素，包含關系

~ 屬性值中包含指定詞匯的元素

| 以指定值開頭或以屬性連接破折號的元素

編輯修改CSS樣式在什么地方設置,寫出關鍵詞

在js中修改css樣式，必須通過關鍵詞style。在編輯修改CSS直接設置樣式(內聯(lián)樣式)使用JavaScript設置元素樣式的最簡單方法是使用style屬性，在我們通過JavaScript訪問的每個HTML元素時都有一個style對象。

常用重要CSS樣式的屬性

盒子模型是CSS中一個很重要的概念，頁面中的所有元素都可以看成一個盒子，并占據(jù)一定的頁面空間，一個頁面由很多盒子組成，盒子之間會互相影響。只有掌握盒模型以及其中每個屬性的用法，才能真正控制好頁面元素。

盒子模型主要定義四個區(qū)域： 內容(content)、內邊距/填充(padding)、邊框(border)和外邊距(margin) 。

盒子的內容區(qū)域存放文本和圖片等頁面元素，擁有如下屬性：

邊框基本屬性：

通過一個屬性設置四個方向邊框的寬度、樣式、顏色

屬性：border

取值：width style color;

只設置某一條邊框的寬度、樣式、顏色

語法：border-方向（top/right/bottom/left）：width style color;

只設置邊框的寬度、樣式、顏色中的一種

語法：border-屬性（width/style/color）：取值;

只設置某一條邊框的寬度、樣式、顏色中的一種

語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;

屬性：border-radius

作用：設置倒角位置處圓的半徑，半徑越大，弧度越大。

取值：

屬性：border-image

語法：

border-image-source ：引入背景圖片

取值：

默認值：無圖片

url(圖片URL地址)

border-image-slice ：切割引入背景圖片，把邊框背景切成9份

取值：

number：默認單位px

百分比：

fill：保留邊框圖像的中間部分

border-image-width ：指定邊框圖片的寬度

border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個參數(shù)，即水平和垂直方向

取值：

Stretch：默認值，拉伸

Repeat：平鋪

Round：取整平鋪

內容區(qū)域和邊框（邊緣）之間的距離

語法：padding: 值；

單邊設置：padding-方向（top/right/bottom/left）:值；

取值：

數(shù)值px

百分比

內邊距的簡寫方式：

padding:value;

四個方向內邊距的值均為value

padding:value1 value2;

Value1為上下內邊距的值，value2為左右內邊距的值

padding:value1 value2 value3;

Value1為上內邊距的值，value2為左右內邊距的值，value3為下內邊距的值

padding:value1 value2 value3 value4;

上右下左內邊距的值分別為value1， value2， value3， value4

外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過外邊距可以為元素創(chuàng)建額外的“空間”。默認不能被其他元素所占據(jù)，用于拉伸兩個元素間的距離。

語法：margin: 值；

單邊設置：margin-方向（top/right/bottom/left）:值；

取值：

重新制定元素尺寸計算模式

屬性：box-sizing

取值：

屬性：resize

取值：

位于元素邊框之外的一條線

屬性：

outline：width style color;

屬性：box-shadow

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：由一組值構成的值列表

屬性：background-color

取值：顏色值或transparent

注意：背景顏色是從邊框位置處開始繪制

屬性：background-image

取值：url(背景圖像URL)

屬性：background-repeat

取值：

屬性：background-attchment

取值：

scroll：默認值，滾動

fixed：固定

屬性：background-position

取值：

屬性：background-size

取值：

屬性：background-origin

取值：

屬性：background-clip

取值：

CSS3多背景通過為每個背景屬性提供多個屬性值實現(xiàn)。

font 簡寫屬性語法：

將所有字體屬性合寫為一行，其中font-family是復合屬性中必不可少的屬性。

可以不設置其中的某個值，如果省略值地話，就使用屬性的默認值。

②文本屬性：

（2）CSS3文本陰影屬性：

屬性：text-shadow

作用：產(chǎn)生陰影和模糊主體

語法：

作用：定義列表的編號樣式

屬性：list-style-type

作用：用于設置列表項的圖像屬性

語法：

圖像URL地址：圖像的相對路徑或絕對路徑

none：默認值，不指定圖像

注意：圖片圖標與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設置列表的圖片樣式。

通過設置li的背景圖片的方式來設置列表圖片基本步驟：

設置list-style-type屬性值為none

設置li標記的背景屬性backgruond

作用：用于聲明列表標志相對于列表項內容的位置

語法：

作用：可以同時設定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。

語法：

注意：

可以不設置其中的某個值，未設置的屬性采用默認值

同時指定list-style-image和list-style-type時，list-style-image優(yōu)先顯示，除非list-style-image設置為none，或圖片路徑錯誤無法顯示

當列表與列表項目同時使用樣式時，列表項目的樣式優(yōu)先顯示

特點：

可以設置寬度和高度

默認情況下每個塊級元素獨占一行

作用：

塊級元素主要用于頁面布局

常用塊級元素：

div、p、h1~h6、ol、ul等

特點：

不可以設置寬度和高度，其寬度就是自身文字或圖片的寬度

默認情況下多個行內元素會在一行內顯示，遇父元素邊界時會自動換行

作用：

行內元素主要用于設置文樣式

常用行內元素：

a、span、em、b、i、strong、img、input等

作用：控制頁面元素脫離原有文檔流，實現(xiàn)向左或向右移動，直到該元素外邊緣碰到其包含框或另一個浮動框的邊緣停止，標準流中的其他盒子將頂?shù)礁雍凶拥奈恢谩８拥脑夭徽紦?jù)實際空間。

屬性： float

取值：

浮動元素不會相互重疊；

浮動元素不會上下浮動，如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低于先前任何浮動元素的位置。

作用：規(guī)定元素的哪一側不允許出現(xiàn)其他浮動元素。

取值：

作用：控制頁面元素在頁面中的位置。

屬性：position

取值：static/relative/absolute/fiexed

默認屬性值，元素按照標準文檔流進行排列，塊級元素獨占一行， 行內元素位于一行內顯示，一行顯示不下，自動換行。

特點：

相對于自身原有位置進行偏移

仍處于標準文檔流中

隨即擁有偏移屬性和z-idex屬性

偏移屬性:

left:數(shù)值px;

right:數(shù)值px;

top:數(shù)值px;

bottom:數(shù)值px;

當元素相對定位后會產(chǎn)生Z軸上的堆疊，不設置z-index屬性時，默認該元素出現(xiàn)在X軸和Y軸構成的平面上。

特點：

建立了以包含塊為基準的定位

絕對定位的元素的位置相對于最近的已定位祖先元素（設定了絕對定位、相對定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對于瀏覽器窗口。

完全脫離了標準文檔流

隨即擁有偏移屬性和z-idex屬性

偏移屬性：

left:數(shù)值px;

right:數(shù)值px;

top:數(shù)值px;

bottom:數(shù)值px;

絕對定位未設置偏移量的特點：

無論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置

脫離了標準文檔流

設定固定定位的元素框的表現(xiàn)類似于將position設置為absolute，不過其包含塊是瀏覽器窗口本身。

在計算機顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對定位容器的z-index屬性即對應該方向。

作用：用于控制元素的層疊次序，使得某個元素浮于其他元素之上。

語法：

auto：遵循其父元素的定位

number：整數(shù)，可負，值大者疊加在上層

注意：使用z-index屬性時，要求該元素的position屬性值為absolute、relative或fixed。

作用：用于定義建立布局時元素生成的顯示框類型

語法：dispaly:值;

作用：用于定義建立布局時元素生成的顯示框類型

語法：visibility:值;

用JavaScript給所有相同的class添加CSS樣式。

!doctype?html

html?lang="en"

head

meta?charset="UTF-8"

meta?name="Generator"?content="EditPlus?"

meta?name="Author"?content=""

meta?name="Keywords"?content=""

meta?name="Description"?content=""

titleDocument/title

/head

body

div?id="container"?style="width:?480px;?height:?220px;border:1px?solid?#e3e3e3;"?onclick="renderLink();"

a?href="#"?class="mya"Test1/a

a?href="#"Test2/a

a?href="#"?class="mya"Test3/a

a?href="#"?class="mya"Test4/a

a?href="#"?class="mya"Test5/a

a?href="#"Test6/a

/div

/body

/html

script?type="text/javascript"

function?renderLink(){

var?alist?=?document.getElementsByClassName("mya");

if(alist){

for(var?idx?=?0;?idx??alist.length;?idx?++){

var?mya?=?alist[idx];

mya.style.color?=?"red";

mya.style.fontSize?=?"36px";

}

}

}

/script

先用document.getElementsByClassName("className")取得所有class為className的元素，再循環(huán)添加樣式即可，如果用JQuery會簡單很多；也可以自己用JS封裝一個函數(shù)實現(xiàn)JQuery一樣的效果

有關運用JQ為CSS添加樣式

JQ為CSS添加樣式，可以使用jQuery CSS 操作 的css() 方法

定義和用法

css() 方法返回或設置匹配的元素的一個或多個樣式屬性。

設置 CSS 屬性

設置所有匹配元素的指定 CSS 屬性。

$(selector).css(name,value)

實例

/*將所有段落的顏色設為紅色：*/

$("p").css("color","red");

設置多個 CSS 屬性/值對

$(selector).css({property:value,?property:value,?...})

把“名/值對”對象設置為所有匹配元素的樣式屬性。

這是一種在所有匹配的元素上設置大量樣式屬性的最佳方式。

實例

實例

$("p").css({

"color":"white",

"background-color":"#98bf21",

"font-family":"Arial",

"font-size":"20px",

"padding":"5px"

});

也可以通過Jquery 屬性操作的removeClass、addClass方法移除元素類名或者添加元素類名的方式達到修改元素樣式的效果。詳細內容可以百度“jQuery 參考手冊 - 屬性操作”

詳解CSS樣式選擇器有哪些?

CSS選擇器就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器。

CSS選擇器分類：

標簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器

1、html標簽選擇器：

定義：以html標簽作為選擇器

2、class類選擇器：

定義：為HTML標簽添加class屬性，通過類選擇器來為具有此class屬性的元素設置css樣式。

類選擇器也可以對不同類型元素的同一個名稱的類選擇器設置不同的樣式規(guī)則：

同一個元素可以設置多個類，之間用空格隔開：

3、ID選擇器

定義：為HTML標簽添加ID屬性，通過ID選擇器來為具有此ID的元素設置CSS規(guī)則

4、群組選擇器

定義：集體統(tǒng)一設置樣式

5、全局選擇器

定義：所有標簽設置樣式

HTML文檔結構圖

6、后代選擇器

定義：使用后代選擇器設置，之間用空格隔開，后代選擇器可以多層。

7、偽類選擇器

鏈接的四種狀態(tài)：激活狀態(tài)，已訪問狀態(tài)，未訪問狀態(tài)，鼠標懸停狀態(tài)。

偽類

說明

:link

未訪問的鏈接

:visited

已訪問的鏈接

:hover

鼠標懸停狀態(tài)

:active

激活的鏈接

:hover 用于訪問的鼠標經(jīng)過某個元素時；

:active 用于一個元素被激活時（即按下鼠標之后放開鼠標之前的狀態(tài)）

偽類選擇器的屬性：link visited hover active

說明：

1)?a:hover 必須置于?a:link和a:visited之后，才有效

2) a:active 必須置于 a:hover之后才有效

3) 偽類名稱對大小寫不敏感

8、CSS其它選擇器

css繼承特性，從父元素那繼承部分css屬性

選擇器的優(yōu)先級

ID選擇優(yōu)先級最高（id選擇器定義具有唯一性）

class選擇器次之（class選擇器可以多個）

元素選擇器再次之

其它選擇器優(yōu)先級主要根據(jù)定義的先后順序，最后定義的優(yōu)先級高

!important 加重選擇器的優(yōu)先級，添加在樣式規(guī)則之后，中間用空格隔開。

CSS選擇器命名規(guī)則

1：采用英文字母，數(shù)字以及"-" 和 "_" 命名

2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭

3：使用有意義的命名規(guī)范

常用CSS命名

header

頁頭

main

主體

footer

頁尾

nav

導航

sidebar

側欄

container

容器

column

欄目

title

標簽

menu

菜單

submenu

子菜單

*列舉常用命名，大家根據(jù)自身項目及團隊的規(guī)則命名

耐心學習基礎知識，基礎是蓋房的根基，必須打結實。

如果您覺得有用，記得在下方點贊、關注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動力，么么噠。

每日分享在學習過程中總結的學習經(jīng)驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術。陪有夢想的人一起成長！

標題名稱：給所有元素設置css樣式,怎么用css給div設置樣式
當前URL：http://m.jiaotiyi.com/article/dsgphcd.html