css-notes
css-notes
CSS随手笔记
31 posts
佛系丹尼尔的随手笔记
Don't wanna be here? Send us removal request.
css-notes · 3 years ago
Text
CSS Anatomy
Tumblr media
0 notes
css-notes · 4 years ago
Text
VS Code Tips
在VS Code里,比如输入div.test回车或则Tab自动变成 <div class="test"></div>
0 notes
css-notes · 4 years ago
Text
Relative units 相对单位
%: width or height相对于你的parent element的width or height
vw:viewport width
vh: viewport height
0 notes
css-notes · 4 years ago
Text
Class Hover例子
Tumblr media
0 notes
css-notes · 4 years ago
Text
CSS Width & Height
除了可以设置px, 可以设置vw和vh
比如下图,width和height随着浏览器view而变化
Tumblr media
0 notes
css-notes · 4 years ago
Text
CSS border
Tumblr media
0 notes
css-notes · 4 years ago
Text
CSS Pading
一般情况直接写padding
四个值:padding(上 右 下 左) 顺时针
两个值:padding(上下  左右)
一个值: padding(上下左右)
Tumblr media
0 notes
css-notes · 4 years ago
Text
CSS Box Model
Tumblr media
Box含有
Content 内容
Padding 内部距离
Border 外框
Margin 外部距离
All html elements are boxes with width and height
Box含有的六个属性
0 notes
css-notes · 4 years ago
Text
Background size and position
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
Tumblr media
background可以代表image或者color,看里面的参数
0 notes
css-notes · 4 years ago
Text
Background相关
Tumblr media
0 notes
css-notes · 4 years ago
Text
Font-family 用法
font-family: 'Courier New', Courier, monospace;
假如没有第一个,就第二个,如此类推
https://www.w3schools.com/cssref/css_fonts_fallbacks.asp
Tumblr media
font-weight 字体粗细,比如默认400
text-indent:32px; Text前面留白
0 notes
css-notes · 4 years ago
Text
Lorem 随机生成
比如<p>lorem 20</p>
随机生成20个乱码的单词
0 notes
css-notes · 4 years ago
Text
Text align and decoration
Tumblr media
text-decoration常用
underline,none,line-through
0 notes
css-notes · 4 years ago
Text
CSS unit
Absolute Lengths
Tumblr media
Relative Lengths
Tumblr media Tumblr media
0 notes
css-notes · 4 years ago
Text
Text styling 文字样式
Tumblr media
0 notes
css-notes · 4 years ago
Text
CSS Rules 规则总结
Tumblr media
1. Cascade 阶层
有两个CSS的Selector有相同特定度时使用
2. Specificity 特定度
3. Inheritance 继承
Inherited from parent
Non-inherited by default
假如原本就有default就不会继承,没有的话才会继承parent
inline styling > id > class > element selector > inheritance
0 notes
css-notes · 4 years ago
Text
CSS Inheritance
Inheritance 继承为 CSS 第三个规则
Tumblr media
0 notes