Web前端：CSS最強總結附詳細代碼-有解無憂

Web前端基礎：

Web前端：HTML最強總結附詳細代碼
Web前端：CSS最強總結附詳細代碼
Web前端：JavaScript最強總結附詳細代碼

Web前端工具：

Web前端： JQuery最強總結（附上詳細代碼）
Web前端：Bootstrap最強總結附詳細代碼

Web前端：CSS最強總結附詳細代碼

- 基本知識
- - 基本概念
  - 優點
- CSS的使用
- - 行內樣式
  - 內部樣式
  - 外部樣式
  - 區別
- CSS語法
- CSS注釋
- 基本選擇器
- - id選擇器
  - class選擇器
  - 元素選擇器/標簽選擇器
- 優先級
- - 選擇器的優先級
  - 樣式表的優先級
- CSS常用樣式
- - color：字體顏色
  - width height：寬高
  - 背景樣式
  - 文本樣式
  - 串列樣式
  - 邊框樣式
- HTML&CSS除錯利器
- 盒子模型
- - 概念
  - 盒子的寬度和高度
- 其他常用樣式
- - float 浮動
  - overflow
  - Display(顯示) 與 Visibility(可見性)
- 復合選擇器
- - 全域選擇器
  - 并集選擇器
  - 交集選擇器
  - 后代選擇器
  - 子元素選擇器
  - 選擇器實作代碼
  - 偽類選擇器
  - 復合選擇器比較

基本知識

基本概念

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言，
層疊:多個樣式可以作用在同一個html的元素上，同時生效

樣式定義如何顯示HTML 元素
樣式通常存盤在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高作業效率
外部樣式表通常存盤在 CSS 檔案中

多個樣式定義可層疊為一個CSS很像化妝，通過不同的CSS將同樣的HTML內容打造為不同的呈現結果，所以，前端程式員相互表白的時候可以說:you are the CSS to my HTML. 這是不是CSS是對HTML進行美化和布局作用的最好總結?

優點

功能強大
將內容展示和樣式控制分離
降低耦合度，解耦
讓分工協作更容易
提高開發效率

CSS的使用

CSS與html結合使用
根據定義CSS的位置不同，分為行內樣式、內部樣式和外部樣式

行內樣式

也稱為行內樣式
直接在標簽中撰寫樣式，通過使用標簽內部的style屬性;

代碼樣式：

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

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

內部樣式

定義在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>

外部樣式

提前定義css資源檔案
在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>

區別

作用域的范圍：外部樣式表>內部樣式表>行內樣式表
優先級：外部樣式表<內部樣式表<行內樣式表;
同樣的樣式作用在同一個標簽身上：就近原則，
不同樣式作用在同一個標簽身上，疊加生效，

CSS語法

基本格式由兩個主要的部分構成：

選擇器
一潭訓多條宣告

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

例如：
在這里插入圖片描述

CSS注釋

注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它，
CSS注釋以 /* 開始, 以 */ 結束

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

基本選擇器

篩選具有相似特征的元素

id選擇器

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

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，
HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 “#” 來定義，

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

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

class選擇器

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

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，
class可以在多個元素中使用， class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示

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

元素選擇器/標簽選擇器

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

定義選擇器語法:標簽名稱{};PS:標簽名稱必須是html提供好的標簽，

使用標簽選擇器:自動使用在所有的同名的標簽上
在這里插入圖片描述

優先級

選擇器的優先級

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

樣式表的優先級

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

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

CSS常用樣式

color：字體顏色

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

顏色的單詞 red blue…
rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)
rgba(紅，綠，藍,透明度)，透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
#值1值2值3 :值的范式是00-FF 十六進制數字組成的例如:#FF0000

width height：寬高

PS:只有塊狀元素可以設定寬高，行級元素設定不生效

取值方式有2種:

數值絕對數字單位是像素PX
百分比:占據父元素的比例

背景樣式

在這里插入圖片描述

文本樣式

在這里插入圖片描述

串列樣式

在這里插入圖片描述

邊框樣式

在這里插入圖片描述

HTML&CSS除錯利器

以谷歌瀏覽器為例說明，
快捷鍵F12或者工具條中的開發者工具調出以下內容，
在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式，
在這里插入圖片描述

盒子模型

概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用，
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括:邊距，邊框，填充，和實際內容，盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素

盒子模型說明圖

在這里插入圖片描述

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

模型例子

在這里插入圖片描述

盒子的寬度和高度

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

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

元素的總高度最終計算公式是這樣的:
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

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

在這里插入圖片描述

其他常用樣式

float 浮動

什么是浮動

CSS 的 Float(浮動)，會使元素向左或向右移動，其周圍的元素也會重新排列，
Float(浮動)，往往是用于影像，但它在布局時一樣非常有用，

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
浮動元素之后的元素將圍繞它
浮動元素之前的元素將不會受到影響

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

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>

overflow

控制內容溢位元素框時顯示的方式，

overflow屬性有以下值:

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

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

Display(顯示) 與 Visibility(可見性)

兩者的區別

display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏，
隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設定為"hidden"，但是請注意，這兩種方法會產生不同的結果，
visibility：hidden 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間，也就是說，該元素雖然被隱藏了，但仍然會影響布局，
display:none 可以隱藏某個元素，且隱藏的元素不會占用任何空間，也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失，

display 改變元素的型別
CSS樣式有以下三個:

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

復合選擇器

由兩個或多個基礎選擇器，通過不同方式組合而成的，
可以更準確更精細的選擇目標元素標簽，

全域選擇器

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

并集選擇器

并集選擇器(CSS選擇器分組)是各個選擇器通過 , 連接而成的，通常用于集體宣告，

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

意思是多個選擇器都是通用的樣式，任何形式的選擇器(包括標簽選擇器、class類選擇器id選擇器等)，都可以作為并集選擇器的一部分，在這里插入代碼片
在這里插入圖片描述

交集選擇器

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

語法:h3.class{ color:red; } 其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list，

交集選擇器是并且的意思，即…又…的意思

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

后代選擇器

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

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

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

格式:父級子級{屬性:屬性值;屬性:屬性值;}
語法:.class h3{color:red;font-size:16px;}

當標簽發生嵌套時，內層標簽就成為外層標簽的后代，子孫后代都可以這么選擇，或者說，它能選擇任何包含在內的標簽，

子元素選擇器

作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素，其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接，
語法:.class>h3{color:red;font-size:14px;}
比如：
.demo > h3 {color: red;} 說明 h3 一定是demo 親兒子， demo 元素包含著h3

選擇器實作代碼

<!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>

偽類選擇器

和類選擇器相區別:
類選擇器是一個點比如 .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; /* 滑鼠經過， 由原來的 灰色 變成了紅色 */
}

復合選擇器比較

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271370.html

標籤：其他

上一篇：【粉絲需求】如何把一個前端網頁都搞下來？

下一篇：取其精華，去其糟粕——前后端互動的計算器——servlet、html、JavaScript、Tomcat

Web前端：CSS最強總結 附詳細代碼

Web前端：CSS最強總結 附詳細代碼

基本知識

基本概念

優點

CSS的使用

行內樣式

內部樣式

外部樣式

區別

CSS語法

CSS注釋

基本選擇器

id選擇器

class選擇器

元素選擇器/標簽選擇器

優先級

選擇器的優先級

樣式表的優先級

CSS常用樣式

color：字體顏色

width height：寬高

背景樣式

文本樣式

串列樣式

邊框樣式

HTML&CSS除錯利器

盒子模型

概念

盒子的寬度和高度

其他常用樣式

float 浮動

overflow

Display(顯示) 與 Visibility(可見性)

復合選擇器

全域選擇器

并集選擇器

交集選擇器

后代選擇器

子元素選擇器

選擇器實作代碼

偽類選擇器

復合選擇器比較

Web前端：CSS最強總結附詳細代碼

Web前端：CSS最強總結附詳細代碼