CSS | 青训营笔记

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

今天是复习CSS部分内容。

CSS是什么

主要做页面元素的样式，硬要做也能实现一些页面交互行为相当麻烦。

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

如何使用CSS

    <!-- 外部样式表 最重要的 -->
    <link rel="stylesheet" href="style.css">
    
    <!-- 内部样式表 -->
    <style>
    p {
        color: red;
        font-size: 12px;
    }
    </style>
    
    <!-- 行内样式表 不推荐-->
    <p style="color: blue; font-size: 20px">第一大段文字</p>

选择器

• 标签、类、id
• 通配符
• 组合
  • 直接组合 AB
  • 后代组合 A B
  • 亲子组合 A>B
  • 兄弟组合 A~B
  • 相邻组合 A+B
  • 并集 A,B
• 伪类
  • 状态性伪类
    • a:link
    • a:hover
    • a;visited
    • :focus
    • a:active
  • 结构伪类
    • li:first-child
    • li:last-child
    • li:nth-child(1)
    • li:nth-child(2n) 偶数个
• 伪元素
• 属性
  • [href^="#] #开头被选择
  • [href￥="#]#结尾被选择

颜色

• 颜色
  • #ff0000
  • rgb(255,0,0)
  • hsl(0,100%, 50%) 颜色，对比度，亮度
• 透明度
  • #ff0000ff
  • rgba(255,0,0,1)
  • hsla(0,100%,50%,1

字体

• font-family属性后面最好都加一个通用字体，通常把英文字体写在中文字体前面
• font-size字体大小
• font-style字体样式
• font-weight字体粗细
• white-space属性可以控制文本的换行或者空格

继承

文本相关，列表相关的属性会继承；布局属性，背景相关的不会继承。可以使用inherit使某个属性可以被继承。

CSS中每个属性都有初始值，没有指定就是用初始值，可以使用initial重置为初始值。

布局相关

• 常规流
  • 行级
  • 块级
  • 表格
  • FlexBox
    • display:flex
    • justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。
    • flex:文档见
    • 控制子盒子的流向摆放顺序
  • Grid布局
    • display:grid
    • grid-template划成网格
• 浮动
• 定位
  • absolute
  • relative
  • fixed

三角形可以用border制作，容器大小为0，设置边框宽度。

border-box不会因为border，margin，padding撑大盒子。