乐趣区

关于challenge:我所了解的-CSS

jiezi

起源

CSS 到底是什么？简略的答复是，层级装璜表，可能形容网页上元素的款式状态，例如色彩、大小、布局等等。简单的答复是，它既是浏览器所反对的款式配置，也是一种配置语言。回到很久很久以前，互联网的初期，人们刚刚发明了 XML 的小表弟 —— HTML，将其用于结构一个“难看”的网页。人们用不同的元素名，来示意页面上的不同内容，并依据浏览器内置的格调来渲染它们。例如 h1是大字号的黑体，code是等宽的小字，p是分段的注释等等。起初，人们慢慢感觉内置的这些款式无奈满足对于难看的谋求，浏览器厂商就想，罗唆让你们这些些写网页的人本人去配置好了。于是，HTML 元素有了 style 属性，人们能够通过它来批改元素的款式：

<div style="color: green">hello</div>

语法

一个元素没问题，元素一多，这样的配置办法就麻烦了，比方页面上所有的按钮都要对立格局，每个都独自配置必定不事实。于是 style sheet 应运而生，简而言之就是用独自的文件来保留页面上所有元素的款式配置。CSS 的次要语法很简略，大括号里面的是选择器，示意选中的元素，大括号外面是具体的款式配置：

h1 {
    color: red;
    font-size: 20px;
}

每个款式属性之间，应用分号宰割，最初一项能够省略分号。对于分号的地位并没有要求，如果你喜爱，把分号放在行首也是能够的。css 继承了 XML 和 HTML 对于大小写不敏感的特点，当然，为了代码的整洁性，最好还是对立一个大小写的格局：

elEmEnt {
  CoLoR: red
  ;fonT-size: 20px
  ;background-color: green
}

CSS 中惟一的数据类型就是字符串，它不像 JSON，有布尔值、数字这些，CSS 里全都是字符串，但记住它们不须要加引号。CSS 里每个属性能够接管一个或多个参数，参数之间用空格宰割，例如：

padding: 10px 10px 10px;

选择器

元素名，类，id

方才咱们说了大括号外边那个就是选择器，这让我想起了 jQuery 外面的 $ 选择器，其实和那个很相似。根本的规定是：.结尾的示意元素的 class, # 结尾的示意元素的 id，字母结尾的示意元素的类型名。留神，class 和 id 都是大小写敏感的，这和元素类型名不一样。

h1 {}
.my-class {}
#my-id {}

如果想同时给多个选择器配置雷同的格调参数，那么用 , 隔开就能够了，示意“或”的意思：

.my-class
, #my-id {background-color: yellow}
伪类

选择器还能够增加一些修饰符，例如，示意鼠标悬浮时的格调，在前面加上 :hover 即可，这种单个冒号的润饰叫做伪类（pseudo class）：

.my-class:hover {color: red}
伪元素

还有一种，就在前面加两个冒号，叫做伪元素（pseudo element），比方，::first-letter 示意元素内容的首字母：

.my-class::first-letter {color: red}

依据我的理论测试，同时应用时，两个冒号的必须放在一个冒号的前面，也就是 .my-class:hover::first-letter 这样能起成果，反之有效。

本义

如果你的 class 名称外面带有引号，须要应用 \ 进行本义，例如：

<div class='super:man::class'>c3</div>
.super\:man\:\:class {font-size: 50px;}
属性选择器

接下来是一种最为逆天的选择器，它叫做属性选择器，依据匹配属性的值来进行抉择，例如：

    <div group='g1'>c1</div>
    <div group='g2'>c2</div>
    <div group='g3'>c3</div>
[group^=g] {color: blue}

示意选中所有满足其 group 属性以 “g” 结尾的元素。

对于选择器就说这么多吧，理论工作中会用到的其实也就很少的几种，次要还是最后面的三种。还有更简单的联合选择器这里就不讲了，我也不想这篇文章齐全变成一个文档的样子，还是心愿能多讲一些有意思的想法。那些特地简单的选择器的存在有其历史起因，我猜想是因为过来网络速度比较慢，须要尽量减少传输的文本数量，所以就减少了选择器的复杂度。

Flexbox 和 Grid

不得不提一下的是页面的布局（layout），css 目前比拟罕用的是 Flexbox（弹性盒）和 Grid（网格）模型。顾名思义，Flexbox 模型里的元素是能够拉伸和压缩的，Grid 是把页面宰割成几行几列的网格，将元素置于某个网格的地位。

基于 class 的 css 框架

首先咱们须要晓得一个 html 的个性：每个元素能够同时设置多个类（class），类之间用空格隔开。

这种个性催生了一系列基于预制类的 css 框架，例如 tailwindcss。它们事后定义了许多类，提供特定的性能，程序员在应用时不再须要本人去定义类，而是间接给 html 元素设置多个预制类。这就解决了传说中编程畛域最难的问题之一 —— 命名。

<div class="pt-6 space-y-4">

比方，这里的 pt-6 示意 “padding-top: 1.5rem”, space-y-4 示意 “margin-top: 1rem”。程序员通过组合这些预制类，就能够达到想要的成果。如果说原来手写 css 是用泥巴捏出一个造型，应用基于 class 的框架就好比是用现成的乐高积木进行拼装。

总结

以上是我从一个非前端程序员的角度来聊聊 css，如有谬误欢送指出。集体感觉 css 是一个偏差设计的货色，须要有业余的设计能力，或者参照 UI 设计师的设计图来进行编写。如果非专业人员想要疾速地做出一个难看好用的页面，能够间接应用 css 框架。

本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。

退出移动版