HTML和css有什么用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)HTML和css有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有鄒平免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1、HTML網(wǎng)頁的結(jié)構(gòu)
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>我的第一個網(wǎng)頁</title>
</head>
<body>
</body>
</html>

2、HTML的語法
<標(biāo)簽名屬性名=“屬性值 ” 屬性名=“屬性值”></標(biāo)簽名>

3、post和get的區(qū)別
get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)
get傳送的數(shù)據(jù)量較小，不能大于2kb，post傳送的數(shù)據(jù)量較大，一般被認(rèn)為不受限制。
get安全性較低，post安全性較高，但是執(zhí)行效率卻比post、方法好。

4、css（層疊）樣式表
語法：選擇符{屬性：屬性值；屬性：屬性值}

5、樣式表的分類
外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點(diǎn)的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內(nèi)部樣式表
當(dāng)單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。

<head>

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
6、選擇器
類選擇器根據(jù)類名來選擇

前面以”.”來標(biāo)志，如：

.demoDiv{

color:#FF0000;

}

在HTML中，元素可以定義一個class的屬性。

如：

這個區(qū)域字體顏色為紅色

</div>

同時，我們可以再定義一個元素：

這個段落字體顏色為紅色

</p>

最后，用瀏覽器瀏覽，我們可以發(fā)現(xiàn)所有class為demoDiv的元素都應(yīng)用了這個樣式。包括了頁面中的div元素和p元素。

上例我們給兩個元素都定義了class，但如果有很多個元素都會應(yīng)用這個元素，那得一個個的定義元素，就會造成頁面重復(fù)的代碼太多，這種現(xiàn)象稱為“多類癥”。

我們可以改成這樣來定義。

<div>

這個區(qū)域字體顏色為紅色

</div>

同時，我們可以再定義一個元素：

<p>

這個段落字體顏色為紅色

</p>

</div>

這樣，我們就只是定義了一個類，同時把樣式應(yīng)用到了所有的元素當(dāng)中。

折疊標(biāo)簽選擇器
一個完整的HTML頁面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽

采用相應(yīng)的CSS樣式，(在大環(huán)境中你可能出于不同的位置，但是不管怎么樣，你總

是穿著同一套衣服，這件衣服就是由標(biāo)簽選擇器事先給你限定好的，不管走到哪里

都是這身衣服)比如，在style.css文件中對p標(biāo)簽樣式的聲明如下：

font-size:12px;

background:#900;

color:090;

}

復(fù)制代碼則頁面中所有p標(biāo)簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)

，這在后期維護(hù)中，如果想改變整個網(wǎng)站中p標(biāo)簽背景的顏色，只需要修改

background屬性就可以了，就這么容易！

折疊ID選擇器
根據(jù)元素ID來選擇元素，具有唯一性。

前面以”#”號來標(biāo)志，在樣式里面可以這樣定義：

#demoDiv{

color:#FF0000;

}

這里代表id為demoDiv的元素的設(shè)置它的字體顏色為紅色。

我們在頁面上定義一個元素把它的ID定義為demoDiv，如：

這個區(qū)域字體顏色為紅色

</div>

用瀏覽器瀏覽，我們可以看到因?yàn)閰^(qū)域內(nèi)的顏色變成了紅色

再定義一個區(qū)域

<div>

這個區(qū)域沒有定義顏色

</div>

用瀏覽器瀏覽，與預(yù)期的一樣，區(qū)域沒有應(yīng)用樣式，所以區(qū)域中的字體顏色還是默認(rèn)的顏色黑色。

折疊后代選擇器
后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，后代選擇器用兩個常用選擇器，中間加一個空格表示。其中前面的常用選擇器選擇父元素，后面的常用選擇器選擇子元素，樣式最終會應(yīng)用于子元素中。

如：

<style>

.father.child{

color:#0000CC;

}

</style>

黑色

<label class="child">藍(lán)色

</label>

</p>

這里我們定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍(lán)色。后代選擇器是一種很有用的選擇器，使用后代選擇器可以更加精確的定位元素。

折疊子選擇器
請注意這個選擇器與后代選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇，我們看下面的代碼：

Example Source Code

CSS：

#links a {color:red;}

#links > a {color:blue;}

HTML：

<a href="#">Div+CSS教程</a>>

<span><a href="#">CSS布局實(shí)例</a></span>

</p>

我們將會看到第一個鏈接元素“Div+CSS教程”會顯示成藍(lán)色，而其它兩個元素會顯示成紅色。當(dāng)然，或許你的瀏覽器并不支持這樣的CSS選擇符。我們在一開始也強(qiáng)調(diào)了不太兼容的現(xiàn)狀。

子選擇器（>）和后代選擇器（空格）的區(qū)別：都表示“祖先-后代”的關(guān)系，但是>必須是“爸爸>兒子”，而空格不僅可以是“爸爸兒子”，還能是“爺爺兒”、“太爺爺兒子”。

折疊偽類選擇器
有時候還會需要用文檔以外的其他條件來應(yīng)用元素的樣式，比如鼠標(biāo)懸停等。這時候我們就需要用到偽類了。以下是鏈接應(yīng)用的偽類定義。

a:link{

color:#999999;

}

a:visited{

color:#FFFF00;

}

a:hover{

color:#006600;

}

/ IE不支持，用Firefox瀏覽可以看到效果/

input:focus{

background:# E0F1F5;

}

Link表示鏈接在沒有被點(diǎn)擊時的樣式。Visited表示鏈接已經(jīng)被訪問時的樣式。Hover表示當(dāng)鼠標(biāo)懸停在鏈接上面時的樣式。

偽類不僅可以應(yīng)用在鏈接標(biāo)簽中，也可以應(yīng)用在一些表單元素中，但表單元素的應(yīng)用IE不支持，所以一般偽類都只會被應(yīng)用在鏈接的樣式上。

折疊通用選擇器
通用選擇器用*來表示。例如：

font-size: 12px;

}

表示所有的元素的字體大小都是12px；同時通用選擇器還可以和后代選擇器組合。

例如：

p *{

……

}

表示所有p元素后代的所有元素都應(yīng)用這個樣式。但是與后代選擇器的搭配容易出現(xiàn)瀏覽器不能解析的情況，比如像這樣子：

<p>

所有的文本都被定義成紅色

<b>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</b>

<p>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</p>

<b>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</b>

<em>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</em>

</p>

這個例子里面p標(biāo)簽里面嵌套了一個p標(biāo)簽，這個時候樣式可能會出現(xiàn)與預(yù)期結(jié)果不相同的結(jié)果。

折疊群組選擇器
當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔。如：

p, td, li {

line-height:20px;

color:#c00;

}

#main p, #sider span {

color:#000;

line-height:26px;

}

.www_52css_com,#main p span {

color:#f60;

}

.text1 h2,#sider h4,.art_title h3 {

font-weight:100;

}

使用群組選擇器，將會大大的簡化CSS代碼，將具有多個相同屬性的元素，合并群組進(jìn)行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時也減少了CSS文件的體積。

折疊同胞選擇器
我們除了上面的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個當(dāng)中的一個，如一個標(biāo)題h2元素后面緊跟了兩個段落p元素，我們想定位第一個段落p元素，對它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器。看下面的代碼：

Example Source Code CSS

h2 + p {color:blue}

HTML

<h2>一個非常專業(yè)的CSS站點(diǎn)</h2>

<p>Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。</p>

<p>CSS布局實(shí)例中，有很多與CSS布局有關(guān)的案例。</p>

我們將會看到第一個段落“Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識?！蔽淖诸伾珜撬{(lán)色。而第二段則不受此CSS樣式的影響。

+和~的區(qū)別：類似上面一個，兩者都表示兄弟關(guān)系，但是+必須是“大哥+二哥”，~還能是“大哥~三弟”、“二哥~四妹”

折疊屬性選擇器
您可以用判斷html標(biāo)簽的某個屬性是否存在的方法來定義css

例如：

abbr[title]{

color:#FF0000;

}

表示abbr標(biāo)簽是否有title屬性，如果有則應(yīng)用這個樣式。

也可以用判斷html標(biāo)簽的某個屬性值的方法來定義css

例如：

p[title='app']{　color:#FF0000;

}

感謝各位的閱讀！關(guān)于“HTML和css有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：HTML和css有什么用-創(chuàng)新互聯(lián)
路徑分享：http://muchs.cn/article2/dgciic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、微信小程序、電子商務(wù)、品牌網(wǎng)站設(shè)計、App設(shè)計、動態(tài)網(wǎng)站

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

猜你還喜歡下面的內(nèi)容