【1】CSS的背景屬性設置包括：
①背景顏色：background-color：可以使用名字、RGB模式、十六進制數表示
②背景圖片：background-image：使用url{...}表示
③背景圖片重復：background-repeat：可以設置水平重復、垂直重復、雙向重復、不重復
④背景圖片附著：background-attachment：可以設置黏著、滾動
⑤背景圖片位置：background-position：可以設置左(上中下)、右(上中下)、中(上下)，坐標、百分比
為了使用簡便，我們可以使用background這個綜合屬性一次性設置所有屬性：
body{
background: yellow url{"logo.jpg"} repeat scroll center
}
注意我們必須按照上面介紹的①~⑤的順序來定義
【2】CSS的文本屬性設置包括：
①文本顏色：color：可以使用名字、RGB模式、十六進制數表示
②字符間距：letter-spacing：可以使用像素、厘米表示
③字母間距：word-spacing：可以使用像素、厘米表示
④每行間距：line-height：可以使用像素、厘米、百分比(相等于默認行寬)表示
⑤文本縮進：text-indent：可以使用厘米、百分比表示
⑥文本對齊：text-align：可以設置左對齊、右對齊、居中對齊、兩端對齊
⑦文本強調：text-decoration：可以設置上劃線、刪除線、下劃線、閃爍
⑧文本格式：text-transform：可以設置大寫、小寫、首字母大寫
注意對文本的CSS定義不能像背景那樣采用一站式定義，因為有很多屬性的值都是同樣形式的。
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中對于文本屬性的設置沒有順序的要求
【3】CSS的字體屬性設置包括：
①字體類型：font-style：可以設置normal、italic、oblique
②字體粗細：font-weight：可以設置normal、bold、boler、lighter、數字
③字體大?。篺ont-size：可以設置small、medium、large、百分比
④字體類型：font-family：可以設置一系列的字體名稱
body{
font-style: normal;
font-weight:bold;
font-size: 200%
font-family: vendar
}
【4】CSS的邊框屬性設置包括：
CSS中邊框的設置包括上、下、右、左四種設置，每種設置包括邊框寬帶、樣式、顏色
①邊框寬度：border-xxx-width：可以選擇thin、medium、thick、數字表示
②邊框樣式：border-xxx-style：可以選擇hidden、dotted、dashed、solid、dobule、groove、
ridge、inset、outset
③邊框顏色：border-xxx-color：可以選擇名字、RGB模式、十六進制數
假如需要對邊框的每個邊都進行特別設置，可以使用border-top、border-bottom、border-right、border-left對各個邊框進行一站式設置。
如果對每個邊框的設置都一樣，則直接使用border屬性進行一次性設定即可。
table.tr{
border-top: medium solid red;
border-bottom: thin hidden;
border-left: thick dotted yellow;
border-right: 1cm inset blue
}
【5】CSS的邊緣屬性設置包括：
CSS中關于空白區的設置包括：上、右、下、左四個區域，提供了一個一站式設置的屬性：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的填充屬性設置包括：
CSS中關于填充區的設置包括上、右、下、左四個部分，并且提供了一個一站式設置屬性：padding
在設置padding屬性時，即可以指定一個值(即應用于各個邊框)，也可以指定二個值(即上、右，下和左和上、右一樣)，也可以指定全部四個值。
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
注意：margin是設置HTML元素邊框與頁面之間的空白部分，而padding是設置HTML元素內容和HTML元素邊框之間的空白部分
【7】CSS的表格屬性設置包括：
①表格邊框樣式：border-collapse：是用單豎線還是標準的HTML樣式顯示表格邊框
②表格邊框距離：border-spacing：設置分離表格邊框的距離，僅對separated border樣式有用
③表格標題對齊：caption-side：可以設置top、bottom、left、right
④空單元格是否顯示：empty-cells：可以設置show、hide
⑤單元格大小自適應：table-layout：可以設置auto、fixed.
注意：如果table-layout的值為fixed，則超出單元格長度的內容將被截取
table{
border-collapse:collapse;
border-sapcing: 10px, 50px;
caption-side: bottom;
empty-cells: show;
table-layout: auto
}
【8】CSS的維度屬性設置：
①寬度：width
②高度：height
③最大寬度：max-width
④最大高度：max-height
⑤最小寬度：min-width
⑥最小高度：max-height
注意：CSS中關于height與width的設置會覆蓋原有的element的height和width設置
【9】CSS的分類屬性設置包括：
CSS的分類屬性允許你設置如何顯示一個HTML元素，設置如何將圖像放置在文本的周圍，使用絕對位置、相對位置放置一個元素，如何控制元素的顯示或隱藏。
①清除漂浮元素：clear：清除指定元素周圍的漂浮元素
②鼠標形狀： cursor：可以選擇多種鼠標的形狀
③顯示屬性： display：可以選擇多種顯示屬性，例如指定表格的表頭/腳、行、列、單元格
④漂浮屬性： float：設置文本和圖片如何周圍的元素的位置關系
⑤元素定位： position：可以使用相對、絕對、固定屬性
⑥可見性設置： visibility：可以選擇可見、隱藏
在這些屬性中，比較常用的就是display、float、visibility屬性。使用這三個屬性可以定制出類似水平、垂直菜單，圖文混排的效果。
<style type="text/css">
img {
display:inline;
visibility: visible
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
【10】CSS的方位屬性設置包括：
①方位： left/righ/top/bottom：設置元素的位置，可以使用相對位置(如：-20px)
②決定位置：position： 設置方位的基準，可以選擇絕對、相對、固定
③溢出處理：overflow：設置溢出時可見、隱藏、滾動、自動調整
④Z軸位置： z-index：設置當存在多個重疊元素時，顯示的優先級
注意：positiion屬性經常和方位屬性搭配使用，指明在某一方位上的相對位置設置
<style type="text/css">
h2.pos_left {
position:relative;
left:-20px
}
h2.pos_right {
position:relative;
left:20px
}
</style>
注意：當元素的overflow屬性設置為hidden時，一旦元素的內容超過其顯示區域將被截取
注意：z-index的默認值是0，數值越小表示在顯示越在底層。這一點可以用于透明背景設置
-------------------------------------------------------------
生活就像打牌，不是要抓一手好牌，而是要盡力打好一手爛牌。
posted on 2008-08-17 10:56
Paul Lin 閱讀(1121)
評論(0) 編輯 收藏 所屬分類:
Web基礎