【CSS所有属性及用法】-CSDN博客

本文链接：https://blog.csdn.net/qq_38869966/article/details/141569561

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

欢迎使用Markdown编辑器

CSS（层叠样式表）具有丰富的属性，以下是对一些主要属性的介绍及用法：

一、字体属性

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

用法： font-family: Arial, sans-serif; 。可以指定多个字体，以逗号分隔，浏览器会从左到右依次尝试使用这些字体，直到找到可用的字体。如果都不可用，会使用浏览器默认字体。

用法： font-size: 16px; 。可以使用绝对单位（如像素、点等）或相对单位（如百分比、em 等）来设置字体大小。

font-weight ：定义字体的粗细程度。

用法： font-weight: bold; 。可以设置为 normal （正常）、 bold （粗体）、 bolder （更粗）、 lighter （更细）或具体的数值（100 - 900）。

font-style ：设置字体的风格，如正常、斜体等。

用法： font-style: italic; 。可以设置为 normal （正常）、 italic （斜体）、 oblique （倾斜）。

font-variant ：控制小型大写字母的显示。

用法： font-variant: small-caps; 。设置为 small-caps 时，文本以小型大写字母显示。

二、文本属性

color ：设置文本颜色。

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

text-align ：控制文本的水平对齐方式。

用法： text-align: center; 。可以设置为 left （左对齐）、 center （居中）、 right （右对齐）、 justify （两端对齐）。

text-decoration ：添加文本装饰，如下划线、上划线、删除线等。

用法： text-decoration: underline; 。可以设置为 underline （下划线）、 overline （上划线）、 line-through （删除线）、 none （无装饰）。

text-indent ：设置文本首行缩进。

用法： text-indent: 2em; 。可以使用绝对单位（如像素、厘米等）或相对单位（如 em）来设置缩进量。

line-height ：设置行高。

用法： line-height: 1.5; 。可以使用无单位数值、百分比或绝对单位来设置行高。

text-transform ：控制文本的大小写转换。

用法： text-transform: uppercase; 。可以设置为 uppercase （大写）、 lowercase （小写）、 capitalize （首字母大写）。

letter-spacing ：设置字符间距。

用法： letter-spacing: 2px; 。可以使用绝对单位（如像素）来设置字符间距。

word-spacing ：设置单词间距。

用法： word-spacing: 5px; 。可以使用绝对单位来设置单词间距。

text-shadow ：为文本添加阴影效果。

用法： text-shadow: 2px 2px 3px gray; 。分别指定水平偏移量、垂直偏移量、模糊半径和阴影颜色。

三、背景属性

background-color ：设置背景颜色。

用法： background-color: #FFFFFF; 。可以使用颜色名称、十六进制值、RGB 值等方式指定背景颜色。

background-image ：应用背景图像。

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

background-repeat ：控制背景图像的重复方式。

用法： background-repeat: no-repeat; 。可以设置为 repeat （重复）、 no-repeat （不重复）、 repeat-x （水平重复）、 repeat-y （垂直重复）。

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

用法： background-position: center top; 。可以使用关键字（如 top 、 bottom 、 left 、 right 、 center ）或具体的数值（如像素、百分比）来设置背景图像的位置。

background-attachment ：决定背景图像是固定还是随页面滚动。

用法： background-attachment: fixed; 。可以设置为 fixed （固定）、 scroll （随页面滚动）。

四、边框属性

border-width ：设置边框的宽度。

用法： border-width: 2px; 。可以使用绝对单位（如像素）来设置边框宽度。

border-style ：定义边框的样式，如实线、虚线、点线等。

用法： border-style: solid; 。可以设置为 solid （实线）、 dashed （虚线）、 dotted （点线）、 double （双线）等。

border-color ：指定边框的颜色。

用法： border-color: blue; 。可以使用颜色名称、十六进制值、RGB 值等方式指定边框颜色。

border-radius ：创建圆角边框。

用法： border-radius: 10px; 。可以使用绝对单位（如像素）或百分比来设置圆角半径。

五、盒模型属性

width 和 height ：分别设置元素的宽度和高度。

用法： width: 200px; height: 150px; 。可以使用绝对单位（如像素、厘米等）或相对单位（如百分比）来设置宽度和高度。

margin ：定义元素周围的外边距。

用法： margin: 10px; 。可以分别设置四个方向的外边距，如 margin-top 、 margin-right 、 margin-bottom 、 margin-left ，也可以使用缩写形式，如 margin: 10px 20px 10px 20px; （分别对应上、右、下、左）。

padding ：设置元素内容与边框之间的内边距。

用法： padding: 5px; 。可以分别设置四个方向的内边距，如 padding-top 、 padding-right 、 padding-bottom 、 padding-left ，也可以使用缩写形式，如 padding: 5px 10px 5px 10px; （分别对应上、右、下、左）。

box-sizing ：控制盒模型的计算方式。

用法： box-sizing: border-box; 。可以设置为 content-box （默认值，宽度和高度只包括内容区域）或 border-box （宽度和高度包括内容、内边距和边框）。

六、布局属性

display ：确定元素的显示类型，如块级、行内、行内块等。

用法： display: block; 。可以设置为 block （块级元素，独占一行）、 inline （行内元素，不独占一行）、 inline-block （行内块元素，可以设置宽度和高度，同时在一行内显示）等。

float ：使元素浮动到左侧或右侧。

用法： float: left; 或 float: right; 。浮动元素会脱离文档流，其他元素会围绕它排列。

clear ：清除浮动的影响。

用法： clear: both; 。可以设置为 left （清除左侧浮动）、 right （清除右侧浮动）、 both （清除两侧浮动）。

position ：设置元素的定位方式，如静态、相对、绝对、固定。

用法： position: relative; 或 position: absolute; 或 position: fixed; 。静态定位是默认值，相对定位是相对于元素在文档流中的原始位置进行定位，绝对定位是相对于最近的已定位祖先元素进行定位，固定定位是相对于浏览器窗口进行定位。

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

用法： top: 10px; right: 20px; bottom: 15px; left: 30px; 。这些属性只有在元素设置了相对、绝对或固定定位时才有效。

七、列表属性

list-style-type ：定义列表项的标记类型。

用法： list-style-type: disc; 。可以设置为 disc （实心圆）、 circle （空心圆）、 square （方块）、 decimal （数字）等。

list-style-image ：使用图像作为列表项的标记。

用法： list-style-image: url(‘image.png’); 。指定图像的 URL 作为列表项标记。

list-style-position ：确定列表项标记的位置。

用法： list-style-position: inside; 。可以设置为 inside （标记在列表项内部）、 outside （标记在列表项外部）。

八、表格属性

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

用法： border-collapse: collapse; 。可以设置为 collapse （合并边框）、 separate （分开边框）。

table-layout ：设置表格的布局算法。

用法： table-layout: fixed; 。可以设置为 auto （自动布局，根据内容调整列宽）或 fixed （固定布局，根据表格宽度和列宽度属性确定列宽）。

九、其他属性

opacity ：设置元素的不透明度。

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

visibility ：控制元素的可见性。

用法： visibility: hidden; 。可以设置为 visible （可见）、 hidden （隐藏）。

cursor ：指定鼠标指针的样式。

用法： cursor: pointer; 。可以设置为 pointer （手型）、 crosshair （十字准线）、 wait （等待）等。

overflow ：处理内容超出元素尺寸的情况。

用法： overflow: hidden; 。可以设置为 visible （内容溢出时可见）、 hidden （隐藏溢出内容）、 scroll （显示滚动条）、 auto （根据需要自动显示滚动条）。

z-index ：控制元素的堆叠顺序。

用法： z-index: 1; 。具有较大 z-index 值的元素会显示在具有较小 z-index 值的元素之上。

这些只是 CSS 的一部分属性，CSS 还有很多其他属性和功能，可以根据具体的设计需求进行使用和组合。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：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

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

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

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

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

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

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