《CSS筆記》-W3C進階樣式(三)

置表單的樣式

屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

font-family: Verdana, Arial;

}

input[type="button"]

{

width:120px;

margin-left:35px;

display:block;

font-family: Verdana, Arial;

}

如何插入樣式表

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：

外部樣式表

當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部：

<head>

</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據它來格式文檔。

外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}</style></head>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3 {

color: red;

text-align: left;

font-size: 8pt;

}

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3 {

text-align: right;

font-size: 20pt;

}

假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接，那么 h3 得到的樣式是：

color: red;

text-align: right;

font-size: 20pt;

即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。

背景色

可以使用 background-color 屬性為元素設置背景色。這個屬性接受任何合法的顏色值。

這條規則把元素的背景設置為灰色：

p {background-color: gray;}

如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內邊距：

p {background-color: gray; padding: 20px;}

背景圖像

要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

背景關聯

如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區是固定的（fixed），因此不會受到滾動的影響：

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat; background-attachment:fixed

}

background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。

縮進文本

把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。

CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。

通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。

這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em：

p {text-indent: 5em;}

水平對齊

text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些復雜

text-align:center 與 <CENTER>

您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。

<CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。

字間隔

word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。

字符轉換

text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

none
uppercase
lowercase
capitalize

默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。

作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：

h1 {text-transform: uppercase}

處理空白符

white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。

使用 em 來設置字體大小

如果要避免在 Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替 pixels。

W3C 推薦使用 em 尺寸單位。

1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設置字體大小時，em 的值會相對于父元素的字體大小改變。

瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。

可以使用下面這個公式將像素轉換為 em：pixels/16=em

（注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）

實例

h1 {font-size:3.75em;} /* 60px/16=3.75em */h2 {font-size:2.5em;} /* 40px/16=2.5em */p {font-size:0.875em;} /* 14px/16=0.875em */

設置鏈接的樣式

能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。

鏈接的四種狀態：

a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻

實例

a:link {color:#FF0000;}/* 未被訪問的鏈接 */a:visited {color:#00FF00;}/* 已被訪問的鏈接 */a:hover {color:#FF00FF;}/* 鼠標指針移動到鏈接上 */a:active {color:#0000FF;}/* 正在被點擊的鏈接 */

當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后

文本修飾

text-decoration 屬性大多用于去掉鏈接中的下劃線：

實例

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

CSS 列表屬性允許你放置、改變列表項標志，或者將圖像作為列表項標志。

要修改用于列表項的標志類型，可以使用屬性 list-style-type：

ul {list-style-type : square}

上面的聲明把無序列表中的列表項標志設置為方塊。

列表項圖像

有時，常規的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif)}

只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。

列表標志位置

CSS2.1 可以確定標志出現在列表項內容之外還是內容內部。這是利用 list-style-position 完成的。

簡寫列表樣式

為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。

CSS 表格屬性可以幫助您極大地改善表格的外觀

表格邊框

如需在 CSS 中設置表格邊框，請使用 border 屬性。

下面的例子為 table、th 以及 td 設置了藍色邊框：

table, th, td

{

border: 1px solid blue;

}

表格寬度和高度

通過 width 和 height 屬性定義表格的寬度和高度。

表格文本對齊

text-align 和 vertical-align 屬性設置表格中文本的對齊方式。

vertical-align 屬性設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊：

表格內邊距

如需控制表格中內容與邊框的距離，請為 td 和 th 元素設置 padding 屬性：

{

padding:15px;

}

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。

CSS 框模型概述

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。

提示：背景應用于由內容和內邊距、邊框組成的區域。

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：

#box {

width: 70px;

margin: 10px;

padding: 5px;

}

術語翻譯

element : 元素。
padding : 內邊距，也有資料將其翻譯為填充。
border : 邊框。
margin : 外邊距，也有資料將其翻譯為空白或空白邊。

CSS padding 屬性

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

單邊內邊距屬性

也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：

padding-top
padding-right
padding-bottom
padding-left

定義單邊樣式

如果您希望為元素框的某一個邊設置邊框樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：

border-top-style
border-right-style
border-bottom-style
border-left-style

因此這兩種方法是等價的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

CSS margin 屬性

設置外邊距的最簡單的方法就是使用 margin 屬性。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static
元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身

歡迎關注公眾號（hongji8410）和加入QQ群一起交流（522342554）

CSS3，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如Photoshop。

在這里邊您將了解以下的邊框屬性：

border-radius
box-shadow
border-image

CSS3 圓角

在CSS2中添加圓角棘手。我們不得不在每個角落使用不同的圖像。

在CSS3中，很容易創建圓角。

在CSS3中border-radius屬性被用于創建圓角：

這是圓角邊框！

實例

在div中添加圓角元素：

div

{

border:2px solid;

border-radius:25px;

}

CSS3盒陰影

CSS3中的box-shadow屬性被用來添加陰影:

實例

在div中添加box-shadow屬性

div

{

box-shadow: 10px 10px 5px #888888;

}

CSS3邊界圖片

有了CSS3的border-image屬性，你可以使用圖像創建一個邊框：

border-image屬性允許你指定一個圖片作為邊框！用于創建上文邊框的原始圖像：

在div中使用圖片創建邊框:

實例

在div中使用圖片創建邊框

div

{

border-image:url(border.png) 30 30 round;

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

-o-border-image:url(border.png) 30 30 round; /* Opera */

}

新邊框屬性

屬性	說明	CSS
border-image	設置所有邊框圖像的速記屬性。	3
border-radius	一個用于設置所有四個邊框- *-半徑屬性的速記屬性	3
box-shadow	附加一個或多個下拉框的陰影	3

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。

在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。

雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。

盒子模型概念

所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。

Div+CSS 盒子模型

說明：

1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。

2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。

3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。

4、Content：內容，盒子的內容，顯示文本和圖像。

5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。

6、盒子實際尺寸有可能大于內容尺寸：

盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;

盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;

實例演示--原始樣式

接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。

頁面如圖所示：

原始樣式

代碼：

HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}

Border

元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。

按如下代碼設置Div(TsetMiddle)的Border（邊框）：

border-style:solid;
border-width: 10px;
border-color: aqua;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。

Border

Margin

margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；

按如下代碼設置Div(TsetMiddle)的margin（外邊距）：

margin: 30px auto;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。

Margin

Padding

Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。

按如下代碼設置Div(TsetMiddle)的margin（外邊距）：

padding: 30px;

刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。

Padding

總結

1、各屬性的值可以用px為單位，也可以用em，百分比等。

2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。

在線咨詢

上一篇：如何在Java中將 WPS 文字文檔轉為 PDF？國產控件就能搞定
下一篇：html多頁面實現背景音樂的連續播放，簡單處理筆記

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

《CSS筆記》-W3C進階樣式(三)

盒子模型概念

實例演示--原始樣式

Border

Margin

Padding

總結

您的項目需求