置表單的樣式
屬性選擇器在為不帶有 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>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明,并根據它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:
<head><style type="text/css">
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 屬性:
td
{
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;
}
元素邊框:我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。
按如下代碼設置Div(TsetMiddle)的Border(邊框):
border-style:solid;
border-width: 10px;
border-color: aqua;
刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30+30了,而且可以設置其底色和線條樣式。
Border
margin 控制周圍的元素區域。margin 沒有背景顏色,是完全透明的。通過margin可以控制元素與四周元素的空隙距離;
按如下代碼設置Div(TsetMiddle)的margin(外邊距):
margin: 30px auto;
刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30(Border)+30(Margin)+30(Border)+30(Margin)了。
Margin
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、可以利用盒子的各種屬性,調整其內容在父容器中的位置。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。