css 个人喜欢的样式 速查笔记

起因, 目的:

记录自己喜欢的, 觉得比较好看的 css.
下次用的时候,直接复制,很方便。

1. 个人 html 模板, 导入常用的 link

  • 设置英语字体: Noto
  • 导入默认的 css
  • 使用网络 icon 图标
  • 导入 Bootstrap css 框架

html


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />


<link rel="stylesheet" type="text/css" href="styles.css">


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
2. 常用 css 模板

todo, 以后再增加。

* {
  font-family: "Noto Serif", system-ui;
  font-optical-sizing: auto;
}

Noto 字体效果:
css 个人喜欢的样式 速查笔记_第1张图片

走过路过,支持一下啊。

css 个人喜欢的样式 速查笔记_第2张图片

wx

你可能感兴趣的:(css,笔记,前端)