前端学习记录~2023.7.10~CSS杂记 Day5

---

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点。

同时为了提高效率和减少对不重要内容的时间投入，会考虑更加精简

---

一、样式化表格

1、一个典型的 HTML 表格

<table>
  <caption>A summary of the UK's most famous punk bandscaption>
  <thead>
    <tr>
      <th scope="col">Bandth>
      <th scope="col">Year formedth>
      <th scope="col">No. of Albumsth>
      <th scope="col">Most famous songth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocksth>
      <td>1976td>
      <td>9td>
      <td>Ever fallen in love (with someone you shouldn't've)td>
    tr>
    <tr>
      <th scope="row">The Clashth>
      <td>1976td>
      <td>6td>
      <td>London Callingtd>
    tr>

      ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglersth>
      <td>1974td>
      <td>17td>
      <td>No More Heroestd>
    tr>
  tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albumsth>
      <td colspan="2">77td>
    tr>
  tfoot>
table>

样式如下，虽然有scope、、、等做标记，但是仍旧不好看

2、进行样式化

还是以上面的表格为例

（1）间距和布局

需要做的第一件事是整理出空间/布局

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

• border-collapse: collapsed：表格的边框是合并的
• table-layout: fixed：通常这样做可以避免表格尺寸跟随内容多少而发生变化。可以自己根据列标题的宽度来规定列的宽度，然后适当处理他们内容
• thead th:nth-child(n)：选择了4个不同的标题 (:nth-child) 选择器（“选择第 n 个子元素，它是一个顺序排列的元素，且其父元素是元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式
• 我们在和元素上设置了一些padding——这些元素使数据项有了一些空间，使表看起来更加清晰
• 我们在整个表设置了一个border，这让它拥有了边界，更清晰

效果如下

（2）简单地排版

从 Google Fonts 上找一下字体，添加元素和font-family声明，并使用 Google 字体提供的内容

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

• 给全局设置了一个字体，同时给thead和tfoot额外设置了字体
• 标题和单元格上设置了letter-spacing，这可以控制字符间距
• 对tbody中的内容进行了居中。默认标题会居中，而单元格的text-align是left
• 对tfoot的标题进行了右对齐
  

（3）图形和颜色

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

添加了字体颜色、背景和单元格边框

（4）图案

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}

• :nth-child(n)：值除了可以为1、2、3等，还可以是odd（奇数）或even（偶数）关键字
• 为所有行添加了噪点背景色块
• 为整个表格提供了一个纯色背景色，这样浏览器如果不支持:nth-child选择器也仍然会有它们的正文行的背景

（5）样式化标题

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

• caption-side：bottom：这让标题放置在表格的底部

最终效果如下

二、调试 CSS

学会使用开发者工具（比如浏览器的 F12）进行调试

1、比较 DOM 和 View Source

浏览器在渲染的 DOM 中会纠正一些错误的 HTML 部分。View Source 就是服务器端的 HTML 源码。因此可能会产生不一样的地方

2、审查 CSS

查看画框

点击小箭头来展开界面，显示不同的完整属性和它们的值

勾选或取消勾选一个规则来开关属性

3、编辑值

更改不同的值，来改变比如宽度或边框样式等

4、添加新属性

可以添加新声明新属性，需要注意如果出现无效情况会被划掉

5、理解盒模型

6、解决优先级问题

有时怎么更改都不生效很可能是有一个更明确的选择器把它覆盖掉了。

在开发者工具中不光能看到生效的属性和选择器，还能看到被覆盖掉的，他们会显示为被划掉

---

三、组织 CSS

为了增强可维护性

1、保持统一

比如对类使用相同的命名规则、使用统一格式化规范。

代码规范小组的优先于个人喜好。

2、将 CSS 格式化为可读的形式

每个属性对放在新的一行

例如

h2 {
  background-color: black;
  color: white;
}

3、添加注释

但不需要对任何东西都加上解释，因为很多都是自解释的。

应该加上注释的是因为某些原因做的特殊决定，或者是不够直观。

例如下面，就是为了保持对旧浏览器的兼容

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}

4、在样式表中加入逻辑段落

大致可以像下面顺序进行安排

1. 在样式表里面先给一般的东西加上样式是个好想法，这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式。例如body、p、h1、ul和ol、table属性、链接
2. 定义一些实用类，将一些想应用在许多不同元素上的东西加到这里
3. 整个站点都会用到的所有东西，比如基础页面布局、抬头、导航栏样式
4. 最后加上特指的东西，将它们分成上下文、页面甚至它们使用的组件

5、避免太特定的选择器

虽然有时也有用，但一般会导致复用困难

6、将大样式表分成几个小样式表

尤其在你对站点的不同部分设置了很不同的样式的时候，你会想要有个包含了所有普适规则的样式表，还有包含了某些段落所需要的特定规则的更小的样式表。你可以将一个页面连接到多个样式表，层叠的一般规则会在这里生效，即连接的靠后的样式表里面的规则会比前面的有更高优先级。这能保证 CSS 的组织性

7、OOCSS（面向对象的 CSS）

OOCSS 的基本理念是将你的 CSS 分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。

这块需要在实践中多尝试来形成习惯。

例如下面的例子，同时有评论区和列表，但有很多属性通用，那么建立一个叫作 media 的排布，里面包含所有的两种排布所共有的 CSS ——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式

.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.media .content {
  font-size: .8rem;
}

.comment img {
  border: 1px solid grey;
}

 .list-item {
  border-bottom: 1px solid grey;
}

在你的 HTML 里面，评论需要同时应用 media 和 comment 类：

<div class="media comment">
  <img />
  <div class="content">div>
div>

列表项应用了 media 和 list-item 类：

<ul>
  <li class="media list-item">
    <img />
   <div class="content">div>
  li>
ul>

8、BEM（块级元素修饰字符）

在 BEM 中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。

例如下面的 html 里应用的类

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
form>

9、预处理工具

例如 Sass

如果创建如下的 CSS，创建了在下面的第一行里面叫做$base-color的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。后面改动也可以只改这一个位置

$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}

编译完 CSS 后，你会在最终的样式表里面得到下面的 CSS：

.alert {
  border: 1px solid #c6538c;
}

10、后处理以进行优化

如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化 CSS。后处理解决方案中，通过这种方式实现的一个例子是 cssnano。

---

总结

只记录了 CSS 的部分内容