typora样式定制--未完待续

• torillic.css
  • 第一部分代码
    • Crimson Text字体长这个样子
    • Alegreya字体长这个样子
    • Nova Mono字体长这个样子
  • 第二部分代码
  • 第三部分代码
    • :root
    • --
    • The Traditional Way
    • Syntax of the var() Function
    • How var() Works
  • 第三部分代码解释
  • 字体大小的知识点
    • EM, PX, PT, CM, IN…

torillic.css

/** Crimson Text **/
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
/** Alegreya **/
@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap");
/** Nova Mono **/
@import url('https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap');

/* Try to import from GitHub */
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-typography.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-elements.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-code.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-write.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-print.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-focus.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-interface.css";

/* Try locally, in case of connection fail */
@import "torillic/torillic-typography.css";
@import "torillic/torillic-elements.css";
@import "torillic/torillic-code.css";
@import "torillic/torillic-write.css";
@import "torillic/torillic-print.css";
@import "torillic/torillic-focus.css";
@import "torillic/torillic-interface.css";

:root {
  --offwhite: #fff9e6;
  --red: #58180d;
  --green: #e0e5c1;
  --yellow: #c9ad6a;
  --grey: #6D6A75;
  --black: #403333;

  font-size: 3.35mm;
  font-family: "Alegreya", sans-serif;
  color: var(--black);
}

我们这篇文章的任务，就是分析上面的代码：

第一部分代码

/** Crimson Text **/
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
/** Alegreya **/
@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap");
/** Nova Mono **/
@import url('https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap');

Crimson Text字体长这个样子

Alegreya字体长这个样子

Nova Mono字体长这个样子

第二部分代码

/* Try to import from GitHub */
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-typography.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-elements.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-code.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-write.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-print.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-focus.css";
@import "https://teparsons.github.io/torillic/typora/torillic/torillic-interface.css";

/* Try locally, in case of connection fail */
@import "torillic/torillic-typography.css";
@import "torillic/torillic-elements.css";
@import "torillic/torillic-code.css";
@import "torillic/torillic-write.css";
@import "torillic/torillic-print.css";
@import "torillic/torillic-focus.css";
@import "torillic/torillic-interface.css";

这部分就没什么可说的了，这是导入了7个css。

• typography.css：排版
• elements.css
• code.css
• write.css
• print.css
• focus.css
• interface.css

第三部分代码

:root {
  --offwhite: #fff9e6;
  --red: #58180d;
  --green: #e0e5c1;
  --yellow: #c9ad6a;
  --grey: #6D6A75;
  --black: #403333;

  font-size: 3.35mm;
  font-family: "Alegreya", sans-serif;
  color: var(--black);
}

:root

the :root selector matches the document's root element.

In HTML, the root element is always the html element.

version: CSS3

这一部分是参考：https://www.w3schools.com/cssref/sel_root.asp

--

CSS Variables

the var() function is used to insert the value of a css variable.

css variables have access to the DOM, which means that you can create variables with local or global scope,change the variables with JavaScript, and change the variables based on media queries.

css变量有dom操作权限，有局部变量和全局变量，可以用js改变这些变量，可以基于media queries媒体查询，改变这些变量。

a good way to use css variables is when it comes to the colors of your design.

Instead of copy and paste thte same colors over and over again, you can place them in variables.

css变量经常用在颜色定义，避免重复复制十六进制代码，颜色代码可以放在变量中。

The Traditional Way

The following example shows the traditional way of defining some colors in a style sheet (by defining the colors to use, for each specific element):

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Syntax of the var() Function

The var() function is used to insert the value of a CSS variable.

The syntax of the var() function is as follows:

var(--name, value)

Note: The variable name must begin with two dashes (--) and it is case sensitive!

How var() Works

First of all: CSS variables can have a global or local scope.

Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.

To create a variable with global scope, declare it inside the :root selector.

The :root selector matches the document's root element.

To create a variable with local scope, declare it inside the selector that is going to use it.

The following example is equal to the example above, but here we use the var() function.

First, we declare two global variables (--blue and --white).

Then, we use the var() function to insert the value of the variables later in the style sheet:

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Advantages of using var() are:

makes the code easier to read (more understandable)

makes it much easier to change the color values

To change the blue and white color to a softer blue and white,

you just need to change the two variable values:

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

第三部分代码解释

:root {
  --offwhite: #fff9e6;
  --red: #58180d;
  --green: #e0e5c1;
  --yellow: #c9ad6a;
  --grey: #6D6A75;
  --black: #403333;

  font-size: 3.35mm;
  font-family: "Alegreya", sans-serif;
  color: var(--black);
}

通过上面的阅读，可以知道，:root这里是根选择器，是设置全局变量，变量都是--开头，经常用来设置颜色，优势是容易读、容易改。

设置了全局的字体是Alegreya。这个字体就是上面我们@import的google fonts。

字体颜色是黑色。

字体大小是3.35mm。

font-size with mm？

字体大小的知识点

可以阅读这个文章。

EM, PX, PT, CM, IN…

CSS offers a number of different units for expressing length.

• Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in).
• And there is also a “magic” unit that was invented specifically for CSS: the px.
• Does that mean different properties need different units?
• No, the units have nothing to do with the properties, but everything with the output media: screen or paper.
• There is no restriction on which units can be used where.
• If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.
• But in general you would use a different set of units for display on screen than for printing on paper.
• The following table gives the recommended use:

• pt：打印，历史遗留

• pc：打印，历史遗留

• cm：打印，厘米

• mm：打印，毫米

• in: 打印，英寸

• The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc.

css当中的单位，使用时候跟css属性没有关系，跟你的输出媒介有关系，纸张打印和屏幕显示，要使用不同的单位。

If you have a ruler handy you can check how precise your device is: here is a box of 1in (2.54cm) high:

一英寸大概是这么高。

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution.

On a laser printer, 1cm should be exactly 1 centimeter.

But on low-resolution devices, such as computer screens, CSS doesn't require that.

And indeed, the result tends to be different from one device to another and from one CSS implementation to another.

It's better to reserve these units for high-resolution devices and in particular for printed output.

On computer screens and handheld devices, you'll probably not get what you expect.

高分辨率打印机（激光打印机），使用绝对单位。

In the past, CSS required that implementations display absolute units correctly even on computer screens.

But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011.

Currently, absolute units must work correctly only on printed output and on high-resolution devices.

CSS doesn't define what “high resolution” means.

But as low-end printers nowadays start at 300?dpi and high-end screens are at 200?dpi, the cut-off is probably somewhere in between.

Dots per inch (DPI, or dpi) is a measure of spatial printing, video or image scanner dot density, in particular the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm).

Similarly, the more newly introduced dots per centimetre (d/cm or dpcm) refers to the number of individual dots that can be placed within a line of 1 centimetre (≈ 0.393 in).

以前css也是要求电脑屏幕显示场景，使用绝对单位，但是2011年废止了这个规定。现在绝对单位，只会在打印机场景和高分辨率场景使用。低端打印机是300dpi，高端屏幕是200dpi，什么是高分辨率大概在两者之间。

dpi就是一英寸高的行里面能放多少点。

There is another reason to avoid absolute units for other uses than print: You look at different screens from different distances.

1cm on a desktop screen looks small.

But the same on a mobile phone directly in front of your eyes looks big.

It's better to use relative units, such as em, instead.

除了打印场景，避免使用绝对单位，因为相同绝对单位在不同设备上，人看到的长度， 不一样。1cm的高度，电脑上看起来小一点，但是手机上看起来大一点。

The em and ex units depend on the font and may be different for each element in the document.

The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.

The ex unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font. The x-height is, roughly, the height of lowercase letters such as a, c, m, or o. Fonts that have the same size (and thus the same em) may vary wildly in the size of their lowercase letters, and when it is important that some image, e.g., matches the x-height, the ex unit is available.

The px unit is the magic unit of CSS. It is not related to the current font and usually not related to physical centimeters or inches either. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like an e-book reader? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

In fact, CSS requires that 1px must be exactly 1/96th of an inch in all printed output. CSS considers that printers, unlike screens, do not need to have different sizes for px in order to print sharp lines. In print media, a px thus not only has the same visual appearance from one device to another, but indeed it is measurably the same.

CSS also defines that raster images (such as photos) are, by default, displayed with one image pixel mapping to 1px. A photo with a 600 by 400 resolution will be 600px wide and 400px high. The pixels in the photo thus do not map to pixels of the display device (which may be very small), but map to px units. That makes it possible to exactly align images to other elements of a document, as long as you use px units in your style sheet, and not pt, cm, etc.