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

走进css

了解css css是什么

Cascading Style Sheetss的缩写，在页面中设置样式的工具。

功能

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

选择器 Selector

h1{ 用来给选中页面中元素，给元素定义样式 属性 color：white 选择器Property 属性值 Value front -size:14px } 声明declaration 选择器加大括号称为一条规则

在页面中使用 css有三种办法：

外链 link 嵌入style 内联 p style （html负责内容 css负责样式 不推荐内联 ul可用 ）

css是如何工作的

加载html 解析html 创建dom树 展示界面 加载css 解析 css 添加样式到dom节点 形成一个渲染数

选择器 Selector

•找出页面中的元素，以便给他们设置样式 •使用多种方式选择元素 •按照标签名、类名或 id •按照厲性 ·按服 DOM 树中的位置

通配选择器 *️⃣

标签选择器 h1～h6

id选择器

给标签设置标签属性 通过#选中一个logo作为标签

在页面中唯一类选择器

给同一类型设置类型 可以通过 class选择器 给这一类归类

属性选择器

通过元素属性值来选择元素 如给选项选中为不可选中 也可给属性值作匹配，比如回到顶部

伪类选择器 （状态性 结构性 ）

不是具体的值 这个元素处于某种状态，比如链接 区分访问还是未访问 伪类给不同状态下的链接定义样式 如和用户交互状态下

可以通过给伪类选择器形成一个组合实现一个组合功能 除了直接组合还有 有一些情况下，想同时给多个选择器定义样式可以用body形成选择器组 如：

颜色RGB

#00 00 00 rgb(00,00,00,） 六位字符。每两位分别表示原色的数量 0到255 16进制转为0到ff

颜色hsl

色相（H) Hue 饱和度(S) Saturation 亮度(L) Lightness

alpha 透明度也可表示颜色

字体 如何设置字体

font-family

（当中英文 混排的时候 也可以使用Web Fonts，把字体放在服务器上） 从url中下载文件来使用 如：

除颜色，字体，还有字体大小 font-size 关键字 small, medium.large 长度 px、em 百分数 相对于父元素宇体大小

size :em px 百分比%

字重 weight 透明度 需要字体支持字重设置

排版时候 line-height 行高 文字基准线距离 norml nowrap pre pre-wrap pre-line

调试CSS 右键点击页面，选择检查 使用快捷键 ctrl+Shift+I (Windows) Cmd+Opt+I (Mac)