理解CSS | 青训营笔记

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

CSS是什么？

• 用来定义页面元素的样式
• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

在页面中使用CSS

外链

<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>

选择器Selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
• 按照标签名，类目或id
• 按照属性
• 按照DOM树中的位置

通配选择器*

标签选择器

id选择器

类选择器

属性选择器

颜色

颜色-RGB

颜色HSL（色相，饱和度，亮度）

例如：hsl(211,66%,55%)

alpha 透明度

字体 font-family

例：

    h1{
    font-family:Optima,Georgia,serif;
    }
    body{
    font-family:Helvetica,sans-serif;
    }
    </style>

font-size

• 关键字： small,medium,large
• 长度： px,em
• 百分数： 相对于父元素字体大小

例：

    <h2>A web font example</h2>
    <p class="note">Notes: Web fonts ...</p>
 <p>With this in mind, let's build.../p>
 </section>
 <style>
 section{
 font-size:20px;
  }
 section h1{
 font-size:2em;
    }
 section .note{
 font-size:80%;
 color:orange;
  }
  </style>

line-height(行高：字体大小的多少倍)

white-space

调试CSS

• 右键点击页面，选择【检查】
• 使用快捷键

1. ctrl+shift+I(windows)
2. cmd+opt+I(mac)

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

This is a <em>test</em>
of<strong>inherit</strong>
</p>
<style>
body {
font-size:20px;
}
p{
color:blue;
}
em{
color:red;
}
</style>

• 显式继承

初始值

• CSS中，每个属性都有一个初始值
• background-color的初始值为transparent
• margin-left的初始值为0
• 可以使用initial关键字显式重置为初始值
• background-color:initial

CSS求值过程

布局（Layout）是什么？

• 确定内容的大小和位置的算法
• 依据元素，容器，兄弟节点和内容等信息来计算

布局相关技术

• 常规流：行级，块级，表格布局，FlexBox,Grid布局
• 浮动
• 绝对定位