这是我参与「第五届青训营 」笔记创作活动的第1天
一、CSS-入门
CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用。本节课对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知。
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
h1{
color:white;
font-size:14px;
}
1、在页面中使用CSS
外链
<link rel="stylesheet"href="/assets/style.css">
嵌入
<style>
li{margin:0;list-style:none;}
p{margin:lem 0;}
</style>
内联
<p style="margin:lem 0">Example Content</p>
举例
CSS工作
2、选择器Selector
通配选择器
标签选择器
id选择器
类选择器
属性选择器
3、伪类(pseudo-classes)
- 状态伪类
- 结构性伪类
状态伪类:
触发橙色边框
结构伪类:
4、字体 font-family
5、white-space
CSS-进阶
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
1、复用/继承
2、布局Layout
举例
Grid布局
划分网格
grid line
grid area
float浮动-文字环绕
绝对定位
position:fixed;固定在当前视野里