Ultimate CSS Tutorial для начинающих программистов

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

Фактически, Интернет сегодня выглядит настолько хорошо, что мы можем забыть, что такое веб-сайты на самом деле – куча файлов, в которых хранится текст и медиа-контент. В некотором смысле цель современного веб-дизайна – заставить нас забыть об этом факте и просто наслаждаться поездкой. За это мы должны благодарить 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 (язык гипертекстовой разметки) определяет содержимое веб-страницы, включая текст, ссылки, изображения, видео и т.д. В файле 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 ):

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

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

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

Вы увидите эти базовые селекторы во всех файлах 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 принимает значение длины – например, px (пиксели) – или процентное соотношение, определяющее размер элемента относительно ширины родительского контейнера. Например,
  внутри тега , установленного на 50% ширины, будет охватывать половину ширины области просмотра.
• Свойство font-family принимает письменные имена веб-шрифтов, таких как Arial, Times New Roman или Courier.

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

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

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

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

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

/* I'm a comment in CSS! */

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

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

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

Внешний CSS

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

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

<link rel="stylesheet" target="_blank" rel="noopener" href="style.css">

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

Внутренний CSS

Внутренний CSS – это код CSS, встроенный в документ HTML. Он написан внутри элемента , который находится в разделе :

Internal CSS is best used for small web projects and individual web pages with their own styling. In these cases, it might be easier to keep all your code in the same file, rather than jumping between two — it just comes down to your preference.

Inline CSS

Inline CSS is placed inside an HTML tag to change the style of a single specific element. Inline syntax is slightly different than what we’ve seen — the declaration is written as the value of the style attribute:

But hold on…doesn’t this violate the practice of separating style from content? Yes, which is why its use is generally discouraged. Inline CSS is both inefficient to program and harder to understand than external and even internal CSS. Still, it’s good to know in case you ever see it.

CSS Cascade, Specificity, and Inheritance

До сих пор концепции, которые мы исследовали до сих пор, относительно просты – CSS – это список правил стиля, применяемых к HTML. Каждое правило соответствует одному или нескольким элементам страницы. CSS можно применять внешне, внутренне или встроенно. Кусок пирога.

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

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

Что такое каскад CSS?

Рассмотрим код ниже. Похоже, у нас есть два правила, нацеленных на свойство background-color элемента p :

Это конфликт, поскольку один и тот же элемент не может иметь несколько цветов фона. В этом случае CSS останавливается на синем из-за каскадов.

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

Cascade разрешает конфликты правил как в одной таблице стилей, так и в нескольких таблицах стилей. Правила, обработанные в более поздних таблицах стилей, переопределяют конфликтующие правила в более ранних таблицах. Правило каскада также применяется по отношению к внутреннему, внешнему и встроенному CSS – встроенный переопределяет внутренний, а внутренний переопределяет внешний. Если CSS не применен, стиль браузера по умолчанию берет верх.

Каскад играет центральную роль в функционировании CSS – это буква «C» в CSS. Итак, убедитесь, что вы понимаете это, прежде чем мы продолжим.

В чем специфика CSS?

Другой сценарий: у нашего тега p теперь есть идентификатор. Глядя на CSS, будет ли наш абзац красным или синим?

Согласно правилу каскада, мы должны ожидать, что синее значение будет преобладать над красным. Однако это не то, что мы видим. Это почему?

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

Вообще говоря, CSS говорит, что селекторы классов более «специфичны», чем селекторы элементов, и что селекторы id более «специфичны», чем селекторы классов. В предыдущем примере первое правило CSS использует селектор идентификатора. Поскольку селекторы id более специфичны, чем селекторы элементов, преобладает значение красного цвета.

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

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

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

Что такое наследование CSS?

Ладно, это немного легче понять. Наследование означает, что некоторые объявления CSS, применяемые к элементу, передаются дочерним элементам.

Мы можем увидеть наследование с помощью такого свойства, как размер шрифта :

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

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

В случае, если вы хотите использовать другой шрифт для определенного дочернего элемента, вы можете перезаписать наследование, указав другое значение font-family для дочернего элемента:

Еще один пример

Мы видели множество примеров правил CSS в действии – давайте посмотрим на последний пример того, как несколько свойств CSS объединяются для создания, в данном случае, неплохого элемента кнопки:

CSS: программа со стилем

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

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

Источник записи: https://blog.hubspot.com