Ответ
- Inline-стили – через атрибут
style:
<div style="color: red; font-size: 16px;">Текст</div>- Тег
<style>– внутри HTML:
<style>
.text { color: blue; }
</style>
<p class="text">Текст</p>- Внешний CSS – через
<link>:
<link rel="stylesheet" href="styles.css">- CSS-модули – для изоляции стилей в компонентах (React/Vue):
import styles from './Component.module.css';
<div className={styles.header}>...</div>- CSS-in-JS – например, styled-components:
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
`;- CSS-препроцессоры (Sass/Less):
$primary: #333;
.header { color: $primary; }- CSS-фреймворки (Bootstrap, Tailwind):
<button class="btn btn-primary">Кнопка</button>- Атрибут
class– для применения готовых стилей.
Ответ 18+ 🔞
О, смотри-ка, какие варианты подвезли, чтобы твой HTML не выглядел как голый зад на морозе! Ну, блядь, давай разбираться, что тут у нас за способы приодеть эту раздолбанную верстку.
Первый способ — по-быстрому, в лоб.
Просто суешь стили прямо в тег, через style. Быстро, грязно, но иногда надо, когда по-другому нихуя не получается. Только не увлекайся, а то потом сам в этом коде разбираться будешь, как в говне палкой.
<div style="color: red; font-size: 16px;">Текст</div>Второй — чуть почище, но всё ещё в том же файле.
Пихаешь тег <style> куда-нибудь в <head> и там уже пишешь свои правила. Уже лучше, но если проект растёт — превращается в свалку, блядь.
<style>
.text { color: blue; }
</style>
<p class="text">Текст</p>Третий — уже серьёзно, отдельный файл.
Подключаешь через <link> внешний CSS. Вот это уже по-взрослому, стили отдельно, логика отдельно. Красота, ёпта!
<link rel="stylesheet" href="styles.css">Четвёртый — для модных ребят на React/Vue.
CSS-модули, чтобы стили одного компонента не лезли, куда не просят. Изоляция, блядь, как в инфекционке!
import styles from './Component.module.css';
<div className={styles.header}>...</div>Пятый — вообще высший пилотаж, CSS-in-JS.
Типа styled-components — пишешь стили прямо в JavaScript, да ещё и с логикой. Выглядит мощно, но новичок посмотрит — и пиздец, волосы дыбом.
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
`;Шестой — для тех, кто любит сахарку.
Препроцессоры вроде Sass или Less. Переменные, миксины, вложенность — удобно, но надо ещё и компилить это дело перед использованием.
$primary: #333;
.header { color: $primary; }Седьмой — для ленивых, но эффективных.
Фреймворки типа Bootstrap или Tailwind. Накинул классы — и уже выглядит прилично, не изобретая велосипед. Хотя, блядь, иногда кажется, что классы эти выдумал шизофреник.
<button class="btn btn-primary">Кнопка</button>Ну и восьмой — классика, атрибут class.
Просто назначаешь классы и описываешь их в CSS. Старо, но работает, как швейцарские часы, если, конечно, не устраивать ад из селекторов.
В общем, выбирай, что душе угодно, только не смешивай всё в одну кучу, а то получится пиздопроёбина, в которой ни черта не разберёшь!