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?方法：與第一種類似，顯示類型設為?行內元素，進行不定寬元素的屬性設置
③、設置?position:relative?和 left:50%：利用?相對定位?的方式，將元素向左偏移?50%?，即達到居中的目的
總結
以上是生活随笔為你收集整理的CSS基本知识(慕课网)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用锚点再点事吧丨
- 下一篇： CSS属性之attr()