標籤：空間 test 寬度 傾斜 選取器 str esc index fir
css樣式什麼是css層疊樣式表（Cascading Style Sheets），是一種用來表現HTML（標準通用標記語言 (SGML)的一個應用）或XML（標準通用標記語言 (SGML)的一個子集）等檔案樣式的電腦語言。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方向展開到最大最大尺寸） |
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(){}float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像，使文本圍繞在映像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會產生一個塊級框，而不論它本身是何種元素
注：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
value|desc
---|---
left|向左浮動
right|向右移動
none|預設值，元素不浮動
inherit|繼承父元素float的值
塊元素浮動之後脫離文檔流，原來位置不佔空間
上行塊框浮動之後，下行文字將圍繞浮動框
1.在浮動元素之後加上一個帶有清除樣式的盒子：<div class="clear"></div>.clear{clear:both;}
2.在父級元素當中加上樣式overflow:hidden;
1.相對定位（relative） 以自身位置作為參考進行移動 移動後，原先位置保留，不會有元素佔據其位置 2.絕對位置（absolute） 有父級定位時，以父級定位作參考進行移動，當沒有時，以瀏覽器作為參考 移動後，不佔據原來空間 3.固定定位（fixed）以瀏覽器做參考進行移動 不佔據空間 4.層級關係（z-index） 只允許調整定位的元素層級顯示關係，值越大越靠前，值相同則覆蓋顯示web樣式css
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
