Все, что вам нужно знать - остальное гуглите

CSS очень прост в изучении, реализации и использовании, если вы знаете основные концепции. С помощью Google и Stackoverflow вы можете в полной мере использовать HTML и CSS без бесчисленных часов запоминания.

Это краткий компактный обзор CSS, который поможет вам в этом путешествии. (Часть курса Гарвардского университета CS50 по веб-программированию с использованием Python и JavaScript)

Объектная модель документа (DOM)

Удобный способ визуализации взаимосвязи элементов HTML с помощью древовидной структуры.

HTML-элементы

  • Заголовки
  • Связь
  • Упорядоченный/неупорядоченный список
  • Изображение
  • Стол

Формы

Формы используются для сбора информации от пользователей. Вы можете разрешить пользователям вводить информацию с помощью HTML-формы, которая может содержать несколько различных типов ввода.

Типы ввода форм:

  • Текст
  • Пароль
  • Радио
  • Представлять на рассмотрение
<form>
    <input type="text" placeholder="First Name" name="first">
    <input type="password" placeholder="Password" name="password">
    <div>
        Favorite Color:
        <input name="color" type="radio" value="blue"> Blue
        <input name="color" type="radio" value="green"> Green
        <input name="color" type="radio" value="yellow"> Yellow
        <input name="color" type="radio" value="red"> Red

    </div>
    <input type="submit">
</form>

CSS (каскадные таблицы стилей)

CSS используется для настройки внешнего вида веб-сайта.

Как применить CSS:

  • тип элемента — h1{...}
  • id — <h1 id="first-header">Hello!</h1> — #first-header{...}
  • класс — <h1 class="muted">Hello!</h1> — .muted{...}

Порядок специфики: Встроенный стиль › идентификатор › класс › тип элемента

Селекторы CSS:

Одним из важных селекторов CSS является «селектор псевдокласса», особенно эффект наведения.

 <style>
            button {
                background-color: red;
                width: 200px;
                height: 50px;
                font-size: 24px;
            }

            button:hover {
                background-color: green;
            }
        </style>

Отзывчивый дизайн

  • окно просмотра
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • медиазапросы
<style>
    @media (min-width: 600px) {
        body {
            background-color: red;
        }
    }

    @media (max-width: 599px) {
        body {
            background-color: blue;
        }
    }
</style>
  • флексбокс
<style>
    #container {
        display: flex;
        flex-wrap: wrap;
    }

    #container > div {
        background-color: green;
        font-size: 20px;
        margin: 20px;
        padding: 20px;
        width: 200px;
    }
</style>
  • сетка
<style>
    .grid {
        background-color: green;
        display: grid;
        padding: 20px;
        grid-column-gap: 20px;
        grid-row-gap: 10px;
        grid-template-columns: 200px 200px auto;
    }

    .grid-item {
        background-color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
    }
</style>

Начальная загрузка

Существуют уже написанные библиотеки, которые могут еще больше упростить стилизацию веб-страницы. Наиболее популярным является бутстрап.

Мы можем включить начальную загрузку, добавив одну строку в заголовок HTML-файла:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

Sass (синтаксически потрясающие таблицы стилей)

Sass — это язык, который позволяет нам писать CSS более эффективно. Чтобы использовать Sass, мы должны загрузить программу под названием Sass на наши компьютеры. После настроек в файлах .scss в терминале скомпилируйте файл в файл .css с помощью приведенной ниже команды. ( variables.scss имя файла)

sass variables.scss:variables.css

Компиляция каждый раз, когда мы вносим изменения, довольно утомительна. Автоматизируйте процесс с помощью приведенной ниже команды.

sass --watch variables.scss:variables.css

Почему Sass проще, чем CSS?

  • $переменный оператор
$color: red;

ul {
    font-size: 14px;
    color: $color;
}

ol {
    font-size: 18px;
    color: $color;
}
  • Интуитивное вложение: нет необходимости в селекторах потомков CSS
div {
    font-size: 18px;

    p {
        color: blue;
    }

    ul {
        color: green;
    }
}
  • Наследование
%message {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}

.success {
    @extend %message;
    background-color: green;
}

.warning {
    @extend %message;
    background-color: orange;
}

.error {
    @extend %message;
    background-color: red;
}