CSS | 青训营笔记

用户2937961978697
37 阅读7分钟

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

CSS

  • 基本结构：

    Selector {
    Property1: Value1;
    Property2: Value2;
}
    • Selector: 选择器，表示选择你想要添加样式的html元素，如选择器为h1时表示给一级标题添加样式
    • Property:Value：属性：值，表示一条样式规则的声明，如font-size: 14px表示把字体大小设为14个像素

  • 在HTML中使用CSS

    • 外链：（最推荐的用法）

      <link rel="stylesheet" href="xxx.css"

    • 嵌入：

      <style>
    /*css code here*/
</style>

    • （不推荐）内联样式：在元素的style属性内使用，例如

      <p style="css code here">
    content
</p>

  • CSS工作过程

选择器

简单选择器

  • 通配选择器*：选择所有元素

  • 标签选择器：使用标签名作为选择器的名字，如p给所有段落设置样式

  • id选择器#idName: 选择ID名字为idName

  • 类选择器.classname: 选择属于classname的元素

  • 属性选择器[property]: 选择带有property属性的元素

    • [property="value"]: 选择属性property为value的元素
    • [property^="string"]: 选择属性property的值以string开头的元素
    • [property$="string"]: 选择属性property的值以string结尾的元素

  • 伪类选择器:name:

    • 状态伪类：根据状态选择

      • a:link,a:visited,a:hover,a:active分别代表选择链接在默认、点击后、鼠标悬停时、鼠标点下时的元素

    • 结构伪类：根据位置选择

      • :first-child: 选择DOM树下该元素的第一个儿子节点

  • 选择器组A, B, C,...：并列多个选择器

选择器组合

A是一个选择器、B是另一个选择器

  • AB: 选择既满足A又满足B
  • A B: 选择满足B，且祖先节点中有节点满足A
  • A > B: 选择满足B，且父节点满足A
  • A~B: 选择满足B，且在其前面的兄弟中有节点满足A
  • A+B: 选择满足B，且其前一个兄弟节点满足A

选择器优先级

  • 特异度：id > 伪类 > 标签

    • 比较方式：字典序式比较，先比较id，然后是伪类、标签

  • 选择器生效原则：

    • !important的选择器永远优先
    • 特异度不同的选择器，特异度高的生效
    • 特异度相同的选择器，位置靠后的生效

常用属性

  • 颜色color: 其值可以用

    • rgb：用#xxxxxx或者rgb(red,green,blue)
    • hsl：用hsl(色相,饱和度,亮度)
    • 需要设置不透明度alpha时：用rgba(red,green,blue,alpha)或hsl(色相,饱和度,亮度,alpha)

  • 字体font-family: 属性值应当为一个字体族，以兼容更多的设备，例如

    h1{
    font-family: Optima, Georgia, serif;
}
    • 通用字体族：serif衬线体,Sans-Serif无衬线体,Cursive手写体,Fantasy手写体,Monospace等宽字体，均为一类字体而非某一具体的字体。
    • 字体族一定要以通用字体族结尾
    • 中文字体一般写在英文字体后面

  • 字号大小font-size：其值可以使用

    • 绝对值：20px为20个像素
    • 相对值：2em默认状态下的两倍大小，80%为默认状态下的80%大小

  • 字体效果font-style: 值为italic时为斜体

  • 字重font-weight: 取值为100-900，100最细，900最粗（normal为400，bold为700）

  • 行高line-height: 设置每行基准线之间的距离

    • 无单位数字：如1.6表示设置行高为字体大小的1.6倍

  • 文字对齐text-align: left左对齐、center居中对齐、right右对齐、justify两端对齐

  • 间距spacing: 可以分别设置letter-spacing,word-spacing

  • 首行缩进text-indent

  • 文本装饰text-decoration: none无装饰、underline下划线、line-through删除线、overline

  • white-space: 处理文本中的空格和换行

    • normal: 默认状态，会将连续多个空格合并为1个，保留原有换行，会自动换行
    • nowrap: 强制不换行，合并空格
    • pre: 保留原文中所有的空格和换行
    • pre-warp: 在保留原文的基础上添加自动换行
    • pre-line: 在保留原文的基础上合并空格，保留换行

继承

  • 对默认可继承属性，若该元素未设置该属性的值，会从其父元素继承

    • 一般和文字相关的属性可继承（如color, font-size）
    • 一般和盒模型相关的属性不可继承（如box-sizing）

  • 初始值：若未指定属性值，且祖先节点也均未指定，则会采用初始值

  • 继承相关关键字（属性值）：

    • inherit: 强制继承父节点计算值（即若父节点使用相对值时，先计算出父节点的绝对值，然后继承该绝对值）

      box-sizing: inherit;

    • initial: 将属性设置为初始值

布局模型

盒模型

  • 模型：

    • 默认的width和height为content-box的属性
    • 可通过box-sizing: border-box这样的语句切换标准模型

常用属性

  • width/height: 取值可为长度、百分数（相对于整个容器的百分比）、auto（根据内容计算高度）

  • 容器有指定高度百分数才会生效

  • padding/border/margin: 四个方向分别称为top/bottom/right/left，可以使用padding-xxx的属性进行设置

    • 同时设置四个可简写为padding: 10px（四边等宽），padding: 10px 20px（上下10px，左右20px），padding: 10px 20px 30px 40px分别代表上右下左

  • border的属性：border-width、border-style、border-color

  • margin：

    • 设置为auto时可自动实现水平居中的效果
    • 两个元素间的margin实际值为两者定义的margin中的最大值

  • overflow属性：控制溢出内容

    • visible: 仍然显示
    • hidden: 隐藏
    • scroll: 可滚动显示

盒子类型

  • 块级盒子：不与其它盒子并列排放

  • 行级盒子：和其它行级盒子和并列、但不可使用width、height这样的属性

  • 默认情况下，块级元素生成块级盒子，行级元素生成行级盒子

    • 块级元素：body、article、div、main、section、h、p、ul、li
    • 行级元素：span、em、strong、cite、code

  • 可以更改display属性以更改盒子类型：

    • 更改为块级盒子：display: block
    • 更改为行级盒子：display: inline
    • inline-block: 一个行级盒子、可以设置宽高、作为整体不会被拆散
    • none: 排版时忽略
行级排版

  • 行级排版原则：

    • 盒子在一行内水平摆放
    • 一行放不下时换行显示

  • text-align/vertical-align分别控制水平和垂直对齐

  • overflow-wrap控制换行方法

块级排版

  • 块级排版原则：

    • 盒子从上到下摆放
    • 垂直margin会合并
    • 盒内的盒子的margin不会与盒外格子的margin合并
    • 不与浮动元素重叠

Flex Box模型

  • 概念：

    • 主轴（main axis）：流动方向（默认为水平）
    • 侧轴（cross axis）：与主轴垂直的方向

常用属性

  • 使用flex模型： display: flex;

  • 控制主轴对齐：justify-content属性，不同值的效果如下

  • 控制侧轴对齐：align-items属性，不同值的效果如下

    • 可以给容器设置，也可以给单个元素设置

  • 设置子项弹性：

    • flex-grow: 设置有剩余空间时的伸展能力（能力代表伸展的比例，和其它能力是相对值）

    • flex-shrink: 设置空间不足时的收缩能力

    • flex-basis: 没有伸展或收缩时的基础长度

    • 缩写为flex属性

      缩写原名
      flex: 1flex-grow: 1
      flex: 100pxflex-basis: 100px
      flex: 2 1flex-grow: 2; flex-shrink:1
      flex: 2 0 100pxflex-grow: 2; flex-shrink:0; flex-basis:100px;
      flex: autoflex: 1 1 auto
      flex: noneflex: 0 0 auto

Grid布局

  • 以二维的，网格式的布局

常用属性

  • 切换为Grid布局

    display: grid;

  • 划分网格

    gird-template-columns: value1 value2 value3...
gird-template-rows: value4 value5 value6...
    • 有几个value就会被分成几行/列
    • value可以为具体数值(如10px)、百分数、(number)fr（表示剩余部分占多少份）

  • 网格线：上面和左边第一条线标记为1

  • 选择区域：根据上下左右四个网格线选择区域

    p{
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
}
/*short form*/
p{
    grid-area: 1/2/3/4;
}

浮动布局

  • 主要用于图文混排时，文字环绕图片问题（将图片设为float）

绝对定位

  • position属性，其值为

    • position: static默认模式

    • position: relative 相对于默认模式进行一个偏移

      • 使用top/left/bottom/right属性进行偏移
      • 不改变其它元素位置

    • position: absolute 相对于最近的非static祖先进行定位，且不对其它元素产生影响

    • position: fix 相对于当前可视窗口进行定位（如导航栏固定在最上方）

\

avatar
文章
阅读
粉丝