这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

前言

最近在学习CSS的知识，但是感觉看完教学视频就忘了，所以我决定在这里记录一下我都学了点啥东西。

引入外部css样式

使用<link>标签
<link rel="stylesheet" herf = "css文件地址">

基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color: red;}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和JS搭配	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

元素选择模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

各元素之间的转换：

• 转换为块元素：display: block;
• 转换为行内元素：display: inline;
• 转换为行内快：display: inline-block;

字体属性

• font-family 定义文本的字体系列
• font-size 定义字体大小
• font-weight 定义字体的粗细
  • normal(400) 是默认值
  • bold(700) 是粗体
• font-style 定义字体样式
  • normal 是默认值
  • italic 是斜体

文本属性

• color 文本颜色
• text-align 文本对齐
  • left
  • right
  • center
• text-indent 文本缩进
• test-decoration 文本修饰
  • none
  • underline
  • overline
  • line-through
• line-height 行高

背景属性

• background-color 背景颜色
• background-image 背景图片
• background-repeat 是否平铺
  • repeat
  • no-repeat
  • repeat-x
  • repeat-y
• background-position 背景位置
  • 可以使用具体位置也可以用相对位置（top/center/bottom/left/right）
• background-attachment
  • scroll 滚动
  • fixed 固定
• 背景半透明