發布時間:2019-12-30    所屬分類:網站建設   瀏覽:1649

                          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一



                          XHTML CSS基礎知識


                          image.png


                          1)文檔類型

                             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          一定要保留這句話,刪除它后可能引起某些樣式表失效或其它意想不到的問題


                          2)語言編碼

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          它標示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。這里的gb2312告訴瀏覽器,本文檔采用簡體中文編碼;還有一種常用的編碼是UTF-8編碼,它是國際通用的編碼。不管我們采用哪種編碼,有一點就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣,要不就會出現亂碼。


                          3)html標簽

                          html標簽在頁面中都必須結束。成對的標簽以“/標簽名”結束,有些單一的標簽在本身的結尾打上/來結束,這是xhtml代碼編寫的規范。

                          成對的標簽:<div>{...}</div> <span>{...}</span><p>{...}</p> ......

                          單一的標簽:<img src="" /><br />.......


                          4)css樣式

                          ■外部樣式

                          <link href="layout.css" rel="stylesheet" type="text/css" />

                          這種形式是把css單獨寫到一個css文件內,然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調用,其它頁面也可以調用,是最常用的一種形式。


                          ■內部樣式

                          <style>

                           h2 { color:#f00;}

                           </style>

                          這種形式是內部樣式表,它是以<style>和</style>結尾,寫在源代碼的head標簽內。這樣的樣式表只能針對本頁有效。不能作用于其它頁面。


                          ■行內樣式

                          <p style="font-size:18px;">內部樣式</p>

                          這種在標簽內以style標記的為行內樣式,行內樣式只針對標簽內的元素有效,因其沒有和內容相分離,所以不建議使用。


                          ■導入樣式

                          @import url("/css/global.css");

                          鏈接樣式是以@import url標記所鏈接的外部樣式表,它一般常用在另一個樣式表內部。如layout.css為主頁所用樣式,那么我們可以把全局都需要用的公共樣式放到一個global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式,這樣就使代碼達到很好的重用性。


                          5)css優先級

                          ■id優先級高于class

                          ■后面的樣式覆蓋前面的

                          ■指定的高于繼承

                          ■行內樣式高于內部或外部樣式

                          ■總結:單一的(id)高于共用的(class),有指定的用指定的,無指定則繼承離它最近的

                           

                          6)css盒模型組成

                          屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。

                          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識) html教程 divcss 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 第1張

                          整個盒模型在頁面中所占的寬度是由:左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成,而css樣式中width所定義的寬度僅僅是內容部分的寬度


                          ■一列固定寬度

                          ■一列固定寬度居中

                          ■一列自適應寬度

                          ■一列自適應寬度居中

                          ■一列二至多塊布局


                          一列固定寬度


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style type="text/css">

                          #layout { height: 300px; width: 400px; background: #99FFcc; }

                          </style>

                          </head>

                          <body>

                          <div id="layout">此處顯示  id "layout" 的內容</div>

                          </body>

                          </html>


                          QQ截圖20200106132645.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第2張


                          一列固定寬度居中


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style type="text/css">

                          #layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }

                          </style>

                          </head>

                          <body>

                          <div id="layout">此處顯示  id "layout" 的內容</div>

                          </body>

                          </html>


                          QQ截圖20200106132707.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第3張



                          一列自適應寬度


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。rg/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style type="text/css">

                          body { margin:0;}

                          #layout { height: 300px; width: 80%; background: #99FFcc; }

                          </style>

                          </head>

                          <body>

                          <div id="layout">此處顯示  id "layout" 的內容</div>

                          </body>

                          </html>



                          一列自適應寬度居中


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。rg/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style type="text/css">

                          body { margin:0;}

                          #layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}

                          </style>

                          </head>

                          <body>

                          <div id="layout">此處顯示  id "layout" 的內容</div>

                          </body>

                          </html>


                          QQ截圖20200106132743.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第4張

                          一列二至多塊布局

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style type="text/css">

                          body { margin:0; padding:0;}

                          #header { margin:5px auto; width:500px; height:80px; background:#9F9;}

                          #main { margin:5px auto; width:500px; height:400px; background:#9FF;}

                          #footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

                          </style>

                          </head>

                          <body>

                          <div id="header">此處顯示  id "header" 的內容</div>

                          <div id="main">此處顯示  id "main" 的內容</div>

                          <div id="footer">此處顯示  id "footer" 的內容</div>

                          </body>

                          </html>

                          QQ截圖20200106132724.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第5張




                          3、CSS語法

                          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識) html教程 divcss 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 第6張

                          CSS語法由如下三部分構成,選擇器:可以是ID、CLASS或標簽;屬性和值是用來定義這個物件的某一個特性。如一張桌子的長120cm,寬60cm,套用css的格式為,桌子{長:120cm;寬:60cm;},


                          4、ID和CLASS選擇器


                          id的優先級高于class,比如說今天三班的學生上體育課,小明留下來打掃衛生。那么三班的學生上體育課這是一個類,而小明打掃衛生這是個id,雖然小明也是三班的學生,但id高于class,所以小明執行打掃衛生的任務。


                          ■二列自適應寬度

                          ■二列固定寬度

                          ■二列固定寬度居中

                          ■xhtml的塊級元素(div)和內聯元素(span)

                          ■float屬性

                          ■三列自適應寬度

                          ■三列固定寬度

                          ■三列固定寬度居中

                          ■IE6的3像素bug


                          一、兩列自適應寬度


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w。org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style>

                          #side { background: #99FF99; height: 300px; width: 120px; float: left; }

                          #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

                          </style>

                          </head>

                          <body>

                          <div id="side">此處顯示 id "side" 的內容</div>

                          <div id="main">此處顯示 id "main" 的內容</div>

                          </body>

                          </html>

                          QQ截圖20200106132917.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第7張



                          二、兩列固定寬度居中


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style>

                          #content { width:470px; margin:0 auto;}

                          #side { background: #99FF99; height: 300px; width: 120px; float: left; }

                          #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

                          </style>

                          </head>

                          <body>

                          <div id="content">

                            <div id="side">此處顯示 id "side" 的內容</div>

                            <div id="main">此處顯示 id "main" 的內容</div>

                          </div>

                          </body>

                          </html>


                          QQ截圖20200106132818.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第8張


                          三、xhtml的塊級元素(div)和內聯元素(span)


                          塊級元素:就是一個方塊,像段落一樣,默認占據一行出現;

                          內聯元素:又叫行內元素,顧名思義,只能放在行內,就像一個單詞,不會造成前后換行,起輔助作用。

                          一般的塊級元素諸如段落<p>、標題<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ........ 塊級無素的顯著特點是:每個塊級元素都是從一個新行開始顯示,而且其后的無素也需另起一行進行顯示。


                          四、float屬性


                          <div id="side"><img src="uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>

                           <div id="main"> 教程適合初學者循序漸進學習!</div>

                          body { font-size:18px; line-height:200%; }

                           #side { float:left; width:202px;}



                          五、三列自適應寬度


                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。rg/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style>

                          body { margin:0;}

                          #side { background: #99FF99; height: 300px; width: 120px; float: left; }

                          #side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

                          #main { background: #99FFFF; height: 300px; margin:0 120px; }

                          </style>

                          </head>

                          <body>

                          <div id="side">此處顯示 id "side" 的內容</div>

                          <div id="side1">此處顯示 id "side1" 的內容</div>

                          <div id="main">此處顯示 id "main" 的內容</div>

                          </body>

                          </html>


                          六、三列固定寬度

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3。rg/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

                          <style>

                          body { margin:0;}

                          #content { width:470px; margin:0 auto;}

                          #side { background: #99FF99; height: 300px; width: 120px; float: left; }

                          #side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

                          #main { background: #99FFFF; height: 300px; margin:0 120px; }

                          </style>

                          </head>

                          <body>

                          <div id="content">

                            <div id="side">此處顯示 id "side" 的內容</div>

                            <div id="side1">此處顯示 id "side1" 的內容</div>

                            <div id="main">此處顯示 id "main" 的內容</div>

                          </div>

                          </body>

                          </html>


                          七、IE6的3像素bug

                          3像素bug是IE6的一個著名的bug,當浮動元素與非浮動元素相鄰時,這個3像素的Bug就會出現  css代碼如下:

                           body { margin:0;}

                           #side { float: left; background:#99FF99; height: 300px; width: 120px;}

                           #main { background: #99FFFF; height: 300px;}


                          html代碼如下:

                           <div id="side">此處顯示 id "side" 的內容</div>

                           <div id="main">此處顯示 id "main" 的內容</div>


                          QQ截圖20200106132932.png 網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一 html教程 divcss 第9張


                          請在#side上加上_margin-right:-3px;記住,前邊加上一下劃線,這樣這個樣式專門針對IE6生效。IE7和FF下還會正常顯示。



                          相關內容:


                          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一

                          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二

                          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)三






                          打賞支付寶打賞微信打賞

                          上一篇:百度信息流操作手冊:信息流數據/報告信息流資產

                          下一篇:網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二



                          除非注明,本站所有文章皆為本人原創,可隨意轉載但請保留鏈接或名字,謝謝!



                          相關標簽: html教程divcss石家莊做網站石嘴山做網站雙鴨山做網站四川做網站肅北蒙古做網站肅南裕固做網站綏芬河做網站隨州做網站臺山做網站太倉做網站太原做網站泰興做網站泰州做網站唐山做網站天津做網站調兵山做網站鐵嶺做網站通化做網站

                          發表評論:

                          • 最新文章

                          • 熱門文章

                          • 隨機文章

                          SEO姜東
                            SEO姜東微信二維碼

                            常州SEO姜東


                            從事互聯網行業多年,希望分享各類互聯網、SEO理念、跨境電商,掃碼與我交流SEO


                          與我詳談SEO

                          常州SEO木木qq


                          常州SEO木木qq

                          特別推薦
                          加我的微信:SEO-jiangd詳談網絡營銷
                          一级A片中文字幕免费