这是我参加青训营活动的第2天
一.什么是CSS？
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
- 最基础的代码
-
h1{ //选择器是h1，要给页面中所有的h1添加样式 color:white; //color设置颜色 font-size:14px;//；声明 }
-
二、在页面中使用CSS
- 外链：把CSS定义放到单独的文件里，用link标签引入到页面里
- 嵌入：把CSS样式的代码嵌入html标签里
- 内联：把对于标签的样式直接写到style属性里，不需要写选择器
三、CSS是如何工作的
1，选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
① 通配选择器：*号匹配所有
②标签选择器：用标签来设置样式
③id选择器：给一些标签设置id属性
（比如给h1设置id属性的值是logo，后续可以用#logo去选中id是logo的元素去设置样式，id的值是唯一的）
④类选择器：给同一类型的标签设置样式class
（给列表项完成的加样式done）class可以出现多次
同时使用时，优先级别：id选择器>类选择器>标签选择器，不遵循就近原则
⑤属性选择器：通过元素的属性去选中这些元素
给所有禁用（disabled）的输入框去输入样式，通过[disabled]{ }
希望属性是特定的值时才可以选中，可以写[属性 的名字=特定的值][type="password"]
对属性的值匹配上某一个条件情况下做出的选择
a[href^="#"] //a中href的属性^=开头等于#统一设置成这类属性`
a[href$=".jpg]
//a中href 的属性$=末尾等于.jpg的统一设置成这类属性
2.伪类（pseudo-classes)
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
①状态性伪类：
不是说具体的值某一种元素，而是还要在特定的状态下才能选中
1>链接的状态
a标签在link正常状态下显示color样式是black
a在visited对于访问过链接之后，就变成了gray
a在hover鼠标移动到链接上之后，color样式是orange
a在active鼠标按下去之后，是red
2>输入框的状态
a在focus状态，输入时给输入框加两像素橙色的边框
②结构性伪类
根据你的dom节点在dom数轴出现的位置来决定是否选中这个元素
③组合
④选择器组
同时对多个选择器对相同的样式
四、颜色-RGB
rgb（红，绿，蓝）（0~255）
颜色-HSL
alpha 透明度
五、字体
-
字体 font-family: "楷体";
- 字体大小 font-size: 50px;
- 字体样式 font-style: italic;
- 字体加粗 font-weight: bold;
font-size
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
行高：line-height，表示两行文字之间baseline的距离。
- normal（默认）
- 不带单位的数字（与当前设置的字体尺寸相乘得到行高）
- 带单位的数字（固定行间距）
- 百分数（基于当前字体尺寸得到行高）
对齐方式：text-align，取值有四种：left、right、center、justify
间距：letter-spacing（字符间距）和word-spacing（单词间距）。
首行缩进：text-indent，取值为带单位数值和百分比（百分比是相对于块宽度的）。
文本装饰：text-decoration，取值为none（默认）、underline、line-through、overline。
空白：white-space
调试CSS
- 右键点击页面，选择【检查】
- 使用快捷键
- Ctrl+Shift+I(Windows)
- Cmd+Opt+I(Mac)
