【1】CSS的背景屬性設(shè)置包括：
①背景顏色：background-color：可以使用名字、RGB模式、十六進(jìn)制數(shù)表示
②背景圖片：background-image：使用url{...}表示
③背景圖片重復(fù)：background-repeat：可以設(shè)置水平重復(fù)、垂直重復(fù)、雙向重復(fù)、不重復(fù)
④背景圖片附著：background-attachment：可以設(shè)置黏著、滾動(dòng)
⑤背景圖片位置：background-position：可以設(shè)置左(上中下)、右(上中下)、中(上下)，坐標(biāo)、百分比
為了使用簡(jiǎn)便，我們可以使用background這個(gè)綜合屬性一次性設(shè)置所有屬性：
body{
background: yellow url{"logo.jpg"} repeat scroll center
}
注意我們必須按照上面介紹的①~⑤的順序來定義
【2】CSS的文本屬性設(shè)置包括：
①文本顏色：color：可以使用名字、RGB模式、十六進(jìn)制數(shù)表示
②字符間距：letter-spacing：可以使用像素、厘米表示
③字母間距：word-spacing：可以使用像素、厘米表示
④每行間距：line-height：可以使用像素、厘米、百分比(相等于默認(rèn)行寬)表示
⑤文本縮進(jìn)：text-indent：可以使用厘米、百分比表示
⑥文本對(duì)齊：text-align：可以設(shè)置左對(duì)齊、右對(duì)齊、居中對(duì)齊、兩端對(duì)齊
⑦文本強(qiáng)調(diào)：text-decoration：可以設(shè)置上劃線、刪除線、下劃線、閃爍
⑧文本格式：text-transform：可以設(shè)置大寫、小寫、首字母大寫
注意對(duì)文本的CSS定義不能像背景那樣采用一站式定義，因?yàn)橛泻芏鄬傩缘闹刀际峭瑯有问降摹?/font>
p.poem {
color:red;
letter-spacing:2px;
word-spacing:0.1cm;
line-height:200%;
text-indent:none;
text-align:center;
text-decoration:underline;
text-transform:capitalize
}
注意：CSS中對(duì)于文本屬性的設(shè)置沒有順序的要求
【3】CSS的字體屬性設(shè)置包括：
①字體類型：font-style：可以設(shè)置normal、italic、oblique
②字體粗細(xì)：font-weight：可以設(shè)置normal、bold、boler、lighter、數(shù)字
③字體大小：font-size：可以設(shè)置small、medium、large、百分比
④字體類型：font-family：可以設(shè)置一系列的字體名稱
body{
font-style: normal;
font-weight:bold;
font-size: 200%
font-family: vendar
}
【4】CSS的邊框?qū)傩栽O(shè)置包括：
CSS中邊框的設(shè)置包括上、下、右、左四種設(shè)置，每種設(shè)置包括邊框?qū)拵А邮健㈩伾?br />
①邊框?qū)挾龋篵order-xxx-width：可以選擇thin、medium、thick、數(shù)字表示
②邊框樣式：border-xxx-style：可以選擇hidden、dotted、dashed、solid、dobule、groove、
ridge、inset、outset
③邊框顏色：border-xxx-color：可以選擇名字、RGB模式、十六進(jìn)制數(shù)
假如需要對(duì)邊框的每個(gè)邊都進(jìn)行特別設(shè)置，可以使用border-top、border-bottom、border-right、border-left對(duì)各個(gè)邊框進(jìn)行一站式設(shè)置。
如果對(duì)每個(gè)邊框的設(shè)置都一樣，則直接使用border屬性進(jìn)行一次性設(shè)定即可。
table.tr{
border-top: medium solid red;
border-bottom: thin hidden;
border-left: thick dotted yellow;
border-right: 1cm inset blue
}
【5】CSS的邊緣屬性設(shè)置包括：
CSS中關(guān)于空白區(qū)的設(shè)置包括：上、右、下、左四個(gè)區(qū)域，提供了一個(gè)一站式設(shè)置的屬性：margin
p{
margin: 2cm 4cm 3cm 5cm
}
Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!
【6】CSS的填充屬性設(shè)置包括：
CSS中關(guān)于填充區(qū)的設(shè)置包括上、右、下、左四個(gè)部分，并且提供了一個(gè)一站式設(shè)置屬性：padding
在設(shè)置padding屬性時(shí)，即可以指定一個(gè)值(即應(yīng)用于各個(gè)邊框)，也可以指定二個(gè)值(即上、右，下和左和上、右一樣)，也可以指定全部四個(gè)值。
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
注意：margin是設(shè)置HTML元素邊框與頁(yè)面之間的空白部分，而padding是設(shè)置HTML元素內(nèi)容和HTML元素邊框之間的空白部分
【7】CSS的表格屬性設(shè)置包括：
①表格邊框樣式：border-collapse：是用單豎線還是標(biāo)準(zhǔn)的HTML樣式顯示表格邊框
②表格邊框距離：border-spacing：設(shè)置分離表格邊框的距離，僅對(duì)separated border樣式有用
③表格標(biāo)題對(duì)齊：caption-side：可以設(shè)置top、bottom、left、right
④空單元格是否顯示：empty-cells：可以設(shè)置show、hide
⑤單元格大小自適應(yīng)：table-layout：可以設(shè)置auto、fixed.
注意：如果table-layout的值為fixed，則超出單元格長(zhǎng)度的內(nèi)容將被截取
table{
border-collapse:collapse;
border-sapcing: 10px, 50px;
caption-side: bottom;
empty-cells: show;
table-layout: auto
}
【8】CSS的維度屬性設(shè)置：
①寬度：width
②高度：height
③最大寬度：max-width
④最大高度：max-height
⑤最小寬度：min-width
⑥最小高度：max-height
注意：CSS中關(guān)于height與width的設(shè)置會(huì)覆蓋原有的element的height和width設(shè)置
【9】CSS的分類屬性設(shè)置包括：
CSS的分類屬性允許你設(shè)置如何顯示一個(gè)HTML元素，設(shè)置如何將圖像放置在文本的周圍，使用絕對(duì)位置、相對(duì)位置放置一個(gè)元素，如何控制元素的顯示或隱藏。
①清除漂浮元素：clear：清除指定元素周圍的漂浮元素
②鼠標(biāo)形狀： cursor：可以選擇多種鼠標(biāo)的形狀
③顯示屬性： display：可以選擇多種顯示屬性，例如指定表格的表頭/腳、行、列、單元格
④漂浮屬性： float：設(shè)置文本和圖片如何周圍的元素的位置關(guān)系
⑤元素定位： position：可以使用相對(duì)、絕對(duì)、固定屬性
⑥可見性設(shè)置： visibility：可以選擇可見、隱藏
在這些屬性中，比較常用的就是display、float、visibility屬性。使用這三個(gè)屬性可以定制出類似水平、垂直菜單，圖文混排的效果。
<style type="text/css">
img {
display:inline;
visibility: visible
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
【10】CSS的方位屬性設(shè)置包括：
①方位： left/righ/top/bottom：設(shè)置元素的位置，可以使用相對(duì)位置(如：-20px)
②決定位置：position： 設(shè)置方位的基準(zhǔn)，可以選擇絕對(duì)、相對(duì)、固定
③溢出處理：overflow：設(shè)置溢出時(shí)可見、隱藏、滾動(dòng)、自動(dòng)調(diào)整
④Z軸位置： z-index：設(shè)置當(dāng)存在多個(gè)重疊元素時(shí)，顯示的優(yōu)先級(jí)
注意：positiion屬性經(jīng)常和方位屬性搭配使用，指明在某一方位上的相對(duì)位置設(shè)置
<style type="text/css">
h2.pos_left {
position:relative;
left:-20px
}
h2.pos_right {
position:relative;
left:20px
}
</style>
注意：當(dāng)元素的overflow屬性設(shè)置為hidden時(shí)，一旦元素的內(nèi)容超過其顯示區(qū)域?qū)⒈唤厝?br />
注意：z-index的默認(rèn)值是0，數(shù)值越小表示在顯示越在底層。這一點(diǎn)可以用于透明背景設(shè)置
-------------------------------------------------------------
生活就像打牌，不是要抓一手好牌，而是要盡力打好一手爛牌。
posted on 2008-08-17 10:56
Paul Lin 閱讀(1126)
評(píng)論(0) 編輯 收藏 所屬分類:
Web基礎(chǔ)