css 变量
- 又称为 CSS 自定义属性,它的值可以在整个文档中重复使用。
- 设定值 --双根线
--main-color: black;
- 获取值 var() 函数 (color:
var(--main-color);
)
变量的声明与使用
因为 $ 被 Sass 用掉了,@ 被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。
声明变量的时候,变量名前面要加两根连词线(--)。
body {
// 声明
--font-color: #7F583F;
}
.main{
// 使用
color:var(--font-color);
}
css变量命名规则
- 普通字符局限在只要是 数字
[0-9]
字母[a-zA-Z]
下划线_
和 短横线-
这些组合,可以是中文
,日文
或者韩文
- 不能包含特殊字符:
$ , [ ,^, ( ,%
等字符 - 变量名大小写敏感,
--header-color
和--header-Color
是两个不同变量
body {
--深蓝: #336699;
background-color: var(--深蓝);
}
变量的定义和使用只能在声明块{}
里面, 例如,下面这样是无效的:
--深蓝: #336699;
body {
background-color: var(--深蓝);
}
var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在(未定义),就会使用这个默认值。
body {
color: var(--foo, #7F583F);
}
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
body {
// "Roboto", "Helvetica" 整体是默认值
var(--font-stack, "Roboto", "Helvetica");
// 10px 15px 20px 整体是默认值
var(--pad, 10px 15px 20px);
}
变量值只能用作属性值,不能用作属性名
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
变量值的类型
如果变量值是一个字符串,可以与其他字符串拼接。
body{
--width: 1px;
--type: solid;
--foo: var(--width) var(--type) #000000;
}
如果变量值是数值,不能与数值单位直接连用。
.foo {
--gap: 20;
/* 无效 */
padding: var(--gap)px;
/* 有效 */
font-size: calc(var(--size) * 1px);
}
对于CSS变量,只要语法是正确的,就算变量里面的值是个乱七八糟的东西,也是会作为正常的声明解析, 如果发现变量值是不合法的,例如上面背景色显然不能是20px,则使用背景色的缺省值,也就是默认值代替,
body {
--size: #ddd;
font-size: 30px; // 无作用
font-size: var(--size); // 继承上级
}
作用域
- 同一个 CSS 变量,可以在多个选择器内声明。
- 读取的时候,优先级最高的声明生效
- 变量的作用域就是它所在的选择器的有效范围。
优先级别:内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
<style>
:root { --color: blue; } //根元素 :root 代表全局参数
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
JavaScript 操作
- CSS 变量提供了 JavaScript 与 CSS 通信的一种途径
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
- CSS 变量提供了 JavaScript 与 CSS 通信的一种途径在 Vue 中这一点还是体现得挺明显的。
- 在vue2 中
<template>
<div class="hello" :style="styleVar">
<div class="child-1">I am Child 1</div> //blue 30px
<div class="child-2">I am Child 2</div> //red 30px onclick => red 40px
<div @click="onClick">ChangeSize</div>
</div>
</template>
<script>
export default {
data() {
return {
styleVar: {
"--colorBlue": "blue",
"--colorRed": "red",
"--fontSize": "30px",
"--fontSizeTest": "30px",
},
};
},
methods: {
onClick() {
// 改变data 的属性值 style中 css 获取到的变量更新
this.styleVar["--fontSizeTest"] = "40px";
},
},
};
</script>
<style scoped>
.child-1 {
color: var(--colorBlue);
font-size: var(--fontSize);
}
.child-2 {
color: var(--colorRed);
font-size: var(--fontSizeTest);
}
</style>
- 设置伪元素
<div class="box" :style={ --theme-secondary-color:'red' }>I am Child 2</div>
//优点 可以直接设置伪元素
div::after {
color: var(--theme-secondary-color);
}
- 在 Vue 3 中做了一些优化
<template>
<div class="content">
<div class="text">hello</div>
<div>
</template>
<script>
export default {
data() {
return {
color: "red",
};
},
};
</script>
<style vars="{ color }">
.text {
color: var(--color);
}
</style>
在 Vue 3 中,style 标签支持 vars 绑定,该参数接受对象键值对方式注入 CSS 变量,
这些变量会直接绑定到组件的根元素上
<div style="--color:red" class="content" >
<div class="text"> hello </div> // color =>red
<div>
- 和
<style scoped>
一起使用
所应用的 CSS 变量将以组件的 Scoped id 作为前缀,访问的时候也会自动加上 Scoped id
<style scoped vars="{ color }">
h1 {
color: var(--color);
}
</style>
编译之后
h1 {
color: var(--6b53742-color);
}
假如 想访问的是全局的 CSS 变量呢?也就是我们不希望加上 Scoped Id,那么要加global
:
<style scoped vars="{ color }">
h1 {
color: var(--color);
font-size: var(--global:fontSize);
}
</style>
编译之后
h1 {
color: var(--6b53742-color);
font-size: var(--fontSize);
}
缺点——浏览器兼容性问题
CSS 变量目前的支持度并非特别好,IE 目前全部都是不支持的
MdEditor的功能列表演示
标题H1
标题H2
标题H3
标题H4
标题H5
标题H5
字符效果和横线等
删除线 删除线(开启识别HTML标签时)
斜体字 斜体字
粗体 粗体
粗斜体 粗斜体
上标:X2,下标:O2
缩写(同HTML的abbr标签)
The HTML specification is maintained by the W3C.
引用 Blockquotes
引用的行内混合 Blockquotes
锚点与链接 Links
普通链接 普通链接带标题 直接链接:www.mdeditor.com [锚点链接][anchor-id] [anchor-id]: www.mdeditor.com/ mailto:test.test@gmail.com GFM a-tail link @pandao 邮箱地址自动链接 test.test@gmail.com www@vip.qq.com
多语言代码高亮 Codes
行内代码 Inline code
执行命令:npm install marked
缩进风格
即缩进四个空格,也做为实现类似 <pre>
预格式化文本 ( Preformatted Text ) 的功能。
<?php
echo "Hello world!";
?>
预格式化文本:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
JS代码
function test() {
console.log("Hello world!");
}
HTML 代码 HTML codes
<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<meta name="keywords" content="Editor.md, Markdown, Editor" />
<title>Hello world!</title>
<style type="text/css">
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
ul{list-style: none;}
img{border:none;vertical-align: middle;}
</style>
</head>
<body>
<h1 class="text-xxl">Hello world!</h1>
<p class="text-green">Plain text</p>
</body>
</html>
图片 Images
图片加链接 (Image + Link):
列表 Lists
无序列表(减号)Unordered Lists (-)
- 列表一
- 列表二
- 列表三
无序列表(星号)Unordered Lists (*)
- 列表一
- 列表二
- 列表三
无序列表(加号和嵌套)Unordered Lists (+)
- 列表一
- 列表二
- 列表二-1
- 列表二-2
- 列表二-3
- 列表三
- 列表一
- 列表二
- 列表三
有序列表 Ordered Lists (-)
- 第一行
- 第二行
- 第三行
GFM task list
- GFM task list 1
- GFM task list 2
- GFM task list 3
- GFM task list 3-1
- GFM task list 3-2
- GFM task list 3-3
- GFM task list 4
- GFM task list 4-1
- GFM task list 4-2
绘制表格 Tables
项目 | 价格 | 数量 | 计算机 | $1600 | 5 | 手机 | $12 | 12 | 管线 | $1 | 234 |
---|
First Header | Second Header | Content Cell | Content Cell | Content Cell | Content Cell |
---|
First Header | Second Header | Content Cell | Content Cell | Content Cell | Content Cell |
---|
Function name | Description | help() | Display the help window. | destroy() | Destroy your computer! |
---|
Left-Aligned | Center Aligned | Right Aligned | col 3 is | some wordy text | $1600 | col 2 is | centered | $12 | zebra stripes | are neat | $1 |
---|
Item | Value | Computer | $1600 | Phone | $12 | Pipe | $1 |
---|
特殊符号 HTML Entities Codes
© & ¨ ™ ¡ £ & < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
[========]
Emoji表情 :smiley:
GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
- :smiley: @mentions, :smiley: #refs, links, formatting, and
tagssupported :editormd-logo:; - list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [ ] :smiley: this is a complete item :smiley:;
- []this is an incomplete item test link :fa-star: @pandao;
- [ ]this is an incomplete item :fa-star: :fa-gear:;
- :smiley: this is an incomplete item test link :fa-star: :fa-gear:;
- :smiley: this is :fa-star: :fa-gear: an incomplete item test link;
反斜杠 Escape
*literal asterisks*
[========]
科学公式 TeX(KaTeX)
E=mc2
行内的公式E=mc2行内的公式,行内的E=mc2公式。
x>y
\(\sqrt{3x-1}+(1+x)^2\)
sin(α)θ=∑i=0n(xi+cos(f))
多行公式:
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)
\displaystyle
\frac{1}{
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}}
{1+\cdots} }
}
}
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
分页符 Page break
[========]
绘制流程图 Flowchart
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台
st->op->cond
cond(yes)->e
cond(no)->op
[========]
绘制序列图 Sequence Diagram
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
End
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!