CSS | 青训营笔记

77 阅读2分钟

CSS
-Cascading Style Sheets
这是我来青训营的第二天
大概的步骤
1.选择器 h1等
2.选择器 Color等
3.属性值 Value
4.声明 声明规则 如何在页面中使用CSS
三种方式 1.外链(推荐)
通过html link来使用
2.嵌入
根据style标签
直接在页面中使用
3.内联
不建议用
直接给当前的元素使用
DOM树 image.png 属性-Color
几个特性
1.Hue 色相 颜色基本属性
2.Saturation 饱和度 越高越鲜艳
3.Lightness 亮度 越高越亮
属性-font-family
指定多个字体 用逗号隔开 css支持5种字体族 Serif衬线体-Georgia 宋体
Sans-Serif无衬线体-Arial Helvetica 黑体 微软雅黑
Cursive手写体-楷体 Caflisch Script 楷体
Fantasy-Comic Sans MS Papyrus
Monospace等宽字体-Consolas Coueier 中文字体
属性-font-size
关键字 small medium large等
长度 px em
百分数 相对于父元素的字体大小
属性-line-height
行宽(倍数关系) 属性-white-space
用来设置如何处理元素中的空白
何为布局
Layout
-确定内容大小与位置
-依据元素 容器 兄弟节点 内容等信息来计算
布局相关技术
常规流 浮动 绝对定位
元素-width
指定content box宽度
取值为长度 百分数(相对于容器的contect box高度 所以 必须有指定高度) auto(自适应 根据box中的其他属性计算)
元素-border 三种属性 四个方向
元素-margin
指定元素四个方向外边距
取值为长度 百分数 auto
百分数相对于容器宽度 (margin:auto可水平居中) 元素-display
block 块级盒子
inline 行级盒子
inline-block 本身行级 可放在行盒 可设置宽高
none 排版时完全忽略
属性-flex-grow 设置flex项主尺寸的flex增长系数
flex-grow 的属性规定为一个 <number>(副职无效 默认为0) 学习css的建议 多看多利用MDN W3C
保持好奇心
持续学习 还有新特性