CSS基础

作者： 作者的头像   小思 ,  2021-08-16 11:41:03 ,  所有人可见 ,  阅读 317

0


CSS基础

层叠样式表，为结构化语言添加样式

作用：

  1. 浏览器给予每个标签默认样式，CSS能够给文档添加自定义样式
  2. 能够做特效和动画

CSS引入

在没有CSS时，HTML通过使用属性和标签进行实现

为了使得HTML样式和文章结构分离

  • 通过<link>引入CSS文件，
  • 通过<style>引入内联样式

CSS基础规则

CSS结构称为规则集:

  • 选择器：选择了一个或多个需要添加样式的元素
  • 声明：一个单独的规则，指定样式元素的属性
    • 属性：元素的样式名
    • 属性值：可能的属性值中的一个值
p, h2 {
    color : red;
    font-style: italic;
}

选择器

  • 属性选择器
    • 元素选择器：指定类型的HTML元素
    • ID选择器：具有特定ID的元素，id属性;#my-id
    • 类选择器：具有特定类的元素，class属性;.my-class
  • 伪(Pseudo)类选择器：特定状态下的特定元素，如鼠标悬停;h2:hover

层叠与继承

层叠

对于相同规则，顺序在最后的生效

对于不同规则，浏览器决定，基本是越具体越优先
具体：选择特定属性值的元素比所有类型的元素优先

继承

一些设置在父元素的CSS属性可以被子元素继承，有些不能

当子元素有相同属性设置时，优先选择子元素属性

CSS常用规则

布局

盒模型

box-model.png

  • content box: 显示内容
  • padding box: 内容区域外部的空白区域
  • border box: 包含内容和内边距
  • margin box: 盒子和其他元素之间的空白区域,两个盒子之间的margin不会累加

盒子：

  • 块级盒子(block box):如标题<h1>和段落<p>
    • 撑满父级元素
    • 每个盒子另起一行
  • 内联盒子(inline box):如<span>
    • 不会换行
    • width height属性不起作用
    • 水平方向margin和padding生效，垂直方向不生效

定义width height,由于边距的存在使得实际空间大小需要另外计算，采用box-sizing: border-box使得直接定义宽高

不希望切换到新行且可以设定宽度和高度display: inline-block

文档流

正常文档流：

  • 块级元素按照父元素的书写顺序和流动方向放置
  • 内联元素只要有足够空间在同一行，溢出的内容移动到另一行

弹性布局：一种用于按行或者按列的一维布局。元素可以膨胀或收缩

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse; /*方向*/
    justify-content: flex-start | flex-end | center | space-between; /*子元素如何分配空间*/
    align-items: stretch | flex-start | flex-end | center | basline; /*子元素如何垂直对齐*/
}

定位

  • 静态定位：默认情况position: static
  • 相对定位：在文档流中仍然占据位置，但可以做一些偏移操作position: relative
  • 绝对定位：完全脱离文档流，直接指定定位，大小position: absolute

position: fixe相对于浏览器窗口定位

非static值的position元素相互覆盖，定以后面的位于上层，也可使用z-index定义覆盖在哪层

装饰

常用装饰：

  • 文字：字体，斜体，下划线，居中，大小
  • 背景：背景色，图像，渐变
  • 边框：实线，虚线，边距大小
  • 阴影：打光方向，颜色，扩散半径
  • 交换相关：鼠标悬停时显示样式，鼠标悬停时改变样式，动画

CSS其他

调试：使用浏览器的DevTools查看CSS属性
CSS预处理器：程式化编写CSS，例如less, sass, stylus等
css-in-js：组件化
tailwindcss：改html即可，定好设计规范

  • JavaScript - Behavioral
  • CSS - Presentational
  • HTML - Structural

避免不必要的由JS直接操作样式

可以用class来表示状态

可以寻求零JS方案

调试方法

浏览器inspect

对于伪类，可以直接forcestate

console.log() console.warn() console.error()不同等级日志

console.table{}以表格方式打印数组

console.log("%c%s", ) %c样式

console.dir 查看对象属性

debugger运行时暂停调试，也可以点击行号

watch监听，breakpoint选择断点

源码避免公开，代码压缩和混淆，左下角格式化

0 评论