柚子快報(bào)激活碼778899分享：【CSS所有屬性及用法】

http://yzkb.51969.com/

@[TOC]CSS所有屬性及用法

歡迎使用Markdown編輯器

CSS（層疊樣式表）具有豐富的屬性，以下是對一些主要屬性的介紹及用法：

一、字體屬性

font-family ：指定文本的字體。

用法： font-family: Arial, sans-serif; ?？梢灾付ǘ鄠€(gè)字體，以逗號分隔，瀏覽器會從左到右依次嘗試使用這些字體，直到找到可用的字體。如果都不可用，會使用瀏覽器默認(rèn)字體。

font-size ：設(shè)置字體大小。

用法： font-size: 16px; 。可以使用絕對單位（如像素、點(diǎn)等）或相對單位（如百分比、em 等）來設(shè)置字體大小。

font-weight ：定義字體的粗細(xì)程度。

用法： font-weight: bold; ?？梢栽O(shè)置為 normal （正常）、 bold （粗體）、 bolder （更粗）、 lighter （更細(xì)）或具體的數(shù)值（100 - 900）。

font-style ：設(shè)置字體的風(fēng)格，如正常、斜體等。

用法： font-style: italic; 。可以設(shè)置為 normal （正常）、 italic （斜體）、 oblique （傾斜）。

font-variant ：控制小型大寫字母的顯示。

用法： font-variant: small-caps; 。設(shè)置為 small-caps 時(shí)，文本以小型大寫字母顯示。

二、文本屬性

color ：設(shè)置文本顏色。

用法： color: red; 。可以使用顏色名稱（如 red 、 blue 等）、十六進(jìn)制值（如 #FF0000 ）、RGB 值（如 rgb(255, 0, 0) ）等方式指定顏色。

text-align ：控制文本的水平對齊方式。

用法： text-align: center; ?？梢栽O(shè)置為 left （左對齊）、 center （居中）、 right （右對齊）、 justify （兩端對齊）。

text-decoration ：添加文本裝飾，如下劃線、上劃線、刪除線等。

用法： text-decoration: underline; ?？梢栽O(shè)置為 underline （下劃線）、 overline （上劃線）、 line-through （刪除線）、 none （無裝飾）。

text-indent ：設(shè)置文本首行縮進(jìn)。

用法： text-indent: 2em; 。可以使用絕對單位（如像素、厘米等）或相對單位（如 em）來設(shè)置縮進(jìn)量。

line-height ：設(shè)置行高。

用法： line-height: 1.5; 。可以使用無單位數(shù)值、百分比或絕對單位來設(shè)置行高。

text-transform ：控制文本的大小寫轉(zhuǎn)換。

用法： text-transform: uppercase; ?？梢栽O(shè)置為 uppercase （大寫）、 lowercase （小寫）、 capitalize （首字母大寫）。

letter-spacing ：設(shè)置字符間距。

用法： letter-spacing: 2px; 。可以使用絕對單位（如像素）來設(shè)置字符間距。

word-spacing ：設(shè)置單詞間距。

用法： word-spacing: 5px; ?？梢允褂媒^對單位來設(shè)置單詞間距。

text-shadow ：為文本添加陰影效果。

用法： text-shadow: 2px 2px 3px gray; 。分別指定水平偏移量、垂直偏移量、模糊半徑和陰影顏色。

三、背景屬性

background-color ：設(shè)置背景顏色。

用法： background-color: #FFFFFF; ?？梢允褂妙伾Q、十六進(jìn)制值、RGB 值等方式指定背景顏色。

background-image ：應(yīng)用背景圖像。

用法： background-image: url(‘image.jpg’); 。指定背景圖像的 URL。

background-repeat ：控制背景圖像的重復(fù)方式。

用法： background-repeat: no-repeat; ?？梢栽O(shè)置為 repeat （重復(fù)）、 no-repeat （不重復(fù)）、 repeat-x （水平重復(fù)）、 repeat-y （垂直重復(fù)）。

background-position ：指定背景圖像的位置。

用法： background-position: center top; ?？梢允褂藐P(guān)鍵字（如 top 、 bottom 、 left 、 right 、 center ）或具體的數(shù)值（如像素、百分比）來設(shè)置背景圖像的位置。

background-attachment ：決定背景圖像是固定還是隨頁面滾動。

用法： background-attachment: fixed; 。可以設(shè)置為 fixed （固定）、 scroll （隨頁面滾動）。

四、邊框?qū)傩?/p>

border-width ：設(shè)置邊框的寬度。

用法： border-width: 2px; ?？梢允褂媒^對單位（如像素）來設(shè)置邊框?qū)挾取?/p>

border-style ：定義邊框的樣式，如實(shí)線、虛線、點(diǎn)線等。

用法： border-style: solid; ?？梢栽O(shè)置為 solid （實(shí)線）、 dashed （虛線）、 dotted （點(diǎn)線）、 double （雙線）等。

border-color ：指定邊框的顏色。

用法： border-color: blue; ?？梢允褂妙伾Q、十六進(jìn)制值、RGB 值等方式指定邊框顏色。

border-radius ：創(chuàng)建圓角邊框。

用法： border-radius: 10px; ?？梢允褂媒^對單位（如像素）或百分比來設(shè)置圓角半徑。

五、盒模型屬性

width 和 height ：分別設(shè)置元素的寬度和高度。

用法： width: 200px; height: 150px; ?？梢允褂媒^對單位（如像素、厘米等）或相對單位（如百分比）來設(shè)置寬度和高度。

margin ：定義元素周圍的外邊距。

用法： margin: 10px; ?？梢苑謩e設(shè)置四個(gè)方向的外邊距，如 margin-top 、 margin-right 、 margin-bottom 、 margin-left ，也可以使用縮寫形式，如 margin: 10px 20px 10px 20px; （分別對應(yīng)上、右、下、左）。

padding ：設(shè)置元素內(nèi)容與邊框之間的內(nèi)邊距。

用法： padding: 5px; 。可以分別設(shè)置四個(gè)方向的內(nèi)邊距，如 padding-top 、 padding-right 、 padding-bottom 、 padding-left ，也可以使用縮寫形式，如 padding: 5px 10px 5px 10px; （分別對應(yīng)上、右、下、左）。

box-sizing ：控制盒模型的計(jì)算方式。

用法： box-sizing: border-box; ?？梢栽O(shè)置為 content-box （默認(rèn)值，寬度和高度只包括內(nèi)容區(qū)域）或 border-box （寬度和高度包括內(nèi)容、內(nèi)邊距和邊框）。

六、布局屬性

display ：確定元素的顯示類型，如塊級、行內(nèi)、行內(nèi)塊等。

用法： display: block; 。可以設(shè)置為 block （塊級元素，獨(dú)占一行）、 inline （行內(nèi)元素，不獨(dú)占一行）、 inline-block （行內(nèi)塊元素，可以設(shè)置寬度和高度，同時(shí)在一行內(nèi)顯示）等。

float ：使元素浮動到左側(cè)或右側(cè)。

用法： float: left; 或 float: right; 。浮動元素會脫離文檔流，其他元素會圍繞它排列。

clear ：清除浮動的影響。

用法： clear: both; ?？梢栽O(shè)置為 left （清除左側(cè)浮動）、 right （清除右側(cè)浮動）、 both （清除兩側(cè)浮動）。

position ：設(shè)置元素的定位方式，如靜態(tài)、相對、絕對、固定。

用法： position: relative; 或 position: absolute; 或 position: fixed; 。靜態(tài)定位是默認(rèn)值，相對定位是相對于元素在文檔流中的原始位置進(jìn)行定位，絕對定位是相對于最近的已定位祖先元素進(jìn)行定位，固定定位是相對于瀏覽器窗口進(jìn)行定位。

top 、 right 、 bottom 、 left ：用于定位元素的位置。

用法： top: 10px; right: 20px; bottom: 15px; left: 30px; 。這些屬性只有在元素設(shè)置了相對、絕對或固定定位時(shí)才有效。

七、列表屬性

list-style-type ：定義列表項(xiàng)的標(biāo)記類型。

用法： list-style-type: disc; ?？梢栽O(shè)置為 disc （實(shí)心圓）、 circle （空心圓）、 square （方塊）、 decimal （數(shù)字）等。

list-style-image ：使用圖像作為列表項(xiàng)的標(biāo)記。

用法： list-style-image: url(‘image.png’); 。指定圖像的 URL 作為列表項(xiàng)標(biāo)記。

list-style-position ：確定列表項(xiàng)標(biāo)記的位置。

用法： list-style-position: inside; ?？梢栽O(shè)置為 inside （標(biāo)記在列表項(xiàng)內(nèi)部）、 outside （標(biāo)記在列表項(xiàng)外部）。

八、表格屬性

border-collapse ：控制表格邊框的合并方式。

用法： border-collapse: collapse; ?？梢栽O(shè)置為 collapse （合并邊框）、 separate （分開邊框）。

table-layout ：設(shè)置表格的布局算法。

用法： table-layout: fixed; 。可以設(shè)置為 auto （自動布局，根據(jù)內(nèi)容調(diào)整列寬）或 fixed （固定布局，根據(jù)表格寬度和列寬度屬性確定列寬）。

九、其他屬性

opacity ：設(shè)置元素的不透明度。

用法： opacity: 0.5; 。取值范圍從 0（完全透明）到 1（完全不透明）。

visibility ：控制元素的可見性。

用法： visibility: hidden; ?？梢栽O(shè)置為 visible （可見）、 hidden （隱藏）。

cursor ：指定鼠標(biāo)指針的樣式。

用法： cursor: pointer; ?？梢栽O(shè)置為 pointer （手型）、 crosshair （十字準(zhǔn)線）、 wait （等待）等。

overflow ：處理內(nèi)容超出元素尺寸的情況。

用法： overflow: hidden; 。可以設(shè)置為 visible （內(nèi)容溢出時(shí)可見）、 hidden （隱藏溢出內(nèi)容）、 scroll （顯示滾動條）、 auto （根據(jù)需要自動顯示滾動條）。

z-index ：控制元素的堆疊順序。

用法： z-index: 1; 。具有較大 z-index 值的元素會顯示在具有較小 z-index 值的元素之上。

這些只是 CSS 的一部分屬性，CSS 還有很多其他屬性和功能，可以根據(jù)具體的設(shè)計(jì)需求進(jìn)行使用和組合。

新的改變

我們對Markdown編輯器進(jìn)行了一些功能拓展與語法支持，除了標(biāo)準(zhǔn)的Markdown編輯器功能，我們增加了如下幾點(diǎn)新功能，幫助你用它寫博客：

全新的界面設(shè)計(jì) ，將會帶來全新的寫作體驗(yàn)；

在創(chuàng)作中心設(shè)置你喜愛的代碼高亮樣式，Markdown 將代碼片顯示選擇的高亮樣式 進(jìn)行展示；

增加了 圖片拖拽 功能，你可以將本地的圖片直接拖拽到編輯區(qū)域直接展示；

全新的 KaTeX數(shù)學(xué)公式 語法；

增加了支持甘特圖的mermaid語法1 功能；

增加了 多屏幕編輯 Markdown文章功能；

增加了 焦點(diǎn)寫作模式、預(yù)覽模式、簡潔寫作模式、左右區(qū)域同步滾輪設(shè)置 等功能，功能按鈕位于編輯區(qū)域與預(yù)覽區(qū)域中間；

增加了 檢查列表 功能。

功能快捷鍵

撤銷：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜體：Ctrl/Command + I 標(biāo)題：Ctrl/Command + Shift + H 無序列表：Ctrl/Command + Shift + U 有序列表：Ctrl/Command + Shift + O 檢查列表：Ctrl/Command + Shift + C 插入代碼：Ctrl/Command + Shift + K 插入鏈接：Ctrl/Command + Shift + L 插入圖片：Ctrl/Command + Shift + G 查找：Ctrl/Command + F 替換：Ctrl/Command + G

合理的創(chuàng)建標(biāo)題，有助于目錄的生成

直接輸入1次#，并按下space后，將生成1級標(biāo)題。 輸入2次#，并按下space后，將生成2級標(biāo)題。 以此類推，我們支持6級標(biāo)題。有助于使用TOC語法后生成一個(gè)完美的目錄。

如何改變文本的樣式

強(qiáng)調(diào)文本 強(qiáng)調(diào)文本

加粗文本 加粗文本

標(biāo)記文本

刪除文本

引用文本

H2O is是液體。

210 運(yùn)算結(jié)果是 1024.

插入鏈接與圖片

鏈接: link.

圖片:

帶尺寸的圖片:

居中的圖片:

居中并且?guī)С叽绲膱D片:

當(dāng)然，我們?yōu)榱俗層脩舾颖憬荩覀冊黾恿藞D片拖拽功能。

如何插入一段漂亮的代碼片

去博客設(shè)置頁面，選擇一款你喜歡的代碼片高亮樣式，下面展示同樣高亮的 代碼片.

// An highlighted block

var foo = 'bar';

生成一個(gè)適合你的列表

項(xiàng)目

項(xiàng)目

項(xiàng)目

項(xiàng)目1

項(xiàng)目2

項(xiàng)目3

計(jì)劃任務(wù)

完成任務(wù)

創(chuàng)建一個(gè)表格

一個(gè)簡單的表格是這么創(chuàng)建的：

項(xiàng)目

Value

電腦

$1600

手機(jī)

$12

導(dǎo)管

$1

設(shè)定內(nèi)容居中、居左、居右

使用:---------:居中 使用:----------居左 使用----------:居右

第一列

第二列

第三列

第一列文本居中

第二列文本居右

第三列文本居左

SmartyPants

SmartyPants將ASCII標(biāo)點(diǎn)字符轉(zhuǎn)換為“智能”印刷標(biāo)點(diǎn)HTML實(shí)體。例如：

TYPE

ASCII

HTML

Single backticks

'Isn't this fun?'

‘Isn’t this fun?’

Quotes

"Isn't this fun?"

“Isn’t this fun?”

Dashes

-- is en-dash, --- is em-dash

– is en-dash, — is em-dash

創(chuàng)建一個(gè)自定義列表

Markdown

Text-to-

HTML conversion tool

Authors

John

Luke

如何創(chuàng)建一個(gè)注腳

一個(gè)具有注腳的文本。2

注釋也是必不可少的

Markdown將文本轉(zhuǎn)換為 HTML。

KaTeX數(shù)學(xué)公式

您可以使用渲染LaTeX數(shù)學(xué)表達(dá)式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n

柚子快報(bào)激活碼778899分享：【CSS所有屬性及用法】

http://yzkb.51969.com/

文章鏈接