这是我参与「第五届青训营 」伴学笔记创作活动的第 3天。 整理的是第2天（1.16）笔记。（1）
CSS是什么
JavaScript（行为）
CSS（样式
HTML（内容）
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体颜色
- 设置位置和大小
- 添加动画效果
h1{ color：white; font-size:14px; }
h1:选择器 Selector
color：选择器 Property
white：属性值 Value
font-size:14px; 声明 Declaration（用;分隔开）
在页面中使用CSS有三种办法
-
外链
<link rel="stytlesheet" href="/assets/style.css"> -
嵌入style
-
内联
<p style="margin:lem 0">Example Content</P>
CSS如何工作
选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
1.按照标签名、类名或id
2.按照属性
3.按照DOM树中的位置
通配选择器
*它可以匹配任意类型的 HTML 元素。
在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果
标签选择器
tagName {property:value} 其中tagName是标签名称，property是css的属性。
id选择器
能够选中带有指定id的元素并设置样式，id选择器以#来定义，
语法为#id {css样式代码;};
#id选择器是css选择器的一种，该选择器允许以一种独立于文档元素的方式来指定样式。
类选择器
class
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 [(www.w3school.com.cn/css/css_sel…)]
属性选择器
属性选择器通过已经存在的属性名或属性值匹配元素。
伪类
-
不基于标签和属性定位元素
-
几种伪类
状态伪类、结构性伪类
组合
选择器组
body,h1,h2,h3,h4,h5,h6,ul,ol,li{ margin: 0; padding: 0; }
[type="checkbox"],[type="radio"]{ box-sizing: border-box; padding: 0; }
颜色 RGB
0-255
#8fac87 rgb（143，172，135）
HSL
- Hue 色相 0-360
- Saturation 饱和度 0-100%
- Lightness 亮度 0-100%
alpha 透明度0-1
rgba（255，0，0，0.5）
字体 font-family
font-size
- 关键字 small、medium、large
- 长度 px、em
- 百分数 相对于父元素字体大小
line-height
