本篇內(nèi)容主要講解“CSS選擇器和常用樣式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS選擇器和常用樣式有哪些”吧!

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、云浮網(wǎng)站維護(hù)、網(wǎng)站推廣。

CSS的基本使用

• 直接寫在標(biāo)簽內(nèi)

段落

• 寫在 style 標(biāo)簽內(nèi)

• 使用外部 .css 文件

• link

• @import （不建議使用此方式）

CSS選擇器

• 優(yōu)先級：id選擇器 > class 選擇器 > 標(biāo)簽選擇器

• 標(biāo)簽選擇器：標(biāo)簽名{}

• class選擇器（“.”符號）：.class名{}

• id選擇器（“#”符號，id 選擇器唯一）：#id名{}

• 群組 選擇器（“，”逗號分開）：

• 群組選擇器可以同時選擇多個標(biāo)簽

• p,div{...}

• 層次選擇器

• 子代 （符號“>”）：div>p{...}

• 后代 (空格)：div p {...}

• 相鄰 （符號“+”）：#p_id~span {...}

• 兄弟 （符號“~”）：#p_id~p {...}

• 偽類選擇器（符號“:”）

• a:active {...}

• a:hover {...}

• a:visited {...}

• a:link {...}

• link：未訪問過的樣式

• visited：訪問過后的樣式

• hover：劃過的樣式

• active：激活的樣式

字體

• 字體：font-family

• 字體大?。篺ont-size

• 字體樣式：font-style

• 字體粗細(xì)：font-weight

• 字體小大寫：font-variant (將小寫字母改為小型字體的大寫字母)

• 復(fù)合樣式：font (默認(rèn)順序：style variant weight size/height family)
   

文本

• 對齊方式：text-align

• 首行縮進(jìn)：text-indent

• 文本線：text-decoration

• 字距：letter-spacing

• 詞距：word-spacing

• 行高：line-height
   

背景

• 背景顏色：background-color

• 背景圖片：background-image

• 背景鋪蓋：background-repeat

• 背景大?。篵ackground-size

• 背景定位：background-position

• 復(fù)合樣式：background

• backgroud：red url(" ") no-repeat center;
   

常用樣式

1. font-family:字體，eg: Microsoft-Yahei
2. font-size/color:字號/顏色
3. font-weight:bold 粗體
4. font-style:italic 斜體
5. text-decoration:underline 下劃線
6. text-decoration:line-through 刪除線
7. text-indent:2em 縮進(jìn)文字的2倍大小
8. line-height:1.5em 行間距: 1.5倍文字大小
9. letter-spacing:50px 字間距，字母間距
10.word-spacing:50px 單詞與單詞間距
11.text-align:center/left/right 居中/居左/居右
12.color：rgb(255,255,255); 參數(shù)是0-255的數(shù)，可自調(diào)顏色
13.backgroud-image:url("1.png"); 背景圖
14.backgroud-repeat:repeat-y/repeat-x/no-repeat; 圖片按列/行/角排
15.backgroud-position:right center/center center; 圖片位置靠右居中
16.以上可縮寫為: backgroud: red url("1.png") no-repeat center;
17.border:solid 1px red;邊框?qū)傩?
18.ul, ol{list-style: 。。。。}列表屬性
19.display:block/inline/none; 內(nèi)聯(lián)和塊級切換/隱藏

到此，相信大家對“CSS選擇器和常用樣式有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！