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

Дядя Влад

Аббревиатура CSS означает «каскадные таблицы стилей». CSS используется для стилизации веб-сайтов и приложений, используемых на всех устройствах. Таблица стилей обычно используется вместе с HTML и языком программирования внешнего интерфейса, например JavaScript.

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

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

Когда использовать различные методы реализации CSS

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

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

Использование встроенного примера CSS

 <h1 style="color: red;">Main Heading</h1>

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

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

Использование внутреннего примера CSS

 <style>
 h2{
 color: yellow;
 }
 </style>

Размещение приведенного выше кода в теге <head> вашего HTML-файла гарантирует, что все элементы h2 в этом файле будут окрашены в желтый цвет. Внутренний CSS отделен от HTML-кода, что делает метод более эффективным, поскольку облегчает нацеливание на различные группы элементов.

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

Использование внешнего примера CSS

 
<link rel="stylesheet" href="css_file_name">

Вставка приведенной выше строки кода в тег <head> вашего HTML-файла упростит стилизацию вашей веб-страницы с помощью внешнего метода CSS. Единственный аспект приведенного выше кода, который изменится, – это значение, присвоенное свойству href , которое всегда должно быть именем файла CSS (включая расширение .css).

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

 h2{
 color: yellow;
 }

Изучение базовой структуры CSS

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

Селектор

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

Начало и конец объявления

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

Недвижимость

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

Разделитель свойств / значений

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

Значение

Значение свойства CSS представляет собой точный стиль, который вы хотите применить к данному свойству. Доступные для использования значения зависят от типа свойства. Например, свойство, используемое в приведенной выше структуре, – это цвет , что означает, что к этому свойству можно применить только один тип значения – имя цвета. Значение цвета может быть представлено в одной из четырех форм: значение слова (как в приведенном выше примере), шестнадцатеричное значение, значение HSL (оттенок, насыщенность, яркость) или значение RGB (красный, зеленый, синий).

Разделитель деклараций

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

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

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

Общее правило в CSS заключается в том, что последнее объявление стиля, которое вы добавляете в файл, переопределит те, которые были там раньше. Следовательно, если в файле CSS есть два объявления с селектором h2 , объявление, которое было добавлено последним, переопределяет те, которые были там раньше.

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

Важно помнить, что в объявлении CSS идентификаторы начинаются со знака числа, а классы – с точки. Наиболее существенное различие между идентификатором и классом заключается в том, что идентификатор уникален, а класс может дублироваться. Например, набору похожих тегов <div> можно присвоить одно и то же имя класса ; однако идентификатор каждого тега <div> должен быть уникальным.

Изучение различных типов селекторов

Существует три основных типа селекторов: одиночный, множественный и вложенный. До сих пор в этой статье подробно рассматривались отдельные селекторы.

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

Пример базового HTML-шаблона

 
<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 <div class="contianer">
 <div class="siteInfor" id="Welcome">
 <h2>Welcome</h2>
 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
 dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
 tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
 </p>
 </div>

 <div class="siteInfor" id="About">
 <h2>About</h2>
 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
 dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
 tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
 </p>
 </div>

 <div class="content" id="article-1">
 <h2>Title</h2>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
 Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
 impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
 perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
 mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
 impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
 </p>
 </div>

 <div class="content" id="article-2">
 <h2>Title</h2>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
 Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
 impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
 perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
 mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
 impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
 </p>
 </div>

 </div>

 </body>
 </html>

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

Пример использования нескольких селекторов

 
#About, .content{
 color: white;
 background-color: darkcyan;
 }

При использовании нескольких селекторов вы всегда должны разделять каждый селектор запятой. В приведенном выше примере есть два селектора: идентификатор и класс . Если запятая, следующая за идентификатором about, отсутствует, объявление CSS не будет выполнено.

Возвращаясь к приведенному выше примеру базового HTML-шаблона, здесь присутствуют два тега <span> – один в разделе приветствия, а другой – в разделе «Сведения». Если ваша цель – настроить таргетинг только на один из этих тегов <span> , вам следует использовать вложенный селектор.

Использование примеров вложенных селекторов

 #Welcome p span{
 color: red;
 }

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

Таким образом, только раздел span в теге <p> блока div с идентификатором приветствия будет окрашен в красный цвет.

Как написать комментарий в CSS

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

Комментарий CSS содержит две косые черты, две звездочки и раздел комментариев.

Пример однострочного комментария CSS

 /* This is how you write a single line comment in CSS */

Пример многострочного комментария CSS

 
/*
 This is how you write
 a multi-line comment
 in CSS
 */

Что дальше?

В этой статье представлены основные компоненты CSS. Теперь вы можете использовать идентификацию:

  • Любой из трех методов реализации CSS.
  • Все элементы в объявлении CSS
  • Три основных типа селекторов
  • Комментарий CSS

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