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

Содержание

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

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

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

  • Практикум по CSS;
  • Редактор Atom;
  • Редактор Visual Studio;
  • Редактор Sublime Text.
Информация про 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 по этой ссылке.

Flexbox CSS уроки для начинающих академия

❮ Назад
Дальше ❯



Модуль компоновки CSS Flexbox

Перед модулем компоновки Flexbox было четыре режима компоновки:

  • Блок, для разделов на веб-странице
  • Встроенный, для текста
  • Таблица для двумерных табличных данных
  • Положение, для явного положения элемента

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


Flexbox элементы

Чтобы начать использовать модель Flexbox, необходимо сначала определить контейнер Flex.

Этот элемент представляет собой контейнер Flex (синяя область) с тремя элементами Flex.

Пример

Гибкий контейнер с тремя гибкими элементами:

<div
class=»flex-container»>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>


Родительский элемент (контейнер)

Гибкий контейнер становится гибким, установив display свойство в значение Flex:

Пример

. flex-container {
 
display: flex;
}

Свойства контейнера Flex:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content


Свойство Flex-Direction

Свойство flex-direction определяет, в каком направлении контейнеру требуется стек элементов Flex.

Пример

Значение Column суммирует элементы Flex по вертикали (сверху вниз):

.flex-container {
 
display: flex;
 
flex-direction: column;
}

Пример

Значение столбец-реверс суммирует элементы Flex по вертикали (но снизу вверх):

.flex-container {
 
display: flex;
 
flex-direction: column-reverse;
}

Пример

Значение Row суммирует элементы Flex горизонтально (слева направо):

.flex-container {
 
display: flex;
 
flex-direction: row;
}

Пример

Значение строка-реверс суммирует элементы Flex горизонтально (но справа налево):

. flex-container {
 
display: flex;
 
flex-direction: row-reverse;
}


Свойство Flex-Wrap

Свойство flex-wrap указывает, должны ли элементы Flex обернуть или нет.

Приведенные ниже примеры имеют 12 элементов Flex, чтобы лучше продемонстрировать свойство
flex-wrap
.

Пример

Значение Wrap указывает, что элементы Flex будут обтекать при необходимости:

.flex-container {
 
display: flex;
 
flex-wrap: wrap;
}

Пример

Значение UN Wrap указывает, что элементы Flex не будут обтекать (по умолчанию):

.flex-container {
 
display: flex;
 
flex-wrap: nowrap;
}

Пример

Значение Wrap-Reverse указывает, что гибкие элементы будут при необходимости обернуты в обратном порядке:

.flex-container {
 
display: flex;
 
flex-wrap: wrap-reverse;
}


Свойство Flex-Flow

Свойство flex-flow является сокращенным свойством для задания свойств
flex-direction
и flex-wrap.

Пример

.flex-container {
 
display: flex;
 
flex-flow: row wrap;
}


Свойство «выравнивание-содержимое»

Свойство justify-content используется для выравнивания элементов Flex:

Пример

Значение Center выравнивает элементы Flex в центре контейнера:

.flex-container {
 
display: flex;
 
justify-content: center;
}

Пример

Значение Flex-Start выравнивает элементы Flex в начале контейнера (по умолчанию):

.flex-container {
 
display: flex;
 
justify-content: flex-start;
}

Пример

Значение Flex-End выравнивает элементы Flex в конце контейнера:

.flex-container {
 
display: flex;
 
justify-content: flex-end;
}

Пример

Значение пространство вокруг отображает элементы Flex с пробелами до, между и после строк:

.flex-container {
 
display: flex;
 
justify-content: space-around;
}

Пример

Значение пробел-между отображает элементы Flex с интервалом между строками:

. flex-container {
 
display: flex;
 
justify-content: space-between;
}


Свойство Выравнивание-элементы

Свойство align-items используется для выравнивания элементов Flex по вертикали.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство
align-items
.

Пример

Значение Center выравнивает элементы Flex в середине контейнера:

.flex-container {
 
display: flex;
  height: 200px;
 
align-items: center;
}

Пример

Значение Flex-Start выравнивает элементы Flex в верхней части контейнера:

.flex-container {
 
display: flex;
  height: 200px;
 
align-items: flex-start;
}

Пример

Значение Flex-End выравнивает элементы Flex в нижней части контейнера:

.flex-container {
 
display: flex;
  height: 200px;
 
align-items: flex-end;
}

Пример

Значение Stretch растягивает элементы Flex для заполнения контейнера (по умолчанию):

. flex-container {
 
display: flex;
  height: 200px;
 
align-items: stretch;
}

Пример

Значение Базовая линия выравнивает элементы Flex, такие как Выравнивание базовых линий:

.flex-container {
 
display: flex;
  height: 200px;
 
align-items: baseline;
}

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:


Свойство выравнивания содержимого

Свойство align-content используется для выравнивания гибких линий.

В этих примерах мы используем контейнер высотой 600 пикселей с свойством Flex-Wrap, который имеет значение Wrap, чтобы лучше продемонстрировать align-content свойство.

Пример

Значение пробел-между отображает гибкие линии с равным пространством между ними:

.flex-container {
 
display: flex;
  height: 600px;
 
flex-wrap: wrap;
 
align-content: space-between;
}

Пример

Значение пространство вокруг отображает гибкие линии с пробелами до, между и после них:

. flex-container {
 
display: flex;
  height: 600px;
 
flex-wrap: wrap;
 
align-content: space-around;
}

Пример

Значение Stretch растягивает гибкие линии, чтобы занять оставшееся пространство (по умолчанию):

.flex-container {
 
display: flex;
  height: 600px;
 
flex-wrap: wrap;
 
align-content: stretch;
}

Пример

Значение Center отображает гибкие линии в середине контейнера:

.flex-container {
 
display: flex;
  height: 600px;
 
flex-wrap: wrap;
 
align-content: center;
}

Пример

Значение Flex-Start отображает гибкие линии в начале контейнера:

.flex-container {
 
display: flex;
  height: 600px;
 
flex-wrap: wrap;
 
align-content: flex-start;
}

Пример

Значение Flex-End отображает гибкие линии в конце контейнера:

.flex-container {
 
display: flex;
  height: 600px;
 
flex-wrap: wrap;
 
align-content: flex-end;
}


Идеальное центрирование

В следующем примере мы решим очень распространенную проблему стиля: идеальное центрирование.

Решение: Задайте для свойств justify-content и align-items значение
Center и элемент Flex будут идеально центрированы:

Пример

.flex-container {
  display: flex;
  height: 300px;
  justify-content:
center;
  align-items: center;
}


Дочерние элементы (элементы)

Прямые дочерние элементы контейнера Flex автоматически становятся гибкими (Flex) элементами.

Вышеприведенный элемент представляет собой четыре синих элемента Flex внутри серого контейнера Flex.

Пример

<div>
  <div>1</div>
 
<div>2</div>
  <div>3</div>
 
<div>4</div>
</div>

Свойства элемента Flex:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Свойство Order

Свойство order указывает порядок элементов Flex.

Первый элемент Flex в коде не должен отображаться в качестве первого элемента макета.

Значение Order должно быть числом, значением по умолчанию является 0.

Пример

Свойство Order может изменить порядок элементов Flex:

<div>
  <div>1</div>
 
<div>2</div>
  <div>3</div>
 
<div>4</div>
</div>


Flex-расти собственности

Свойство flex-grow указывает, сколько гибкого элемента будет увеличиваться относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 0.

Пример

Сделать третий гибкий элемент расти в восемь раз быстрее, чем другие элементы Flex:

<div>
  <div>1</div>
 
<div>2</div>
  <div>3</div>
</div>


Свойство Flex-сжатие

Свойство flex-shrink указывает, сколько гибкого элемента будет сжиматься относительно остальных элементов Flex.

Значение должно быть числом, значением по умолчанию является 1.

Пример

Не позволяйте третьему элементу Flex уменьшаться столько, сколько другие элементы Flex:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
 
<div>7</div>
  <div>8</div>
  <div>9</div>
 
<div>10</div>
</div>


Свойство Flex-базиса

Свойство flex-basis указывает начальную длину элемента Flex.

Пример

Set the initial length of the third flex item to 200 pixels:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


Свойство Flex

Свойство flex является сокращенным свойством для свойств
flex-grow
, flex-shrink и flex-basis.

Пример

Make the third flex item not growable (0), not shrinkable (0), and with an
initial length of 200 pixels:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


Свойство «выравнивание-само»

Свойство align-self задает выравнивание для выбранного элемента внутри гибкого контейнера.

Свойство align-self переопределяет выравнивание по умолчанию, заданное свойством align-items контейнера.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство
align-self
:

Пример

Совместите третий элемент Flex в середине контейнера:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Пример

Совместите второй элемент Flex в верхней части контейнера и третий элемент Flex в нижней части контейнера:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


Адаптивная Галерея изображений с помощью Flexbox

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


Отзывчивый сайт с помощью Flexbox

Используйте Flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:


Поддержка браузера

Свойства Flexbox поддерживаются во всех современных браузерах.

29.011.022.01048

Свойства Flexbox CSS

В следующей таблице перечислены свойства CSS, используемые с Flexbox:

СвойствоОписание
displayУказывает тип поля, используемого для элемента HTML
flex-directionЗадает направление гибких элементов внутри контейнера Flex
justify-contentГоризонтально выравнивает элементы Flex, если элементы не используют все доступное пространство на главной оси
align-itemsВертикальное выравнивание элементов Flex, если элементы не используют все доступное пространство на поперечной оси
flex-wrapУказывает, должны ли элементы Flex обернуть или нет, если для них недостаточно места на одной гибкой линии
align-contentИзменяет поведение свойства Flex-Wrap. Он похож на выравнивание-элементы, но вместо выравнивания элементов Flex, он выравнивает гибкие линии
flex-flowСокращенное свойство для Flex-направление и Flex-Wrap
orderЗадает порядок гибкого элемента относительно остальных элементов Flex внутри того же контейнера
align-selfИспользуется для элементов Flex. Переопределяет свойство выравнивания элементов контейнера
flexСокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства

❮ Назад
Дальше ❯

Как добавить CSS

❮ Назад
Далее ❯


Когда браузер читает таблицу стилей, он форматирует документ HTML в соответствии с
информацию в таблице стилей.


Три способа вставки CSS

Существует три способа вставки таблицы стилей:

  • Внешний CSS
  • Внутренний CSS
  • Встроенный CSS

Внешний CSS

С
внешнюю таблицу стилей, вы можете изменить внешний вид всего веб-сайта, изменив
всего один файл!

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

Пример

Внешние стили определяются в элементе внутри раздела HTML-страницы:




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

Это абзац.


Попробуйте сами »

Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширение .css.

Внешний файл .css не должен содержать тегов HTML.

Вот как выглядит файл «mystyle.css»:

«mystyle.css»

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

h2 {
  цвет: темно-синий;
  левое поле: 20 пикселей;
}

Примечание: Не добавляйте пробел между значением свойства и единицей измерения:
Неверно (пробел): левое поле: 20 пикселей;
Правильно (без пробелов): левое поле: 20 пикселей;



Внутренний CSS

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

Внутренний стиль определяется внутри элемента


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

Это абзац.


Попробуйте сами »


Встроенный CSS

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

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

Пример

Встроенные стили определяются в атрибуте "style" соответствующего
элемент:



Это
является заголовком

Это абзац.


Попробуйте сами »

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


Несколько таблиц стилей

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

Предположим, что внешняя таблица стилей имеет следующий стиль для элемента

:

h2
{
  цвет: темно-синий;
}

Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента

:

h2
{
  цвет: оранжевый;

}

Пример

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

будут
"оранжевый":

css">
<стиль>
h2 {
  цвет: оранжевый;
}

Попробуйте сами »

Пример

Однако, если внутренний стиль определен до ссылки на внешнюю таблицу стилей, элементы

будут
"темно-синий": 

Попробуйте сами »


Каскадный порядок

Какой стиль будет использоваться, если для элемента HTML указано более одного стиля?

Все стили на странице будут "каскадировать" в новый "виртуальный" стиль
листа по следующим правилам, где номер один имеет наивысший приоритет:

  1. Встроенный стиль (внутри HTML-элемента)
  2. Внешние и внутренние таблицы стилей (в разделе заголовка)
  3. Браузер по умолчанию

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

Попробуйте сами »

Вы когда-нибудь слышали о W3Schools Spaces ? Здесь вы можете бесплатно создать свой собственный веб-сайт или сохранить фрагменты кода для последующего использования.

Начните бесплатно ❯

* кредитная карта не требуется


Проверьте себя с помощью упражнений

Упражнение:

Добавьте внешнюю таблицу стилей с URL-адресом: "mystyle.css".

<голова>

<тело>
  

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

Это абзац

Это абзац

Начать упражнение

❮ Предыдущий
Следующий ❯

ВЫБОР ЦВЕТА



Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
Top 53 Reference

902 902
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


ФОРУМ |
О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Полное руководство по CSS для начинающих программистов

Интернет сильно изменился с момента своего появления. Одно из самых больших отличий? Как это выглядит.

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

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

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

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

  • Что такое CSS
  • Разница между HTML и CSS
  • Как написать код CSS
  • Как связать код CSS с документами HTML
  • Важные концепции каскада, специфичности и наследования

Прежде чем продолжить, вы должны понять основы HTML. Мы будем много говорить об элементах, тегах, классах и идентификаторах — убедитесь, что они у вас есть!

Что такое CSS?

CSS — это язык, определяющий дизайн и макет веб-страниц. Другими словами, CSS управляет тем, как веб-страницы выглядят при загрузке в браузере. Мы называем этот дизайн и макет «стилем» страницы. CSS является стандартным языком для стилей и обычно работает в сочетании с HTML (язык, определяющий содержимое веб-страниц).

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

Для чего используется CSS?

Без CSS веб, каким мы его знаем, не выглядел бы так, как сегодня. Для иллюстрации возьмем этот пост в блоге HubSpot:

Выглядит нормально, правда? Но на самом деле к этой, казалось бы, простой странице применяется много CSS. Если мы отключим CSS, который HubSpot применяет к HTML, мы увидим следующее:

Отодвинув завесу CSS, мы увидим, насколько она улучшает взаимодействие с пользователем.

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

Здорово. Меня не волнует, насколько информативен этот пост — он выглядит довольно плохо.

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

В чем разница между HTML и CSS?

HTML и CSS идут рука об руку при создании веб-страниц, которые мы знаем и любим. Однако это разные языки, и важно понимать их разные цели.

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

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

Вам может быть интересно: зачем разделять эти два языка? Это резонный вопрос, поскольку HTML и CSS работают вместе. Ответ заключается в том, что разделение стиля и содержания значительно упрощает разработку веб-сайтов.

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

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

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

Преимущества CSS

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

  • Меньше кода: Разработчики могут использовать CSS для применения одного и того же стиля к нескольким страницам и элементам страниц на веб-сайте, экономя огромное количество времени и снижая вероятность ошибок. Изменение стиля для всего сайта требует изменения всего лишь фрагмента кода.
  • Дополнительные параметры стилей: С помощью CSS можно сделать гораздо больше, чем позволяла исходная система стилей HTML. Имея четкое видение, ноу-хау в CSS и немного терпения, вы можете настроить веб-сайт в соответствии со своими предпочтениями.
  • Стандартизация: Поскольку CSS является единым языком для оформления веб-страниц, разработчик или дизайнер может понять стиль любого веб-сайта, просмотрев файлы CSS.
  • Повышение производительности: CSS уменьшает объем повторяющегося кода стилей. Меньше кода означает меньший размер файлов, а меньшие файлы означают более быструю загрузку страниц.

Как писать CSS

Мы рассмотрели, почему язык CSS работает и почему он важен (кроме того, что означает «каскадирование» — мы доберемся до этого, поверьте мне). Теперь давайте закодируем некоторые.

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

Правило в CSS выглядит так:

Вы заметите четыре основных компонента: селектор, объявления, свойства и значения. Давайте разберем каждый из них.

Что такое селектор CSS?

Правило CSS всегда начинается с селектора. Селектор указывает часть документа, к которой применяется правило. При обработке кода CSS браузер использует селектор, чтобы «выбрать» целевые элементы и применить к ним правила стиля. За селектором следует одно или несколько объявлений в фигурных скобках.

Есть несколько способов написать селектор. Самый простой тип селектора CSS — это селектор элементов, используемый в приведенном выше примере. Селектор элементов выбирает элементы HTML по их именам (например, p , span , div , a ):

См. Селектор элементов Pen от Кристины Перриконе (@hubspot) на CodePen.

Также можно выбрать элемент по его классу или атрибуту id. Селектор класса записывается в виде точки (.), за которой следует имя класса. Селектор идентификатора записывается как решетка (#), за которой следует имя идентификатора.

См. раздел «Селекторы класса и идентификатора пера» Кристины Перриконе (@hubspot) на CodePen.

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

См. Pen Parent/Child Selector от Christina Perricone (@ hubspot) на CodePen.

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

См. Селектор группировки перьев Кристины Перриконе (@hubspot) на CodePen.

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

Что такое объявление CSS?

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

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

Что такое свойство CSS?

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

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

Вот почему страницы с описанием свойств CSS содержат раздел «Совместимость с браузером». Для каждого браузера в приведенной ниже таблице указаны самые ранние совместимые выпуски (если доступны):

Источник изображения

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

Что такое значение CSS?

Каждое свойство CSS имеет собственный набор значений. Значение определяет стиль свойства элемента. Вот некоторые общие свойства и их значения:

  • Свойства, связанные с цветом, могут принимать простые однословные значения, такие как синий и красный , а также шестнадцатеричные коды — #33E0FF и #FF5733 — и значения RGB — rgb(51, 224, 255) и rgb(255, 87, 51) .
  • Свойство width может принимать значение длины — например, пикселей (пикселей) — или процентное значение, определяющее размер элемента относительно ширины родительского контейнера. Например,
    внутри тега , установленного на 50% Ширина будет охватывать половину ширины области просмотра.
  • Свойство font-family принимает письменные имена веб-безопасных шрифтов, таких как Arial , Times New Roman или Courier .

См. Значения Pen CSS от Кристины Перриконе (@hubspot) на CodePen.

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

См. Pen Span With Padding от Кристины Перриконе (@hubspot) на CodePen.

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

Комментарии CSS

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

Чтобы прокомментировать в CSS, напишите /* , затем текст вашего комментария, затем закончите на */ .

 
/* Я комментарий в CSS! */

Комментарии также можно использовать для проверки вашего CSS — чтобы отключить правило или объявление, просто «закомментируйте» код, а затем «раскомментируйте» код, чтобы повторно активировать его:

См. комментарии Pen CSS by Кристина Перриконе (@hubspot) на CodePen.

Как добавить CSS в HTML

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

Внешний CSS

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

Чтобы создать файл CSS, напишите код CSS в любом текстовом редакторе или редакторе кода и сохраните файл с расширением .css. Чтобы связать файл CSS с файлом HTML, поместите файл HTML и файлы CSS в одну папку, а затем вставьте следующий код в папку 9.0064 раздел HTML-файла:

 

...где style.css — это имя вашего файла CSS. Правила в этом файле CSS будут применяться к любому файлу HTML, который ссылается на него с помощью элемента выше.

См. Pen External CSS от Кристины Перриконе (@hubspot) на CodePen.

Внутренний CSS

Внутренний CSS — это код CSS, встроенный в документ HTML. Это написано внутри