溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)HTML和css有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
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的語法
<標簽名 屬性名=“屬性值 ” 屬性名=“屬性值”></標簽名>
3、post和get的區(qū)別
get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)
get傳送的數(shù)據(jù)量較小，不能大于2kb，post傳送的數(shù)據(jù)量較大，一般被認為不受限制。
get安全性較低，post安全性較高，但是執(zhí)行效率卻比post、方法好。
4、css（層疊）樣式表
語法：選擇符{屬性：屬性值；屬性：屬性值}
5、樣式表的分類
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內(nèi)部樣式表
當單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在 head 部分通過 <style> 標簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
內(nèi)聯(lián)樣式
當特殊的樣式需要應用到個別元素時，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
6、選擇器
類選擇器根據(jù)類名來選擇
前面以”.”來標志，如：
.demoDiv{
color:#FF0000;
}
在HTML中，元素可以定義一個class的屬性。
如：
<div class="demoDiv">
這個區(qū)域字體顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p class="demoDiv">
這個段落字體顏色為紅色
</p>
最后，用瀏覽器瀏覽，我們可以發(fā)現(xiàn)所有class為demoDiv的元素都應用了這個樣式。包括了頁面中的div元素和p元素。
上例我們給兩個元素都定義了class，但如果有很多個元素都會應用這個元素，那得一個個的定義元素，就會造成頁面重復的代碼太多，這種現(xiàn)象稱為“多類癥”。
我們可以改成這樣來定義。
<div class="demoDiv">
<div>
這個區(qū)域字體顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p>
這個段落字體顏色為紅色
</p>
</div>
這樣，我們就只是定義了一個類，同時把樣式應用到了所有的元素當中。
折疊標簽選擇器
一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽
采用相應的CSS樣式，(在大環(huán)境中你可能出于不同的位置，但是不管怎么樣，你總
是穿著同一套衣服，這件衣服就是由標簽選擇器事先給你限定好的，不管走到哪里
都是這身衣服)比如，在style.css文件中對p標簽樣式的聲明如下：
p{
font-size:12px;
background:#900;
color:090;
}
復制代碼則頁面中所有p標簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)
，這在后期維護中，如果想改變整個網(wǎng)站中p標簽背景的顏色，只需要修改
background屬性就可以了，就這么容易！
折疊ID選擇器
根據(jù)元素ID來選擇元素，具有唯一性。
前面以”#”號來標志，在樣式里面可以這樣定義：
#demoDiv{
color:#FF0000;
}
這里代表id為demoDiv的元素的設(shè)置它的字體顏色為紅色。
我們在頁面上定義一個元素把它的ID定義為demoDiv，如：
<div id="demoDiv">
這個區(qū)域字體顏色為紅色
</div>
用瀏覽器瀏覽，我們可以看到因為區(qū)域內(nèi)的顏色變成了紅色
再定義一個區(qū)域
<div>
這個區(qū)域沒有定義顏色
</div>
用瀏覽器瀏覽，與預期的一樣，區(qū)域沒有應用樣式，所以區(qū)域中的字體顏色還是默認的顏色黑色。
折疊后代選擇器
后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，后代選擇器用兩個常用選擇器，中間加一個空格表示。其中前面的常用選擇器選擇父元素，后面的常用選擇器選擇子元素，樣式最終會應用于子元素中。
如：
<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">藍色
<b>也是藍色</b>
</label>
</p>
這里我們定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍色。后代選擇器是一種很有用的選擇器，使用后代選擇器可以更加精確的定位元素。
折疊子選擇器
請注意這個選擇器與后代選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇，我們看下面的代碼：
Example Source Code
CSS：
#links a {color:red;}
#links > a {color:blue;}
HTML：
<p id="links">
<a href="#">Div+CSS教程</a>>
<span><a href="#">CSS布局實例</a></span>
<span><a href="#">CSS2.0教程</a></span>
</p>
我們將會看到第一個鏈接元素“Div+CSS教程”會顯示成藍色，而其它兩個元素會顯示成紅色。當然，或許你的瀏覽器并不支持這樣的CSS選擇符。我們在一開始也強調(diào)了不太兼容的現(xiàn)狀。
子選擇器（>）和后代選擇器（空格）的區(qū)別：都表示“祖先-后代”的關(guān)系，但是>必須是“爸爸>兒子”，而空格不僅可以是“爸爸兒子”，還能是“爺爺兒”、“太爺爺兒子”。
折疊偽類選擇器
有時候還會需要用文檔以外的其他條件來應用元素的樣式，比如鼠標懸停等。這時候我們就需要用到偽類了。以下是鏈接應用的偽類定義。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/ IE不支持，用Firefox瀏覽可以看到效果 /
input:focus{
background:# E0F1F5;
}
Link表示鏈接在沒有被點擊時的樣式。Visited表示鏈接已經(jīng)被訪問時的樣式。Hover表示當鼠標懸停在鏈接上面時的樣式。
偽類不僅可以應用在鏈接標簽中，也可以應用在一些表單元素中，但表單元素的應用IE不支持，所以一般偽類都只會被應用在鏈接的樣式上。
折疊通用選擇器
通用選擇器用*來表示。例如：
*{
font-size: 12px;
}
表示所有的元素的字體大小都是12px；同時通用選擇器還可以和后代選擇器組合。
例如：
p *{
……
}
表示所有p元素后代的所有元素都應用這個樣式。但是與后代選擇器的搭配容易出現(xiàn)瀏覽器不能解析的情況，比如像這樣子：
<p>
所有的文本都被定義成紅色
<b>所有這個段落里面的子標簽都會被定義成藍色</b>
<p>所有這個段落里面的子標簽都會被定義成藍色</p>
<b>所有這個段落里面的子標簽都會被定義成藍色</b>
<em>所有這個段落里面的子標簽都會被定義成藍色</em>
</p>
這個例子里面p標簽里面嵌套了一個p標簽，這個時候樣式可能會出現(xiàn)與預期結(jié)果不相同的結(jié)果。
折疊群組選擇器
當幾個元素樣式屬性一樣時，可以共同調(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代碼，將具有多個相同屬性的元素，合并群組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時也減少了CSS文件的體積。
折疊同胞選擇器
我們除了上面的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個當中的一個，如一個標題h2元素后面緊跟了兩個段落p元素，我們想定位第一個段落p元素，對它應用樣式。我們就可以使用相鄰同胞選擇器?？聪旅娴拇a：
Example Source Code CSS
h2 + p {color:blue}
HTML
<h2>一個非常專業(yè)的CSS站點</h2>
<p>Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。</p>
<p>CSS布局實例中，有很多與CSS布局有關(guān)的案例。</p>
我們將會看到第一個段落“Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識?！蔽淖诸伾珜撬{色。而第二段則不受此CSS樣式的影響。
+和~的區(qū)別：類似上面一個，兩者都表示兄弟關(guān)系，但是+必須是“大哥+二哥”，~還能是“大哥~三弟”、“二哥~四妹”
折疊屬性選擇器
您可以用判斷html標簽的某個屬性是否存在的方法來定義css
例如：
abbr[title]{
color:#FF0000;
}
表示abbr標簽是否有title屬性，如果有則應用這個樣式。
也可以用判斷html標簽的某個屬性值的方法來定義css
例如：
p[title='app']{ color:#FF0000;
}
感謝各位的閱讀！關(guān)于“HTML和css有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
