这是我参与「第五届青训营 」笔记创作活动的第2天.
前言
上一篇前端与HTML是对HTML以及前端工作的了解，这一篇将介绍CSS技术在前端的应用。
CSS代码规则
代码构成
通过标签包裹样式对标签的延时进行定义
p {
font-size: 16px;
color: white;
}
页面中使用
-
外链：引用css文件
<link rel="stylesheet" href="/styles/index.css"> -
嵌入：以标签形式嵌入代码
<style> li { margin: 0; list-style: none; } </style> -
内联：写在标签内部
<P style="margin: 0; list-style: none;">这是文本</P>
CSS选择器
-
基本选择器：
- 标签选择器：针对一类标签。语法：标签 { 属性1：属性值1 }
- ID 选择器：针对某一个特定的标签使用。语法：#ID名称 { 属性1：属性值1 }
- 类选择器：针对你想要的所有标签使用。语法：.类名 { 属性1：属性值1 }
- 通用选择器（通配符）：针对所有的标签都适用。语法：* { 属性1：属性值1 }
-
属性选择器：针对拥有指定属性的标签使用，语法：[标签名称 [匹配符号 属性值] ] { 属性1：属性值1；属性2：属性值2；}
-
后代选择器：后代选择器也称包含选择器，用来选择特定元素的后代。语法：标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}
-
子代选择器：针对标签的一级子标签。语法：标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}
-
兄弟选择器：针对兄弟标签。语法：标签名称1+标签名称2 { 属性1：属性值1；属性2：属性值2；}
- +：相邻兄弟才选择
- ~：所有之后的兄弟才选择
-
伪选择器：分为伪类和伪对象
-
伪类选择器：一共五种。针对标签的某个状态使用。语法：选择器:伪类选择器 { 属性1：属性值1 }
伪类选择器 作用 应用对象 :hover 定义标记在鼠标悬停(划过)时的样式 所有显示标记 :link 定义标记在超链接状态下的样式 a标签 :focus 定义标记在获取焦点时的样式 a标签(IE浏览器不支持) :visited 定义标记被访问过后的样式 a标签 :active 定义标记在选定时刻下的样式 a标签 -
伪对象选择器：针对标签进行筛选或者在标签创建一个新的对象标签使用。语法：选择器:伪对象选择器 { 属性1：属性值1 }
伪对象选择器 作用 :first-letter 定义文本的第一个字符样式 :first-line 定义文本的首行样式 :before 定义对象之前内容的样式 :after 定义对象之后内容的样式
-
选择器注意事项
- 标签彼此可以进行组合，根据不同的选择器有不同的优先级组合计算方案。选择器优先级：id选择器>类选择器>标签选择器>子代选择器>后代选择器>伪类选择器，每一级的优先级为10进制。
- !important的优先级是最高的，但出现冲突时则需比较”四位数“;
- 优先级相同时，则采用就近原则，选择最后出现的样式;
- 继承得来的属性，其优先级最低。
部分重点样式
颜色
-
RGB
RGB颜色使用三原色更改色调，该方案用于写成16进制颜色更加便于计算。
-
HSL
HSL分别为Hue（色相），Saturation（饱和度），Lightness（亮度）的缩写，该颜色方案更实用，更方便手动调节颜色阈值。范围：H：0
360，S：0100%，L：0~100% -
alpha透明度
-
rgba,hsla颜色中用于不透明度的使用
#ff000`78` rgba(255, 0, 0, 0.47) hsla(0, 100%, 50%, 0.47)
-
字体
- font-family字体样式可以设置多个，一般来说最后设置一个通用字体族。
- 英文字体写在中文字体前面（因为浏览器逐个字符寻找字体，英文会被覆盖）。
- 几款通用字体族：Serif（衬线体），Scans-Serif（无衬线体），Cursive（手写体），Fantasy，Monospace（等宽字体）
总结
CSS样式很多，文本篇幅有限，本人将容易遗忘或者需要重点记住的CSS知识点标注了出来，便于回顾和加深印象。CSS还有一些设计模式、布局方案、动画效果、兼容处理等很多知识点此处没有解释。但做一个基础内容回顾感觉还是足够使用了。
课程45分钟的知识点也容不下CSS这个庞然大物吧~~
标题：走进前端技术栈 - CSS - 掘金
