CSS語法總整理
--------------------------------------------------------------------------------------------------------------
Cascading Style Sheets 層疊樣式表 簡稱CSS
html→head→title
html→body→p→em
html→body→h1
css 規則解剖
p{color:red}
p→selector 選擇
color→ property屬性
red→ value 值
}→declaration block 聲明
--------------------------------------------------------------------------------------------------------------
css第一種寫法
<style>
</style >
--------------------------------------------------------------------------------------------------------------
css第二種寫法
<style type>
<link href="main.css" rel="Stylesheet">
</style >
--------------------------------------------------------------------------------------------------------------
css第三種寫法
<style>
@import url(main.css);
</style>
--------------------------------------------------------------------------------------------------------------
絕對單位
英吋
1 英吋 = 2.54 厘米
厘米
1 厘米 = 10 毫米
毫米
1 毫米 = 1/10 厘米
pt(點)
1 pt = 1/72 英吋
pc (pica)
1 pica = 12 pt
--------------------------------------------------------------------------------------------------------------
相對單位
PX
像素(圖像元素)是計算機顯示使用的最小單位。 此單位是指具有唯一顏色屬性且有別於周圍區域的最小區域。
9pt=12px 10pt=12px 也就是1pt=一又三分之一px
%
百分比定義相對於其它對象的大小。
em
它是相對於字體大小的度量單位。
ex
它是相對於小寫字母 'x' 高度的度量單位。
1em=16px
em 是指字體高度單位
pt單位乘以四分之三就是px單位
--------------------------------------------------------------------------------------------------------------
類別選擇符
類別選擇符讓你對一個給定的類別應用CSS.如果我們有下面這條CSS規則:
p.bold {font-weight:bold;}
再加上下面的html:
<p>這個段落應該是粗體的<//p>
P→段落
.→類別選擇符的標示
bold→自訂的名字
.bold→有這樣一個類別它的名字叫bold
p.bold→有這樣一個段落它的類別名是 bold
font-weight→屬性
bold→值
{}→聲明
--------------------------------------------------------------------------------------------------------------
ID 選擇符
ID選擇符有點像類別選擇符,只不過是在每一網頁中只能用在一個元素上,如果給定以下規則:
p#bold {font-weight:bold;}
再加上這個html:
<p>這個段落應該是粗體的
 p→段落
#→id選擇符的標示
bold→自訂的名字
--------------------------------------------------------------------------------------------------------------
群選擇符
你可以同時為多個選擇符應用同一套規則,就像這樣:
p, h1, h2{
text-align: left;
}
每個選擇符之間用逗號隔開。
甚至你還可以在群選符中參雜ID類別等:
p.navigation, h1#title{
font-weight:bold;
}
--------------------------------------------------------------------------------------------------------------
CSS Color屬性
在 css中,你可以用顏色屬性來指定任意元素的顏色
例如:
p {
color: red;
}
--------------------------------------------------------------------------------------------------------------
CSS有五種定義顏色的方法:
property     value                             description
property     value                             description
color:          <color keyword>          設置顏色為給定的值
color:          #rrggbb                          用 html的16位進制來表示
color:          rgb(rrr,ggg,bbb)            定RGB三種顏色的數值(0-255)
color:          gb(rrr%,ggg%,bbb%)   給出RGB三種顏色佔有的百分比指定
color:          inherit                           承父值也就是說繼承上一層的值顏色關鍵字

aqua 水色, black 黑色. blue 藍色, fuchsia 比粉紅還深的顏色, gray 灰色, green 綠色, lime 灰色, maroon 逃亡黑奴色, navy 海軍色, olive 橄欖色, purple 色, red 紅色, silver 銀色, teal 藍綠色的, white 白色, pink 粉紅色, yellow 黃色
--------------------------------------------------------------------------------------------------------------
背景顏色屬性
就像顏色屬性背景顏色屬性指定的是背景顏色。
p{
background-color:red;
}
規則與顏色屬性類似。
property    value                             description
color:         <color keyword>         設置顏色為給定的值
color:          #rrggbb                       html的16位進制來表示
color:         gb(rrr,ggg,bbb)           定RGB三種顏色的數值(0-255)
color:         gb(rrr%,ggg%,bbb%) 給出RGB三種顏色佔有的百分比指定
color:         inherit                            承父值也就是說繼承上一層的值
--------------------------------------------------------------------------------------------------------------
The Box Model (四個關係)
由內而外
content(內容)→padding(填充)→border(邊框)→margin(邊界距)
content→可以說是圖片也可以說是文本,可以說是任何元素(內容)
padding→是指content和border之間的空間(填充)
border→是指一個元素的邊框,不管你看得見或看不見但是它一定存在的。(邊框)
margin→是指一個元素的border和另一個元素的border的距離也就是說邊框間的距離(邊界距)
--------------------------------------------------------------------------------------------------------------
邊框寬度
在CSS中,你可以用關鍵字來指定邊寬度:
border-width :thin
bordre-width:medium
border-width:thick
你可以用具體的數值來指定:
border-width:10px
border-width:2em
proplerty                       value           notes
border-width:               thin                        
border-width:               medium      默認邊框寬度
border-width :              thick
border-width:              <length>     用具體數值來指定
border-top-width       <length>      設置上邊框
border-right-width     <length>     設置右邊框
border-bottom-width <length>     設置下邊框
border-left-width        <length>     設置左邊框
--------------------------------------------------------------------------------------------------------------
邊框屬性
邊框顏色屬性的指定方式和其它顏色屬性一樣
border-color:red
border-color:#00ff00
border-color:rgb(0%,0%,100%)
property           value type     example                result
border-color:    olor name      red                        關鍵字設定邊框顏色
border-color:    hrxvalue        #ffffff                    指定邊框顏色
border-color:    rgb() value     rgb(10%,80%,0) 指定邊框顏色
--------------------------------------------------------------------------------------------------------------
邊框風格
在CSS常見的幾種邊框風格
border-style: none       没有邊框
border-style: hidden    看不見邊框實際上有的
border-style: dotted    一圓圈一圓圈的邊
border-style: dashed   一段一段的邊
border-style: solid       一般的邊
border-style: double    四周滾邊的框
border-style: grove      中間凸出來四周凹進去的框
border-style: ridge       中間凹進去四周凸出的框
border-style: inset       凹進去
border-style: outset    凸出來
--------------------------------------------------------------------------------------------------------------
邊界距
邊界距屬性是用來指定兩個元素邊框之間的距離:
margin:30px
margin:0px
margin:15px
property              value                                            notes
margin-top:       <length>                                       設置上邊界距
margin-right      <length>                                       設置右邊界距   
margin-bottom: <length>                                      設置下邊界距
margin-lef          <length>                                      設置左邊界距
margin:               <top><right><bottom><left>  設置每個邊界距
--------------------------------------------------------------------------------------------------------------
填充屬性
是指content和border之間的空間也就是說填充屬性用來控制元素邊框空間的大小,如下所示;
padding:30px
padding:0px
padding:15px
property                  value                                          notes
padding-top:          <length>                                     設置上填充
padding-right:       <length>                                     設置右填充     
padding-bottom:   <length>                                     置下填充
padding-left:          <length>                                     置左填充
padding:                 <top><right><bottom><left> 設置每個填充
--------------------------------------------------------------------------------------------------------------
背景圖片
CSS中,你可以對任何元素指定背景圖片,比如:
body{
background-image: url("http://l.yimg.com/f/i/tw/dictionary/masthead_logo.gif");
}
property                   value                notes
backgound-image: ('<location>')   通過網址來指定背景圖片
backgound-image: none                 無背景圖片
backgound-image: inherit               繼承父值
--------------------------------------------------------------------------------------------------------------
背景重複
你可以對背景顯示的方法進行微調,通過background-repeat屬性,你可以指定背景的重複方式。下面的規則是說背景圖片不允許重複:
body{
background-image: url("http://l.yimg.com/f/i/tw/dictionary/masthead_logo.gif");
background-repeat: no-repeat;
}
下面是不同的選擇規則:
property     value                           notes           
background-repeat reapeat         重復背景(預設)
background-repeat reapeat-x     x 軸平行重復
background-repeat reapeat-y    y軸垂直重復
background-repeat no-repeat    不重復
background-repeat inherit          繼承父值
--------------------------------------------------------------------------------------------------------------
背景附著
這個background-attachment 屬性可以控制背景是否隨網頁滾動。
body{
background-image: url("http://www.caopeng.org/html/image/ba_main_title.gif");
background-repeat: no-repeat;
background-attachment:fixed;
}
以下為幾個常見值:
property value notes
background-attachment: scroll    背景隨著滾動
background-attachment: fixed     背景固定
background-attachment: inherit  繼承父值
--------------------------------------------------------------------------------------------------------------
另一個背景屬性→背景定位
背景定位屬性用來指定背景圖片在網頁的展示位置。
body{
background-image: url("http://www.caopeng.org/html/ba_main_title.gif");
background-position:10% 10%;
//background-position:100px 100px;   表示圖片離上方距離100像素離左方距離100像素。
//background-position:bottom right;  表示圖片在右下方。
//background-position:bottom left;     表示圖片在左下方。
//background-position:top left;            表示圖片在左上方。
}
規則很簡單:
property                         value                          notes
background-position   <x><y>                      用具體數值或百分比指定  
background-position   top|center|bottom}  用關鍵字定位
                                        left|center|right}
--------------------------------------------------------------------------------------------------------------
字體屬性
控制元素的字體:
p {font-family: verdana} →表示段落的字體是 verdana
更多的例子:
property value
font-family : verdana
font-family : times
font-family : georgia
font-family : arial,verdana,sans-serif
font-family : Times new roman,serif
font-family : I don't Have This font,sans-serif
---------------------------------------------------------
字體風格屬性
字體風格屬性控制字體是否斜體。比如:
p {font-style: italic;}
可能的幾個值:
property     value
font-style:  oblique
font-style:  italic
font-style:  normal
--------------------------------------------------------------------------------------------------------------
字體的粗細屬性
這個屬性設置字體的粗細程度。
p {font-weight: bold}
屬性規則:
property       value
font-weight:  normal
font-weight:  bold
font-weight:  bolder(比bold程度深)
font-weight: lighter(比normal程度淺)
font-weight:  <100-900>(數字愈大程度愈深)
--------------------------------------------------------------------------------------------------------------
字體大小屬性
設置字體大小(有絕對路徑和相對路徑)
1em=16px
em 是指字體高度單位
1pt=一又三分之一的px
9pt=12px 10pt=12px
p{font-size:12pt}
property   value                    unit  type
font-size:  12pt(點數)          absolute(絕對路徑)
font-size:  12px(像素)         absolute(絕對路徑)
font-size   medium               absolute(絕對路徑)
font-size:  smaller relative   ( 對路徑)(smaller 是medium大小除以1.2)
font-size:  normal relative   (相對路徑)
font-size:  larger relative     (相對路徑)
font-size:  50% relative       (相對路徑)
--------------------------------------------------------------------------------------------------------------
行間距屬性
它來制定行與行之間的垂直間距。
p{line-height:14pt}
proterties
font-size: 14px
line-height: 16px
font-size: 14px
line-height: 2em
--------------------------------------------------------------------------------------------------------------
字體變量屬性
font-variant可以用來小寫變大寫,而原本大寫的更一些
property         value
font-variant:   normal
font-variant:   small-caps
--------------------------------------------------------------------------------------------------------------
文本縮進
通過text-indent的屬性你可以在CSS中對每個段落的首行縮進。
property        value description
text-indent:    根據具體數值對段落首行進行縮進
text-indent:    根據百分比縮進
--------------------------------------------------------------------------------------------------------------
文本對齊屬性
CSS支持水平對齊和適當的文本
property      value       description
text-align:     left          文本左對齊(默認左對齊)
text-align:    right        文本右對齊
text-align:    center      文本居中對齊
text-align:    justify     文本兩端對齊
--------------------------------------------------------------------------------------------------------------
文本裝飾
在CSS中,文本裝飾效果涉及到上劃線,刪除線等對文本的一些裝飾效果。
property               value example
text-decoration:    none              無裝 飾(默認的)
text-decoration:    underline      下畫線
text-decoration:    overline        上畫線
text-decoration:    line-through  刪除線
--------------------------------------------------------------------------------------------------------------
文本變形
文本變形是大小寫轉換首字母大寫等屬性
property             value             description
text-transform:    none             不變
text-transform:    capitaliz       首字母變大寫
text-transform:    uppercase   全部變大寫
text-transform:    lowercase    全部變小寫
------------------------------------------------------------------------------------------------------------
連結與化類別
用 Css的:link化類別用來指定沒有訪問過連結的屬性
例如:沒有訪問過的連結是綠色的;訪問過的連結是藍色的。
pseudo-class(化類別) example use description
:link           a:link{...}         設置未訪問連結屬性
:visited     a:visited{...}   設置訪問過連結屬性
:active      a:active{...}     鼠標點著與釋放之間時
:hover      a:hover{...}      鼠標懸停時(鼠標划過時)

 

rs5257 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

禁止留言