字节青训营课程二——了解CSS

基本样式：

css本身是页面一条一条的样式规则，每一条声明用分号隔开

css的三种使用方法：

外链（推荐）：把css样式单独放在一个文件，由link标签引入，可以把内容和样式分离开

嵌入：把css嵌入到html

内联：所有html都有style，把样式写在style属性里，就不需要格外写css

 e.g.：通过style引入样式

 css工作方式：

 选择器：

• 通配选择器：由星号 * 引入 

• 标签选择器

• id选择器：给选择器设置id属性后，在<style>里用#引入选择器的id书写样式，需要注意的是id在这个页面中是唯一的

•  类选择器：由于不可能给每一个标签设置一个id，所以同一类型的标签设置类名，用.引用

•  属性选择器：给同一属性的增加样式

也可以如下input标签中属性type等于某个值时才匹配上样式

 又如下^=表示以什么开头匹配，$=表示以什么结尾匹配

 状态尾类：对于链接有四种状态：a:link表示默认状态下链接的样式，a:visited表示访问过的状态链接的样式，a:hover表示鼠标放在链接之上链接的样式，a:active表示鼠标点击之后链接的样式

 对于输入框来说也有样式，聚焦到输入框时有:focus的样式

 还有其他状态尾类，比如结构尾类，根据dom节点在dom树中出现的位置来决定是否选中这个元素，比如如下有序列表，给排名第一的增加样式，用first-child尾类状态或者last-child选中样式 

 对于选择器可以进行组合，例如如下只有当满足input且又满足error的时候产生border-color变红的样式

 元素的组合：

 e.g.：<style>样式中

1. article p表示<article>下所有<p>标签
2. article > p表示<article>下所有直接的<p>标签
3. h2 + p表示<h2>后紧跟的一个<p>标签

 选择器组合：

选择器之间用逗号隔开

颜色：

 使用RGB调节样式颜色，用红蓝绿三原色各色的数量调节

rgb模型表示方法：

1. #十六进制
2. rgb( , , )

 hsl模型表示方法：把颜色的三个属性进行调整

 hsl(颜色 ,鲜艳程度 ,明亮程度 )

透明度：（不常用）

 字体：

用属性font-family，它的值不止一个而且还用逗号分隔开的原因是网页要被不同的设备访问，能拥有的字体都有限，可以指定多个字体，有optima就用没有就用georgia，以此类推。最后一个serif或者sans-serif是一种通用字体，要记得font-family最后都要加通用字体

 通用字体族：

 可以给一种字体命名，然后从别的网页获取这样的字体作为自己网页的渲染

采用@font-face的定义

 字体大小：采用font-size

字重：字的粗细，采用font-weight，值是100-900 

斜体与非斜体：采用font-style，正常值是normal非斜体，也有italic

行高：两行文字的距离，

书写字体：

调试css：右键点击检查或者CTRL+Shift+I 

继承：

某些元素会继承父元素的值，除非显示指定一个值

初始值：

布局（Layout）：确定内容大小和位置的算法

盒模型： 

内边距padding：边框与内容的距离，有padding-left,padding-right,padding-top,padding-bottom。有复合型写法，如下图，内边距会影响盒子大小会使盒子变大，因此防止盒子变大造成的影响可以使width和height减小。或者是有height就不用padding-top或者bottom，width同理

 border：指定边框样式、粗细和颜色

overflow:hidden可以使外盒子与内盒子有边框

圆角边框border-radius，值可以为px或者百分数

想要圆形边框则把width和height相同，bordr-radius为width或者height的一半

外边距：盒子与盒子之间的距离，同样也有margin-left,margin-right,margin-top,margin-bottom。简写方式与padding相同。auto可以使居中

行内元素或者行内块元素的行居中：text-align:center

垂直居中：让行高line-height等于盒子的高度height即可 

block是块级元素，会一行一行排列

inline是行级元素，会在行内排列

inline-block是行内块元素，在行内一块一块排列

Grid布局：二维网格

划分例子：

给网格线编号

比如A区域就在横：从线1到线3，竖：从线1到线3的区域中 

 浮动float:

实现文字环绕图片

 定位position:

 

整个文档当作这个absolute的元素不存在，absolute是相对于祖先定位，而fixed是相对于视窗定位。