落落のBlog
首页 标签 归档 主题 友链 关于 大事记 RSS

CSS 樣式入門

2024-03-03 JavaScript

This article was last updated on <span id="expire-date"></span> days ago, the information described in the article may be outdated.

CSS 樣式入門

Start

学了前端那么久，发现 CSS 真是一个 博大精深 的语言，可以简单的实现很多 JS 做不到的效果。故出此专栏，记录一些常用、神奇的 CSS。

Reference：

  1. CSS online CSS Playground
  2. MDN CSS Tutorial CSS 入门概述 - 学习 Web 开发 | MDN
  3. Tailwind CSS Chinese Tailwind CSS w3cschool
  4. 后盾人文档,是一个介绍前端技术栈的博主 后盾人文档
  5. CSS Video Tutorial 通过简明的视频动画阐述 CSS 各种概念 BV1Rv4y177rj

Selector 选择器

h1 // 选择 h1 标签
a[title] // 选择有 title 属性的标签
a:hover // 伪类(描述元素在某特性状态下的样式)，鼠标悬浮时触发
.header // 选择 class=header
#myid // 选择 id=myid
* // 全局
.box p // 选择 box class 下的所有 p 标签
.box p:first-child // 选择 box class 下的第一个 p 标签
h1, h2, .intro // , 表示分别设置

选择器 层叠（cascade）和 优先级（specificity）

类选择器具有高优先级

Function 函数

一个例子是  calc()  函数。这个函数允许在 CSS 中进行简单的计算：

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

另一个例子是  transform （变换角度）的不同取值，如  rotate()。

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

.box {
  /* 圆角 */
  border-radius: 10px;
}

@ Rule @ 规则

CSS 的  @rules（读作“at-rules”）是一些特殊的规则，提供了关于 CSS 应该执行什么或如何表现的指令。有些 @ 规则很简单，只有一个关键词和一个值。例如，@import  将一个样式表导入另一个 CSS 样式表：

一个常见的@规则是  @media，它被用来创建 媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

简写属性

一些属性，如  font、background、padding、border  和 margin  等属性称为 简写属性。它们允许在一行中设置多个属性值，从而节省时间并使代码更整洁。

padding：设置内边距
margin: 设置外边距

/* 在像 padding 和 margin 这样的 4 值简写语法中，
   数值的应用顺序是上、右、下、左（从顶部顺时针方向）。
   也有其他的简写类型，例如 2 值简写，
   它为顶部/底部设置 padding/margin，然后是左侧/右侧 */
padding: 10px 15px 15px 5px;

/* same as */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

同样的还有设置 background：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

/* same as */
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
/* repeat 控制背景平铺行为 */
background-repeat: repeat-x;
background-attachment: fixed;

Box 盒子模型

在 CSS 中，所有的元素都被一个个的“盒子”包围着。

几种类型的盒子，一般分为 区块盒子（block boxes）和 行内盒子（inline boxes）。

类型指的是盒子在页面流中的行为方式以及与页面上其他盒子的关系。盒子有内部显示（inner display type）和 外部显示（outer display type）两种类型。

block 区块盒子 类型：独占一行会换行；高度宽度都起作用；如果不指定宽度，占满一整行。

inline 行内盒子：盒子不会换行；高度宽度都起不作用

盒子模型的各个部分：

  1. 内容盒子：显示内容的区域；使用  inline-size  和  block-size 或  width 和 height 等属性确定其大小。
  2. 内边距盒子：填充位于内容周围的空白处；使用 padding  和相关属性确定其大小。
  3. 边框盒子：边框盒子包住内容和任何填充；使用 border  和相关属性确定其大小。
  4. 外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 margin 和相关属性确定其大小。

Senior-CSS.png

body {
  background: #6e28d9;
  padding: 0 24px; /* 内边距 **/
  color: white; /* text color */
  margin: 0; /* 外边距 **/
  height: 100vh; /* 高度占满 **/
  display: flex; /* 弹性布局 **/
  justify-content: center; /* 内容对齐方式 居中 **/
  align-items: center; /* 元素组对其方式 居中 **/
  border-radius: 50%;  /* 设置圆角 **/
}

Flexbox 弹性布局

建立一个 container div，设置 display: flex，div 内子元素会 自动排列，无需手动布局，可以自适应屏幕大小。尤其是在子元素个数和容器尺寸不确定的情况下，非常方便。

容器属性：

  1. flex-direction：决定主轴的方向（即子项目的排列方向）。 raw 水平 column 垂直
  2. justify-content：定义了子项目在 主轴 上的对齐方式 center。 justify vt. 证明…有理；为…辩护 这里指的是 v.对齐
  3. align-items：定义子项目在 交叉轴 上如何对齐。 flex-start 默认，交叉轴前对齐 center 交叉轴居中对齐 baseline 文字基线对齐 stretch 拉伸
  4. flex-wrap：定义了子项目在 超出主轴 换行时的行为。 nowrap 不换行 wrap 换行 wrap-reverse 反向换行
  5. align-content：定义了多行项目在交叉轴上的对齐方式，只对 多行项目 有效。

项目属性：

  1. order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
  2. flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
  3. flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
  4. flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。

响应式设计

  1. 媒体查询
  2. Flexbox 弹性布局
  3. Grid 网格布局
  4. 相对单位 rem、em、vw、vh
    • em：相对于父元素的字体大小
    • rem：相对于根元素的字体大小

CSS 动画

CSS 动画也叫 补间动画（Tweening Animation），确定了元素的起始状态和结束状态，然后计算中间状态，通过过渡动画实现。

@keyframes 动画关键帧，定义动画的开始和结束状态。起点和终点可以使用百分比或关键字（from 和 to）来表示。

.box {
  animation-name: animation-name; /* 动画名称 */
  animation-duration: 4s; /* 动画持续时间 */
  animation-timing-function: ease-in-out; /* 动画速度曲线 */
  animation-delay: 2s; /* 动画延迟时间 */
  animation-iteration-count: infinite; /* 动画播放次数 */
  animation-direction: alternate; /* 动画方向 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 */
  /* normal 正向 reverse 反向 alternate 正反交替  */
}

/* 简写 */
/* animation: animation-name 4s ease-in-out 2s infinite alternate; */

body div {
  width: 200px;
  height: 20px;
  background: #000;
  rotate: 1px;
  animation: animationname 4s ease 2s infinite normal;
}

@keyframes animationname {
  0% {
    transform: translateX(0);
    background-color: red;
    transform: rotate(0turn);
  }
  25% {
    transform: translateX(5vw);
    background-color: yellow;
    transform: rotate(0.25turn);
  }
  50% {
    transform: translateX(5vw);
    background-color: blue;
    transform: rotate(0.5turn);
  }

  75% {
    transform: translateX(5vw);
    background-color: blue;
    transform: rotate(0.75turn);
  }

  100% {
    transform: translateX(5vw);
    background-color: green;
    transform: rotate(1turn);
  }
}

贝塞尔曲线（cubic-bezier），可以自定义动画速度曲线。animation 的第三个参数。

  1. linear：匀速运动
  2. ease：慢速开始，然后加速
  3. ease-in：慢速开始
  4. ease-out：慢速结束
  5. ease-in-out：慢速开始和结束
  6. cubic-bezier(n,n,n,n)：自定义速度曲线
  7. steps(n)：分 n 步完成动画,没有平滑过渡

Tailwind CSS

Taiwind CSS 无需离开 HTML 通过 类名 快速实现各种样式，支持响应式设计和媒体查询。

Install

Raw HTML

pnpm install -D tailwindcss
npx tailwindcss init

edit tailwind.config.js file:

"./src/**/*.{html,js}", "index.html";

add in to tail.css

@tailwind base;
@tailwind components;
@tailwind utilities;

run compiler:

npx tailwindcss -o ./src/tail.css --watch

Vue3

Offial Guides in vue3

pnpm add -D tailwindcss postcss autoprefixer daisyui@latest
npx tailwindcss init -p

# edit tailwind.config.js
content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],

# add the tailwind directives to your CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

# App.vue
import "./style.css"

# Start your build process
pnpm run dev

也支持使用 TS 进行配置：tailwind.config.ts configuration#using-esm-or-type-script

// tailwind.config.ts
import { Config } from "tailwindcss";
import colors from "tailwindcss/colors";
import {
  createVariableColors,
  variableColorsPlugin,
} from "tailwindcss-variable-colors";

const config: Config = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    // You can also not pass the colors parameter,
    // it will use the colors from tailwindcss by default.
    colors: createVariableColors(colors),
  },
  plugins: [variableColorsPlugin(colors)],
};

export default config satisfies Config;

使用 tailwind ui 组件库：

pnpm add @headlessui/vue @heroicons/vue

Plugins

DaisyUI Tailwind CSS 组件库 (as plugins): https://daisyui.com/?lang=zh_hans

pnpm i -D daisyui@latest

# tailwind.config.js
module.exports = {
  //...
  plugins: [require("daisyui")],
}

Base 基础

设计一个卡片：

<div
  class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
>
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Keywords:

p: padding 内边距
m: margin 外边距
w: width 宽度
x: 水平方向
y: 垂直方向

通过断点使用媒体查询：

sm: '480px', // Small screen
md: '768px', // Medium screen
lg: '976px',  // Large screen
xl: '1440px', // Extra large screen

p-6 表示设置内边距 (padding) 为 6。
max-w-sm 表示设置最大宽度为 small(小屏幕) 的宽度。
mx-auto 表示在水平方向上居中对齐。
bg-white 表示设置背景颜色为白色。
rounded-xl 表示设置圆角为 extra large(特别大)。
shadow-md 表示设置阴影效果，阴影大小为 medium(中等)。
flex items-center space-x-4 表示使用 Flexbox 布局，子元素水平排列，元素之间的间距为 4。

container 用于创建一个包含内容的容器，通常用于限制内容的最大宽度，使内容在大屏幕上不至于过宽，提高内容的可读性和美观性。

mx-auto: 这个类名用于水平居中元素，将元素的左右外边距设置为 auto，使元素在父容器中水平居中显示。

px-4: 这个类名用于设置元素的水平内边距（padding），px 代表水平方向（左右），4 代表内边距的大小。在这种情况下，px-4 代表水平方向上的内边距为 4 个 CSS 像素。

gap: 这个类名用于设置元素之间的间距，gap-4 代表元素之间的间距为 4 个 CSS 像素。

Flexbox 布局：

同时运用这两个可以使得元素在正中间：

  • items-center 应用于 flex 容器，用于在 主轴方向 上将子元素 垂直居中 。
  • justify-center 应用于 flex 容器，用于在 主轴方向 上将子元素 水平居中 。

Flex 参数：

flex-wrap 类用于控制 Flex 容器中的项目在一行上 是否换行 显示。
flex-wrap-reverse：允许项目在需要时换行显示，并且反转换行的方向。
flex-nowrap：阻止项目换行，强制所有项目在一行上显示。
举个例子，如果你想要一个 Flex 容器中的项目在需要时自动换行

<div
  class="m-2 mx-auto flex h-screen flex-wrap content-center justify-center gap-2 bg-gradient-to-r from-purple-500 to-pink-500 align-middle text-2xl md:container"
>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    01
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    02
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    03
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    04
  </div>

  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    01
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    02
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    03
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    04
  </div>

  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    01
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    02
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    03
  </div>
  <div
    class="flex h-20 w-20 items-center justify-center rounded-full bg-pink-200 hover:shadow-2xl"
  >
    04
  </div>
</div>

prettier 自动排序 order

pnpm install -D prettier-plugin-tailwindcss

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
  "tailwindConfig": "./tailwind.config.js"
}

正则安全清除所有暗黑模式：

\S*dark:[^" >]*

Gsap Animation

GSAP 是一个高性能的动画库，可以实现更复杂的动画效果。

ref:

  1. GSAP 中文文档 GSAP 中文文档

高度塌陷

相对定位 (relative) 和绝对定位 (absolute)

ref: CSS相对定位和绝对定位详解_css绝对定位代码-CSDN博客

Author: WhaleFall

Permalink: https://www.whaleluo.top/javascript/senior-css/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可，使用时请注意遵守协议。

updated at 2024-03-03

# Design# 前端# CSS
Previous Post
德生 PL-330 收音机彩蛋
Next Post
Vue3 项目上手学习——V3 Admin

Comments