CSS樣式之操作屬性一

標籤：***   transform   相對   letter   auto   如何   pac   nec   列表   

********css之操作屬性********一、文本1.文本顏色：color顏色屬性被用來設定文字的顏色顏色是通過CSS最經常的指定：十六進位值 - 如: ＃FF0000一個RGB值 - 如: RGB(255,0,0)顏色的名稱 - 如:  red2.水平對齊text-align 屬性規定元素中的文本的水平對齊。left      把文本排列到左邊。預設值：由瀏覽器決定。right     把文本排列到右邊。center       把文本排列到中間。justify   實現左右對齊文字效果。*****.文本其他動作font-size: 10px;    字型大小line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白地區的高度 50%:基於字型大小的百分比vertical-align:－4px  設定元素內容的垂直對齊 ,只對行內元素有效，對區塊層級元素無效text-decoration:none       text-decoration  屬性用來設定或刪除文本的裝飾。主要是用來刪除連結的底線font-family: ‘Lucida Bright‘font-weight: lighter/bold/border/font-style: obliquetext-indent: 150px;      首行縮排150pxletter-spacing: 10px;  字母間距word-spacing: 20px;  單詞間距text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫3.背景屬性background-colorbackground-imagebackground-repeatbackground-positionbackground-color: cornflowerblue        背景顏色background-image: url(‘1.jpg‘);            背景圖片background-repeat: no-repeat;(repeat:平鋪滿)        是否鋪滿background-position: right top（20px 20px）;        圖片位置簡寫：background:#ffffff url(‘1.png‘) no-repeat right top;4.邊框屬性border-style    邊框樣式（實線還是虛線）border-color    邊框顏色border-width    邊框厚度border-radius: 50%    畫圓border-left/right/top/bottom簡寫：border:厚度 樣式 顏色5.列表屬性ul/ollist-style        列表樣式                none(無樣式)/circle(圓圈)/square(方塊)/lower-latin(英文字母)6.外邊距（margin）和內邊距（padding）1.盒子模型margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。padding:           用於控制內容與邊框之間的距離；   Border(邊框):     圍繞在內邊距和內容外的邊框。Content(內容):   盒子的內容，顯示文本和映像。2.margin(外邊距)單邊外邊距屬性margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;簡寫屬性：margin:10px 20px 20px 10px；        上邊距為10px        右邊距為20px        下邊距為20px        左邊距為10pxmargin:10px 20px 10px;        上邊距為10px        左右邊距為20px        下邊距為10pxmargin:10px 20px;        上下邊距為10px        左右邊距為20pxmargin:25px;        所有的4個邊距都是25px********置中應用********margin: 0 auto;3.padding(內邊距)單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。設定同margin第一刀：body的外邊距邊框在預設情況下會定位於瀏覽器視窗的左上方，但是並沒有緊貼著瀏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），在預設情況下，   body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器視窗的邊框了，為了驗證這一點，加上：body{    border: 1px solid;    background-color: cadetblue;}》》》》解決方案body {    margin: 0;}第二刀：margin collapse（邊界塌陷或者說邊界重疊）1、兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值2、父子div：if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，然後按此div 進行margin；》》》》解決方案：overflow: hidden;7.float 屬性布局關鍵點：如何能夠讓可以調節長度的元素（標籤）在一行顯示如果上一個是浮動的，那麼就緊貼著如果上一個不是浮動的，那麼就保持垂直距離不變****基本浮動規則****先來瞭解一下block元素和inline元素在文檔流中的相片順序。　　block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；　　inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設定width、height屬性無效常見的區塊層級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常見的內嵌元素有span、a、strong、em、label、input、select、textarea、img、br等所謂的文檔流，指的是元素排版版面配置階段中，元素會自動從左往右，從上往下的流式排列。脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。      假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。****非完全脫離文檔流****左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會造成覆蓋現象，只有DIV形成覆蓋現象。》》》》解決方案：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設定margin樣式position定位 和 display 屬性見下篇

 

CSS樣式之操作屬性一