这是我参与【第五届青训营】伴学笔记创作活动的第3天。

CSS: Cascading Style Sheets层叠样式表

用来定义页面元素的样式（设置字体和颜色；设置位置和大小；添加动画效果）

组成 选择器Selector、属性Property、属性值Value（h1{color:white;}）

属性+属性值:一条声明Declaratuion；多条声明分号隔开

在页面中使用CSS

li { margin:0;list-style: none;} p { margin: lem 0 ;} </ style> <!--内联--> <p style="margin:lem 0 ">Example Content</p> 1 2 3 4 5 6 7 8 9 内联不需要选择器，直接写在style里，不推荐，某些场景加UI组件等可以； 推荐使用外链；

现在组件开发Vue组件分离、关注点分离

css是如何工作的（css应用到页面） （只有css）

加载HTML -> 解析HTML ( -> 加载CSS -> 解析CSS -> 添加样式到DOM节点 ) -> 创建DOM树 -> 展示页面

把每一个DOM节点都解析属性样式 -> 形成渲染树 -> 展示页面

选择器选择器 Selector 1.找出页面中的元素，以便给他们设置样式

2.使用多种方式选择元素：

按照标签名、类名或id；按照属性；按照 DOM树中的位置 入

通配选择器（*号匹配所有）

标签选择器（div,p,h1,…）

id选择器（#，id="";id唯一）

类选择器（.,class=""）

属性选择器（disabled…）

属性选择器 用户名: 密码:

[disabled] { background: #eee;color: #999; }

1 2 3 4 5 6 7 8 9 [disabled]只要这个元素有disabled属性就可以选中

要选择特定的值：input[type=“password”]只会选input并且type="password"的

密码:

input[type="password"]{ border-color: red;color: red; } 1 2 3 4 5 6 7 8 9 3.属性选择器属性满足条件时选择

回到顶部

查看图片

a[href^="#"] { color: #f54767; background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat; padding-left: 1.1em; } a[href$=".jpg"] { color: deepskyblue; background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat; padding-left: 1.2em; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 a[href^="#"]href匹配以#开头的

a[href$=".jpg"]href匹配以.jpg结尾的

伪类(pseudo-classes) 伪类：不基于标签和属性定位元素

几种伪类：状态伪类；结构性伪类

1.状态伪类：元素处于某种状态 如链接a:link默认状态；a:visited访问过；a:hover鼠标移上去；a:active鼠标按下

鼠标点输入框，聚焦到输入框:focus(outline:外边框)

a:link { color: black;} a:visited { color: gray;} a:hover { color: orange;} a:active { color: red;} :focus { outline: 2px solid orange;} 1 2 3 4 5 6 7 8 9 10 2.结构性伪类 根据dom节点在dom树中出现的位置

li:first-child选中li中第一个孩子，设置颜色

li:last-child选中li中最后一个孩子，设置没有下边框

1. 阿凡达
2. 泰坦尼克号
3. 星球大战:原力觉醒
4. 复仇者联盟3
5. 侏罗纪世界

li{ list-style-position: inside; border-bottom: 1px solid; padding: 0.5em; } li:first-child { color: coral} li:last-child { border-bottom: none;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 还有更复杂的如奇数偶数等

组合： 直接组合：条件都要满足；如input.error{}要求既要是输入框，又要是.error

拉森火山国家公园

拉森火山国家公园是位于...

气候

因为拉森火山国家公园...

高于这个高度，气候非常寒冷...

article p { color: black;} article > p{ color: blue;} h2 + p{ color: red;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

选择器组 多个选择器样式差不多或一样，选择器写在一起，逗号隔开

body, h1, h2, h3, h4, h5, h6, ul, ol, li { margin: 0 ; padding: 0 ; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding:0 ; } 1 2 3 4 5 6 7 8 文字设置样式 颜色 1.RGB指定各种基本颜色的多少来确定，用两位16进制数表示

2.HSL色相、饱和度、亮度

Hue：色相(H)是色彩的基本属性,如红色、黄色等；取值范围是0-360。

Saturation：饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。

Lightness：亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

HSL在某些场景下比较方便，如button设置按下后颜色可将L降低，其他不变

3.关键字

4.透明度alpha（不透明度）

为1时完全不透明，0为完全透明

加在后面rgba/hsla，数字表示是转为对应的16进制

字体font-family 浏览器按照字体顺序选本地有的字体；

英文字体风格写在前面，对英文起作用，英文用特定字体；

字体列表最后写上通用字体族：最后指定通用风格保证效果serif，sans-serif，Cursive，Fantasy，Monospace

卡尔斯巴德洞窟(Carlsbad Caverns)

卡尔斯巴德洞窟(Carlsbad Caverns)是美国的一座国家公园，位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以通过电梯直接到达230米的洞穴深处。

h1 { font-family: optima,Georgia,serif} body { font-family: Helvetica,sans-serif;} 1 2 3 4 5 6 7 8

通用字体族

衬线体：末尾有装饰；

无衬线体：线条均匀；

手写体；Fantasy；

等宽字体：代码编译器里的字体

使用Web Fonts

将字体当作资源放在服务器上，@font-face引用服务器上的字体

web fonts are awesome!

@font-face { font-family: "Megrim"; src: url(https://fonts.gstatic.com/ sxmegrim/v11/46kulbz5wjvLqJZVam_hVUdI1w.woff2) format( 'woff2'); } h1 { font-family: Megrim,Cursive;} 1 2 3 4 5 6 7 8 9 10 11 中文字体文件比较大，使用一些裁切好的字体文件引入占空间小

font-size字体大小 三种方式：

关键字（small、medium、large）浏览器内置，多大定义好;

长度（px、em）;

百分数（相对于父元素字体大小）

A web font example

Notes: web fonts ...

with this in mind,let's build...

section { font-size: 20px;} section h1 { font-size:2em;} section .note { font-size: 80%; color: orange;} 1 2 3 4 5 6 7 8 9 10 11 12 13 h1的font-size为2em：相当于父元素二倍的大小：40px;

.note的font-size为80%:20x80%=16px

如实现按钮设置边距圆角等属性，使用em，改变时改变文字大小，相应的属性也变化

em:文字相当于父元素的大小；边距等相当于其文字大小

rem:相对于根元素（移动端适配）

1vh/1vw:屏幕高度的1%/屏幕宽度的1%

字体粗细斜体 正常/斜体：font-style:normal/italic

设置粗细font-weight:100/200/…/900(具体看字体支持，浏览器选择最近字体显示)比较安全用400（normal）/700（bold）

文字行间距line-height 表示每行基线base-line间的距离

h1 { font-size: 30px;line-height: 45px;} p { font-size: 20px;line-height: 1.6;} 1 2 3 4 p元素使用没有单位的数表示line-height：20x1.6 = 16px

文字font 一个属性设置所有属性；顺序：斜体 粗细 大小/行高 字体族

h1 { /*顺序：斜体 粗细 大小/行高 字体族 */ font: bold 14px/1.7 Helvetica, sans-serif ;} p { font: 14px serif;} 1 2 3 4 5 文字对齐方式text-align text-align:left/center/right/justify(分散对齐；两端对齐)

justify只会对非最后一行的文字生效；只有一行文字也不会生效

间距spacing letter-spacing:字符间距

word-spacing:单词间距

文字缩进text-indent text-indent：默认0px;也可以为负

文本装饰text-decoration text-decoration：none/underline(下划线)/line-through（删除线）/overline（上方的线）

空格换行white-space normal / nowrap / pre / pre-wrap / pre-line

默认连续空格会合并成一个空格；

nowrap不换行，多个空格合并；

pre保留所有空格、换行（所有样式）；

pre-wrap一行显示不下时换行；

pre-line合并成空格，保留换行

调试 右键点击页面，选择「检查」

使用快捷键 -ctr1+Shift+I(windows)

-Cmd+Opt+I (Mac)

css动画 过渡transition：一个点到另一个点

animation连续变化 …