Css основы: основы CSS — Основы CSS — HTML Academy

основы CSS — Основы CSS — HTML Academy

CSS-правила

CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {
  свойство: значение;
  свойство: значение;
}

Для комментариев в CSS используются символы /* и */.

Селекторы

Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.

.feature-kitten {
  padding-top: 60px;
}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h2 { color: red; }
.info { color: blue; }

На странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели. Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже.

Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно сгруппировать через запятую.

Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a {…}
  .menu ul {…}
  .post .title {…}

Свойства и значения

Список свойств и значений находится внутри фигурных скобок CSS-правила. Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно.

.feature-kitten {
  padding-top: 60px;
}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

Наследование

Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены.

Составные свойства

В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами. Например, свойство font. Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие.

font: 16px/26px "Arial", sans-serif;

Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства.

Типы значений: абсолютные и относительные

Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями. Пиксели, px, используют чаще всего, остальные абсолютные единицы почти не применяют. Примеры абсолютных единиц измерения:

font-size: 1cm;
font-size: 10mm;
font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

Стили по умолчанию

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.

Каскадирование

Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента. Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил. Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью. Например, есть такой элемент в разметке:

<p>Зелёный - мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;
margin: 1em 0;

Конфликт свойств

На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:

ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

Браузеру нужно как-то решать, какими будут итоговые значения конфликтующих свойств. Конфликт разрешается максимум за три шага. Если на текущем шаге определиться не удалось, то выполняется следующий шаг. Вот эти шаги:

1. Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
2. Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
3. Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

Встраивание и подключение внешних стилей

Внешние стили подключаются через тег <link>

<link rel="stylesheet" href="style.css">

Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:

<head>
  <style>
    CSS-код
  </style>
</head>

Такой способ используется для оптимизации загрузки страницы, ведь в таком случае браузер не будет отправлять дополнительных запросов на сервер.

Встраивание в атрибут style:

<div>&lt/div>

Свойства и значения, прописанные таким образом, применятся точечно к одному элементу.

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

Продолжить

Основы CSS — Основы HTML, CSS и веб-дизайна

Основы HTML, CSS и веб-дизайна

HTML задаёт структуру. CSS задаёт оформление.

CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.

CSS расшифровывается как Cascading Style Sheets. Сейчас мы разберёмся, как задавать стили и причём тут слово «каскад».

Допустим, у нас есть такой HTML:

<p>На территории, где ныне расположен Нью-Йорк, задолго
до появления здесь европейцев жили индейские племена
Манахаттоу и Канарси.</p>

Это всё — один абзац, но я добавил переводы строк, чтобы текст просто удобнее было читать на этой странице. В HTML перевод строки не транслируется в реальный перевод строки в итоговой странице. Вместо этого он превратится в один пробел. Несколько переводов строки также превратятся в лишь один пробел. Ну, и несколько пробелов тоже превратятся в один пробел.

Все варианты ниже приведут к одному результату:

<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p>

<p>На территории, где ныне расположен Нью-Йорк, задолго
до появления здесь европейцев жили индейские племена
Манахаттоу и Канарси. </p>

<p>На территории, где ныне расположен Нью-Йорк, задолго

до появления здесь европейцев жили индейские племена

Манахаттоу и Канарси.</p>

<p>На территории,    где ныне расположен Нью-Йорк,   задолго
до появления    здесь европейцев     жили индейские племена
Манахаттоу и         Канарси.</p>

Для реального перевода строки можно использовать одиночный тег <br>.

Мы отвлеклись. Итак, мы хотим добавить к нашему HTML-коду стиль. С помощью CSS-кода ниже мы сделаем так, что у всех элементов p текст внутри будет красным, а размер шрифта будет 20 пикселей:

p {
  color: red;
  font-size: 20px;
}

Вот живой пример:

See the Pen Basic CSS by Hexlet (@hexlet) on CodePen.

1. Первая часть — это селектор (selector). Им мы выбираем то, к чему применять стиль.
2. Набор стилей указан после селектора в фигурных ({, }) скобках.
3. Набор состоит из пар свойство: значение (property: value).

Классы и идентификаторы

Но что если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).

<p>На территории, где ныне расположен Нью-Йорк,
задолго до появления здесь европейцев жили индейские
племена Манахаттоу и Канарси.</p>

<p>Это подтверждают находки наконечников стрел и
других артефактов в районах города, не застроенных
зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк.
</p>

<p>Европейские поселения появились здесь в 1624 году.</p>

Мы указали класс у двух абзацев. Теперь нам нужно обновить CSS, потому что сейчас он не учитывает класс и применяет стили ко всем абзацам. Укажем класс:

p. red {
  color: red;
  font-size: 20px;
}

Селектор p.red означает «все элементы типа p с классом red».

То есть если мы добавим класс red к элементу другого типа, например, <a href="https://goo.gl">Goo</a>, то такой элемент не станет красным: стиль работает строго для p.

Можно освободить стиль от такого ограничения:

.red {
  color: red;
  font-size: 20px;
}

Селектор .red означает «все элементы любого типа с классом red».

Допустим, визуальный стиль нашей страницы изменился, и важные куски текста теперь выделяются не красным цветом с увеличенным шрифтом, а зелёным цветом и курсивом.

.red {
  color: green;
  font-style: italic;
}

Отлично, но название класса теперь не имеет особого смысла. Это больше не red на самом деле. Придётся поменять его на green и изменить класс в HTML у всех соответствующих элементов.

Но идея лучше — изначально использовать в названиях классов семантический смысл, а не особенность реализации. Например, если таким образом мы выделяли более важные части текста, то стоило назвать класс important:

.important {
  color: green;
  font-style: italic;
}

Теперь при изменении цветов или любых других деталей этого стиля нам не нужно волноваться о названии: смысл не поменяется, поменяется лишь конкретная реализация.

Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи.

Другой пример — логотип сайта где-нибудь наверху.

Для уникальных «разовых» элементов стоит использовать идентификатор:

<h2>История города Нью-Йорк</h2>

<p>На территории, где ныне расположен Нью-Йорк,
задолго до появления здесь европейцев жили индейские
племена Манахаттоу и Канарси. </p>

<p>Это подтверждают находки наконечников стрел и
других артефактов в районах города, не застроенных
зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк.
</p>

А так можно указать стиль:

h2#article-title {
  font-family: Georgia, serif;
  color: #1050ff;
}

Структура и идея такие же, как с классами, но вместо точки . используется решётка #. В этом стиле мы задали шрифт с засечками Georgia и синий цвет в HEX-формате. Введите в гугле «color picker», чтобы поработать с интерактивной палитрой, где можно сгенерировать коды для разных цветов.

Последний пример немного избыточен, потому что по правилам (спецификации HTML) элемент с идентификатором должен быть уникальным на странице. То есть нет необходимости выбирать именно h2, достаточно сделать так:

#article-title {
  font-family: Georgia, serif;
  color: #1050ff;
}

Но следить за тем, чтобы идентификаторы были уникальными и не повторялись — ваша задача. Браузер никак не «пожалуется» на нарушение этого правила.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Основы CSS — Основы современной вёрстки

Основы современной вёрстки

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

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

В этом уроке мы разберём ту часть аббревиатуры, которая относится к таблицам стилей. Что такое каскадность и как это работает вы сможете прочитать в следующем уроке.

Стили CSS

Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название стиля: значение;.

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмём следующую HTML-разметку:

<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p {
  color: red;
  font-size: 20px;
}

Что означает эта таинственная запись выше? Её можно условно разбить на три основные составляющие:

1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
2. Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберём некоторые свойства, которые помогут вам оформлять текст:

• font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие ещё стили указаны у текста.
• color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
• text-align. Свойство, устанавливающее положение текста. Может принимать одно из следующих значений: left, right, center, justify.

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

• использование специального файла;
• использование тега <style> внутри HTML-разметки;
• записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберёмся с каждым способом отдельно.

Использование отдельного CSS-файла.

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нём становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Добавим основную информацию в файл index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>

</body>
</html>

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег link. У данного тега необходимо указать атрибут href, значением которого будет путь до файла main.css. Тег link указывается в секции head.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href=". ./css/main.css">
</head>
<body>

</body>
</html>

Дополнительно разберём эту запись: ../css/main.css. Её можно условно разбить на три составляющие:

1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html, поэтому мы «выходим» из неё в директорию site.
2. css/ — переход в директорию css.
3. main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

Вторым способом использования CSS является использование стилей в специальном теге style. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег style обычно указывается внутри секции head. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>

    <style>
        p {
          color: red;
          font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили ещё до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.

Inline-стили

Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придётся для каждого указывать отдельно. Это приведёт к постоянному копированию стилей.

Возьмём прошлый пример и добавим inline стили:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только чётные или нечётные элементы и так далее.

Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.
3. Селектор по идентификатору. Ещё один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.

Рассмотрим все три селектора на реальном примере:

Файл index. html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <main>
        <h2>Заголовок с идентификатором</h2>
        <p>Просто параграф без класса или идентификатора</p>
    </main>
</body>
</html>

Файл main.css

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}

.content {
  background-color: black;
}

p {
  color: white;
}

После применения этих стилей получится следующая картина:

• Чёрный фон секции main. Для этого использовали класс content и селектор .content;
• Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;
• Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

В реальной разработке не всегда удаётся пользоваться только этими тремя видами селекторов в том виде, в которых вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберём на примере.

<section>
    <h3>Новости</h3>

    <article>
        <h3>Новость 1</h3>
        <p>Текст новости</p>
    </article>

    <article>
        <h3>Новость 2</h3>
        <p>Текст новости</p>
    </article>
</section>

<section>
    <h3>Интересные истории</h3>

    <article>
        <h3>История 1</h3>
        <p>Текст истории</p>
    </article>

    <article>
        <h3>История 2</h3>
        <p>Текст истории</p>
    </article>
</section>

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h3 {
  font-size: 32px;
}

Разберём, что за селектор был указан. Здесь мы указали комбинацию трёх селекторов: .news, article и h3. Каждый из них по отдельности вы уже знаете. Разделив их пробелом мы сказали браузеру: «Возьми все заголовки h3 из article, который лежит внутри элемента с классом news и примени к нему стили». Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов.

Важно понимать, что такая запись . news article h3 выберет все заголовки второго уровня во всех article, которые лежат внутри блока с классом .news. Давайте немного видоизменим вёрстку, чтобы это проверить.

<section>
    <h3>Новости</h3>

    <article>
        <h3>Новость 1</h3>
        <p>Текст новости</p>
    </article>

    <article>
        <h3>Новость 2</h3>
        <p>Текст новости</p>
        <section>
            <h3>Похожие новости</h3>

            <article>
                <h3>Похожая новость 1</h3>
                <p>Текст новости</p>
            </article>
        </section>
    </article>

</section>

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри article, которые находятся в блоке с классом .news.

Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придёт дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учёта всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те article, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих article. Это делается следующим образом:

.news > article > h3 {
  font-size: 24px;
}

Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный, или как его ещё называют, более специфичный селектор.

Дополнительное задание

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.

• Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Учебник HTML и CSS для новичков

Для того, чтобы сделать сайт, нужно знать много разных
веб языков.

Языки HTML и CSS предназначены для верстки сайтов
(верстка — это размещение элементов сайта по нужным местам).
Язык PHP нужен для программирования сайта
(с его помощью можно, к примеру, сделать регистрацию пользователей).
Язык JavaScript нужен для того, чтобы ‘оживить’ сайт: к примеру, сделать
меняющиеся картинки (слайдер).

Язык HTML

Язык HTML — это основа web сайтов, с его помощью
создается каркас страницы, которую вы видите в браузере.

Если сравнивать страницу сайта и обычную бумажную книгу,
то на сайте, как и в книге, есть абзацы и заголовки.
В книге есть название всей книги (по сути самый главный заголовок),
есть названия глав, параграфов в этих главах и так далее.

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

Что такое HTML теги?

HTML теги — это специальные команды для браузера.
Они говорят ему, что, к примеру, следует считать заголовком страницы,
а что абзацем.

Теги строятся по такому принципу: уголок <, потом имя тега,
а потом уголок >, вот так: <имя тега>. Имя тега может состоять
из английских букв и цифр. Примеры тегов:
<h2>, <p>, <b>.

Теги обычно пишутся парами — открывающий тег и соответствующий ему закрывающий.
Разница между открывающим и закрывающим тегами в том, что
в закрывающем теге
после уголка < стоит слеш /.

К примеру, <p> — так я открыл тег p, а так —
</p> —
я его закрыл. Все, что попадает между открывающим и закрывающим
тегами, подпадает под воздействие нашего тега.

Бывают теги, которые не нужно закрывать,
например, <br> или <img>.

Атрибуты

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

Атрибуты размещаются внутри открывающего тега в таком формате:
<тег атрибут1=»значение» атрибут2=»значение»>.

Кавычки могут быть любыми — одинарными или двойными,
допустимо их вообще их не ставить, если значение атрибута
состоит из одного слова (но это не желательно).

Язык CSS

Язык CSS расширяет возможности языка HTML.
Он позволяет менять цвета, шрифты, фон, в общем заниматься
красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

Итак, вооружившись некоторыми предварительными теоретическими знаниями,
приступим к подробному изучению языка HTML на практике.

Основы CSS

Приветствую! Это Андрей Панин, и я продолжаю своё путешествие к глубинам (ну, или к вершинам, кому как нравится) IT и программирования. Буквально недавно я окончил курс по основам HTML, поэтому что будет логичным продолжением? Правильно, CSS. Кое-что я о нём знаю, теперь пришло время это «знание» сделать ровным и удобочитаемым. Как раз то же самое стили CSS делают с веб-страницей. Если теги и атрибуты HTML — это магия, то стили CSS — это магия «на расстоянии». Просто потому что стили «спрятаны» не в самом файле страницы, а в соседнем, как бы «за стенкой». И, тем не менее, малейшее изменение в стилях тут же отображается на странице. Как это получается? Давайте разбираться по порядку.

Урок 1. Введение. Подключение CSS
Здесь мы для начала немного заглянем назад: в корневую структуру HTML-документа, а также вспомним, что такое «родительские», «дочерние» и «сестринские» элементы. А потом начинается главное: именно здесь вводятся понятия селекторов, объявлений и правил CSS, а также CSS-свойств и их значений, объясняется, как правильно связать («подключить») стили к индексному файлу, причём тремя (!!) способами.
А ещё Николай Чернобаев (да, именно он автор этого курса) показал, как на самом деле можно и нужно пользоваться инструментарием разработчика в браузере. Да, действительно, стили здесь как на ладони.

Урок 2. Селекторы CSS
Селекторы — это и есть суть CSS. Их 10 разновидностей, и в этом уроке они рассмотрены буквально под микроскопом: как устроены, как работают. Примеры очень простые и наглядные, всегда можно вернуться и повторить. Николай предельно понятно объясняет, вопросов не остаётся от слова «совсем». Я читал онлайн-справочник по CSS, но ничего не понял тогда толком. А здесь не просто понял, а ПОНЯЛ! И вы поймёте, обязательно.

Урок 3. Центрирование блочных элементов
А вот это уже, собственно, пошла вёрстка: контейнеры и их свойства. Это действительно как кирпичики, на которых строятся практически любые сайты. Делов-то: создать контейнер, выставить внешние и/или внутренние отступы, задать ширину и центрирование… А страница уже совсем иначе смотрится! Если вот так всё по кирпичикам разбирать, глядишь, всю вёрстку можно освоить!

Урок 4. Структура сайта: свойства float и clear
Да, да, я в курсе, что в 2018 году уже никто этими свойствами не пользуется и вёрстка строится на совсем иной основе. Но принципы работы понимать желательно. А когда всё это проделываешь своими руками, в голове выравнивается материал, точно так же, как блоки на странице. И ведь хорошо смотрится итог, и даже есть какое-то подобие адаптивности. Мне было интересно.

Урок 5. Каскадность в CSS
Уффф… Это уже не программирование, это «санта-барбара» какая-то. Действительно сложный (на мой взгляд) материал о наследовании свойств и о конфликтах стилей. Единственный разумный вывод, который напрашивается: чем проще и структурированнее будет ваша будущая таблица стилей, тем лучше для вас как для разработчика. И для тех людей, которые, возможно, будут вносить правки в вёрстку после вас. Если не всё понятно с первого раза, повторите просмотр.

Урок 6. Использование шрифтов CSS
Так вот что на самом деле значит «поиграться со шрифтами»! Настраивать разные красивые шрифты для разных блоков текста, с таким расчётом, чтобы они подгружались с сайта, а не с компьютера пользователя — сложно. И интересно. Это ещё один способ сделать ваш сайт красивым, привлекательным, запоминающимся. Главное — не переборщить, но это уже больше к дизайнеру. А уж вы настроите всё как надо, правильно?

Урок 7. Цвета и размеры в CSS
А вот этот материал оказался так или иначе знакомым. Определение и переопределение цветов и размеров в файле стилей, возможность и необходимость вносить изменения во внешний вид страницы, просто подправляя значения этих свойств — то, с чем я столкнулся давным-давно, ещё в первых своих интернет-проектах. К счастью, сейчас уже не надо перебирать селекторы наугад, теперь они ясны и понятны. Правда, за это время добавились em и rem как единицы измерения, а также размеры относительно области просмотра (это уже больше про вёрстку для мобильных устройств). Сколько, однако, возможностей… CSS — это действительно как будто палитра художника, только вместо кистей и красок строки кода, а вместо холста страница браузера. Валидных вам рисунков, друзья!

Итак, курс по основам CSS завершён. Впереди меня ждёт углубление и детализация: SAAS и Flexbox. Я предполагаю, что это будет ещё сложнее. И ещё интереснее. До встречи в новых статьях!

CSS уроки — основы обучения для начинающих

Приветствую вас на курсе по изучению языка стилей CSS (CSS3). За курс мы с вами познакомимся с основами css, изучим понятие селекторов и разработаем небольшой веб сайт на основе HTML и CSS. В первом уроке мы поговорим про CSS, узнаем что он делает и на что он способен.

Полезные ссылки:

Информация про CSS

CSS является языком, что отвечает за оформление вида страницы. Он позволяет указать стилевое оформление каждого из HTML элементов. Также за счёт CSS можно указывать стили для файлов с XML-разметок: XUL, SVG и прочие.

Чистый HTML-документ выглядит ужасно без использования стилей. Каскадные таблицы стилей или же CSS помогает указать всё оформление для веб сайта. Используя лишь HTML и CSS можно создать любой дизайн сайта, какой вам только будет нужен.

Написание CSS

CSS-стиль – это определённое правило, что подсказывает веб-обозревателю правила форматирования для каждого элемента. Под форматированием подразумевается: изменение цвета текста, фона элемента, шрифта, теней, позиции на экране и тому прочее.

Чтобы создать рабочий CSS-стиль, нужно правильно указать 2 основные части:

• Селектор – указывает целевой элемент, которому назначается стиль;
• Блок стилей – подсказывает браузеру нужные правила форматирования.

Пример:

div {
	background-color:red;
	width: 100px;
	height: 60px;
}

В примере селектором выступает тег div. Это означает, что все стили в блоке будут применены к каждому div-элементу на странице.

В фигурных скобках всегда указываются стили. Они должны стоять строго в скобках, а не за их пределами. В представленном примере на выходе получится div блок c красным фоном, шириной 100 и высотой 60 пикселей. 

Все команды имеют свойство, а за ним идёт значение. Иллюстрация на основании того же примера:

background-color:red; /* , где
background-color – это свойство;
red – значение. */

Свойство задаёт определённый стиль. Подобных свойств очень много, в нашем случае – это цвет фона. Значение всегда указывается после двоеточия. По примеру, свойству background-color установлено значение red. Таким образом перекрашивается цвет фона в красный.

По завершению команды всегда ставится точка с запятой. Этот символ является делителем, который отделяет между собой команды.

Список различных стилей принято называть таблицей стилей или CSS. Есть несколько разных методов указания стилей. 

Атрибуты html и стили css

Большинство HTML-элементов поддерживают установку стилей посредством атрибутов. Пример, отдельным элементам есть возможность указать атрибуты width и height (ширина с высотой). Атрибуты указываются прямо в HTML-файле. С ними нужно быть осторожными. 

С одной стороны – это удобный способ указать стили для конкретного блока (значения в атрибутах имеют высший приоритет), все прочие теги, подпадающие под общие селекторы, будут иметь стили с CSS-файла. 

С другой стороны – это портит HTML-код, он перестаёт быть чистым. В случае редактирования неудобно находить и менять стили по разным файлам, появляется излишняя путаница.

Проверка валидности

Во время создания стилей нередко появляются неясности в отношении правильности их указания и корректности. В данном случае на помощь приходит валидатор CSS, доступный по этой ссылке.

План курса

В курсе по изучению языка стилей CSS для начинающих мы научимся прописывать CSS3 стили, изучим основы CSS, научимся работать с селекторами и по итогу разработаем множество мини проектов на HTML и CSS.

К концу видеокурса CSS у вас будут стойкие знания в самом языке и понимание как можно сделать красивый веб сайт.

Программа обучения

Также на нашем сайте есть более углубленная программа по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack по этой ссылке.

Таблица стилей CSS со шпаргалкой основные свойств

Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS.

Чтобы получить структурированные знания и применять HTML+CSS+JS максимально эффективно для своих проектов и для проектов заказчика необходимо регулярно обучаться и поддерживать свой уровень.

Но хорошо иметь основу. Многие, обучаясь самостоятельно, упускают многие базовые вещи и затем страдают клиенты, а человек не понимает, почему им недовольны.

Чтобы таких ситуаций не возникало необходимо получить базовые навыки в правильной последовательности. Если вы занимаетесь разработкой сайтов и хотите в этом дальше расти, то рекомендую посмотреть в сторону обучения в онлайн-школах.

Это не отнимает время от основной работы, но с помощью преподавателей, которым можно задать вопрос, вы будете расти очень быстро.

Одна из таких онлайн-школ — это Нетология и мне приглянулся курс «Front-end разработчик с нуля«, также, в качестве альтернативы от другой школы Skillbox образовательный курс «Front-end разработчик«. Обязательно изучите их внимательно, а особенно преподавателей, которые ведут этот курс.

1. Базовые вещи

Начну с самых основ. Когда я начинал вести этот сайт, я написал небольшие уроки по изучению таблиц стилей CSS. Уроки хорошо подойдут как для тех кто только начинает, так и для тех кто уже кое-что знает, чтобы освежить свои знания. Там всё оформлено в картинках и на реальных примерах.

Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал смурфика на css, если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.

Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.

У меня на сайте есть очень много примеров в которых используется CSS. Только категория CSS и категория CSS3 вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.

Мои уроки об основах каскадных стилей CSS

2. Шпаргалки CSS и CSS3

Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?

Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.

К счастью, хорошие люди составили очень полезные шпаргалки, которые не раз меня выручали. Достаточно один разобраться где что находится и затем поиск нужных свойств не составляет никаких трудностей.

Шпаргалки CSS и CSS3

Краткая шпаргалка для CSS (v2), где можно найти все самые основные свойства. Отлично подойдет для начинающих.

СКАЧАТЬ ШПАРГАЛКУ CSS

Подробная шпаргалка для всех свойств CSS3. Подойдет как для начинающих, так и для опытных веб-мастеров и веб-дизайнеров.

СКАЧАТЬ ШПАРГАЛКУ CSS3

Это просто незаменимые материалы при верстке и разработке дизайна сайта. Время на то, чтобы отвлекаться и искать в интернете описание свойств уменьшается во много раз.

Правда, как Вы понимаете, чем больше верстаешь сайты или занимаешься дизайном, тем меньше приходится заглядывать в эту подсказку, так как в памяти постоянно остаются все необходимые свойства. Но всё же иметь под рукой этот набор шпаргалок будет не лишним.

Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее 😆 .

Дополнение к уроку — HTML шпаргалки

Помимо CSS шпаргалок также есть HTML шпаргалки. Если забыли какой-нибудь тег, Вы всегда их можете подсмотреть в такой HTML шпаргалке. Ссылка на скачивание появится после того как Вы нажмете на одну из кнопок социальных сетей ниже этого видео.

Вывод

Если Вы начинающий, и только осваиваете азы CSS, то Вам отлично подойдут мои уроки по CSS. Материал в них изложен кратко и Вам нужно лишь повторить своими руками то, что о чем урок. А также более опытные веб-мастера смогут освежить свои знания быстро просмотрев все уроки. Также Вы можете скачать шпаргалки CSS и CSS3, которые помогут Вам не забыть основные свойства и всегда будут под рукой, в случае чего Вы можете быстро посмотреть и вспомнить необходимую информацию.

Ну и конечно же, основные пункты статьи:

1. Базовые вещи или основы CSS
2. Шпаргалки CSS и CSS3
3. Дополнение к уроку — HTML шпаргалки

Успехов!

С Уважением, Юрий Немец

Учебник CSS

CSS — это язык, который мы используем для стилизации HTML-документа.

CSS описывает, как должны отображаться элементы HTML.

Это руководство научит вас CSS от начального до продвинутого.

Начните изучать CSS прямо сейчас »

Примеры в каждой главе

Это руководство по CSS содержит сотни примеров CSS.

В нашем онлайн-редакторе вы можете редактировать CSS и нажимать кнопку, чтобы просмотреть результат.

Пример CSS

тело
{
цвет фона: голубой;
}

h2
{
цвет белый;
выравнивание текста: центр;
}

п.
{

семейство шрифтов: вердана;
размер шрифта: 20 пикселей;
}

Попробуй сам »

Щелкните кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Примеры CSS

Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете редактировать CSS и нажимать на
кнопку, чтобы просмотреть результат.

Перейти к примерам CSS!

Использование меню

Мы рекомендуем читать это руководство в последовательности, указанной в меню.

Если у вас большой экран, меню всегда будет слева.

Если у вас маленький экран, откройте меню, щелкнув значок верхнего меню ☰.

Шаблоны CSS

Мы создали для вас несколько адаптивных шаблонов W3.CSS.

Вы можете изменять, сохранять, публиковать и использовать их во всех своих проектах.

бесплатных шаблонов CSS!

CSS-упражнения и викторина

Проверьте свои навыки CSS в W3Schools!

Начните упражнения по CSS!

Начать викторину по CSS!

Ссылки CSS

На W3Schools вы найдете полные ссылки CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многим другим.

Экзамен CSS — Получите свой диплом!

Интернет-сертификация W3Schools

Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.

Уже выдано более 30 000 сертификатов!

Получите сертификат »

Сертификат HTML документирует ваши знания HTML.

Сертификат CSS свидетельствует о ваших знаниях в области CSS.

Сертификат JavaScript документирует ваши знания JavaScript и HTML DOM.

Сертификат Python документирует ваши знания Python.

Сертификат Data Science Certificate документирует ваши знания в области Data Science.

Сертификат jQuery подтверждает ваши знания о jQuery.

Сертификат SQL документирует ваши знания SQL.

Сертификат PHP подтверждает ваши знания PHP и MySQL.

Сертификат Java документирует ваши знания Java.

Сертификат XML документирует ваши знания XML, XML DOM и XSLT.

Сертификат Bootstrap подтверждает ваши знания о среде Bootstrap.

Изучите CSS за 5 минут

Краткое руководство по языку дизайна в Интернете.

Хотите пройти наш бесплатный курс CSS? Кликните сюда!

CSS (каскадные таблицы стилей) — это то, что делает веб-страницы красивыми и презентабельными. Это неотъемлемая часть современной веб-разработки и обязательный навык для любого веб-дизайнера и разработчика.

В этой статье я дам вам краткое введение, которое поможет вам начать работу с CSS.

Мы также запустили бесплатный полноценный курс CSS на Scrimba. Щелкните здесь, чтобы проверить это.

Я предполагаю, что у вас есть базовое понимание HTML, но кроме этого для этого руководства нет никаких предварительных требований.

Начало работы

Давайте начнем с изучения того, как мы можем включить CSS в наши проекты. Обычно это можно сделать тремя способами.

1. Встроенный CSS

Во-первых, мы можем включить CSS непосредственно в наши элементы HTML.Для этого мы используем атрибут стиля , а затем предоставляем ему свойства.

  
 Привет, мир! 
  

Здесь мы даем ему свойство color и устанавливаем значение blue , что приводит к следующему:

Мы также можем установить несколько свойств внутри тега style , если захотим. Однако я не хочу продолжать этот путь, поскольку все начинает запутываться, если наш HTML загроможден большим количеством CSS внутри.

Вот почему был представлен второй метод включения CSS.

2. Внутренний CSS

Другой способ включения CSS - использование элемента стиля в разделе head HTML-документа. Это называется внутренней стилизацией.

  <заголовок>
    <стиль>
        h2 {
            цвет синий;
        }
    

  

В элементе стиля мы можем придать стиль нашим элементам HTML, выбрав элемент (ы) и предоставив атрибуты стиля.Точно так же, как мы применили свойство color к элементу h2 выше.

3. Внешний CSS

Третий и наиболее рекомендуемый способ включения CSS - использование внешней таблицы стилей. Мы создаем таблицу стилей с расширением .css и включаем ее ссылку в HTML-документ, например:

В приведенный выше код мы включили ссылку стиля .css , используя элемент link . Затем мы записываем весь наш CSS в отдельную таблицу стилей под названием style.css , чтобы с ней было легко управлять.

  h2 {
   цвет синий;
}
  

Эту таблицу стилей также можно импортировать в другие файлы HTML , так что она отлично подходит для повторного использования.

Селекторы CSS

Как мы обсуждали ранее, CSS - это язык дизайна, который используется для стилизации элементов HTML. А чтобы стилизовать элементы, их сначала нужно выбрать.Вы уже видели, как это работает, но давайте немного углубимся в селекторы CSS и рассмотрим три различных способа выбора элементов HTML.

1. Элемент

Первый способ выбрать элемент HTML - это просто использовать имя, что мы и сделали выше. Посмотрим, как это работает:

  h2 {
    размер шрифта: 20 пикселей;
}
п {
    цвет: зеленый;
}
div {
    маржа: 10 пикселей;
}
  

Пример выше не требует пояснений. Мы выбираем разные элементы, такие как h2 , p , div , и присваиваем им разные атрибуты стиля. font-size управляет размером текста, color устанавливает цвет текста, а margin добавляет интервал вокруг элемента.

2. Класс

Другой способ выбора элементов HTML - использование атрибута class. В HTML мы можем назначать нашим элементам разные классы. Каждый элемент может иметь несколько классов, и каждый класс также может применяться к нескольким элементам.

Давайте посмотрим на это в действии:

  

    
 Это заголовок 

  

 
.container {
    маржа: 10 пикселей;
}
  

В приведенном выше коде мы назначили класс контейнера элементу div. В таблице стилей мы выбираем наш класс, используя формат .className и задавая ему поле 10px .

3. ID

Подобно классам, мы также можем использовать идентификаторы для выбора элементов HTML и применения к ним стиля. Единственная разница между классом и идентификатором состоит в том, что один идентификатор может быть назначен только одному элементу HTML.

  

    
 Это абзац 

  

 
# para1 {
    цвет: зеленый;
    размер шрифта: 16 пикселей;
}
  

В приведенном выше примере показано, как мы назначаем идентификатор элементу абзаца, а затем используем селектор идентификатора в таблице стилей, чтобы выбрать абзац и применить к нему стиль.

Шрифты и цвета

CSS предоставляет нам буквально сотни вариантов для игры со шрифтами и цветами и создания красивого внешнего вида наших HTML-элементов. Мы можем выбрать один из двух типов названий семейств шрифтов:

1. Общее семейство: группа семейств шрифтов с похожим внешним видом (например, «Serif» или «Моноширинный»)

2. Семейство шрифтов: конкретное семейство шрифтов (например, Times New Roman или Arial)

Для цветов мы можем использовать предопределенные названия цветов или значения RGB, HEX, HSL, RGBA, HSLA.

  

    

        CSS - это Coooooool !!!!
    

  

  .container {
    ширина: 500 пикселей;
    высота: 100 пикселей;
    цвет фона: светло-голубой;
    выравнивание текста: центр;
}

.heading1 {
    семейство шрифтов: 'Courier New';
    цвет: помидор;
}
  

Как вы можете видеть в приведенном выше примере, у нас есть элемент div с классом , контейнер . Внутри этого div есть тег h2 с некоторым текстом внутри него.

В таблице стилей мы выбираем класс контейнера и устанавливаем его ширину , высоту , цвет фона и выравнивание текста .

Наконец, мы выбираем класс .heading1 , который применяется к тегу h2 , и присваиваем ему атрибуты семейства шрифтов и цвет .

Заключение

Вы можете быть немного ошеломлены всей этой информацией, но не волнуйтесь.

Просто ознакомьтесь с нашим бесплатным вводным курсом по CSS на Scrimba, и вы станете ниндзя веб-дизайна менее чем за час.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba - самого простого способа научиться программировать. Вам следует посетить наш учебный курс по адаптивному веб-дизайну, если вы хотите научиться создавать современный веб-сайт на профессиональном уровне.

Щелкните здесь, чтобы перейти на курс повышения квалификации.

Основы HTML и CSS | Проект Odin

Введение

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

CSS сообщает браузеру, хотите ли вы отображать какие-либо из этих тегов определенным образом, например, сделав фон синим и сдвинув его немного влево. В инструментах разработчика вы можете увидеть стили CSS на другой панели, обычно показывая, какие конкретные свойства были унаследованы от каких строк CSS.

Результаты обучения

Просмотрите их сейчас, а затем используйте их, чтобы проверить себя после выполнения задания:

• Почему мы разделяем HTML и CSS?
• Что такое классы и идентификаторы (и чем они отличаются)?
• Что такое элементы?
• Что такое теги?
• Что такое атрибуты?
• Что такое формы?
• Что такое div?
• Что такое селекторы?
• Какие свойства?
• Что такое ценности?
• Что такое «строка запроса» в URL-адресе и для чего она нужна?
• В чем разница между «пикселями» и «em»?
• Как наследуются стили CSS для определенного элемента? я. е. как элемент получает стили «по умолчанию»?
• Какие два атрибута CSS вы можете изменить, чтобы перемещать элемент по странице?
• Каковы три различных способа включения CSS в ваш проект или использования CSS для стилизации конкретного элемента?
• Что такое «таблица стилей по умолчанию» или «таблица стилей пользовательского агента»?
• Зачем нужен файл сброса CSS?

Переуступка

1. Погрузитесь в изучение HTML и CSS с помощью интерактивных руководств freeCodeCamp.Используйте только весь раздел с пометкой «Сертификация адаптивного веб-дизайна». Это долго и, если вы новичок, у вас может уйти как минимум несколько дней, но это даст вам действительно прочную основу для дальнейшего продвижения. У них также есть несколько проектов в конце этого раздела. Это хорошая практика, но вы можете считать их необязательными. (Большая часть предложенных ими «300 часов» для завершения приходится на эти проекты, поэтому, вероятно, у вас не займет много времени, если вы будете выполнять только упражнения).

   Примечание: Если вы используете надстройку браузера, такую ​​как Dark Reader (или аналогичную надстройку, которая создает «темный режим» для веб-сайта), это может мешать выполнению определенных упражнений. Если ваше решение не принято, попробуйте отключить надстройку браузера и отправить ее снова.

2. Необязательно: узнайте в этом видео о таблице стилей вашего браузера по умолчанию и сбросах CSS (сбросы упоминаются, начиная с отметки 2:00). Вот почему в вашем макете появляются пробелы, даже если вы не указали CSS.Настоящие разработчики почти всегда используют сброс CSS, чтобы избавиться от таблицы стилей по умолчанию и позволить им работать с нуля. Если вам все еще интересно, вот более длинное видео о сбросах.

Дополнительные ресурсы

В этом разделе содержатся полезные ссылки на другой контент. Это не обязательно, так что считайте это дополнительным, если вам нужно во что-то углубиться.

Основы CSS: вторая буква «S» в CSS

CSS - это сокращение от Cascading Style Sheets.

В то время как большая часть обсуждения CSS в сети (или даже здесь, на CSS-Tricks) сосредоточена вокруг стилей написания и того, как каскад влияет на них, мы особо не обсуждаем лист , часть язык. Итак, давайте уделим этой одинокой секунде «S» немного внимания и поймем, что мы имеем в виду, когда говорим, что CSS - это стиль , лист .

Лист содержит стили

Каскад описывает, как стили взаимодействуют друг с другом.Стили составляют фактический код. Тогда есть лист, содержащий этот код. Подобно листу бумаги, на котором мы пишем, «лист» CSS - это цифровой файл, в котором закодированы стили.

Если проиллюстрировать это, отношения между тремя видами форм каскадные:

На листе хранятся стили.

Может быть несколько листов, все из которых содержат несколько стилей, связанных с одним документом HTML. Комбинация этих и процессов определения того, какие стили имеют приоритет при оформлении каких-либо элементов, называется каскадом (это первая буква «C» в CSS).

Лист - это цифровой файл

Лист настолько особенный, что ему присвоено собственное расширение файла: .css . У вас есть возможность создавать эти файлы самостоятельно. Создать файл CSS можно в любом текстовом редакторе. Это буквально текстовые файлы. Не документы с «форматированным текстом» или документы Word, а простой текст.

Если у вас Mac, то вы можете запустить TextEdit, чтобы начать писать CSS. Просто убедитесь, что он находится в режиме «Обычный текст».

Если вы работаете в Windows, приложение "Блокнот" по умолчанию является эквивалентом.Черт возьми, вы можете вводить стили практически в любом текстовом редакторе для написания CSS, даже если это не то, для чего он был разработан.

Какой бы инструмент вы ни использовали, главное - сохранить документ как файл .css . Обычно это можно сделать, просто добавив это к имени файла при сохранении. Вот как это выглядит в TextEdit:

Серьезно, выбор, какой текстовый редактор использовать для написания CSS, полностью зависит от вас. Их очень много на выбор, но вот несколько популярных:

Вы можете обратиться к одному из них, потому что они сделают для вас полезные вещи, например, синтаксическую подсветку кода (раскрасьте разные части, чтобы было легче понять, что к чему).

Послушайте, я создал несколько файлов полностью с нуля в текстовом редакторе:

Эти файлы на 100% действительны в любом веб-браузере, новом или старом. Мы буквально только что создали веб-сайт.

Лист связан с HTML

Нам действительно нужно соединить HTML и CSS. Как и в случае, убедитесь, что стили, которые мы написали в нашем листе, загружаются на веб-страницу.

Веб-страница без CSS довольно проста:

См. Веб-страницу без стиля пера Джеффа Грэма (@geoffgraham) на CodePen.

Как только мы свяжем файл CSS, вуаля!

См. Веб-страницу со стилями, написанную Джеффом Грэмом (@geoffgraham) на CodePen.

Как это случилось? если вы посмотрите вверху любой веб-страницы, там будет тег , содержащий информацию о документе HTML:

Несмотря на то, что код внутри может выглядеть странно, обычно имеется одна строка (или более, если мы используем несколько таблиц стилей), которая ссылается на лист.Выглядит это примерно так:

Эта строка сообщает веб-браузеру, как он читает этот HTML-файл:

1. Я хочу связать таблицу стилей
2. Вот где он находится

Вы можете назвать лист как хотите:

• styles.css
• global.css
• серьезно-что угодно-хочешь. css

Важно указать правильное расположение файла CSS, будь то на вашем веб-сервере, CDN, или каком-либо другом сервере.

Вот несколько примеров:

Лист не требуется для HTML

Вы видели выше пример веб-страницы barebone.Веб-страница не требуется для использования таблицы стилей.

Кроме того, технически мы можем писать CSS прямо в HTML, используя атрибут стиля HTML . Это называется встроенным стилем и выглядит примерно так, если представить, что вы смотрите на код HTML-файла:

  
 Заголовок 
 Некоторое содержание абзаца.  
  

Хотя это возможно, есть три серьезных удара по стилям письма таким образом:

1. Если вы решите использовать таблицу стилей позже, будет чрезвычайно сложно заменить встроенные стили стилями в HTML.Встроенные стили имеют приоритет над стилями на листе.
2. Поддерживать все эти стили сложно, если вам нужно внести «быстрое» изменение, и это затрудняет чтение HTML.
3. Есть что-то странное в том, чтобы сказать, что мы пишем CSS inline, когда на самом деле нет каскада или листа. Все, что мы пишем, - это стили.

Есть второй способ записать CSS в HTML, и это непосредственно в в блоке

  селектор {
  стоимость имущества;
}  

  body {
  цвет фона: синий;
}  

  селектор {
   свойство: значение;  
}  

  селектор {
   свойство: значение;  
   свойство: значение;  
}  

  / * Комментарий CSS * /

/ * А
Комментарий в
несколько строк
* /  

  p {
  красный цвет;
}  

  h2 {
  красный цвет;
}

h3 {
  красный цвет;
}

h4 {
  красный цвет;
}  

  h2, h3, h4 {
  красный цвет;
}  

 
 Это мой абзац! 
 

 p {цвет: розовый; font-weight: жирный; } 

 {цвет: розовый; font-weight: жирный; } 

 body {background-color: светло-голубой; } 

 p {font-size: 20px; красный цвет; } 

 
<стиль>
Тело {цвет фона: чертополох; }
P {размер шрифта: 20 пикселей; цвет: средне-голубой; }

 

 
 Обратите внимание на этот заголовок!