CSS學習內容

~哦~豁~發表於2020-10-23
CSS

CSS基礎

1-CSS簡介

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 通過樣式定義如何顯示 html 元素
  • 通過選擇器封裝樣式表，可使樣式和標籤分離，提高工作效率

2-CSS選擇器

  • id選擇器

以#開頭，匹配 id 值 相同的標籤，標籤的 id 不是唯一，執行兩個不同的標籤使用相同的 id

<!DOCTYPE html>
<html>			
	<head>
		<style>
			#a{
				width:50px;
				height:100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div id = "a">樣式</div>
	</body>
</html>
  • 類（class）選擇器

以 . 開頭，匹配class 值相同的標籤，一個標籤 可以有多個class 值，使用空格分離，如果樣式衝突，後寫的覆蓋先寫的

<!DOCTYPE html>
<html>			
	<head>
		<style>
			.a{
				width:50px;
				height:100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div class = "a">樣式</div>
	</body>
</html>
  • 元素選擇器

直接以標籤名來進行命名的，匹配標籤名相同的標籤

<!DOCTYPE html>
<html>			
	<head>
		<style>
			div{
				width:50px;
				height:100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div >樣式</div>
	</body>
</html>
  • 通配選擇器

以 * 開頭，通常用來清除 margin 和 padding 的預設值

<!DOCTYPE html>
<html>			
	<head>
		<style>
			*{
				margin:0;
				padding:0;
				background:#000000;
			}
		</style>
	</head>
	<body>
		<div >樣式</div>
	</body>
</html>

  • 樣式優先順序

    原則：範圍越大，優先順序越低

    內聯樣式 > id選擇器 > 類選擇器 > 元素選擇器 >通配選擇器

3-樣式的屬性

  • 標籤的樣式必須成對出現： 樣式名：樣式值；樣式名：樣式值...
樣式屬性描述用法
width定義標籤的寬度width:10px;
heigth定義標籤的高度heigth:10px;
background定義標籤的背景色background:red;
display設定標籤的元素型別display:block;
display:block;將標籤轉換為塊元素
display:inline;將標籤轉換為行元素
display:inline-block將標籤轉換為行內塊
display:none隱藏元素並脫離文件流
visibility隱藏元素但不脫離文件流visibility:hidden;
margin外邊距margin:10px;
margin:10px;設定元素上下左右的外邊距都為10px
margin:10px 20px;設定元素上下外邊距10px,左右外邊距20px如果左右外邊距為auto，則元素水平居中
margin:10px 20px 30px 40px;設定元素的上右下左邊距，從上開始順時針設定
margin-left左外邊距margin-left:20px;
margin-rigth右外邊距margin-rigth:20px;
margin-top上外邊距margin-top:20px;
margin-bottom下外邊距margin-bottom:2px;
padding內邊距padding:20px;
padding:10px;設定元素上下左右的內邊距都為10px
padding:10px 20px;設定元素上下內邊距10px,左右外邊距20px如果左右外邊距為auto，則元素水平居中
padding:10px 20px 30px 40px;設定元素的上右下左邊距，從上開始順時針設定
padding-left左內邊距padding-left:20px;
padding-rigth右內邊距padding-rigth:20px;
padding-top上內邊距padding-top:20px;
padding-bottom下內邊距padding-bottom:2px;
border邊框線，包括： 大小、顏色、樣式 3個值border: solid;
border: solid;設定邊框為實線
border:dashed;設定邊框為虛線
border:dotted;設定邊框為圓點
border:outset;設定邊框為凸起感
border:inset;設定邊框為凹陷感
border-left設定左邊框border-left:solid;
border-rigth設定右邊框border-rigth:solid;
border-top設定上邊框border-top:solid;
border-bottom設定下邊框border-bottom:solid;
box-sizing設定邊框線和內邊距是否在元素內部box-sizing:conten-box;
box-sizing:conten-box;設定內邊距和邊框線都在元素本身以內繪製
float將元素浮動起來，一旦浮動起來，元素會自動變成行內塊,並脫離文件流float:left;
float:left;將元素靠左浮動
float:rigth將元素靠右浮動
clear清除浮動必須設定在和浮動同級的元素中，不是不浮動，只是讓浮動的元素回到文件流中clear:left;
clear:left;清除左浮動
clear:rigth;清除右浮動
clear:both;左右浮動都清除
position對元素進行定位，如果為非static定位，position還需要搭配 left/rigth/top/bottom使用，用了left不用rigth,用例top不用bottomposition:relative;
position:relative;相對定位，不會脫離文件流，其實位置在該元素的static位置，即該元素原本位置
position:absolute;絕對定位，脫離文件流，起始位置先找父元素，如果父元素非static定位，則參照父元素的左上角定位，否則一直往上找
position:static;靜態定位，可以看做沒有定位，預設就是靜態定位,static 定位中，left/rigth/top/bottom設定無效
position:fixed;螢幕定位，脫離文件流，只參照螢幕位置
定位元素覆蓋的規則，非static覆蓋static定位，後寫的覆蓋先寫的，z-index 值大的覆蓋值小的
z-index設定定位z-index值，可以對元素覆蓋的順序起作用，大的覆蓋小的z-index:3;
px畫素 (長度單位)
%參照父元素的百分比
em參照父元素的 font-size,1em為父元素的1倍
rem參照html元素的font-size
vh參照螢幕的高度
vw參照螢幕的寬度
calc(數值 - 數值)屬性計算，往往用於百分比和固定畫素混搭的時候，注意：運算子左右兩邊必須有空格，否則會報錯

相關文章