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

来源:https://www.cnblogs.com/swzx-1213/archive/2020/03/24/12553476.html
-Advertisement-
Play Games

css3系列 2.css中常見的樣式屬性和值 繼續上一篇文章的繼續瞭解css的基礎知識，關註我微信公眾號：全棧學習筆記 css中常見的樣式屬性和值 1. 字體與顏色 1. 背景屬性 2. 文本屬性 1. 邊框屬性 1. 內外邊距 1. 滑鼠游標屬性 1. 列表樣式 1. 定位屬性 1. 浮動和清除浮 ...


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基礎教程更新完成，就會出一些實用教程！希望大家支持哦！
在這裡插入圖片描述


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 天貓封面圖另存為大圖
    產品封面圖，滑鼠點擊上去，右邊會出現放大的高清大圖 如何獲取到大圖呢？ 封面圖尺寸預設是430*430 在控制台找到圖片鏈接，網址欄里打開 手動把網址欄里的430x430改成800x800 大圖到手！ ...
  • web前端零基礎系統學習路線(寫給入門的新手)
    web前端這塊算是比較簡單，也比較有意思的，下麵列舉一下學前端的幾個階段，大家可以根據自己的情況循序漸進的學習 第一階段：HTML+CSS: HTML、CSS基礎、div+css佈局 Java基礎：Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMA、DOM、BOM、定時 器和焦點圖。 ...
  • 微信小程式新聞網站詳情頁
    擴展運算符的巧妙應用 這個template模板，綁定的數據帶item首碼 那麼使用模板的時候，也必須保證是item data幫綁定數據用雙花括弧包住item 還有wx:for-item預設也是item，因此可省略 這樣帶有item不利於代碼復用，解決方法： 將template模板中的item首碼都去 ...
  • 給WEB前端初學者的一封信，請收好！
    因為IT互聯網發展的非常迅速，而web前端這塊很火，目前工資水平給的很高，在市場上也是非常的稀缺人才，現在各個行業轉行做web前端的很多，今天給大家一些建議，希望新手少走點彎路吧！ 建議一：有一個比較適合自己系統的學習方案，系統的學習教程，很多人在開始學習web前端的時候都不知道如何規劃，也不知道w ...
  • 事件冒泡與事件捕獲及事件委托
    事件冒泡通俗講以整個文檔體doucment參照就是從裡到外（可以自行腦補一下水裡冒泡現象） 說到事件冒泡就不得不提一下dom0級事件與dom2及事件 dom0級事件會覆蓋,如下控制台只會輸出結果 2： var oDiv=document.getElementById('div'); oDiv.onc ...
  • 如何實現一個parseInt
    如何實現一個parseInt 如果string不為字元串類型, 則先將string轉化為字元串類型 string會忽略前後的空白 依次解析字元, 如果字元不是指定基數中的字元( 例如:2進位中的3、 10進位中的'f' )則停止解析( 首字元為'+'或' '時除外 ), 返回已經解析好的整數 如果無 ...
  • HTML5（五）Geolocation
    HTML5 Geolocation 定位用戶的位置 HTML5 Geolocation API 用於獲得用戶的地理位置。 鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。 註意: Geolocation（地理定位）對於擁有 GPS 的設備，比如 iPhone，地理定位更加精確 ...
  • 用Javascript的while迴圈，列印九九乘法表
    用Javascript的while迴圈，列印九九乘法表 用Javascript的while迴圈： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列印九九乘法表</title> <script type="text/javasc ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類