前端基礎學習css
一、偽類
anchor用於控制鏈接效果
a:link (沒有訪問過的鏈接)，定義鏈接的常規狀態
a:hover(鼠標放在鏈接上的狀態)，用於控制顯示效果 （常用）
a:visited(訪問過的鏈接) ，能清楚判斷訪問過的鏈接
a:active(在鼠標按下時的狀態)
例子：
Title.{
: : : }
.{
: : : }
.:.{
: }
:{
::}
nihaotopbottom:before p:before 在p元素之前插入內容
:after p:after 在p元素之後插入內容
二、繼承
<body style="color:red"><p>hello</p></body>
p元素的內容會繼承body的css
css的優先級:
內聯權值style ........1000
id選擇器權值... 100
.class選擇器權值....10
<>標簽選擇器權值...1
文本對齊方式屬性
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: oblique
text-indent: 150px; 首行縮進150px
letter-spacing: 10px; 字母間距
word-spacing: 20px; 單詞間距
text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫
背景屬性:
background-color
background-image
background-repeat
background-position
邊框屬性:
border-width
border-style (required)
border-color
單獨設置邊框:
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
列表屬性:
list-style-type 設置列表項標誌的類型。list-style-image 將圖象設置為列表項標誌。list-style-position 設置列表中列表項標誌的位置。 list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中display屬性:
display:none 隱藏標簽
display:block 將標簽設置成塊級標簽
display:inline 塊級標簽設置成內聯標簽
display:inline-block 可做列表布局，即有內聯標簽的屬性，又有內聯標簽屬性
外邊距(margine)和內邊距(padding):
margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像
單個外邊距設置
margin-top: 100px;
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
margin: 0 auto; 居中
分頁例子:
Title.{
: : %}
.{
: : }
{
: }
.{
: : : : }
.{
:}
..{
: :: : : : : : : : %}
..{
: : }
..{
: : :}
.:{
: : }
12345678910下一頁float屬性:
文檔流結構
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元素，會為這個框空出位置，然後按順序排列
例子:
Title{
: }
.{
: : : : }
.{
: : }
.{
: : : : }position定位
relative: 相對定位
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
註意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute: 絕對定位
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麽它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那麽子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義
fixed：固定在瀏覽器某個部位，不隨滾動條滾動
本文出自 “linux技術” 博客，請務必保留此出處http://haoyonghui.blog.51cto.com/4278020/1950360
前端基礎學習css