DAY2-1

这是我参与「第四届青训营」笔记创作活动的的第2天

CSS是什么

用来定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

h1{
  color: white;
  font-size: 14px;
}

使用CSS的三种方法: 外链,嵌入,内联(组件式开发看起来是新的模式)

选择器复习

通配选择器*

标签选择器tagName

id选择器#id

类选择器.class

属性选择器

没有值只有键[disabled]
完全匹配值[type="pwd"]
开头[type^="pwd"]
结尾[type$="pwd"]

伪类选择器：状态伪类和结构性伪类选择器组合 AB同时满足AB A B选择B如果B是A的子孙 A>B选择B如果B是A的子元素 A~B选择B如果B在A后且与A同级 A+B选择B如果他紧随在A后面

颜色表示复习

RGB: 三原色混合, RGB值的变化不能直观表示颜色的变化, 不方面操作颜色
HSL: 更加直观方便操作
Hue: 色相, 表示颜色基本属性, 值为0-360表示色环上的色值
Saturation: 饱和度, 表示颜色的鲜艳程度, 值为0-100%, 越高越鲜艳, 越低越灰
Lightness: 亮度, 值为0-100%, 越高越白越低越灰(例如想要让btn变灰只需要调低L)
alpha透明度: alpga=1，不透明。

字体使用复习 font-family: 指定使用的字体组合, 由于浏览器使用字体基于用户安装, 所以要多指定几组, 并且在最后使用字体类型兜底, 例如font-family:'Segoe UI', Tahoma, sans-serif

通用字体族

serif: 衬线字体, 在字末尾有一定装饰(Georgia, 宋体)
sans-serif: 无衬线字体, 线条单一, 末尾没有装饰(Arial, Helvetica, 黑体)
cursive: 手写体(Caflisch Script, 楷体)
fantasy: 艺术体
monosapce: 等宽字体(Consolas, Courier, 中文字体)

先英文后中文, 原因是浏览器在渲染字符的时候会逐字符比对使用的字体, 一般中文字体中就包含了英文字体, 如果中文在前, 为英文字体准备的字体就不会匹配了

使用自定义字体

  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞, 秋水共长天一色. </h1>

字体样式

font-size: 设置字体大小
关键字: small medium large
长度单位: px em
百分数: 相对于父元素字体大小
font-style: 设置字体风格
normal: 正常
italic: 斜体
oblique: 倾斜
font-weight: 设置字重
关键字: normal, bold…
数值: 100-900(400=normal,700=bold), 如果系统中找不到字体则会就近替换
line-height: 设置行高(baseline之间的距离)
font: 字体设置简写([斜体] 粗细大小[/行高] [字体族])

段落属性

text-align: 对齐方式 left|center|right|justify(分散对齐, 且仅对非最后一行有效, 如果文字只有一行那也不生效)
letter-spacing: Xpx 字符之间的距离
word-spacing: Xpx 字符之间的距离
text-indent: Xpx 首行缩进(支持负数)
text-decoration: underline|line-through|overline|none 下划线, 删除线, 上划线, 无
white-space: normal(默认)|nowrap(不换行)|pre(保留所有换行与空格)|pre-wrap(保留空格, 会换行)|pre-wrap(合并空格, 保留换行)

前端与HTML｜ 青训营笔记

DAY2-1

前端与HTML｜青训营笔记