web樣式css
css樣式
什麽是css
層疊樣式表（Cascading Style Sheets），是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，調整顏色，背景，文字風格
css的聲明
css屬性和值用冒號分隔，每條樣式末尾加分號，
例：color:red;
通配符：*應用到所有的元素，除<!doctype>以外
元素選擇器：給某類元素標簽統一應用樣式
例p元素：p{color:red}
class選擇器：將元素歸成一類，對一類元素應用樣式
例：.test{color:red}
id選擇器：給元素設定一個唯一的標識符，僅單獨對一個元素應用樣式，通常用於js獲取元素
例：
#test{color:red}權重：id選擇器>class選擇器>元素選擇器
應用方式
1.內聯樣式
直接在標簽元素中定義，添加屬性和值
<p style="color: blue;background: gray;"></p>
2.當前頁面內容應用樣式
在頭部內容中增加style樣式內容
<head> <style> p { color : green; background : gray;} </style> </head> <body> <p>應用樣式</p> </body>
3.外聯樣式
通過link調用其他路徑當中的.css文件
<link href="" rel="stylesheet">
文本樣式
| 描述 | 屬性：值 |
|---|---|
| 文本顏色 | color:red; |
| 背景顏色 | background:red; |
| 字符間距 | letter-spacing:2em; |
| 空格間距(適用於英文) | word-spacing:10px; |
| 字行間距 | line-height:10px; |
| 對齊方式 | text-align:center/left/right; |
| 文本縮進 | text-indent:2em; |
註：單文em是相對字體大小而定的，屬於相對單位
裝飾文本（decoration）:
值|描述
---|---
none|無裝飾
underline|下劃線
line-through|中劃線
overline|上劃線
註：a標簽默認添加下劃線，通過text-decoration:none取消掉
字體樣式
| 屬性 | 描述 |
|---|---|
| font-size | 字體大小 |
| font-family | 字體類型 |
| font-style | 字體風格normal/italic(傾斜) |
| font-weight | 100-300(細體)，400-500（默認），600-900（粗體） |
背景屬性
| 屬性 | 描述 |
|---|---|
| background-color | 背景顏色 |
| background-image:url() | 背景圖片 |
| background-repeat | 背景填充，repeat(默認平鋪方式)，no-repeat(不重復圖像)，repeat-x(以x方向重復平鋪圖像)，repeat-y(以y方向平鋪圖像) |
| background-postion | 背景定位（x,y方向） |
| background-size | 背景大小（cover：使圖像x方向拉伸到最大最大尺寸） |
css補充
三類元素
1.塊級元素
a. 前後的元素都會被換行，允許設置寬高度
b. 浮動(float)、定位(fixed、absolute)不占空間的樣式，會變為“塊” (不能用margin進行居中) 2.內聯元素
a.前後元素不會被換行
b.不能設置寬度，也沒有垂直方向的外邊距 3.內聯塊
內聯元素的塊，單用擁有了塊的特質（不會被換行）樣式調整
display:
block(塊元素)
inline(內聯元素)
inline-block(內聯塊);text-align:center(居中文字，內聯元素，內聯塊)
margin:0 auto（居中塊元素）vertical-align:top/middle/bottom(對塊中內聯元素進行調整)overflow
value|desc
---|---
visible|默認
hidden|清除浮動樣式，隱藏塊中內容溢出部分
auto|內容溢出時，顯示右側滾動條
scroll|不管是否溢出，都顯示滾動條
陰影（立體效果）
box/text-shadow:|1px|1px|1px|black
---|---|---|---|---
陰影|左右|上下|濃度|顏色
註：text-align:center對p標簽可以居中，對span標簽不能
圓角
css| desc
---|---
border-radius|50%以上，正方形盒子為園，長方形為橢圓
border-top-left-radius|上左
border-top_right-radius|上右
border-bottom-left-radius|下左
border-bottom-right-radius|下右
制作三角形
.box {
width: 0;
height: 0;
border-top: 5px solid red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}css3樣式
直接選擇對元素進行渲染，不需要創建對象
p:first-child{}
p:last-child{}
p:nth-child(){}css-float(浮動)
定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素
註：假如在一行之上只有極少的空間可供浮動元素，那麽這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
value|desc
---|---
left|向左浮動
right|向右移動
none|默認值，元素不浮動
inherit|繼承父元素float的值
塊元素浮動之後脫離文檔流，原來位置不占空間
上行塊框浮動之後，下行文字將圍繞浮動框
清除浮動
1.在浮動元素之後加上一個帶有清除樣式的盒子：
<div class="clear"></div>
.clear{clear:both;}
2.在父級元素當中加上樣式overflow:hidden;
定位（position）
1.相對定位（relative）
以自身位置作為參考進行移動
移動後，原先位置保留，不會有元素占據其位置
2.絕對定位（absolute）
有父級定位時，以父級定位作參考進行移動，當沒有時，以瀏覽器作為參考
移動後，不占據原來空間
3.固定定位（fixed）
以瀏覽器做參考進行移動
不占據空間
4.層級關系（z-index）
只允許調整定位的元素層級顯示關系，值越大越靠前，值相同則覆蓋顯示web樣式css