CSS樣式設計 一

2021-09-25 05:30:54 字數 3254 閱讀 3933

css的樣式規則

selector

其中selector是乙個css的選擇器,property為乙個css的屬性；

例如：(1).標籤為div的字型為紅色,字型為16px:

div(2).id值為div的字型為紅色,字型為16px:

#div

(3)class值為div的字型為紅色,字型為16px:

.div

在html文件中應用css

1.內聯樣式:通過html標籤style屬性來設定標籤的樣式，例：

hello world
2.內嵌樣式：在html5文件的head標籤體中增加乙個style標籤，將css設定集中在style的標籤體中定義，例：

css選擇器(重點)

1.標籤選擇器:標籤選擇器指的是用html的標籤名作為選擇器，所有標籤名都可以作為標籤選擇器使用，它用於為頁面中某一種標籤指定統一的css樣式，但這也是缺點，不能實現同一種標籤所設計的差異化。

div
2.id選擇器:id選擇器使用"#"進行標識，後面緊跟html標籤的id屬性值，一張頁面中的html標籤的id屬性值是唯一的，所以這種選擇器設計的樣式只能針對html頁面中某乙個具體的標籤。

#divcss


css挺簡單的？
3.類選擇器:類選擇器使用". "進行標識，後面緊跟html標籤中的class屬性值。它最大的優勢是可以為具有相同class屬性的html標籤設定相同的樣式。

.classdiv	


class相同


class相同
4.限定式選擇器:限定式選擇器由兩個選擇器構成，其中第乙個為標籤選擇器，第二個為類選擇器或id選擇器，中間是沒有空格的。

div#divcss    //為id屬性為"divcss"的div標籤設計樣式


p.classdiv     //為class屬性為"classdiv"的p標籤設計樣式
5.後代選擇器:後代選擇器是用來選擇html標籤元素的後代的，其寫法是把父標籤的選擇器寫在前面，後代標籤的選擇器寫在後面，兩者之間有乙個空格。

div p    //為div標籤中的p標籤設計樣式


div #divcss    //為div標籤中的id屬性為divcss的子標籤設計樣式


p .classdiv    //為p標籤中class屬性為classdiv的子標籤設計樣式
6.並集選擇器:並集選擇器是各個選擇器通過逗號連線而成的，任何形式的選擇器都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全或部分相同，就可以使用並集選擇器為它們定義相同的css樣式。

h1,p,div #divcss,.classdiv    //h1,p標籤,id屬性為divcss的div標籤,class屬性為classdiv的標籤
7.萬用字元選擇器:萬用字元選擇器用*號表示，它是所有選擇器中作用範圍最廣的，能匹配頁面中所有的html標籤元素。

8.其他選擇器:對應特殊需求

選擇器例子

描述element>element

div>p

選擇父元素為div標籤的p標籤(p標籤必須是div標籤的直接子元素)

element>element

div+p

選擇緊跟在div標籤後面的p標籤

element1～element2

p～ul

選擇有相同的父元素中位於p元素之後的所有ul元素

[attribute]

input[name]

選擇所有包含name屬性的input標籤

[attribute=value]

input[name=「jiang」]

選擇name屬性為"jiang"的input標籤

[attribute^=value]

input[name^=「ji」]

選擇name屬性以"ji"開頭的input標籤

[attribute$=value]

input[name$=「g」]

選擇name屬性以"g"結尾的input標籤

[attribute*=value]

input[name*=「jiang」]

選擇name屬性包含"jiang"的input標籤

:link

a:link

選擇所有未被訪問的超連結

:visited

a:visited

選擇所有已被訪問的超連結

:active

a:active

選擇所有活動鏈結

:hover

div:hover

選擇滑鼠懸停的div標籤

:focus

input:focus

選擇所有獲取焦點的input標籤

:first-letter

p:first-letter

選擇p段落中的首字母

:first-line

p:first-line

選擇p段落中的首行

:first-child

p:first-child

選擇屬於父元素的第乙個子元素的p標籤

:last-child

p:last-child

選擇屬於父元素的最後乙個子元素的p標籤

:before

p:before

在每個p標籤的內容之前插入文字「測試」

:after

p:after

在每個p標籤的內容之後插入文字「測試」

:first-of-type

div p:first-of-type

選擇div標籤中的第乙個p標籤

:last-of-type

div p:last-of-type

選擇div標籤中的最後乙個p標籤

:nth-child(n)

li:nth-child(2)

選擇屬於其父元素的第二個li標籤

:nth-last-child(n)

li:nth-last-child(2)

選擇屬於其父元素的倒數第二個li標籤

:empty

div:empty

選擇沒有子元素的div標籤

:not

li:not(:last-child)

選擇除去最後乙個li元素的其他所有li標籤

css樣式設計

1.行內元素 文字 水平居中 通過給父元素設定text align center html body div class txtcenter 我想要在父容器中水平居中顯示。div body css style txtcenter style 2.定寬塊狀元素水平居中 塊狀元素的寬度width為固定值...

css樣式設計 基本樣式

盒子陰影 box shadow 盒子陰影 水平方向上陰影偏移量 垂直方向上陰影偏移量 模糊的程度 正值 陰影的外延伸 數值正負皆可 陰影的顏色 inset box shadow 0px 0px 10px red inset 顏色 表示顏色的方式 顏色名，英文 rgb red green blue 0...

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中，要為某個物件加上背景色只有一種辦法，那就是先做乙個 在 中設定完背景色...