關于Css的所有講解內容

SS課堂筆記

1、CSS的概念

層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效

是一種用來表現HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。

樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一個

CSS很像化妝，通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。

所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.

這是不是CSS是對HTML進行美化和布局作用的最好總結？

2、CSS的優勢

功能強大
將內容展示和樣式控制分離

降低耦合度。解耦
讓分工協作更容易
提高開發效率

3、CSS的使用：CSS與html結合使用

根據定義CSS的位置不同，分為行內樣式、內部樣式和外部樣式

3.1 行內樣式

也稱為內聯樣式

直接在標簽中編寫樣式，通過使用標簽內部的style屬性；

一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>

弊端：只能對當前的標簽生效，沒有做到內容和樣式相分離，耦合度太高。

3.2 內部樣式

定義在head標簽內，通過style標簽，該標簽內容就是CSS代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內部樣式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部樣式

1、提前定義css資源文件

2、在head標簽內，定義link標簽引入外部樣式文件。

lina.css文件，放在與html頁面同級的css文件夾中：
div {
    color: red;
}

html頁面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部樣式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范圍:外部樣式表>內部樣式表>行內樣式表

優先級：外部樣式表<內部樣式表<行內樣式表;

同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。

4、CSS語法

基本格式：由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器 {
        屬性1:值1;
        屬性2:值2;
        ...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。

例如：

5、CSS注釋

注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。

CSS注釋以 /* 開始, 以 */ 結束

/*這是CSS的注釋*/
div {
    color: red;  /*文字顏色是紅色*/
}

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

選擇具有相同id屬性值的元素，建議html頁面中的id值唯一

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

PS： ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。

6.2 class選擇器

選擇具有相同的class屬性值的元素。

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

PS：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

6.3 元素選擇器/標簽選擇器

選擇具有相同標簽名稱的元素。

定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。

使用標簽選擇器：自動使用在所有的同名的標簽上

7 優先級

7.1 選擇器的優先級

ID選擇器 > 類選擇器 > 標簽選擇器

當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。

7.2 樣式表的優先級

行內樣式 > 內部樣式 >外部樣式

同樣，三個樣式表中都有內容作用在同一個html標簽的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。

8 CSS常用樣式

8.1 color :字體顏色

跟顏色相關的取值分3種：

1、顏色的單詞 red blue...

2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)

rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六進制數字組成的例如：#FF0000

8.2 width height:寬高

PS：只有塊狀元素可以設置寬高，行級元素設置不生效。

取值方式有2種：

1：數值絕對數字單位是像素PX

2：百分比：占據父元素的比例

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調試利器

以谷歌瀏覽器為例說明。

快捷鍵F12或者工具條中的開發者工具調出以下內容。

在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

盒子模型說明圖：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

11.2 盒子的寬度和高度

元素的實際寬度和高度：

當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：

總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

11.3 如果想要設置的寬度直接就是元素的實際寬度，通過box-sizing屬性

12 補充常用樣式

12.1 float 浮動

12.1.1 什么是浮動

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

12.1.2 元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

12.1.3 彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

12.1.4 clear--清除浮動

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--沒有浮動屬性的元素都屬于常規文檔流：從上往下從左往右依次顯示
            浮動的元素都脫離了常規文檔流；
            為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
            如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮動，常規文檔流,
            <br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
            如果不想讓div2被浮動元素影響，需要添加clear屬性。
            添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮動，常規文檔流,
            <br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
            如果不想讓div4被浮動元素影響，需要添加clear屬性。
            添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
            
            clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
        </div>
        <div style="background: lavender;">
            div5-未浮動，常規文檔流,
        </div>
    </body>
</html>

12.2 overflow

控制內容溢出元素框時顯示的方式。

overflow屬性有以下值：

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

注意:overflow 屬性只工作于指定高度的塊元素上。

注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。

12.3 Display(顯示) 與 Visibility（可見性）

12.3.1 兩者的區別

display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。

隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

12.3.2 display 改變元素的類型

CSS樣式有以下三個：

display:block -- 顯示為塊級元素
display:inline -- 顯示為內聯元素
display:inline-block -- 顯示為內聯塊元素，表現為同行顯示并可修改寬高內外邊距等屬性

13 復合選擇器

由兩個或多個基礎選擇器，通過不同方式組合而成的。

可以更準確更精細的選擇目標元素標簽。

13.1 全局選擇器

語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。

13.2 并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。

語法：選擇器1，選擇器2，......選擇器N{}

意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。

13.3 交集選擇器

條件：交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。

語法：h3.class{ color:red; }

其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。

交集選擇器是并且的意思。即...又...的意思

例如：   table.bg   選擇的是： 類名為 .bg  的 表格標簽，但用的相對來說比較少。

13.4 后代選擇器

概念：后代選擇器又稱為包含選擇器。

作用：用來選擇元素或元素組的子孫后代。

其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。

  格式：父級 子級{屬性:屬性值;屬性:屬性值;}

語法：.class h3{color:red;font-size:16px;}

當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

子孫后代都可以這么選擇。或者說，它能選擇任何包含在內的標簽。

13.5 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。

語法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

13.6 實現代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復合選擇器</title>
		<style>
			/*全局選擇器：
			 	一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
			 */
			*{
				color: #333;/*定義全局文字顏色，統一色彩基調*/
			}
			/*并集選擇器：通常用于集體聲明
			 	替換全局選擇器；
			 */
			div,p,dldt,dd{
				/*去掉瀏覽器的默認樣式*/
				margin: 0;
				padding: 0;
				color: #333;/*定義全局文字顏色，統一色彩基調*/
			}
			/*交集選擇器*/
			li.myli{
				color: red;
			}
			/*后代選擇器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微軟雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素選擇器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">點擊我試試</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">點擊我試試</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>靜夜思</h3>	
			<ul>
				<li><h3>靜夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 偽類選擇器

偽類選擇器：和類選擇器相區別類選擇器是一個點比如 .demo {} 而我們的偽類用 2個點就是冒號比如 :link{} 。

作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個，第n個元素。

因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。

a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標移動到鏈接上 */
a:active /* 選定的鏈接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽類選擇器</title>
		<style>			
			/*偽類選擇器*/			
			a:link{
				color: red;/*默認顏色是紅色*/	
			}
			a:visited{
				color: blue;/*訪問過的頁面是藍色*/	
			}
			a:hover{
				color: green;/*鼠標懸浮是綠色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠標不放手是金色*/	
				font-family: "微軟雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用樣式.html" target="_blank">常用樣式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-綜合練習.html" target="_blank">綜合練習</a>
	</body>
</html>

注意**

寫的時候，他們的順序盡量不要顛倒按照 lvha(四類的首字母) 的順序。否則可能引起錯誤。
因為叫鏈接偽類，所以都是利用交集選擇器 a:link a:hover
因為a鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
實際開發中，我們很少寫全四個狀態，一般我們寫法如下：

a {   /* a是標簽選擇器  所有的鏈接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */
       color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

13.7 復合選擇器比對

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇元素后代	是選擇所有的子孫后代	較多	符號是空格 p .one
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是> .nav>p
交集選擇器	選擇兩個標簽交集的部分	既是又是	較少	沒有符號 p.one
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號是逗號 .nav, .header
鏈接偽類選擇器	給鏈接更改狀態		較多	重點記住 a{} 和 a:hover 實際開發的寫法

、HTML表單

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表單元素
用來聲明數據提交的范圍
只有在此元素內的數據可以提交給服務器 -->
<form action="http://www.baidu.com">
<!-- 2.表單控件
用來讓用戶輸入數據的
1）input元素（9個），它們之間用type元素區分-->
<!-- 文本框
value:設置默認值 maxlength:設置最大長度 readonly:設置只讀 -->
<p>
賬號:<input type="text" value="lcz" maxlength="10"/>
</p>
<p>
密碼:<input type="password">
</p>
<!-- 單選框 name:組名。同一組名互相排斥
checked設置默認選中-->
<p>
性別:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</p>
<p>
興趣愛好:
<input type="checkbox" checked="checked"/>音樂
<input type="checkbox" checked="checked"/>看書
<input type="checkbox"/>打球
</p>
<p>
頭像上傳:<input type="file"/>
</p>
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按鈕
submit：提交表單中的數據
reset：將表單中的數據重置為初始值
button:沒有任何功能，需通過js定義功能 -->
<p>
<input type="submit" value="注冊">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</p>
<!-- label：用來管理表單中的文本 id:是元素的唯一標志，相當于元素的身份證號，任何元素都可以由id，程序員有義務保證元素的id不重復
可以將文本與空間綁定在一起，從而增加了控件的受力面積。-->
<p>
<input type="checkbox" id="xieyi"/>
<label for="xieyi">我已閱讀并且自愿遵守此協議！</label>
</p>
<p>
城市:
<select>
<option>請選擇</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<p>
簡介：<br>
<textarea rows="10" cols="100">這是文本域的默認值</textarea>
</p>
</form>
</body>
</html>

一）JavaScript

1、AngularJS1中指定控制器的是哪個指令？( )

A、ng-route

B、ng-template

C、ng-model

D、ng-controller

2、要在10秒后調用checkState，下列哪個是正確的（）

A、window.setTimeout(checkState, 10);

B、window.setTimeout(checkState, 10000);

C、window.setTimeout(checkState(), 10);

D、window.setTimeout(checkState(), 10000);

3、在jquery中指定一個類，如果存在就執行刪除功能，如果不存在就執行添加功能，下面哪一個是可以直接完成該功能的？

A、removeClass()

B、deleteClass()

C、toggleClass(class)

D、addClass()

4、下面關于塊內聲明函數的做法哪些是正確的？

A、if (x) { function foo() {}}

B、if (x) { var foo = function() {}}

C、if (x) { foo = function() {}}

D、ECMAScript明確的規范了塊內函數，javascript實現了這個規范

5、angularjs1中的服務實質上是（）

A、網絡服務

B、單例對象

C、接口對象

D、函數調用

6、如果需要匹配包含文本的元素，用下面哪種來實現？（）

A、text（）

B、contains（）

C、input（）

D、attr（name）

7、在jquery中，如果想要獲取當前窗口的寬度值，下面哪個是實現該功能的？（）

A、width（）

B、width（val）

C、width

D、innerWidth（）

8、angularjs1中使用指令，綁定監聽是在什么時候？（）

A、compiles時

B、link時

C、require時

D、生成DOM時

9、下面符合一個有效的javascript變量定義規則的是？（）

A、_$te$t2

B、with

C、a bc

D、2a

（二）HTML/CSS

1、CSS 樣式，邊距： 10px 20px 40px 30px ；（）是底邊距？

A、10px

B、20px

C、40px

D、30px

2、下列哪個樣式定義后,內聯(非塊狀)元素可以定義寬度和高度（）

A、display:inline

B、display:none

C、display:block

D、display:inherit

3、<svg> 標簽的目的是什么？（）

A、用來結構化網頁

B、用可伸縮矢量圖來畫圖或文本

C、用css來預格式化圖片或文本

D、用來插入JavaScript

4、下列定義的 css 中，哪個權重是最低的？（）

A、#game div.name

B、#game .name

C、#game div

D、#game .name span

5、網頁開發中，一般需判斷瀏覽器類型，需通過userAgent中獲取瀏覽器內核來判斷，下列說法錯誤的是？（）

A、一直到IE9，都是Trident內核

B、firefox是Gecko內核

C、chrome是webkit內核

D、IE是目前最快的瀏覽器

6、以下標簽，錯誤的是（）

A、text-left用于左對齊

B、text-center水平居中對齊

C、text-vertical垂直居中對齊

D、text-uppercase可以將字母全部大寫

7、根據柵格系統的標準用法，錯誤的是（）

A、<div><br> <div>

B、<div><br> <div>

C、<div><br> <div>

D、<div><br><div>

8、在HTML中，（）可以在網頁上通過鏈接直接打開郵件客戶端發送郵件。

A、<a href=”telnet:ming.zhou@nowcoder.com”>發送郵件</a>

B、<a href=”mail:ming.zhou@nowcoder.com”>發送郵件</a>

C、<a href=”mailto:ming.zhou@nowcoder.com”>發送郵件</a>

D、<a href=”ftp:ming.zhou@nowcoder.com”>發送郵件</a>

9、下面標簽嵌套正確的是（）

A、<ul><p>牛客網</p></ul>

B、<a href="#"><a href="#">牛客網</a></a>

C、<dl><li>牛客網</li></dl>

D、<ol><li>牛客網</li></ol>

在線咨詢

上一篇：12個瀏覽器快捷鍵，助你提升工作效率
下一篇：前端面試題（十五）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商