@[TOC]CSS所有属性及用法
欢迎使用Markdown编辑器
CSS(层叠样式表)具有丰富的属性,以下是对一些主要属性的介绍及用法:
一、字体属性
- font-family :指定文本的字体。
- 用法: font-family: Arial, sans-serif; 。可以指定多个字体,以逗号分隔,浏览器会从左到右依次尝试使用这些字体,直到找到可用的字体。如果都不可用,会使用浏览器默认字体。
- font-size :设置字体大小。
- 用法: 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语法1 功能;
- 增加了 多屏幕编辑 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
语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// 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 |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n )