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. А возможностей-то, возможностей…)

Тырено из https://t.me/katerina_profrontend

Многострочный, тут обрезали на третьей строке.

p {
   display: -webkit-box;
   max-width: 450px;
   -webkit-line-clamp: 3;
   overflow: hidden;
   -webkit-box-orient: vertical;
}

Вебкитовости настораживают, конечно.

• -webkit-line-clamp - количество строк;
• overflow: hidden; - скрывает текст за пределами;
• display: -webkit-box и -webkit-box-orient: vertical; - устаревшие свойства, но без них многоточие работать не будет.

Однострочный:

.text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

• white-space: nowrap; - предотвращает перенос строк внутри элемента;
• overflow: hidden; - управляет отображением содержимого, которое выходит за границы элемента
• text-overflow: ellipsis; - определяет, как отображается переполненный текст, который не помещается в пределах элемента

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

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;