CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

CSS

h1{						选择器:选择受影响的对象
	color : white;		属性: 属性值
	font-size :14px		属性和值加一起叫声明
	}

实现方法(写在head里)

1. 外链 <link rel="stylesheet" href="...."> 推荐 !

2. 嵌入

   <style>
   	li{color : white;font-size :14px}
   	h1{color : white;font-size :14px}
   </style>
   

3. 内联 <p style="margin:lem 0"文字</p>

选择器

1. 通配选择器 *

2. 标签选择器

3. Id选择器 <style> #logo{...} </style> id唯一

4. 类选择器 <style> .done{...} </style> 类不唯一

5. 属性选择器 <style> [type="password"]{...} </style>

6. 伪类选择器 : 不同状态下进行选择

7. DOM选择器: 根据DOM树中位置来进行选择

   不同类的组合方式: AB A B A>B A~B A+B

选择器的特异度越高, 优先度越高

除非特别指定属性的值, 否则会继承其父元素的计算值

也可强制继承 box-sizing : inherit;

强制默认: background-color: initial

属性

1. 颜色属性
   1. RGB: rgb(143, 172, 135) 或者 #8fac87 3个十六进制组合
   2. HSLA: hsl(0, 100%, 50%, 0.4) 色相, 饱和度, 亮度, 不透明度
2. 字体属性
   1. 字体: font-family: ..... 可以写多个, 渲染时会依次往后试, 防止设备无特定字体
   2. 大小: font-size:20px
   3. 粗细: font-weight:400
3. 换行和空格 while-space

布局

1. 定义: 依据元素, 容器, 兄弟节点和内容等信息来计算, 确定内容的大小和位置的算法.
2. 相关技术:
   1. 常规流: 行级, 块级, 表格布局, FlexBox, Grid布局
   2. 浮动,
   3. 绝对定位

height,padding属性想写百分百, 那容器必须是指定高度才行

margin:auto 水平居中

box-sizing: border-box 灵活100%

块级盒子不会和其他盒子并排, 适用于所有模型

行级盒子和其他行级盒子一起放在一行, 一行放不下就拆开成多行, width和height不适用

flex属性 值:1. flex-grow有剩余空间时的伸缩能力, 2.flex-basis项目的长度

<style>
.grid-container {
  display: grid;
  grid: 160px / auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>