天天看點
傳回

CSS常用樣式、選擇器及盒模型CSS

CSS

簡介 

cascading style sheets 層疊樣式表

用于調整HTML元素的樣式, CSS通常編寫在.css檔案中.

優點:
	讓網頁的内容 與 網頁的表現 完全分離. 提高了代碼的複用性.

常用樣式 

樣式的編寫格式:
	1.	樣式表由多個樣式組成.
	2.	每一個樣式, 是一個鍵值對.
	3.	鍵與值之間使用英文冒号連接配接 . 多個鍵值對之間使用英文分号分割.

常用樣式:
	1.	字型大小
			font-size:長度+機關;
	2.	文字顔色
			color:顔色值;
	3.	内容位置
			text-align:left/center/right;
	4.	元素的寬度
			width:長度+機關;
	5.	元素的高度
			height:長度+機關;
	6.	背景顔色:
			background-color:顔色值;
	7.	背景圖檔
			background:url("圖檔路徑");

css的三種使用方式 

1.	内聯樣式表
		定義在每一個元素的style屬性中.
		格式:	<開始标簽 style="樣式鍵:樣式值;樣式鍵:樣式值...">
		案例:	
			<div style="text-align:center;color:#3a3;font-size:30px">
				從前有座山 ,山上有座尼姑庵.
			</div>
2.	内部樣式表
		定義在style标簽中.
		格式:
			<style type="text/css">
				選擇器1{
					樣式清單;
				}
				選擇器2{
					樣式清單;
				}
				...
				選擇器n{
					樣式清單;
				}
			</style>
3.	外部樣式表
		定義在外部的.css檔案中,通過link标簽引入
		
		css檔案的編寫格式:
		@charset "UTF-8";
		選擇器1{
			樣式清單;
		}
		選擇器2{
			樣式清單;
		}
		...
		選擇器n{
			樣式清單;
		}

		HTML中引入.css檔案的格式
		<link rel="stylesheet" type="text/css" href="css的檔案路徑" target="_blank" rel="external nofollow" >

選擇器 

作用:	用于標明一組元素 , 将樣式清單給定到選擇的元素.

基本選擇器

元素名稱選擇器 
作用:	根據元素的名稱, 標明一個或一組元素.
格式:
		元素名稱{
			樣式清單;
		}
id選擇器 
作用：	根據元素的id屬性值, 標明一個或一組元素.
格式:
		#元素id屬性值{
			樣式清單;
		}
類選擇器 
作用:	根據元素的class屬性值 , 標明一個或一組元素
格式:
		.元素的class屬性值{
			樣式清單;
		}
id和class的差別 
id在程式中, 通常表示唯一的辨別. 
class在程式中, 表示類. 相同class的元素, 我們認為是同一分類.  一個元素可以擁有多個class值.

給元素添加多個class值的格式:
	一個class屬性名等于多個值, 值與值之間使用空格隔開.
	例如: 設定如下div元素的class值為a和b
	<div class="a b"></div>

CSS 樣式的三大特性 

-	繼承性
		部分父元素的樣式, 會被子元素所繼承.

-	層疊性
		對于同一個元素, 通過多種方式添加的多組樣式.不沖突的部分疊加,沖突的部分參考優先級.			
		
-	優先級特性
		樣式來源優先級:
			1.	内聯樣式 優先級最高
			2.	相同選擇器的情況下 , 定義距離body較近的内部樣式表或外部樣式表中的選擇器.
			3.	預設樣式
			4.	繼承得到的樣式.

		選擇器優先級:
			1.	id選擇器:	權重100
			2.	類選擇器:	權重10
			3.	元素名稱選擇器: 權重1

絕對優先樣式 慎用 

在樣式值的後面,加入絕對優先關鍵字: !important;

案例:
	div{
		text-align: left !important;
	}

​

選擇器

滑鼠懸停選擇器 

當滑鼠處于元素上方時, 樣式生效.
當滑鼠離開元素後, 樣式還原.

格式:
	選擇器:hover{

	}

擷取焦點選擇器 

當輸入元件處于輸入狀态時, 樣式生效.
當輸入元件輸入完畢時, 樣式還原.

格式:
	選擇器:focus{

	}

組合選擇器

選擇器組 

通過多個選擇器, 組合起來鎖定一個或多個元素.

(被選擇的元素,需要滿足選擇器組中的所有選擇器)

格式:

元素名稱選擇器選擇器1選擇器2…選擇器n{

樣式清單;

}

例如: 選擇所有class值為class1的div元素

div.class1{

}

選擇器清單

将一組樣式, 給定到多個選擇器的結果

(被選擇的元素,隻需要滿足選擇器清單中的任意一個選擇器)

格式:

選擇器1,選擇器2…選擇器n{

樣式清單;

}

例如:設定div和p元素的文字顔色為綠色:

div,p{

color:#0f0;

}

派生選擇器

子選擇器

格式:

選擇器1>選擇器2{

}

作用:

從選擇器1的結果元素中, 選擇比對選擇器2的子元素.

例如: 選擇所有div中的子标簽p

div>p{

}

例如: 選擇id為content元素的子元素div

#content>div{

}

後代選擇器

格式:

選擇器1 選擇器2{

}

作用:

從選擇器1的結果元素中, 選擇比對選擇器2的後代元素.

例如: 選擇所有div中的後代标簽p

div p{

}

例如: 選擇id為content元素的後代元素div

#content div{

}

常用樣式

背景樣式

背景顔色

background-color:顔色值;

  • 背景圖檔

    background-image:url(“圖檔位址1”),url(“圖檔位址2”)…url(“圖檔位址n”);

    堆疊順序:URL定義的越靠前, 顯示時越靠上.

  • 背景圖檔控制 - 平鋪

    backgorund-repeat:

    取值:

    - 預設平鋪:repeat;

    - 僅橫向平鋪:repeat-x;

    - 僅縱向平鋪:repeat-y;

    - 不平鋪:no-repeat;

  • 背景圖檔控制 - 縮放

    background-size:寬度% 高度%;

  • 背景圖檔控制 - 滑動

    background-attachement:

    - scroll : 預設圖檔跟随内容滑動

    - fixed : 固定不滑動

  • 背景圖檔控制 - 定位

    background-position:x偏移值 y偏移值;

文字樣式

字型大小

font-size:長度+機關;

  • 字型顔色

    color:顔色值;

  • 文字位置

    text-align:left/center/right;

  • 文字加粗

    font-weight:bold;

  • 文字線

    text-decoration:

    取值:

    - underline : 下劃線

    - overline : 上劃線

    - line-through: 删除線

  • 文字斜體:

    font-style:oblique;

  • 文本行高:

    line-height:長度+機關;

  • 文字陰影

    text-shadow:橫向偏移 垂直偏移 [陰影模糊距離] 陰影顔色;

  • 字型設定

    font-family:字型名稱;

安裝字型

@font-face{

font-family:“自定義名稱”;

src:url(“字型檔案路徑”);

}

盒模型 ( 框模型 )

指的是元素在網頁中占用空間大小的 計算模型.

一個元素在網頁中占用的高度: 元素自身高度+上下内邊距+上下邊框的寬度+上下外邊距;

一個元素在網頁中占用的寬度: 元素自身寬度+左右内邊距+左右邊框的寬度+左右外邊距;

邊框

邊框樣式

格式1. 一次性指定四個方向邊框的寬度 樣式 顔色值;

border:寬度 樣式 顔色值;

格式2.

單獨指定某一個方向的邊框 寬度 樣式 顔色值;

左: border-left:寬度 樣式 顔色值;

上: border-top:寬度 樣式 顔色值;

右: border-right:寬度 樣式 顔色值;

下: border-bottom:寬度 樣式 顔色值;

邊框的樣式值:

- 實線 : solid

- 虛線邊框 : dashed

- 點組成邊框 : dotteds

格式1.

一次指定四個角的圓角寬度值

border-radius:長度+機關;

格式2.

單獨指定每一個角的圓角寬度值

上左角: border-top-left-radius:長度+機關;

上右角: border-top-right-radius:長度+機關;

下左角: border-bottom-left-radius:長度+機關;

下右角: border-bottom-right-radius:長度+機關;

邊框陰影

格式:

box-shadow:x偏移 y偏移 [陰影模糊大小] 陰影大小 陰影顔色

處理溢出邊框的内容

格式:

overflow:

- visible : 溢出的内容顯示, 預設值.

- hidden : 溢出的内容隐藏.

- scroll : 添加橫向 縱向滾動條.

- auto : 當内容溢出時. 才添加滾動條

表格的雙線邊框問題 
border-collapse: collapse;

内邊距 padding

指的是元素的内容 與 元素的邊框的距離.

格式1.

一次指定四個方向的内邊距

padding:長度+機關;

格式2.

一次指定上下 和 左右的内邊距

padding:上下長度+機關 左右長度+機關;

格式3.

一次指定上 ,右 ,下,左的内邊距

padding:上 右 下 左;

格式4.

一次指定一個方向的内邊距

左: padding-left:長度+機關;

右: padding-right:長度+機關;

上: padding-top:長度+機關;

下: padding-bottom:長度+機關;

外邊距 margin

指的是元素的邊框 距離 其它元素的盒模型的距離. 值可以是負數

格式1.

一次指定四個方向的外邊距

margin:長度+機關;

格式2.

一次指定上下 和 左右的外邊距

margin:上下長度+機關 左右長度+機關;

格式3.

一次指定上 ,右 ,下,左的外邊距

margin:上 右 下 左;

格式4.

一次指定一個方向的外邊距

左: margin-left:長度+機關;

右: margin-right:長度+機關;

上: margin-top:長度+機關;

下: margin-bottom:長度+機關;

外邊距的特殊使用

  1. 兩個塊元素之間 ,上下的内邊距不會疊加. 值較大者生效.
  2. 外邊距可以是負值
  3. 可以指定一個元素的左右外邊距值為自動 auto , 自動居中.

定位

用于控制元素在網頁中顯示的位置

預設定位 (靜态定位)

預設元素分為三類:

1. 塊元素 : 獨占一行, 可以設定寬度和高度. div,ul,ol,li,table…

2. 行内元素 : 與其他元素共享一行, 一行排滿自動換行,寬度和高度無法設定, 隻能由内容撐開. span,i,b,a…

3. 行内塊元素 : 與其他元素共享一行, 一行排滿自動換行,寬度和高度可以設定. img,button,input…

display:

- block : 塊元素

- inline : 行内元素

- inline-block : 行内塊元素

- none : 隐藏不顯示.

浮動定位

格式: float:left/right;

相對定位

作用: 相對目前元素在預設定位下的位置 , 控制它進行x和y軸的移動.

特性: 原有空間保留, 移動的新位置, 采用覆寫顯示.

格式: position:relative;

絕對定位

不占用網頁空間, 采用覆寫顯示的一種定位方式.

格式: position:absolute;

固定定位

不占用網頁空間 ,采用漂浮覆寫顯示的一種定位方式.

格式: position:fixed;

相對定位/絕對定位/固定定位 如何确定元素的位置

上述的三種定位方式, 通過如下四種樣式 來确定元素的位置:

1. top: 長度+機關;

2. left: 長度+機關;

3. right: 長度+機關;

4. bottom: 長度+機關;

相對定位情況下:

元素相對于自身目前的位置, 進行指定方向的偏移.

例如: 讓元素從原有位置, 向右移動10個像素. left:10px; 或 right:-10px;

絕對定位情況下:

指的是元素距離指定方向邊框的距離.

注意: 如果元素沒有一個使用定位(相對定位/絕對定位/固定定位)的祖先元素, 則上述的邊框指的是浏覽器邊框;

如果元素擁有一個使用定位的父元素 , 則上述的邊框指的是這個使用了定位的祖先元素的邊框.

固定定位情況下:

距離浏覽器邊界某個方向的距離;

相對定位/絕對定位/固定定位 堆疊順序

設定堆疊順序:

z-index:整數;

預設值為0 , 值越大越靠上. 負數表示顯示在内容的後面.

當值相同時 , 元素編寫時越靠後, 顯示時越靠上.

設定元素的垂直對齊方式 

vertical-align:
	-	top	:	頂端對齊
	-	text-top:	文字頂端對齊
	-	bottom:	底部對齊
	-	text-bottom	:	文字底部
	-	middle	:	中部對齊	,	(多個元素必須同時設定 才能生效.)
	-	百分比%	:	按照父元素的行高屬性值. 來計算對齊的百分比. (父元素必須有行高值)

滑鼠形狀 

cursor	:	
	取值:
		-	default	:	預設滑鼠形狀, 跟随場景變化自動變化.
		-	pointer	:	手指形狀 (用于提示使用者可點選)
		-	text	:	焦點形狀 (工字形)
		-	wait	:	等待
		-	help	:	幫助
		-	progress:	進度中
		-	url(路徑),auto:	檔案格式:	cur,ico

清單樣式 

list-style-type:none;	
	取消前置數字或圖示.

不透明度 

opacity:0-1的浮點型數字
當值為1時 , 不透明
當值為0時 , 完全透明
當值為0.5時, 半透明.

過渡 

在元素的樣式變更時 , 為變更增加過渡時長, 讓樣式的變更流暢.

格式1.
	transition:樣式 時長s;

格式2.
	transition:all 時長s;

轉換 

用于改變元素的形狀 大小 位置的一種樣式
2D轉換 
-	transform	:	
		-	移動:	tanslate(x,y)	;x和y分别表示移動的橫向和縱向像素數量.	
		-	旋轉:	rotate(數值deg)
		-	縮放:	scale(x,y);橫向和縱向的縮放倍數.
		-	翻轉:	skew(xdeg,ydeg)
3D旋轉 
-	transform:
		X軸旋轉:	rotateX(數值deg)
		y軸旋轉:	rotateY(數值deg);

動畫 * 

指的是元素在多個樣式之間 自動平穩的過渡.

定義的格式:
	@keyframes 自定義名稱{
		0%{
			樣式清單;
		}
		...
		100%{
			樣式清單
		}
	}

使用動畫的格式:
	選擇器{
		animation:動畫名稱 時長s;
		animation-iteration-count:數字;/*重複執行的次數*/
	}

響應式 

以移動裝置優先顯示:(當手機裝置打開時, 像素自動放大)
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

​

​ 當螢幕寬度小于500像素時 , 生效的樣式:

​

@media (max-width:500px){
		選擇器{

		}
		選擇器{

		}
	}

當螢幕寬度大于500像素時 , 生效的樣式:
	@media (min-width:500px){
		選擇器{

		}
		選擇器{

		}
	}
css 常用樣式 盒模型 選擇器
上一篇: 綜合續航960km，空間大，外觀時尚，岚圖FREE值得推薦嗎
下一篇: 辦公筆記本推薦ThinkPad X13，酷睿和銳龍兩大版本誰更适合辦公？

繼續閱讀