这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS是什么
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
在页面中使用CSS
- 外联：在外部单独创建一个.css文件，在
<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内， - 嵌入：css样式必须写在
<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间 - 内敛（不推荐）：一般都写在特定的标签元素里面来实现对元素的修改。
CSS是如何工作的
CSS选择器
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名，类名或id
- 按照属性
- 按照DOM书中的位置
选择器种类
通配选择器(*)
匹配所有
标签选择器
用标签来设置样式
id选择器
给一些标签设置id，通过#id来设置样式
一般情况下设置的id是唯一的一个值
类选择器
对于给同一类型的表现设置类型可以使用类（class）选择器
比较常用的选择器
属性选择器
通过这个元素的属性或属性值来进行选择设置样式
通过某个属性为特定的值来选择
通过属性的值做匹配（规则）
伪类
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
link：默认情况下所处的状态。
visited：访问过的状态。
hover：鼠标移动到上方的状态。
active：鼠标按下去之后的状态。
focus：焦点确定时的状态
first-child：父级第一个子类
last-child：父级最后一个子类
组合
- 选择器组
使用，把选择器隔开形成选择器组
body,h1,h2,h3,h4,h5,h6,ui,ol,li{
margin:0;
padding:0;
}
[type="checkbox"],[type="radio"]{
box-sizing:border-box;
padding:0;
}
颜色
字体
font-family
- 字体列表最后写上通用字体族（防止浏览器无法识别）
- 英文字体放在中文字体前面（防止英文字体效果被中文字体效果覆盖）
font-size
- 关键字
- small，medium，large
- 长度
- px，em
- 百分数
- 相对父元素字体大小
font： style weight size/height family
Property 描述 [font] 在一个声明中设置所有的字体属性 [font-family] 指定文本的字体系列 [font-size] 指定文本的字体大小 [font-style] 指定文本的字体样式 [font-variant] 以小型大写字体或者正常字体显示文本。 [font-weight] 指定字体的粗细。
文字对齐方式
text-align
- left：左对齐
- center：居中对齐
- right：右对齐
- justify：两端对齐
text-decoration
值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。
white-space
值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space属性的值。
- line-height属性又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。
- word-spacing属性主要用于设置英文单词之间的距离。
- letter-spacing属性⽤来增加或减少字符或汉字之间的距离，默认值为0。
- text-indent属性规定文本块中首行文本的缩进。
