這篇文章主要為大家展示了“CSS常用樣式有哪些”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS常用樣式有哪些”這篇文章吧。
專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)阜南免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。1、CSS
層疊樣式表,用于對(duì)頁(yè)面進(jìn)行美化。
在HTML中的方式有三種:元素內(nèi)聯(lián)、頁(yè)面嵌入、外部引入。
(1)、元素內(nèi)聯(lián):對(duì)其特定標(biāo)簽的樣式進(jìn)行設(shè)置;
(2)、頁(yè)面嵌入:在其中寫(xiě)入樣式,對(duì)其整個(gè)頁(yè)面內(nèi)的標(biāo)簽均可設(shè)置;
(3)、外部引入:就是寫(xiě)到了一個(gè)文件中(.css),對(duì)需要這種樣式時(shí)引入文件即可。
2、常見(jiàn)樣式
(1)、標(biāo)簽選擇器
含義:其后出現(xiàn)的所有這種標(biāo)簽都是這種樣式
div{ color: red; }
(2)、class選擇器
.logo{ background-color: red; font-size: 18px; border: 1px; } 后面調(diào)用:
(3)、id選擇器
注意:每個(gè)標(biāo)簽的id號(hào)是唯一的。
#logo{ background-color: red; font-size: 18px; border: 1px; } 后面調(diào)用:
(4)、關(guān)聯(lián)選擇器(以空格分開(kāi))
div p{ } 后面調(diào)用::就是div標(biāo)簽下面的p標(biāo)簽是這個(gè)樣式
(5)、組合選擇器(以,分開(kāi))
p, div{ color: red; } :后面出現(xiàn)p/div標(biāo)簽的都是這個(gè)樣式
(6)、屬性選擇器
input[type = 'text']{ } 使用:凡是出現(xiàn)input標(biāo)簽中帶有type='text'的都使用這個(gè)樣式
(7)、需要注意的:
關(guān)于以上樣式的完整代碼:
頁(yè)面一 123123123///////////////////////////////////////////////////////////////////////////頁(yè)面一 p標(biāo)簽
3、背景圖片
(1)、原生的引入圖片
#雙引號(hào)中寫(xiě)的是當(dāng)前路徑下的圖片
(2)、背景圖片的引入:background;
注意:使用background時(shí),要注意將背景圖片放到盒子中,就是必須指明寬、高。
運(yùn)行結(jié)果
4、邊框
border:線的寬度 實(shí)/虛(solid/dotted) 顏色;后面可以設(shè)置邊框的寬度和高度;
margin:與外邊框的距離;里面的邊框相距外邊框的距離;
padding:與內(nèi)邊框的距離;里面的文字距離自己里面邊框的距離;
頁(yè)面一 西安市
運(yùn)行結(jié)果
5、display
常見(jiàn)的就三種形式:
(1)、display:none; #隱藏顯示
(2)、display:block; #以塊級(jí)標(biāo)簽的形式顯示
(3)、display:inline; #以內(nèi)聯(lián)標(biāo)簽的形式打印
頁(yè)面一 不會(huì)出現(xiàn)的 內(nèi)聯(lián)標(biāo)簽塊級(jí)標(biāo)簽塊級(jí)標(biāo)簽
運(yùn)行結(jié)果
6、cursor
使用目的:在鼠標(biāo)到達(dá)這個(gè)位置時(shí),鼠標(biāo)會(huì)出現(xiàn)不同的風(fēng)格形式;
頁(yè)面一 小手 1 2 3 4 #可以自定義形式(小圖標(biāo))
這個(gè)截圖看不出效果,就是不同的形式展現(xiàn),鼠標(biāo)在不同的文字上出現(xiàn)時(shí);
7、float
一般使用left和right;
使用目的:劃分區(qū)域,可以使之飄起來(lái),是以堆疊的形式展現(xiàn);
頁(yè)面一 div1div2#解決子標(biāo)簽有float,還能使用父標(biāo)簽樣式的方法2
運(yùn)行結(jié)果
8、position
常用的就三種:
(1)、position:fixed 固定的位置,不在改變
(2)、position:relative
(3)、position:absolute relative和absolute一般聯(lián)合使用;
頁(yè)面一
分別看幾種運(yùn)行結(jié)果
9、opacity(透明度)
使用目的:一般設(shè)置圖片/背景顏色的亮度;
.p_w_picpath{ opacity:0.4; }
10、模擬一個(gè)對(duì)話框
寫(xiě)一個(gè)小例子,就是出現(xiàn)對(duì)話框,讓我們自己選擇的那種;
頁(yè)面一
IP | 編輯 |
---|---|
11.11.11.11 | 刪除 |
11.11.11.12 | 刪除 |
運(yùn)行結(jié)果
以上是“CSS常用樣式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道!
創(chuàng)新互聯(lián)www.cdcxhl.cn,專(zhuān)業(yè)提供香港、美國(guó)云服務(wù)器,動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇,持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證, 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源,準(zhǔn)確進(jìn)行流量調(diào)度,確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟,新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。