前端零基礎教學開始第三天 03 -day _ Css 選擇器與行內元素

時間 2019-11-21

原文原文鏈接

備註：部分選擇器見02 教程css

一、子元素選擇器

子元素選擇器只能選擇做爲某元素子元素的元素，其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行鏈接， 注意符號左右 兩側各保留一個空格
複製代碼

.box > span{
		color:  red;
		font-size: 100px;
	}

	<div class="box">
		<p>
			<span>前端開發教學</span>
		</p>
		<span>前端開發教學第三天</span>
		<!-- 
		p 和 span 是同級標籤 
		前端開發教學第三天 生效了 子代選擇器，選擇的元素的親兒子
		 -->
	</div>
複製代碼

二、並集選擇器

並集選擇器，是哥哥選擇器經過，逗號 鏈接而成，任何形式的選擇器包括標籤選擇器，class類選擇器 id 選擇器，均可以做爲並集選擇器的一部分

.box,p,h2{
	color: red;
	font-size:20px;
}

<div class="box">並集選擇器2</div>
<p>並集選擇器2</p>
<h2>並集選擇器3</h2>
複製代碼

並集選擇器和的意思，就是說只要逗號隔開，全部選擇器都會執行後面樣式html

三、連接僞類選擇器

連接僞類選擇器 (內置類)前端

：link  未訪問的連接
：visited 已訪問的連接
: hover 鼠標移動到連接上
：active 選定的連接 超連接激活的狀態
複製代碼

他們的書寫順序 必定要是 lvha  不要顛倒順序
實際開發 hover 最多
<style type="text/css">
	a:link{
		color: pink;
		text-decoration: none;
	}
	a:visited{
		color: orange;
	}
	a:hover{
		color: red;
		text-decoration: underline;
	}
	a:active{
		color: blue;
	}
</style>

<a href="#">人生如夢</a>

複製代碼

標籤顯示模式（display ）

一、塊元素  block-level	
	## 塊元素會獨佔一行或者多行，能夠對其設置寬高對其等屬性，經常使用於網頁結構的搭建
	常見的塊元素有 <h1> -<h6> <p> <div> <ul> <li>等
	塊元素特色：
	一、總數重新行開始
	二、高度，行高，外邊距，以及內邊距均可以控制
	三、寬度默認是容器的100%；
	四、能夠容納內斂元素和其餘塊元素
	五、是一個容器的盒子，裏面能夠放行內塊或者塊級元素
	六、獨佔一行很重要 **
## 	七、沒有設置寬度，會默認父元素的寬度
        八、能夠設置寬高，內容也會撐開高度

二、行內塊 inline-level
    一、內聯元素，不沾油獨立的區域，僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度，高度，對齊等屬性，經常使用於控制頁面中文本的樣式
    <a> <strong>  <span>
    行內元素特色：
       一、在一行上顯示
       二、不能直接設置寬高，寬高是內容撐開的
       三、不能設置對齊，經常使用於控制文本
       
三、行內塊元素 inline-block
    一、行內塊  img     input   td  能夠對他們設置寬高，和對齊屬性，
    行內快的特色：
	一、和相鄰的行內塊元素在一行上，可是之間會有空白縫隙
	二、默認寬度就是它自己內容的寬度
	三、高度，行高 ，外邊距以及內邊距均可以控制
	四、能夠在一行上顯示
        五、能夠設置寬高
複製代碼

三種模式區別：

元素模式元素排列設置樣式默認寬度包含瀏覽器

一、塊元素	一行只能放一個塊元素		能夠設置寬度高度 			容器的100%			容器級能夠包含任何標籤
二、行內元素 一行能夠放多個行內元素		不能夠直接設置寬度高度	它自己內容的寬度		容納文本或則其餘行內元素
三、行內塊元素		一行放多個行內塊 元素		能夠設置寬度和高度			它自己內容的寬度
複製代碼

標籤顯示模式轉換 display 重點

三種類型能夠相互轉換
複製代碼

塊元素轉行內： display： inlinebash

行內轉塊： display ： block；字體

塊、行內元素轉爲行內塊： display：inline-block；ui

讓咱們如今來一個小練習吧：

寫三個 div 給定 100 * 100 的紅色盒子 -- 寬度高度背景色
三個 span 也要求 150 * 150 綠色盒子
三個 a 連接 80 * 20 藍色盒子要求必須一行顯示這三個盒子
鼠標通過3個a連接的時候，背景顏色變爲橙色
若是本身寫不出來能夠參照個人寫法，代碼就得寫加上練習與檢測

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height:100px;
			background-color: red;
		}
		span{
			width: 150px;
			height: 150px;
			background-color: green;
			/*display: block;*/
			display:inline-block;
		}
		a{
			width: 80px;
			height: 20px;
			display: inline-block;
			background-color: blue;
		}
		a:hover{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	1111111111111
	<br>
	<span></span>
	<span></span>
	<span></span>
	<a href=""></a>
	<a href=""></a>
	<a href=""></a>
</body>
</html>


複製代碼

** 行高那些事重點

瀏覽器默認文字是 16 行高的默認值約等於 1.1-1.3 line-height:normalurl

不想要行高 line-height:1; 謹記要是不等於1 哪怕 normal 也很差使

行高的標準定義是基線與基線之間的距離能夠在ps 中看見看我下圖spa

行高分爲四塊頂線中線基線底線code

行高咱們利用最多的一個地方是，可讓一行文本在盒子中垂直居中對齊，

一行文字行高與容器高度一致的時候，這行文字垂直居中

上下距離老是相等的，所以文字看上去是垂直居中的

若是行高等於 height  高度 文字會垂直居中
若是行高大於高度 文字會偏下
若是行高小於高度 文字會偏上
複製代碼

C33層疊性

當多個 選擇器 做用於一個標籤上會發生樣式衝突，誰距離標籤更近 會使用誰
層疊性是瀏覽器處理衝突的一個能力，若是一個屬性經過兩個相同選擇器設置到同一個元素上，那麼這個時候一屬性就會將另一個屬性層疊掉，樣式衝突，遵循的原則是就近原則，那個樣式離着結果近，就執行那個樣式，樣式不衝突，不會出現層疊
複製代碼

繼承性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			color: red;
			font-size: 100px;
			font-style: italic;
			font-weight: 800;
			font-family: 'simsun';
			text-indent: 2em;
			text-decoration: underline;
			text-align:right;
			line-height: 150px;
		}
	</style>
</head>
<body>
	<div class="father">
		<p>繼承性</p>
	</div>
</body>
</html>
複製代碼

a 標籤不會繼承父元素的文字顏色

H1 標題標籤不會繼承父元素的大小

繼承都是來自於瀏覽器 #### user agent stylesheet

優先級權重計算

權重計算器公式		            計算權重公式

繼承或者 * 	通配符 *			0,0,0,0
每一個元素標籤選擇器		        	0,0,0,1
每一個類，僞類				0,0,1,0
每一個ID					0,1,0,1
每一個行內樣式style=‘’	        	1,0,0,0
每一個  ！important 重要	        	無窮大
複製代碼

當多個養生做用於同一個標籤的時候，發生了樣式衝突權重高的樣式優先執行，當權重同樣的時候，就近原則~! 我想靜靜手記轉載需備註！

默認樣式 < 標籤選擇器< 類選擇器<id 選擇器 <行內樣式 < !important 謹記要帶上歎號

繼承的權重爲0

權重是能夠疊加的 

div ul li            0,0,0,3
.nav  ul li 		00,1,2
 a:hover 		0,0,1,1
.nav a 		0,0,1,1
#nav p 		0,1,0,1
複製代碼

Css 背景 background

background-color ：transparent;  背景顏色透明  
background-image	：url()	背景圖片地址
background-position： top bottom center left right 背景位置. 能夠寫 像素 10px  100px  10是距離左面  100 是上面
background-repeat：no-repeat	背景是否平鋪	
background-attachement:scroll   背景固定仍是滾動  fixed 固定 一共兩個值
複製代碼

背景定位

background-position： 20px;

寫2個方位值，沒有順序要求
寫一個方位值或者數值，另一個值默認center 寫 2個數值，第一個數值 是距離左邊的距離，第二個數值是距離頂邊的距離
複製代碼

背景屬性連寫重要

background:#ccc  url() no-repeat  50px  100px scroll;複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端零基礎教學開始第三天 03 -day _ Css 選擇器 與 行內元素