css3系列-2.css中常見的樣式屬性和值

繼續上一篇文章的繼續了解css的基礎知識，關注我微信公眾號：全堆疊學習筆記

css中常見的樣式屬性和值

1. 字體與顏色
2. 背景屬性
3. 文本屬性
4. 邊框屬性
5. 內外邊距
6. 滑鼠游標屬性
7. 串列樣式
8. 定位屬性
9. 浮動和清除浮動
10. 滾動條
11. 樣式顯示和隱藏

字體與顏色

font-family:微軟雅黑;/*字體名稱（型別）：微軟雅黑，黑體，楷體，宋體*/

font-size: 20px;/*字體大小*/

font-weight: 600;/*字體加粗*/

font-style: italic;/*字體樣式*/

背景屬性

background: #00FF00 url(bgimage.gif) no-repeat fixed top;/*這是融合在一起的寫法*/


background-color: red;/*背景顏色*/

background-image:url('圖片路徑');/*背景圖片*/

background-repeat:no-repeat;/*背景圖片是否允許重復no-repeat repeat*/

background-attachment:fixed;/*規定背景影像是否固定或者隨著頁面的其余部分滾動*/

background-origin:content-box;/*規定背景圖片的定位區域，*/

/*background-position:50% 50%;*/

/*background-position:800px 300px;*/

background-position:right center;/*規定背景影像的位置*/

background: inherit;/*規定應該從父元素繼承 background 屬性的設定，*/

文本字體屬性

.text{
	color:rebeccapurple;/*字體顏色*/

	direction: ltr;/*字體方向從右向左*/
	/*rtl 從左向右*/

	line-height: 5px;/*設定行高*/

	letter-spacing:2px;/*設定字符間的間距，注意是字符，或者是字母*/

	text-align:center;/*設定文本的對齊方式*/

	text-decoration:overline;/*字體的修飾，如下劃線underline，上劃線overline，
	洗掉線line-through，也可以設定為none，無修飾*/

	text-indent:2em;/*首行縮進2個字，還有其他px的單位，%也可以*/

	text-shadow: rosybrown;/*文本陰影*/

	text-transform: lowercase;/*屬性控制文本的大小寫 */
	/*capitalize 文本中的每個單詞以大寫字母開頭，*/
	/*uppercase	定義僅有大寫字母，*/
	/*inherit	規定應該從父元素繼承 text-transform 屬性的值，*/

	white-space: nowrap;/*屬性設定如何處理元素內的空白 */
	/*nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止，*/
	/*pre	空白會被瀏覽器保留，其行為方式類似 HTML 中的 <pre> 標簽，*/
	/*pre-wrap	保留空白符序列，但是正常地進行換行，*/

	word-spacing:2px;/*屬性增加或減少單詞間的空白,注意這是單詞*/
}

如果你已經看到了這里，那你應該也能繼續往下面看，碼字不易，點個關注吧，我的微信公眾號：全堆疊學習筆記

邊框屬性

邊框屬性比較重要

.border{
	border: 2px solid red;/*設定邊框樣式  寬度為2px 可見 紅色 也可以分開寫*/

	border-width: 2px;
	border-color: red;
	border-style: solid;/*分開寫的border屬性*/
	/*也可以這樣設定*/
	border-style:dotted solid double dashed;
	/*上邊框是點狀  右邊框是實線  下邊框是雙線  左邊框是虛線*/ 
	/*
	none	無邊框，
	hidden	與 "none" 相同，不過應用于表時除外，對于表，hidden 用于解決邊框沖突，
	dotted	點狀邊框，
	dashed	虛線，，
	solid	實線，
	double	雙線，
	inherit	規定應該從父元素繼承邊框樣式，
	*/

	border-radius: 5px;/*設定邊框弧的大小，值越大，弧度越大*/

	/*也可以對border的某一個邊進行設定屬性*/
	border-top: 2px solid red;

}

看到這里你的心情可能是這樣的

但是不要擔心，如果你覺得很難懂的話，可以私聊我，我給你講懂！

內外邊距

內邊距

/*內邊距*/
.padding{
	padding: 2px;/*盒子模型的外邊距，上左下右 各向內縮進2px*/
	
	
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;

	/*以上四句等于下面一句  上右下左的順序 值是不一定相等的*/
	padding: 2px 2px 2px 2px;

}

外邊距

/*外邊距*/
.margin{
	margin: 2px;/*盒子模型的外邊距，和padding的區別就是，margin是向外擴展的，padding是向內擴展的*/
	
	margin-top: 2px;
	margin-right: 3px;
	margin-bottom: 4px;
	margin-left: 6px;
	/*上面四句和下面一句也是等效的*/
	margin:2px 3px 4px 6px;
}

如果你是新手的話可能對盒子模型，外邊距內邊距都不熟悉，這一部分內容在學的時候相對來說比較吃力！如果有問題可以私聊或者留言評論給我，我幫你解決哦！

滑鼠游標屬性

這一部分用的比較少，了解一點就行

/*滑鼠樣式屬性*/
.cursor{
	cursor: pointer;/*游標呈現為指示鏈接的指標（一只手）*/
	/*help	此游標指示可用的幫助（通常是一個問號或一個氣球）
	  text	此游標指示文本，
	  wait	此游標指示程式正忙（通常是一只表或沙漏
	  default	默認游標（通常是一個箭頭）
	  auto	默認，瀏覽器設定的游標，
	*/
}

串列樣式

/*串列屬性*/
.list{
	list-style: circle;
	list-style:square inside url('/test/1.png');
	list-style-type: disc;/*設定串列項標記的型別*/
	/*disc	默認，標記是實心圓，
	circle	標記是空心圓，
	square	標記是實心方塊，
	decimal	標記是數字，*/
	list-style-image: url();/*屬性使用影像來替換串列項的標記*/
	list-style-position: inside;/*屬性設定在何處放置串列項標記*/
}

定位屬性

定位屬性一般來說用得比較多，希望你能看懂下面的代碼

相對定位

.position{
	position: relative;
	left: 2px;
	top: 2px;
}

代碼中的意思是相對定位，相對定位就是說，相對于我本身元素的位置，再對這個元素進行移動，所以以上代碼的意思就是相對于這個元素原來所在的位置，再向右移動2px，向下移動2px，要注意這一點，代碼中寫的left，top 都是正值，也就是向相反的方向移動，而不思向左移動2px,向上移動2px.

絕對定位

.positionA{
	position: absolute;
	left: 20px;
	right: 20px;
}

以上為絕對定位，絕對定位是相對于整個頁面來說的，不管元素本身所在的位置，頁面上的最左上角代表(0,0)坐標，絕對定位的起始位置也是這里，所以上面這段代碼實作的就是距離左邊20px,距離上邊20px，這樣理解可能比上面我說的以相反的方向移動要簡單很多吧，

浮動和清除浮動

css里面浮動用的還是挺多的，要好好學哦！不會的關注我的公眾號，我會教你的哦！公眾號:全堆疊學習筆記
碼字太難了！給個關注吧！

說實話，浮動這一塊講著就很麻煩了，這里只介紹一下，后面出一期上面說的盒子模型的時候專門講一下浮動，不然講著可能會有一點抽象，你也覺得不好懂！下期我盡量講的詳細一點，
圖文并茂，哈哈，這一期基本上都是代碼文字敘述，作為一個知識的存盤，往下面看！

浮動

/*浮動*/
.float{
	float: right;
}

這句話的意思是將這個塊（暫時稱為一個塊吧）浮動到右邊，或是移動，浮動涉及的東西挺多的，有時候能用浮動，有時候用浮動比較麻煩！

清除浮動

1.第一種方式

/*清除浮動*/
.float{
	float: right;
	clear: both;
}

2.第二種方式

父容器使用overflow：auto，

3.第三種方式

父容器使用偽類after和zoom，

偽類選擇器還沒講過，爭取這兩天寫一份詳細的選擇器文章，

滾動條

滾動條設定

/*滾動條*/
.overflow{
	
	overflow:scroll;/*屬性規定當內容溢位元素框時發生的事情，*/
	
	  /*
	  	visible	默認值，內容不會被修剪，內容溢位容器，
		hidden	內容會被修剪，并且其余內容是不可見的,不會出現滾動條，
		scroll	內容會被修剪，但是瀏覽器會顯示滾動條，
		auto	如果內容被修剪，則瀏覽器會顯示滾動條，
		inherit	規定應該從父元素繼承 overflow 屬性的值，
	  */
	overflow-y: hidden;/*設定豎直的滾動條*/
	overflow-x: scroll;/*設定橫向的滾動條*/
}

樣式顯示和隱藏

樣式隱藏分為占位隱藏以及非占位隱藏

非占位隱藏

.display-z{
	/*隱藏*/
	display: none;
	/*以塊級元素顯示，寬高不可忽略*/
	display: block;
	/*此元素會被顯示為行內元素，元素前后沒有換行符*/
	display: inline; 

}

所謂非占位隱藏就是說，使用這個屬性后，這個元素是不會被渲染，也就不會被看到，

占位隱藏

/*占位隱藏*/
.visibility{
	/*隱藏*/
	visibility: hidden;
	/*顯示*/
	visibility: visible;
}

而占位隱藏的意思就是，雖然這個元素我們看不到，但是他其實已經被渲染出來了，只是被隱藏了，就像科幻片里面的隱身一樣，

好了，這期的教程就到這里了！里面有一些重要很實用的東西沒有具體的說，等css基礎教程更新完成，就會出一些實用教程！希望大家支持哦！

標籤：Html/Css

上一篇：HTML連載77-3D播放器

下一篇：天貓封面圖另存為大圖