標籤：style color io os ar 檔案 div 代碼 on
CSS ：層疊樣式表 cascading style sheets 它的作用是：美化html網頁
格式：樣式名：值；樣式名：值；樣式名：值；
注釋文法：/* 注釋內容 */
選中代碼按TAB，代碼左移，shift+tab右移
（一）基本：
一：分類：
1.內聯 和html聯合顯示,控制精確，可重用性差，冗餘多
<p style=" font-size:38px;">呵呵呵</p>
2.內嵌 作為一個獨立地區內嵌在網頁裡，必須在head裡面
<head>
<style type="text/css">
p 對頁面裡的p起作用
{
font-size：108px;
}
</style>
</head>
3.外部 建個CSS檔案夾，建立CSS檔案
右鍵，css樣式表，附加樣式表，找到檔案，一般用link串連方式
二：選取器
1.簡單選取器
*是所有的
標籤選取器： 用標籤名做選取器，如：p{樣式}
class選取器：設定統一的class，比如在<p class="qd"> 在樣式表中用點代表class的選取器 .qd{樣式}
id選取器：針對某個id起作用，id不允許重。<p id="xx"> 在樣式表中#xx{樣式}
id選取器優先順序高於class選取器優先順序高於標籤名選取器，優先順序高的會覆蓋掉優先順序低的樣式，樣式表優先順序高於屬性的
2.複合選取器
以逗號隔開；並列關係，同時起作用如：#xx,#dd{ 樣式 }
以空格隔開，後代關係，如果p在div裡面，則用 div p { 樣式 }
以點隔開的，篩選關係，p.qd { }對p進行class篩選，p裡class為qd的執行樣式
（二）樣式：
一：背景與前景
background-color:#eeeeff;背景顏色
background-image:url(image/8b322d3f373e4a3fb8a1677e.jpg)；背景圖片（預設平鋪）：
background-attachment:fixed; 背景固定
background-attachment:scroll;背景和字一起滾動，預設是一起
background-repeat:repeat;對齊，預設平鋪repeat
background-repeat:no-repeat;不平鋪
background-repeat:repeat-x;橫向平鋪
background-repeat:repeat-y;縱向平鋪
background-position:center;不平鋪的情況下位置放到中間
background-position:right bottom;右下角
background-position:right 100px bottom 100px;離右邊100，離下面100，可以是負的值
前景
font-family:"隸書";字型名稱（微軟雅黑，宋體）
font-size:12px; 字型大小，像素（12px,14px,18px）8em預設字型的8倍還可以用百分比
font-weight:100; bold,normal 是否加粗
font-style:inherit; italic,normal是否傾斜
color:#09F;顏色
文本對齊修飾
text-decoration:underline;底線，overline上劃線，line-through刪除線，none是去掉底線，可以去掉超連結的底線
text-align:center;橫向對齊
vertical-align:middle;縱向對齊top.middle,bottom
text-indent:首行縮排量，如果字型是14px,則縮排兩個位28px
line-height:行高 一般是1.5到2倍的字型大小
二：邊界與邊框
1.border類：邊框
border: 5px solid blue ；5個像素的粗細，樣式是實線，顏色是blue；
border-width:5px; border-style:double;border-color:red;這是分開設定粗細，樣式和顏色
border-top:5px solid red;設定上面的 border-bottom:5px solid red;設定下面的
2.margin類：外邊距
margin:10px;四個邊距都是10px； margin-top:10px; right,left,bottom;上右左下
margin:10px 0px 10px 0px;順序是順時針：上右下左。
3.padding類：內邊距
padding:10px 0px 10px 0px;順時針，上右下左
三：列表與方塊
預設布局方式，流式布局，上到下，左到右，相對流式布局
width,height, 只有在絕對位置布局時可用（left,top,right,bottom）
對ol列表：
list-style:none;去掉有序數字 circle;是圓圈，disc圓點
list-style-image：url(images/8.jpg);列表圖片
list-style-position:outside; 符號在邊距上，inside符號在邊距之內
margin padding 預設是有邊距和間距
list-style-type:disc 類型
四：格式與布局
布局的時候一般最上面寫上：
*
{
margin:0px auto;
padding:0px;
}
讓所有的外距和內距為0，加了auto置中。
1.position：
obsolute; 絕對位置，放在頁面首屏的那個位置，跟著滾動
外層沒有position=absolute或relative它按照瀏覽器邊框定位
如果外層有position=absolute或relative它按照外層的那個元素的邊框進行定位
fixed； 固定在頁面的一個位置上，滾動螢幕，它不動，針對瀏覽器邊框定位
正常一個div預設佔一行，確定它本來應該在的位置， 如果不設定position，則left,right,top,bottom不管用
relative;相當於之前應當在的位置進行移動，之前的位置應該是左上方
2.z-index:9; z軸，控制誰在上層，大的壓小的
3.溢出overflow:超出範圍
hidden隱藏 scroll出現捲軸
4.float:浮動方向，原本預設佔一行，float之後可以在一行內放多個
float:left 從左邊浮
5.clear:both 截斷流 加一行<div style="clear:both">截斷浮動流
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
