層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
基本語法
在head標籤裡面，寫入一下標籤：
<html>
<head>
<style type="text/css">
css程式碼
</style>
</head>
<body></body>
</html>
CSS 程式碼規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。
選擇器{屬性:屬性值;屬性:屬性值;···},我們稱這種形式叫做鍵(key)值(value)對形式。
註釋：
| /*css註釋內容*/ |
文字屬性
|
文字屬性 |
文字屬性值 |
意義 |
|
color |
英文,16進位制,rgb |
文字顏色 |
|
text-align |
left,center,right |
對齊元素中的文字 |
|
text-indent |
px,em |
縮排元素中文字的首行 |
|
line-height |
px |
設定行高 |
|
font-size |
px |
字型大小 |
|
font-weight |
100-900,bold,normal,lighter |
文字的粗細 |
|
font-style |
normal,italic,oblique,inherit |
字型的風格。 |
|
font-family |
字型 |
字型 |
文字屬性之color：
color 屬性規定文字的顏色。
①英文字母：red,green,blue,yellow,orange,pink,gray···
②16進位制：
③rgb：r-red,g-green,b-blue
16進位制和rgb我們不需要記憶會通過ps或者識色工具取色就可以了。
文字屬性之text-align：
text-align 屬性規定元素中的文字的水平對齊方式。
實現text-align屬性特效元素必須具備寬度。
最後一個水平對齊屬性是 justify，它會帶來自己的一些問題。慎重使用。
文字屬性之font-weight：
font-weight 屬性設定文字的粗細。
文字屬性之font-style：
文字屬性之font-family：
c盤->windows->fonts資料夾
font-family 規定元素的字體系列。
font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
有兩種型別的字體系列名稱：
指定的系列名稱：具體字型的名稱，比如："times"、"courier"、"arial"。
通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。
注意：使用某種特定的字體系列（Geneva）完全取決於使用者機器上該字體系列是否可用；這個屬性沒有指示任何字型下載。因此，強烈推薦使用一個通用字體系列名作為後路。
複合屬性
可以按順序設定如下屬性：
font-style （使用斜體、傾斜或正常字型）
font-variant （設定小型大寫字母的字型顯示文字）
font-weight （設定文字的粗細）
font-size/line-height （設定字型的尺寸和行高）
font-family （規定元素的字體系列）
可以不設定其中的某個值，比如 font:100% verdana; 也是允許的。未設定的屬性會使用其預設值。
如：
body{ font: italic small-caps bold 14px/24px "microsoft yahei";}
字型：斜體 小型大寫字母 粗體 14號大小/24畫素行高 微軟雅黑
可以不需要每個都寫，但是順序還是要的
塊元素和行內元素
標籤 元素 標記都是一回事。
|
塊元素 |
行內元素 |
行內塊元素 |
|
|
標籤 |
div h1-h6 ul ol p |
span a b i |
img |
|
特性 |
①單獨佔用一整行 |
①不單獨佔用一整行 |
①不佔用一整行 |
|
預設寬度100% ②可以設定寬高 |
②不可以設定寬高 |
②可以設定寬高 |
相互轉換
使用以下CSS屬性可以將任意的標籤元素（塊級、行內、行內塊）轉換為任何的顯示模式。
|
display:block; 轉換為塊級元素 display:inline; 轉換為行內元素 display:inline-block; 轉換為行內塊元素 |
display的特殊值
隱藏顯示元素
|
display:none;->display:block/inline/inlin-block; |
|
visibility: hidden;->visible |
二者區別：
1.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none效能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。(後面我們闡述)
基礎選擇器
標籤選擇器
標籤選擇器是標籤名稱命名的，讓頁面中所有的指定標籤都具備一個樣式，不管有多少個，不管巢狀多深，一定會被選中。
|
標籤名{屬性名:屬性值;} h2{color:red;} |
<div>
文字1
<div>
文字2
<div>
文字3
<div>
文字4
<h2>h2標籤</h2>
</div>
</div>
</div>
</div>
因為標籤選擇器會選中所有的標籤，實際工作中，不會單獨用標籤選擇器，因為會影響其他同名的標籤。
類選擇器（class）
使用方法：
|
1、用“.”來定義類選擇器 2、在需要呼叫的標籤上新增class屬性即可（class="類選擇器名稱"） |
示例：
|
定義：.box{color:red;} 呼叫：<div class="box">div3</div> |
一個標籤可以新增多個類選擇器，用空格隔開。
正確寫法：
用原子類最方便的，所謂的原子類，就是一些簡單的屬性做成一個類，然後執行選擇所需的樣式即可。
<style type="text/css">
.box{color:red;}
.font{font-size:30px;}
.b{font-weight:bold;}
.bgp{background: pink;}
.hong{color:red;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
</style>
各取所需：
|
<div class="bgp hong da lh150">div1</div> |
類選擇器是工作中最常用的，原因：
|
1、頁面上可以有無數個標籤，用一樣的類樣式 2、一個標籤可以同時使用多個類樣式 |
id選擇器:
要求以“#”開頭，後面緊跟id選擇器的名字，名稱自定義，要遵循命名規範
|
#id名稱{color:red;} |
例項：
|
定義：#box{} 呼叫：<div id="box">div1</div> |
id選擇器好比人的身份證，同一個id名，只能使用一次，不能重複。
實際工作中寫CSS，id選擇器是個不太常用的選擇器，因為：
|
1、id太珍貴，一次只能給一個元素新增樣式 2、寫樣式的時候，大部分可以用類選擇器，極少用id，而且id選擇器權重太高 3、JavaScript通過id來獲取元素 |
總結：id選擇器其實是留給JS用的。
萬用字元選擇器（*）
“*”指的是所有。
作用：選中網頁所有的標籤。
經驗：由於萬用字元選擇器可以選中所有標籤，權重最低，工作中不使用，一般用來做測試，寫demo。
|
*{color:red;} 代表當前網頁中所有標籤都變紅 |
優先順序關係
權重： id選擇器>class選擇器>標籤選擇器>萬用字元選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
color:red;
}
h1{
color: green;
}
#h1{
color: orange;
}
.h1{
color: blue;
}
/* id選擇器>class選擇器>標籤選擇器>萬用字元選擇器 */
</style>
</head>
<body>
<h1 id="h1" class="h1">基本選擇器的優先順序關係</h1>
</body>
</html>
高階（複合）選擇器
描述：前面學習的都是基礎選擇器，複合選擇器就是將基礎選擇器綜合在一起使用。
並集選擇器：
作用：將頁面中相同樣式放到一起寫CSS屬性，集體宣告樣式，簡化程式碼。
逗號“，”表示合併關係
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
h1,h2,h3,.box,p,span,li{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<h1>文字1</h1>
<h2>文字2</h2>
<h3>文字3</h3>
<div class="box">div標籤</div>
<p>p標籤</p>
<span>span標籤</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
交集選擇器：
有些教材稱為“指定選擇器”
即滿足條件1，也要滿足條件2
兩種或以上選擇器同時存在一個標籤上。
寫法：選擇器之間直接連線，沒有任何符號
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
p.red{color:red;}
#box.box{
color:blue;
}
</style>
</head>
<body>
<p class="red">p1</p>
<p class="red">p2</p>
<p>p3</p>
<div class="red">div1</div>
<div class="box" id="box">div2</div>
<div class="box">div3</div>
<div class="box" id="box">div4</div>
</body>
</html>
交集選擇器使用的是基礎選擇器，可以是都是類選擇器，也可以是標籤和類混寫，也可以是id。
後代選擇器：
有些教材稱為“包含選擇器”，“派生選擇器”
描述：後代選擇器用來選擇元素的後代，用“空格”隔開。當標籤發生巢狀時，就存在後代關係。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div p{color:red;}
.box1 p{color:blue;font-weight:bold;}
.bigBox ul li a{color:red;}
.father .son{color:red;}
</style>
</head>
<body>
<p>外面的p標籤</p>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div> <div class="box2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div> <div class="bigBox">
<ul>
<li><a href="##">li01</a></li>
<li><a href="##">li02</a></li>
<li><a href="##">li03</a></li>
<li><a href="##">li04</a></li>
</ul>
</div> <div class="father">
<a href="##" class="son">文字1</a>
</div>
<div class="father">
<a href="##">文字2</a>
</div>
</body>
</html>
注意：後代選擇器，選擇的是後代的元素，不一定是兒子，還是孫子、曾孫子、重孫子...都行。但是記住，最終選擇上的是最後的那個後代元素。
CSS引入方式
內嵌式：
內嵌式優點：載入速度快，因為不用再多一個HTTP請求，結構和樣式半分離。
將CSS嵌入到HTML頁面head標籤對中：
|
<style type="text/css"> </style> |
行內式：
寫法：在標籤身上新增style屬性
|
<div style="color:red;font-size:30px;">div1</div> |
注意：行內式沒有實現結構和樣式分離，不推薦使用，一般後臺程式設計師比較習慣使用這種方式。
外鏈式：
1、新建一個.css副檔名的檔案，直接在檔案內部寫CSS（注意：不要寫上<style>標籤）
2、在head標籤對中，寫link標籤，將外部CSS檔案引入
|
<link rel="stylesheet" type="text/css" href="css/a.css" /> |
屬性解釋：
|
rel="stylesheet" 宣告樣式表 |
總結：外鏈式實現了結構與樣式分離（符合W3C標準）工作中最常用。因為同一個CSS檔案，可以給多個HTML頁面使用。
匯入式：
將一個獨立的CSS檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS，<style>標籤頁是在<head>標籤中，使用語法：
|
<style type="text/css"> @import "css/a.css"; /*注意css檔案的路徑*/ </style> |
匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。
引入方式總結
CSS屬性
字型
font-style:
font-style 屬性可定義字型的風格。該屬性設定使用斜體、傾斜或正常字型。斜體字型通常定義為字體系列中的一個單獨的字型。
p{
font-style: normal;
font-style: italic;
font-style: oblique;
}
font-weight:
font-weight 屬性設定文字的粗細。該屬性用於設定顯示元素的文字中所用的字型加粗。數字值 400 相當於 關鍵字 normal，700 等價於 bold。
p{
font-weight:;/*lighter*/
font-weight:;/*normal*/
font-weight:;/*bold*/
}
font-size:
font-size 屬性可設定字型的尺寸。該屬性設定元素的字型大小。注意，實際上它設定的是字型中字元框的高度；實際的字元字形可能比這些框高或矮（通常會矮）。
我們通常使用如下程式碼：
|
p{ font-size: 15px; } |
注意：在PC端預設字型大小是16px,最小字型大小是12px.
font-family:
font-family 屬性是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
註釋：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。
font-family: 我想要的1,我想要的2,我想要的3,···保底字型。
那麼我們電腦中的字型在哪裡？
|
C:\Windows\Fonts |
注意：①我們多寫幾個字型 作為備用字型②注意版權問題(微軟雅黑收費了)③我們建議把中文字型改寫為unicode編碼
複合屬性font：
上述單一屬性我們可以通過font這個複合屬性一起寫出來：
語法：
|
font-style，font-variant ， font-weight，font-size/line-height，font-family |
上述屬性值不一定都要寫，但是如何你要寫必須按照上述的順序。
p{
font:12px arial;
}
p{
font:italic small-caps bold 12px arial;
}
p{
font:oblique small-caps 900 12px/14px arial;
}
p{
font:menu;
}
文字
color：
color 屬性可設定文字的顏色。這個屬性設定了一個元素的顏色。要設定一個元素的顏色，最容易的方法是使用 color 屬性。
·顏色名稱
紅色：red、橙色：orange、黃色：yellow、綠色；green、青色：cyan、藍色：blue、紫色：purple、白色：white、黑色：black、粉色：pink、金色：gold、淺藍色：lightblue、黃綠色：yellowgreen、天藍色：skyblue
16進位制
|
#000000 黑色 #ffffff 白色 #ff0000 紅色 #00ff00 綠色 #0000ff 藍色 ------------------------------------------------------------------------------------ //只有三個顏色都可以簡寫才能簡寫 #000000→#000 #ff2245→不存在的 #f1f1f1→不存在的 #dd22cc→#d2c |
rgb->red-green-blue
每個的取值是0-255之間
|
rgb(0-255,0-255,0-255) |
·透明顏色
|
p{ color: transparent; } |
透明色的意思就是無論背景色是什麼顏色，我都會對映背景色。
·rgba->red-green-blue-alpha
|
rgba(紅0-255,綠0-255,藍0-255,透明度0-1) |
透明度0：代表全透明
透明度1：代表不透明
行高：
line-height 屬性設定行間的距離(不允許使用負值)。
說明：
該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
p{
line-height:1.4;
}
p{
line-height:140%;
}
小技巧：當文字只有一行時，行高等價於高度時那麼文字垂直居中。
text-align：
text-align 屬性對齊元素中的文字(行內和行內塊)。該屬性通過指定行框與哪個點對其，從而設定塊級元素內文字的水平對齊方式。通過允許使用者代理調整行內容中字母和字之間的間隔，可以支援值 justify；不同使用者代理可能會得到不同的結果。
text-indent：
text-indent 屬性縮排元素中的首行文字。
註釋：允許使用負值。如果使用負值，那麼首行會被縮排到左邊。
|
屬性 |
描述 |
|
px |
|
|
em |
em參照標準 字型大小 |
列表
list-style-image：
list-style-image 屬性使用一幅影象來替換列表項的標記。請始終規定一個 "list-style-type" 屬性以防影象不可用。
這個屬性指定作為一個有序或無序列表項標誌的影象。影象相對於列表項內容的放置位置通常使用 list-style-position 屬性控制。
li{
border: 1px solid #000;
/*替換點點點*/
list-style-image: url("img/sun.png");
}
list-style-position：
list-style-position 放置列表中的列表項標記。該屬性用於宣告列表標誌相對於列表項內容的位置。外部 (outside) 標誌會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標誌處理為好像它們是插入在列表項內容最前面的行內元素一樣。
li{
width: 100px;
border: 1px solid #000;
/*替換點點點*/
list-style-image: url("img/sun.png");
/*規定點點點的位置(內/外)*/
list-style-position: inside;
}
list-style-type：
list-style-type 屬性設定列表項標記的型別。該屬性用於宣告列表標誌相對於列表項內容的位置。外部 (outside) 標誌會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標誌處理為好像它們是插入在列表項內容最前面的行內元素一樣。
複合屬性list-style：
list-style 屬性是用於在一個宣告中設定一個列表的所有屬性的簡寫屬性。該屬性是一個簡寫屬性，涵蓋了所有其他列表樣式屬性。
語法：list-style-image | list-style-position | list-style-type
表格
border-collapse：
border-collapse 屬性設定表格的邊框是否被合併為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。
|
table{ border-collapse: collapse; } |
下圖：左側為預設表格樣式，右側為修改後的表格樣式
背景
background-color：
background-color 屬性設定元素的背景顏色。background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴充套件到元素邊框的外邊界。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。(後半句話結合一會咱們學的盒子模型來看)
background-color的取值和咱們的color取值一模一樣。
background-image：
background-image 屬性把影象設定為背景。
提示：請設定一種可用的背景顏色，這樣的話，假如背景影象不可用，頁面也可獲得良好的視覺效果。
初始背景影象（原影象）根據 background-position 屬性的值放置。
background-repeat：
background-repeat 屬性設定是否及如何重複背景影象。background-repeat 屬性定義了影象的平鋪模式。影象可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。 預設影象是沿著x,y平鋪的。
div{
width: 800px;
height: 400px;
border: 1px solid red;
background-image: url('img/亞運會.jpg');/*背景圖500*312*/
/* background-repeat: no-repeat; */ /*不平埔*/
/* background-repeat: repeat-x; */ /*x方向*/
/* background-repeat: repeat-y; */ /*y方向*/
background-repeat: repeat; /*預設值：x,y同時平鋪*/
}
background-position：
background-position 屬性設定背景影象的起始位置。
我們的座標原點在哪裡：左上角。在數學中咱們這是第四象限，但是我們這裡都是正數。
我們的寫法有3三種：①方位名詞②px③%(%參考的是當前盒子的寬和高)
背景定位的應用：
比如我們通常處理banner(可以作為網站頁面的橫幅廣告，也可以作為遊行活動時用的旗幟，還可以是報紙雜誌上的大標題。Banner 主要體現中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。)區域。那麼這個設計圖設計多大呢？如果設計圖過大那麼在小解析度的螢幕上就會顯示不完整，如果設計過小，那麼在大分比率的螢幕上兩側留白過多，那麼非常不好看。
我們的解決方案是：設計一張可以使用於主流螢幕的banner圖，利用背景定位將他放在區域中間，兩邊可能會留白，將兩側區域填充主題背景色，這樣就不會顯得特別突兀了。
div{
width: 900px;
height: 400px;
border: 1px solid red;
/* 背景圖 */
background-image: url('img/wechat.jpg');
/* 平鋪狀態 */
background-repeat: no-repeat;
/* 背景定位-背景圖片 */
background-position: 50% 50%;
background-color: #36a63a;
}
如上圖紅色區域才是真正的背景圖。
雪碧圖技術
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。
前提：
|
①小 ②風格統一 ③比經常變動,因為你經常變動不易於維護 |
優點：
|
1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因； 2、CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。 3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。 4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。 |
background-attachment：
background-attachment 屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動。
|
Background-attachment:fixed; 頁面滾動的時候圖片不動 |
複合屬性background：
background 是用於在一個宣告中設定所有背景屬性的一個簡寫屬性。
通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。
|
background-color || background-image || background-repeat || background-attachment || background-position |
偽類
偽類是一個狀態，a標籤超連結有4個偽類狀態：
|
偽類 |
作用 |
|
a:link |
未訪問時的狀態（預設狀態） |
|
a:visited |
訪問後的狀態（點選後） |
|
a:hover |
滑鼠懸停時的狀態 |
|
a:active |
點選中的狀態 |
注意：同時設定超連結的4個狀態，一定要按照順序寫l-v-h-a
盒子模型
網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。
任何元素(塊元素 行內元素 行內塊元素)你都可以看作是一個盒子
由圖可知一個盒子再頁面中真實佔據的位置=widht+height+padding+border+margin
外邊距margin：
它值得是該盒子與兄弟盒子之間的距離
基本用法
順時針：鐘錶轉動的方向就是順時針
|
語法 |
描述 |
意義 |
|
margin：50px; |
margin: 上右下左; |
四個方向都是50px; |
|
margin: 10px 50px; |
margin: 上下 左右; |
上下10px 左右50px |
|
margin: 10px 30px 50px; |
margin: 上 左右 下; |
上10px 左右30px 下50px |
|
margin: 10px 30px 50px 70px; |
margin: 上 右 下 左; |
上10px 右30px 下50px 左70px |
.box1{
background-color: red;
/*margin: 10px;*/
/*margin: 10px 50px;*/
/*margin: 10px 30px 50px;*/
margin: 10px 30px 50px 70px;
}
|
基本語法 |
意義 |
|
marign-top |
上邊距 |
|
margin-right |
右邊距 |
|
margin-bottom |
下邊距 |
|
margin-left |
左邊距 |
margin特殊技巧1：
特殊技巧就是margin可以寫負數。當margin的值為負數時,意味著該盒子往反方向走。
margin特殊技巧2：
水平居中一個塊級元素？
思路：假設電腦螢幕為1366px,你的盒子大小為200px,那麼你可以寫成margin-left:583px;(或者margin: 0 583px),但是每一個瀏覽器視窗尺寸大小不一樣,所以我們不能寫成絕對的一個數值,所以使用auto代替。
div{
width: 200px;
height: 100px;
background-color: red;
/*(body-div)/2*/
/*左外邊距是583px*/
/*margin-left: 583px;*/
/*下面這種寫法等價於上面的寫法*/
/*margin: 0 583px;*/
/*auto就是說左右兩邊可以自適應*/
margin: 0 auto;
}
邊框border
基本語法
語法：div{border: 邊框粗細border-width 邊框樣式border-style 邊框顏色border-color}
|
屬性值 |
可能的值 |
描述 |
|
border-width |
num(px) |
邊框粗細 |
|
border-style |
none solid dashed |
邊框樣式 |
|
border-color |
red rgb(255,255,0) #0ff0ff |
邊框顏色 |
border-style取值如下：
還可以寫成以下方式：
border-width: 40px;
border-style: solid none dashed double
border-color: red green orange blue;
border-top: 50px solid blue;
border-bottom: 10px dashed green;
border-top-width: 20px;
div{
/*裡面有3個屬性值*/
border: 10px solid yellow;
}
三角形的製作：
原理：把盒子的寬和高縮小至0 你會發現一個神奇的現象 然後把你不需要的那3個三角顏色設定為透明色transparent。
----------------->
div{
width: 0px;
height: 0px;
margin: 50px auto;
/*border: 50px solid orange;*/
border-top: 100px solid orange;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
內邊距padding
別稱：內填充、內填白
|
語法 |
描述 |
意義 |
|
padding：50px; |
padding: 上右下左; |
四個方向都是50px; |
|
padding: 10px 50px; |
padding: 上下 左右; |
上下10px 左右50px |
|
padding: 10px 30px 50px; |
padding: 上 左右 下; |
上10px 左右30px 下50px |
|
padding:10px30px 50px 70px; |
padding: 上 右 下 左; |
上10px 右30px 下50px 左70px |
盒子大小
因為padding和border會改變盒子真實大小，所以我們計算時會將程式碼中的寬和高-border-padding(當前前提是取決於你對設計圖的測量方法)
盒子大小=width./height+padding+border
ps:以後會持續更新，沒有提到的可以在評論區留言我會補充，已經規劃好知識點的順序了，等正片走完之後，有想學習新技術或者有技術上的一些問題也可以留言我的郵箱[email protected]。