css

По мне на сейчас простой способ писать css не совсем с нуля. Ну, и basecss – совсем аскетичный способ для того же.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

• https://www.w3schools.com/w3css/w3css_references.asp - референс к w3-css-ке.
• https://www.w3schools.com/w3css/w3css_buttons.asp - кнопочге в w3.css
• https://www.w3schools.com/w3css/w3css_templates.asp - css-темплейты.
• http://www.w3schools-fa.ir/w3css/w3css_sidebar.html - сайдбар
• https://www.w3schools.com/w3css/w3css_sidebar.asp - сайдбар по кнопочке и пробовалка к нему.
• https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_overall -
• https://www.quanzhanketang.com/w3css/w3css_responsive.html- всякие делилки экрана, которые потом превращаются в одну колонку на узком экране.

• https://www.w3.org/TR/css-values-4/#lengths
• https://www.w3.org/TR/css-values-3/#lengths

Ниже частичное и по ходу, не точно по доке.

Абсолютные:

• px — пиксели, 1 px = 1/96 in;
• pt — пункты, 1 pt = 1/72 in;
• mm — миллиметры;
• in — дюймы;
• cm — сантиметры;
• Q — четверть миллиметра 1 Q = ¼ mm
• pc — пики, 1 pc = 12 pt.

(кажется, из этих использовала только px и pt)

Относительные:

• % — размер в % относительно ширины родительского блока;
• lh — высота строки элемента;
• ch — ширина символа 0;
• ex — x-высота шрифта, измеряется в высоте символа x в нижнем регистре,
• vh — % высоты окна браузера;
• vw — % ширины окна браузера;
• vmax — большее значение высоты vh или ширины окна браузера vw;
• vmin — меньшее значение высоты vh или ширины окна браузера vw;
• em — размер шрифта относительно размера шрифта родительского элемента;
• rem — размер шрифта относительно размера шрифта корневого элемента ("root em" — "корневой em".).

(из этих - применяла % и em. А возможностей-то, возможностей…)

Пример позволяет ставить прозрачность, не задевая текст

background-color:rgba(0,0,0, 0.5);

How to avoid showing invisible text

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)

https://web.dev/codelab-avoid-invisible-text - развитие темы.

main {
  min-height: calc(100vh - 2em);
}

https://baradusov.ru/posts/2018/math-and-frontend - css-трюки в некотором количестве.

background-image: linear-gradient(to top right, transparent 45%, #fff, transparent 54%)

To horizontally center a block element (like <div>), use margin: auto; https://www.w3schools.com/css/css_align.asp - про горизонтальное и вертикальное выравнивание, в том числе отдельно про картинки.

Тож центрировать что попало :)

display: flex;
justify-content: center;
align-items: center;
width: max-width;