CSS初识|青训营笔记

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

本堂课重点内容：

• CSS定义
• 页面中使用CSS
• CSS工作原理
• 选择器
• 颜色

详细知识点介绍：

• CSS：定义页面元素的样式
  • 设置字体颜色
  • 设置位置大小
  • 添加动画效果
• 基础代码： h1{color:white;font-size:14px;}
  • h1:选择器SELECTOR
  • color---设置颜色
  • white---属性值
  • color:white---声明
• 页面中使用CSS
  • 外链：用link标签引用到里面，推荐使用，内容和样式分离。
  • 嵌入
  • 内联：不推荐使用，样式和标签绑定

<link rel="stylesheet" href="/assets/style.css">

<style>li{margin:0;list-style:none;}p{margin:lem 0;}</style>

<p style="margin:lem 0">example content </p>

• 举例：

       <h1>大标题</h1>
        <p>段落</p>

        <style>
        * {
          color: red;
          font-size: 10px;
        }
        </style>

• CSS工作原理：

加载HTML--解析HTML--创建DOM树+加载/解析CSS---页面显示

• 选择器Selector

  • 寻找页面元素并设置样式

  • 按多种方式选择元素：

    按照标签名

    按照属性

    按照DOM树中位置

  • 通配选择器：* {属性: 属性值;}

  • 标签选择器：h1{属性: 属性值;}p{属性: 属性值;}

  • ID选择器：#标签名{属性: 属性值;}

  • 类选择器：.类名{属性: 属性值;}-------------常用

  • 属性选择器：[属性名]{属性: 属性值;}

  • 属性选择器（特定值）：[属性名=“特定值”]{属性: 属性值;}

  • 属性选择器（匹配某一条件）：

    [属性名^=“条件”]{属性: 属性值;}----开头

    [属性名$=“条件”]{属性: 属性值;}----结尾

  • 伪类

    • 状态型伪类
    • 结构伪类

  • 组合

  • 选择器组：多个选择器定义相同样式

    body,h1,h2,...,{}

    [],[]...{}

• 颜色：

  RGB（红黄蓝）：rgb(,,)

  HGL(色相、饱和度、亮度)：hsl(,%,%)

  alpha透明度：0--1

  字体font-family：最后加上通用字体族，英文放在中文前面

  web fonts:从url下载字体文件

  font size：

  关键字:small.medium,large

  长度：px,em

  百分数:相对于父元素

  line-height：行高

  text-align：文本对齐

  spacing：间距

  text-indent：缩进