s基礎：CSS的位置問題

2020-03-24 16:27:39

字體：大中小

來源：轉載

供稿：網友

學習CSS之前，首先應學會寫HTML。如果你對HTML還一無所知（像我一樣。。。），請參見html' target='_blank'>HTML教程。
CSS(Cascading Style Sheets)簡介
當初一幫技術人員想出HTML，主要側重于定義內容，比如 p 表示一個段落， h1 表示標題，而并沒有過多設計HTML的排版和界面效果。隨著Internet的迅猛發展，HTML被廣泛應用，上網的人們當然希望網頁做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出來。為了解決這個問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML增加很多的屬性結果將代碼變得很臃腫，將文本變成圖片，過多利用Table來排版，用空白的圖片表示白色的空間等。直到CSS出現。 CSS可算是網頁設計的一個突破，它解決了網頁界面排版的難題。可以這么說，HTML的Tag主要是定義網頁的內容(Content)，而CSS決定這些網頁內容如何顯示(Layout)。 CSS的英文是Cascading Style Sheets，中文可以翻譯成串聯式樣式表。 CSS按其位置可以分成三種：內嵌樣式(Inline Style)
內部樣式表(Internal Style Sheet)
外部樣式表(External Style Sheet)
內嵌樣式(Inline Style)
Inline Style是寫在Tag里面的。內嵌樣式只對所在的Tag有效。
CODE:[Copy to clipboard] P 這個Style定義 p /p 里面的文字是20pt字體，字體顏色是紅色。 /p
顯示示例內部樣式表(Internal Style Sheet)
內部樣式表是寫在HTML的 head /head 里面的。內部樣式表只對所在的網頁有效。
CODE:[Copy to clipboard] HTML
HEAD
STYLE type="text/css"
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
/STYLE
/HEAD
BODY
H1 這個標題使用了Style。 /H1
H1 這個標題沒有使用Style。 /H1
/BODY
/HTML
顯示示例
內部樣式表(Internal Sytle Sheet)要用到Style這個Tag，寫法如下：
CODE:[Copy to clipboard] STYLE type="text/css"
......
/STYLE
外部樣式表(External Style Sheet)
如果很多網頁需要用到同樣的樣式(Styles)，用什么方法呢？將樣式(Styles)寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式(Styles)的網頁里引用這個CSS文件。比如可以用文本編輯器(NotePad)建立一個叫home的文件，文件后綴不要用.txt，改成.css。文件內容如下：
CODE:[Copy to clipboard]H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一個網頁，代碼如下：
CODE:[Copy to clipboard] HTML
HEAD
link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"
/HEAD
BODY
H1 這個標題使用了Style。 /H1
H1 這個標題沒有使用Style。 /H1
/BODY
/HTML
顯示示例
使用外部(Extenal)樣式表，相對于內嵌(Inline)和內部式(Internal)的，有以下優點：樣式代碼可以復用。一個外部CSS文件，可以被很多網頁共用。
便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網頁。
提高網頁顯示的速度。如果樣式寫在網頁里，會降低網頁顯示的速度，如果網頁引用一個CSS文件，這個CSS文件多半已經在緩存區(其它網頁早已經引用過它)，網頁顯示的速度就比較快。串聯(Cascading)
CSS第一個字母，是Cascading，意為串聯。它是指不同來源的樣式(Styles)可以合在一起，形成一種樣式。 Cascading的順序是：瀏覽器缺省(browser default)(優先級最低)
外部樣式表(Extenal Style Sheet)
內部樣式表(Internal Style Sheet)
內嵌樣式表(Inline Style)(優先級最高)
樣式(Styles)的優先級依次是內嵌(inline), 內部(internal), 外部(external), 瀏覽器缺省(browser default)。假設內嵌(Inline)樣式中有font-size:30pt, 而內部(Internal)樣式中有font-size:12pt，那么內嵌(Inline)式樣式就會覆蓋內部(Internal)樣式。顯示示例 -
基本語法一個樣式(Style)的語法由三部分構成：Selector(中文叫選擇器有點怪怪的，就用英文吧)，屬性(Property)，屬性值(Value)。
CODE:[Copy to clipboard]selector {property: value}
舉個例子，下面的代碼p就是selector，color就是屬性，blue就是屬性值。
CODE:[Copy to clipboard]p {color:blue}
HTML中所有的Tag都可以作為selector。注：如果你想為Style加多個屬性，在兩個屬性之間要用分號加以分隔。下面的Style就包含2個屬性，一個是對齊方式居中，一個字體顏色為紅，當中用分號分隔開。
CODE:[Copy to clipboard]p {text-align:center;color:red}
為了提高Style代碼的可讀性，你也可以分行寫：
CODE:[Copy to clipboard]p
{
text-align: center;
color: black;
font-family: arial
}
組合(Grouping)
你也可以將相同的屬性和屬性值賦予多個Selector。Selector之間用逗號分隔。
CODE:[Copy to clipboard]h1,h2,h3,h4,h5,h6
{
color: red
}
上面的例子是將所有正文標題( h1 到 h6 )的字體顏色都變成紅色。 Class Selector
利用Class Selector，你可以用同樣的HTML Tag構成不同的樣式。比如說，你希望段落 p 有兩種樣式，一種是居中對齊，一種是居右對齊。你就可以寫如下樣式：
CODE:[Copy to clipboard]p.right {text-align:right}
p.center {text-align:center}
其中right和center就是兩個class。然后你就可以引用這兩個class，示例代碼如下：
CODE:[Copy to clipboard] p 這一段居中顯示。 /p
p 這一段是居右顯示。 /p
演示示例演示示例你也可以不用HTML Tag，直接用.加上Class名稱作為一個Selector。示例代碼如下：
CODE:[Copy to clipboard].center {text-align: center}
這種通用的Class Selector就沒有Tag的局限性，可以用于不同的Tag。比如：
CODE:[Copy to clipboard] h1 class = "center" 這個標題居中顯示。 /h1
p class = "center" 這個段落居中顯示。 /p
演示示例演示示例 Contextual Selector
你可以為嵌入其它Tag的Tag定義樣式，示例代碼如下：
CODE:[Copy to clipboard]p em{color: red}
Em這個Tag嵌套在P里面。p em就叫做Contextual Selector，定義嵌套于P里的Em的樣式。這個例子表示，在P里面的用Em這個Tag標記的字體顏色是紅色。演示示例演示示例 CSS注釋
為了方便你自己或者他人日后更好地理解你的CSS代碼，你可以寫CSS代碼注釋。CSS代碼注釋以/*開頭，以*/結束。
CODE:[Copy to clipboard]/* 段落樣式 */
p
{
text-align: center;
/* 居中顯示 */
color: black;
font-family: arial
}
CSS字體屬性
http://www.blabla.cn/css_tutorials/010_css_font.html
CSS常用文本屬性
http://www.blabla.cn/css_tutorials/015_css_text.html
CSS背景屬性
http://www.blabla.cn/css_tutorials/020_CSS_background.html
CSS邊框屬性
http://www.blabla.cn/css_tutorials/025_css_border.html
CSS邊距屬性
http://www.blabla.cn/css_tutorials/030_css_margin.html
CSS間隙屬性
http://www.blabla.cn/css_tutorials/035_css_padding.html
CSS盒子模式(Box Model)
http://www.blabla.cn/css_tutoria ... margin_padding.html
CSS列表樣式屬性
http://www.blabla.cn/css_tutorials/045_css_list_style.html
CSS偽類(pseudo-class)
http://www.blabla.cn/css_tutorials/050_pseudo_class.html CSS代碼示例
http://www.blabla.cn/css_tutorials/100_CSS_examples.html 推薦布啦布啦 - 網頁教程與代碼的中文站點
上面的東西都是理論，看是看不會的，必須動手操作實踐。
下面是百度給出的空間頁面CSS說明空間頁面CSS說明 body 整個空間頁面{background-color:#FFFFFF}
-------------------------------------------------------------------------------- 空間名稱和簡介區域
#header 主體部分{height:89px;background:#3399CC}
#header div.lc 左背景圖{background:url(temp1/hdl.jpg) no-repeat}
#header div.rc 右背景圖{background:url(temp1/hdr.jpg) no-repeat top right}
#header div.tit 空間名稱{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑體}
#header div.tit a.titlink 空間名稱鏈接{color:#FFFFFF;text-decoration:none}
#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}
#header div.desc 空間簡介{top:33px;left:20px;color:#FFFFFF;font-size:13px}
#tabline TAB菜單下方的橫線{top:89px;background-color:#FFFFFF}
#tab TAB菜單主體{top:67px;background:url(temp1/tabbg.gif) repeat-x}
#tab a.on,#tab a.on:link,#tab a.on:visited TAB選中狀態{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}
#tab span TAB與TAB之間的分割符“|”{color:#FFFFFF;font-size:14px}
#tab a:link TAB未選中狀態{color:#FFFFFF;text-decoration:none;font-size:14px}
#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}
#tab2 設置TAB菜單主體{background:#DAE9F5}
#tab2 span TAB選中狀態{color:#000000;font-size:12px;font-weight:bold}
#tab2 a TAB未選中狀態{font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC}
-------------------------------------------------------------------------------- .stage 內容區域（TAB菜單與版權信息之間的區域）{background:#F3F1F1} 其它區域（即訪問量等信息）
#comm_info 主體{color:#333333;font-family:Arial;text-align:left}
#comm_info div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
#comm_info a 鏈接{color:#3399CC}
-------------------------------------------------------------------------------- 頁碼區域
#page 主體{height:30px;font-size:14px;font-family:Arial;text-align:center}
#page span 當前頁碼（不可點擊）{padding:3px;color:#000000;font-size:14px;font-weight:bold}
#page a.pc 上一頁和下一頁{color:#3399CC;font-size:14px;font-weight:bold}
#page a.pc:visited{color:#3399CC}
#page a.pi 頁碼（可點擊）{padding:3px;color:#3399CC;font-size:14px}
#page a.pi:visited{color:#3399CC}
-------------------------------------------------------------------------------- 模塊
.mod {margin-bottom:10px}
.modhandle{cursor:move}
.modth 模塊標題欄主體{height:24px}
.modhead{padding:4px 4px 0 4px}
.modopt 模塊操作區（如寫新文章）{padding:4px 4px 0 0}
.modtit 模塊標題區（如文章列表）{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF}
.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline}
.modact 操作文字鏈接（如文章列表）{color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF}
.modbox 模塊內容區{padding:10px 10px 0 10px;background-color:#FFFFFF}
.modtl 模塊左上角背景{background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px}
.modtc 模塊中上背景{background:url(temp1/ptitc.gif) repeat-x}
.modtr 模塊右上角背景{background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px}
.modbl 模塊左下角背景{background-color:#FFFFFF;line-height:1px}
.modbc 模塊中下背景{background-color:#FFFFFF;line-height:1px}
.modbr 模塊右下角背景{background-color:#FFFFFF;line-height:1px}
-------------------------------------------------------------------------------- 文章區域
#m_blog div.tit 文章標題{font-size:14px;font-weight:bold}
#m_blog div.tit a 文章標題鏈接{color:#333333;font-size:14px;font-weight:bold}
#m_blog div.tit a:visited{color:#333333}
#m_blog div.date 文章發表日期{margin:5px 0 8px 0;color:#666666}
#m_blog div.cnt 文章內容{color:#333333;line-height:20px;font-size:14px}
#m_blog div.more{margin:14px 0 16px 0}
#m_blog div.more a 閱讀全文鏈接{color:#3399CC;font-size:14px}
#m_blog div.more a:visited{color:#3399CC}
#m_blog div.opt 文章操作區（如編輯、評論等）{color:#666666;font-size:12px}
#m_blog div.opt a 文章操作鏈接{color:#3399CC;font-size:12px}
#m_blog div.opt a:visited{color:#3399CC}
#m_blog div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#m_blog div.none 無文章提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}
-------------------------------------------------------------------------------- 個人檔案區域
#m_pro a 鏈接{color:#3399CC}
#m_pro a:visited{color:#3399CC}
#m_pro div.image 個人頭像{text-align:center}
#m_pro div.act 操作區（如加為好友、發送消息）{margin-top:10px}
#m_pro div.user 用戶名{margin-top:10px;color:#333333;font-size:12px;font-weight:bold}
#m_pro div.desc 用戶簡介{color:#333333;font-size:12px}
#m_pro div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#m_pro td{color:#333333;line-height:24px;font-size:14px}
-------------------------------------------------------------------------------- 相冊區域
#m_album div.image 照片{text-align:center}
#m_album div.page {color:#666666;font-size:12px;text-align:center}
#m_album div.page a{color:#0000CC;font-size:12px}
#m_album div.page a:visited{color:#0000CC}
-------------------------------------------------------------------------------- 友情鏈接區域
#m_links div.item 子項{color:#333333;font-size:12px}
#m_links div.item a 名稱（鏈接）{color:#3399CC;font-size:12px;text-decoration:none}
#m_links div.item a:visited{color:#3399CC}
#m_links div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
-------------------------------------------------------------------------------- 文章分類
#m_artclg div.item 子項{color:#666666;font-size:12px}
#m_artclg div.item a 分類名稱（鏈接）{color:#3399CC;font-size:12px}
#m_artclg div.item a:visited{color:#3399CC}
#m_artclg div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
-------------------------------------------------------------------------------- 最新評論區域
#m_comment div.item 子項{color:#333333;font-size:12px}
#m_comment div.item a 發表人（鏈接）{color:#3399CC;font-size:12px}
#m_comment div.item a:visited{color:#3399CC}
#m_comment div.item a.cnt 評論摘要（鏈接）{color:#333333;font-size:12px;text-decoration:none}
#m_comment div.item a.cnt:visited{color:#333333;text-decoration:none}
#m_comment div.item a.cnt:hover{color:#333333;text-decoration:underline}
#m_comment div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
-------------------------------------------------------------------------------- 相冊列表
#m_albumlist div.note{color:#333333;font-size:14px}
#m_albumlist div.desc 簡介{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px}
#m_albumlist div.none 無照片提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}
#m_albumlist div.line 分界線{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}
#m_albumlist div.tit 照片標題{margin:6px 0 7px 0;color:#333333;font-size:14px}
#m_albumlist div.tit a 照片標題鏈接{color:#3399CC;font-size:14px}
#m_albumlist div.tit a:visited{color:#3399CC}
#m_albumlist span.count 照片數量{color:#666666;font-size:12px;font-weight:bold}
#m_albumlist span.size 照片尺寸{color:#999999;font-size:12px;font-family:Arial}
#m_albumlist a.act 操作區鏈接（如編輯、刪除）{color:#3399CC;font-size:12px}
#m_albumlist a.act:visited{color:#3399CC}
#m_albumlist a.page 頁碼鏈接{color:#0000CC;font-size:14px}
#m_albumlist a.page:visited{color:#0000CC}
#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF}
-------------------------------------------------------------------------------- 好友列表
#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px}
#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px}
#m_friend div.user{margin-top:4px;color:#333333;font-size:12px}
#m_friend div.user a 好友名稱（鏈接）{color:#3399CC;font-size:12px}
#m_friend div.user a:visited{color:#3399CC}
#m_friend div.line 分界線{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}
-------------------------------------------------------------------------------- 設置訪問統計、模板設置
#m_setting a 鏈接{color:#3399CC}
#m_setting a:visited{color:#3399CC}
#m_setting 主體{line-height:22px;color:#333333;font-size:14px}
#m_setting img.sel 模板預覽圖（選中狀態）{border:4px solid #FFDB7B}
#m_setting img.unsel 模板預覽圖（未選中狀態）{border:1px solid #D2D2D2}
#m_setting span.tit 模板標題名稱{font-size:14px}
#m_setting span.usr 作者名{color:#666666}
#m_setting div.sel “當前模板”文字{padding-top:6px;font-size:14px;font-weight:bold}
#m_setting div.line 分界線{margin-top:20px;line-height:16px;border-top:1px solid #D2E9F4}
-------------------------------------------------------------------------------- 系統公告
#m_sysinfo a 鏈接{color:#3399CC}
#m_sysinfo a:visited{color:#3399CC}
#m_sysinfo 主體{line-height:22px;color:#333333;font-size:14px}
#m_sysinfo span.new 最新{color:#FF0000;font-size:10px;font-family:Arial}
#m_sysinfo span.date 發布時間{color:#666666;font-size:14px}
-------------------------------------------------------------------------------- 基本選項
#m_setbase 主體{color:#333333;font-size:14px}
#m_setbase td{color:#333333;font-size:14px}
#m_setbase div.line 分界線{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}
-------------------------------------------------------------------------------- 網友評論
#in_comment 主體{width:710px}
#in_comment div.tit 標題{margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold}
#in_comment div.user 發表人名{margin-bottom:6px;color:#333333;font-size:12px}
#in_comment div.user a 發表人名（鏈接）{color:#3399CC;font-size:12px}
#in_comment div.user a:visited{color:#3399CC}
#in_comment div.user span.date 發表時間{color:#666666;font-size:12px}
#in_comment div.desc 評論內容{color:#333333;font-size:12px}
#in_comment div.line 分界線{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}
#in_send div.tit 發表評論（標題）{margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold}html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用HTML和CSS打造屬于自己的暖男“大白”

下一篇：如何用CSS實現雙語導航菜單