首頁 > 開發者 > JavaScript
CSS基本知識(慕課網)，css知識慕課
1、注釋
註解：CSS中注釋/*這裡是注釋的文字*/ HTML中注釋<!--這裡是注釋的文字-->
2、外部式css樣式，寫在單獨的一個檔案中
註解：
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部檔案中，這個css樣式檔案以“.css”為副檔名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式檔案連結到HTML檔案內，如下面代碼：<link href="base.css" rel="stylesheet" type="text/css" />注意：1、css樣式檔案名稱以有意義的英文字母命名，如 main.css。2、rel="stylesheet" type="text/css" 是固定寫法不可修改。3、<link>標籤位置一般寫在<head>標籤之內。
3、類別選取器、ID選取器
註解：
1）、類別選取器
類別選取器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字型設定為紅色。文法：.類選器名稱{css樣式代碼;}注意：1、英文圓點開頭2、其中類選器名稱可以任意起名（但不要起中文噢）使用方法：第一步：使用合適的標籤把要修飾的內容標記起來，如下：<span>膽小如鼠</span>第二步：使用class="類別選取器名稱"為標籤設定一個類，如下：<span class="stress">膽小如鼠</span>第三步：設定類選器css樣式，如下：.stress{color:red;}/*類前面要加入一個英文圓點*/
2)、ID選取器
為標籤設定id="ID名稱"，而不是class="類名稱"。ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
什麼時候用id，什麼時候用class?
W3C標準這樣規定的，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。這樣，一般網站分為頭，體，腳部分，因為考慮到它們在同一個頁面只會出現一次，所以用id，其他的，比如說你定義了一個顏色為red的class，在同一個頁面也許要多次用到，就用class定義。另外，當頁面中用到js或者要動態調用對象的時候，要用到id，所以要根據自己的情況運用。自己的語言
id選取器和class選取器的區別
ID選取器只能在文檔中使用一次。與類別選取器不同，在一個HTML文檔中，ID選取器只能使用一次，而且僅一次。而類別選取器可以使用多次。
可以理解為:id是身份證，是唯一的，不可能一個人有兩個身份證 也不可能兩個身份證代表一個人。
class是名字，一個人(樣式)可以有多個名字，多個名字可以代表一個人
3、子選取器、包含(後代)選取器
">"只需要作用於“兒子”，而“空格”則是子子孫孫都被作用了
請注意這個選取器與子選取器的區別，子選取器（child selector）僅是指它的直接後代，或者你可以理解為作用於子項目的第一代後代。而後代選取器是作用於所有子後代元素。後代選取器通過空格來進行選擇，而子選取器是通過“>”進行選擇。總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
4、通用選取器
註解：通用選取器是功能最強大的選取器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字型顏色全部設定為紅色：
5、分組選取器
註解：
當你想為html中多個標籤元素設定同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標籤同時設定字型顏色為紅色：
h1,span{color:red;}
它相當於下面兩行代碼：
h1{color:red;} span{color:red;}
6、CSS中元素的分類
註解：1、塊狀元素 ,<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
塊狀元素都內建換行效果；
特點：
①、每個區塊層級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個區塊層級元素獨佔一行）
②、元素的高度、寬度、行高以及頂和底邊距都可設定。
③、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
如何將一個元素設定為塊狀元素？
①、設定display:block就是將元素顯示為區塊層級元素 ---> a{display:block;}
2、內嵌元素(又叫行內元素) ,<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
內嵌元素都是定義行內小地區且不換行，但如果沒有內容就沒有意義，不佔空間；
特點：
①、和其他元素都在一行上；
②、元素的高度、寬度及頂部和底部邊距不可設定；
③、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
如何將一個元素設定為塊狀元素？
①、通過代碼display:inline將元素設定為內嵌元素 ----> div{display:inline;}
3、內聯塊狀元素。 ,<img>、<input>
內聯塊狀元素除了不換行，即使沒有內容也會佔空間。
就是同時具備內嵌元素、塊狀元素的特點
特點：
①、和其他元素都在一行上；
②、元素的高度、寬度、行高以及頂和底邊距都可設定。
如何將一個元素設定為內聯塊狀元素？
①、代碼display:inline-block就是將元素設定為內聯塊狀元素 --> a{display:inline-block;}
7、盒模型：邊框
註解：盒子模型的邊框就是圍繞著內容及補白的線，這條線可以設定它的粗細、樣式和顏色(邊框三個屬性)。
設定方法：
①、div{ border:2px solid red; }
②、div{ border-width:2px; border-style:solid; border-color:red; }
注意：1、border-style（邊框樣式）常見樣式有：dashed（虛線）| dotted（點線）| solid（實線）。2、border-color（邊框顏色）中的顏色可設定為十六進位顏色，如:border-color:#888;//前面的井號不要忘掉。3、border-width（邊框寬度）中的寬度也可以設定為：thin | medium | thick（但不是很常用），最常還是用象素（px）。
當border:的時候是給邊框四條線都設定樣式
如果給規定的一邊的邊框設定:
div{border-bottom:1px solid red;}同樣可以使用下面代碼實現其它三邊(上、右、左)邊框的設定：border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;
8、盒模型：填充
元素內容與邊框之間是可以設定距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼：div{padding:20px 10px 15px 30px;}順序一定不要搞混。可以分開寫上面代碼：div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}如果上、右、下、左的填充都為10px;可以這麼寫div{padding:10px;}如果上下填充一樣為10px，左右一樣為20px，可以這麼寫：div{padding:10px 20px;}
9、盒模型：邊界
盒模型--邊界元素與其它元素之間的距離可以使用邊界（margin）來設定。邊界也是可分為上、右、下、左。如下代碼：div{margin:20px 10px 15px 30px;}也可以分開寫：div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}如果上右下左的邊界都為10px;可以這麼寫：div{ margin:10px;}如果上下邊界一樣為10px，左右一樣為20px，可以這麼寫：div{ margin:10px 20px;}總結一下：padding和margin的區別，padding在邊框裡，margin在邊框外。
10、CSS 布局模型
註解：CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網頁中，元素有三種布局模型：
①、流動模型（Flow）
②、浮動模型 (Float)
③、層模型（Layer）
①、流動模型(Flow)，預設的網頁配置模式
特點：
①、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，
因為在預設狀態下，塊狀元素的寬度都為100%。
實際上，塊狀元素都會以行的形式佔據位置。
②、內嵌元素都會在所處的包含元素內從左至右水平分布顯示。（內嵌元素可不像塊狀元素這麼霸道獨佔一行）
②、浮動模型(Float)
div{ width:200px; height:200px; border:2px red solid;}#div1{float:left;} //id為div1的模組在左邊#div2{float:right;} //id為div2的模組在右邊
③、層模型(Layer)
層模型有三種形式：
1、絕對位置(position: absolute)
下面代碼可以實現div元素相對於瀏覽器視窗向右移動100px，向下移動50px。div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div>
2、相對定位(position: relative)
如下代碼實現相對於以前位置向下移動50px，向右移動100px;#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}<div id="div1"></div>
3、固定定位(position: fixed)
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（螢幕內的網頁視窗）本身。
由於視圖本身是固定的，它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中行動瀏覽器視窗的螢幕位置，
或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文檔流動影響，
這與background-attachment:fixed;屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動捲軸時位置固定不變。#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px;}
4、相對絕對混合使用
#box1{ width:200px; height:200px; position:relative; }#box2{ position:absolute; top:20px; left:30px; }<div id="box1"> <div id="box2">相對參照元素進行定位</div></div>
11、盒模型代碼縮寫
盒模型外邊距(margin)、內邊距(padding)和邊框(border)設定上下左右四個方向的邊距是按照順時針方向設定的：上右下左。具體應用在margin和padding的例子如下：margin:10px 15px 12px 14px;/*上設定為10px、右設定為15px、下設定為12px、左設定為14px*/通常有下面三種縮寫方法:1、如果top、right、bottom、left的值相同，如下面代碼：margin:10px 10px 10px 10px;可縮寫為：margin:10px;2、如果top和bottom值相同、left和 right的值相同，如下面代碼：margin:10px 20px 10px 20px;可縮寫為：margin:10px 20px;3、如果left和right的值相同，如下面代碼：margin:10px 20px 30px 20px;可縮寫為：margin:10px 20px 30px;注意：padding、border的縮寫方法和margin是一致的。
12：顏色值縮寫
顏色值縮寫關於顏色的css樣式也是可以縮寫的，當你設定的顏色是16進位的色彩值時，如果每兩位的值相同，可以縮寫一半。例子1：p{color:#000000;}可以縮寫為：p{color: #000;}例子2：p{color: #336699;}可以縮寫為：p{color: #369;}
13、字型縮寫
網頁中的字型css樣式代碼也有他自己的縮寫方式，下面是給網頁設定字型的代碼：body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif;}這麼多行的代碼其實可以縮寫為一句：body{ font:italic small-caps bold 12px/1.5em "宋體",sans-serif;}注意：1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用預設值。2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。一般情況下因為對於中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：body{ font:12px/1.5em "宋體",sans-serif;}
14、顏色值
在網頁中的顏色設定是非常重要，有字型顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設定顏色的方法也有很多種：1、英文命令顏色前面幾個小節中經常用到的就是這種設定方法：p{color:red;}
2、RGB顏色這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。p{color:rgb(133,45,200);}每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。如：p{color:rgb(20%,33%,25%);}
3、十六進位顏色這種顏色設定方法是現在比較普遍使用的方法，其原理其實也是 RGB 設定，但是其每一項的值由 0-255 變成了十六進位 00-ff。p{color:#00ffff;} 或者p{color:#0fa}
15、長度值
長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。1、像素像素為什麼是相對單位呢？因為像素指的是顯示器上的小點（CSS規範中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素（px）作為單位。2、em就是本元素給定字型的 font-size 值，如果元素的 font-size 為 14px ，那麼 1em = 14px；如果 font-size 為 18px，那麼 1em = 18px。如下代碼：p{font-size:12px;text-indent:2em;}上面代碼就是可以實現段落首行縮排 24px（也就是兩個字型大小的距離）。下面注意一個特殊情況：但當給 font-size 設定單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。如下代碼：html:<p>以這個<span>例子</span>為例。</p>css:p{font-size:14px}span{font-size:0.8em;}結果 span 中的字型“例子”字型大小就為 11.2px（14 * 0.8 = 11.2px）。3、百分比p{font-size:12px;line-height:130%}設定行高（行間距）為字型的130%（12 * 1.3 = 15.6px）。
16、水平置中設定-定寬塊狀元素
滿足定寬和塊狀兩個條件的元素是可以通過設定“左右margin”值為“auto”來實現置中的。我們來看個例子就是設定 div 這個塊狀元素水平置中：html代碼：<body> <div>我是定寬塊狀元素，哈哈，我要水平置中顯示。</div></body>
css代碼：<style>div{ border:1px solid red;/*為了顯示置中效果明顯為 div 設定了邊框*/ width:200px;/*定寬*/ margin:20px auto;/* margin-left 與 margin-right 設定為 auto */}</style>也可以寫成：margin-left:auto;margin-right:auto;
17、水平置中總結-不定寬塊狀元素方法
不定寬度的塊狀元素有三種方法置中（這三種方法目前使用的都很多）：
①、加入 table 標籤
改變區塊層級元素的 display 為 inline 類型（設定為 行內元素 顯示），然後使用 text-align:center 來實現置中效果。如下例子：html代碼：<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>css代碼：<style>.container{ text-align:center;}/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/.container ul{ list-style:none; margin:0; padding:0; display:inline;}/* margin-right:8px（設定li文本之間的間隔）*/.container li{ margin-right:8px; display:inline;}</style>這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
③、設定 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左位移 50% ，即達到置中的目的
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
