前言

作为一名技术小白，昨天写笔记的时候突然发现，我的css基础笔记竟然没有发表！！！真是出乎我的意料。所以，今天就赶紧补上之前学的css基础知识啦。css基础知识比较多且杂，那本文就从一个小白的角度，带大家了解下CSS的基本知识吧！

什么是CSS？

CSS：层叠样式表，用来定义页面元素的样式：字体和颜色、位置和大小、添加动画效果等。

CSS基础知识介绍

页面使用CSS的方式

html页面使用有三种使用css的方式：外链、嵌入、内联。

推荐使用外链方式哦，因为这样能够做到css和html分离，更加直观、清晰~

/*外链方式*/
<link rel="stylesheet" href="/assets/style.css">

/*嵌入方式*/
<style>
p{
color:rgb(89,89,89);
font-size:40px;
}
</style>

/*内联方式*/
<p style=”color:rgb(89,89,89);font-size:40px;”>测试数据</p>

css基本语法讲解

选择器

通常选择用class类选择器，因为类选择器能够在页面中通用。
伪类：通过在父集中的相对位置来选中。

/*以下为用内联方式介绍类选择器的基本用法*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
</head>
<p class="test">我是测试数据啦</p>
<style>
    .test{
        font-size:16px;
        color: #9aa3ab;
        line-height:1.6;
        display:flex;
        justy-content:center;
        align-items:center;
        background-color:blue;
    }
</style>
</html>

最后得到的测试页面如下所示：

微信图片_20220818215844.png

font-family 字体族

font-family 属性的值是用于某个元素的字体族名称及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
使用建议：先写英文字体，再写中文字体，保证英文字体不会被一些包括中英文的字体覆盖掉（因为字体检查是逐个逐个字体检查的）
常见的通用字体族：

text-align:文本对齐，对于最后一行不生效
letter-spacing：用来增加或减少字符或汉字之间的距离，默认值为0
word-spacing：单词间距
white-space：指定元素内的空白怎样处理

小结

以上就是本小白初次接触css基础的第一部分笔记记录啦！有什么错误的地方欢迎大家指正哦~！接下来的笔记会陆续写出来的啦~

CSS基础（1） | 青训营笔记

前言

什么是CSS？

CSS基础知识介绍

页面使用CSS的方式

css基本语法讲解

选择器

font-family 字体族

小结