CSS Day1笔记@TOC
css : 层叠样式表
css版本: css2 css3(兼容性问题)
css文件:.css
css2
版本,高版本一般兼容低版本
-
如果写css 样式 (引入css的三种/四种)
1:行内样式 标签内的style属性
2. 内部样式link vs @import的区别
1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。3.兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。4.DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。5.权重区别(该项有争议,下文将详解)
link引入的样式权重大于@import引入的样式
-
css 的语法
选择器{
属性:值;
} -
选择器
标签选择器(标签名)
p{}
类选择器
.类名{
color:green;
}id选择器
#id名{}
通用选择器(所有元素)
*{
}
权重值计算
id: 100
类: 10
标签: 1
通用:0复合:
后代选择器(以空格分隔)
选择器 选择器{}
父选择器 > 子选择器{
}并列选择器
选择器1,选择器2…{}
交集选择器
p.txt{}
复合选择器的优先级
所有基础选择器的权重值,相加,在比较大小,值越大,权重越高!importent:最高权重值
行内样式的优先级,高于内部样式
-
属性
文本属性 color 字体颜色 值: red|green; 十六进制: #3e3e3e #ffffff #fff #369 rgb(34,56,78) rgb(%,%,%) text-decoration:文本装饰 line-through | underline | overline | none text-align:center | left | right vertical-align: middle | top | bottom ; 注: vertical-align属性,只对单元格有效 display: table-cell; 指元素变成单元格 line-height:行高 height,line-height高度相同时,有垂直居中的效果(单行文本) text-indent : 首行缩进 em : 倍数 px | % 扩展: rem | vh | vw text-transform: 英文字母大小写转换; capitalize:单词首字母大写 uppercase:全部大写 lowercase:全部小写
设置单词内部的字母间距(letter-spacing)和单词之间的距离(word-spacing)
word-spacing:10px;
letter-spacing:-1px;字体属性 font-family:字体类型 font-style:字体样式 normal:指定文本字体样式为正常的字体 italic:指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字 font-weight:字体粗细 font-size:字体的大小 px : 默认google 16px , 最小字体单位:12px em :相对单位,相对当前文本字体的大小(如没设置,后继承父级的字体大小) font:复合属性,注意属性的顺序 font-style font-weight font-size font-family 背景属性 背景颜色:background-color: orangered; 背景图像: background-image: url("tu.jpg"); 背景图像如何铺排填充: background-repeat: no-repeat; 背景图像位置:background-position: -10px -90px ; 背景图像的尺寸大小: background-size 列表属性 list-style:复合属性 list-style-type 设置或检索对象的列表项所使用的预设标记 list-style-position 设置或检索作为对象的列表项标记如何根据文本排列 list-style-image 设置或检索作为对象的列表项标记的图像 边框属性 border 复合属性 : width style color 边框宽度 border-width: 边框样式 border-style: 边框颜色 border-color:# 欢迎使用Markdown编辑器
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
新的改变
我们对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 ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫