CSS之路(中)
CSS單位與文字排版
標籤的顯示模式與Display屬性
(1)標籤的型別
HTML標記一般分為 塊標記 和 行內標記 兩種型別,它們也稱為 塊元素 和 行內元素。
塊元素:每個塊元素都會獨自佔據一整行或多整行,可以對其設定寬度、高度、對齊等屬性,常用於網頁佈局和網頁結構的搭建。常見的塊元素有:h1,h6,p,div,ul,ol,li等,其中div標記是最典型的塊元素。
行內元素:行內元素不會佔有獨立的區域,僅僅依靠自身的字型大小和影象尺寸來支撐結構,一般不可以設定寬度、高度、對齊等屬性,常用於控制頁面中文字的樣式。常見的行內元素有strong,b,em,i,del,s,ins,u,a,span等,其中span標記是最典型的行內元素。
(2)Display屬性
display屬性可以控制標籤的顯示模式,它有四個可選值:none/inline/block/inline-block。
其中,none代表此元素不被顯示,在文件中被刪除;
block代表按塊級元素顯示,前後帶換行符,自己佔一行。
inline代表按內聯元素顯示,一個挨著一個。
inline-block代表按行內標籤進行排版,但是可以設定寬高,而且高度可以影響行高。
CSS的顏色值和單位
(1)命名顏色
red,black,white,purple,green,yellow,silver,gray,teal,blue,navy ...
(2)RGB顏色表示法
RGB模式表示色彩,三種顏色組合疊加可以產生自然界中所有的顏色,也是計算機常用模式。RGB顏色值規定的規範為:rgb(red, green, blue),每個引數定義顏色的強度,可以是介於0到255之間的整數,也可以是百分比值。
(3)十六進位制顏色值
由於RGB模式書寫十分不方便,三個255值直接用3個十六進位制數表示。十六進位制顏色規定的規範為:#RRGGBB,其中RR(紅色)、GG(綠色)、BB(藍色)的十六進位制整數規定了顏色的部分,所優質必須介於0餘FF之間。
取值範圍 #000000 ~ #FFFFFF (黑色到白色),十六進位制顏色值其實就是RGB模式的另外一種寫法,所有瀏覽器都相容。
(4)CSS的長度單位
px:畫素點,畫素就是顯示器顯示的一個點。
em:1em等於當前的字型大小。例如,當前元素的字型大小為16px,那麼1em=16px。
單位之間的關係:1in = 2.54cm = 25.4mm =96px
CSS的文字排版
(1)font-size :字號大小
font-size屬性用於設定字號,該屬性的值既可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較有用,推薦使用畫素單位px,絕對長度單位使用較少。
(2)font-family : 字型
font-family 屬性用於設定字型,可以同時指定多個字型,中間以逗號隔開,表示如果瀏覽器不支援第一個字型,則會嘗試下一個,直到直到合適的字型。
(3)font-weight :字型粗細
normal 預設值。定義標準的字元。
bold 定義粗體字元。
bolder 定義更粗的字元。
lighter 定義更細的字元。
(4)font-style : 字型風格
可以設定斜體、傾斜或正常字型。
normal 預設值。瀏覽器顯示一個標準的字型樣式。
italic 瀏覽器會顯示一個斜體的字型樣式。
oblique 瀏覽器會顯示一個傾斜的字型樣式。
inherit 規定應該從父元素繼承字型樣式。
(5)letter-spacing : 字間距
letter-spacing 屬性用於定義字間距,所謂字間距就是字元與字元之間的空白,其屬性可為不同單位的數值,允許使用負數值。
normal 預設。規定字元間沒有額外的空間。
ength 定義字元間的固定空間(允許使用負值)。
inherit 規定應該從父元素繼承 letter-spacing 屬性的值。
(6)word-spacing : 單詞間距
word-spacing屬性用於定義英文單詞之間的間距,對中文字元無效。和letter-spacing一樣,其屬性值可以為不同單位的數值,允許使用負數值,預設為normal。
word-spacing和letter-spacing均可對英文進行設定,不同之處在於letter-spacing定義的是字母之間的間距,而word-spacing定義的是英文單詞之間的間距。
(7)line-height : 行間距
line-height屬性用於設定行間距,就是行與行之間的距離,即字元的垂直間距,一般稱為行高。
(8)text-indent : 首行縮排
text-indent屬性用於設定段落首行文字的鎖緊,只能設定塊級標籤。其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%,允許使用負數值,建議使用em作為設定單位。
(9)word-break :自動換行
normal 使用瀏覽器預設的換行規則,不打斷單詞顯示;
break-all 允許在單詞內換行;
keep-all 只能在半形空格或連字元處換行;
(10)word-wrap :允許長單詞或URL地址換行到下一行
normal 只在允許的段字點換行(瀏覽器保持預設處理)
break-word 在長單詞或URL地址內部進行換行
(11)color 設定文字顏色
(12)direction 設定文字方向。
ltr預設。文字方向從左到右。
rtl 文字方向從右到左。
inherit 規定應該從父元素繼承 direction 屬性的值。
(13)text-align 對齊元素中的文字
left 把文字排列到左邊。預設值:由瀏覽器決定。
right 把文字排列到右邊。
center 把文字排列到中間。
justify 實現兩端對齊文字效果。
inherit 規定應該從父元素繼承 text-align 屬性的值。
(14) text-decoration 向文字新增修飾。
none 預設。定義標準的文字。
underline 定義文字下的一條線。
overline 定義文字上的一條線。
line-through 定義穿過文字下的一條線。
blink 定義閃爍的文字。
inherit 規定應該從父元素繼承 text-decoration 屬性的值。
(15)text-shadow 設定文字陰影
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊的距離。
color 可選。陰影的顏色。
(16) text-transform 控制元素中的字母
none 預設。定義帶有小寫字母和大寫字母的標準的文字。
capitalize 文字中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母,僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
(17)unicode-bidi 設定或返回文字是否被重寫
normal 預設。不使用附加的嵌入層面。
embed 建立一個附加的嵌入層面。
bidi-override 建立一個附加的嵌入層面。重新排序取決於 direction 屬性。
initial 設定該屬性為它的預設值。
inherit 從父元素繼承該屬性。
(18) vertical-align 設定元素的垂直對齊
baseline 預設。元素放置在父元素的基線上。
sub 垂直對齊文字的下標。
super 垂直對齊文字的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字型的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的底端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字型的底端對齊。
length
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。
(19)white-space 設定元素中空白的處理方式
normal 預設。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到 <br> 標籤為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合併空白符序列,但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
(20)font 在一個宣告中設定所有的字型屬性
p.ex1{ font:15px arial,sans-serif; } p.ex2{ font:italic bold 12px/30px Georgia, serif; }
(21 ))font-variant 以小型大寫字型或者正常字型顯示文字。
normal 預設值。瀏覽器會顯示一個標準的字型。
small-caps 瀏覽器會顯示小型大寫字母的字型。
inherit 規定應該從父元素繼承 font-variant 屬性的值。
(把段落設定為小型大寫字母字型:)
p.small { font-variant:small-caps; }
text—align和vertical-align
text-align——屬性值:left、right、center、justify(兩端對其)——作用在塊級元素上,從而來設定這個塊級元素所包含的行內內容的水平對齊方式。
vertical-align:(垂直對齊)-不作用在塊級元素上實現整體控制,她作用在哪一個具體的行內元素上實現對這個行內元素,具體行內元素的一個具體的控制,控制它自身的一個垂直對齊的方式。可以作用在一個行內元素上,也可以作用在一個表格的單元元素上。
CSS 連結:不同的連結可以有不同的樣式。
連結的樣式,可以用任何CSS屬性(如顏色,字型,背景等)。
特別的連結,可以有不同的樣式,這取決於他們是什麼狀態。
這四個連結狀態是:
a:link - 正常,未訪問過的連結
a:visited - 使用者已訪問過的連結
a:hover - 當用戶滑鼠放在連結上時
a:active - 連結被點選的那一刻
a:link {color:#000000;} /* 未訪問連結*/
a:visited {color:#00FF00;} /* 已訪問連結 */
a:hover {color:#FF00FF;} /* 滑鼠移動到連結上 */
a:active {color:#0000FF;} /* 滑鼠點選時 */
當設定為若干鏈路狀態的樣式,也有一些順序規則:
a:hover 必須跟在 a:link 和 a:visited後面
a:active 必須跟在 a:hover後面