HTML, CSS и JavaScript… 3 основных языка интерфейсной веб-разработки. В этой статье я расскажу об основах CSS. Так что, если вы не знаете о CSS или не знаете, как его использовать, эта статья для вас :)

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

Что такое CSS?

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

CSS - это не язык программирования, как C ++ или JavaScript. Однако CSS не так прост, как кажется. Если вы попытаетесь использовать его, не понимая, у вас возникнут трудности в веб-разработке. Следовательно, изучение CSS так же важно, как и изучение языка программирования.

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

А вот как выглядит Facebook без CSS:

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

Синтаксис CSS:

Напишем наш первый код CSS. Например, я хочу изменить цвет тега ‹h1›.

<h1>I'm a Header</h1>

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

Итак, ниже я определяю селектор для HTML-элемента на основе имени его тега ‹h1›:

h1 { }  // An example of a selector

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

h1 {   // CSS rules between brackets
  color: red;
}

Таким образом, на основе определенного селектора (h1) CSS теперь может понять, где применить новые правила:

Есть много разных способов определить селектор CSS, ниже вы можете увидеть несколько примеров типов селектора:

  • Селектор класса: находит элементы HTML по их атрибуту класса.
  • Селектор Id: находит элементы по их конкретному идентификатору.
  • Селектор элемента: находит элементы по имени их тега.

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

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

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

Мы можем добавить CSS в файл HTML тремя разными способами:

1. Внешний файл CSS:

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

Мы можем создать отдельный файл CSS с расширением .css и включить его в HTML. Например, мы можем создать такой файл CSS: index.css

Внутри index.css мы можем написать наш код CSS:

p {  
  color: red;
}

Затем мы можем импортировать index.css в HTML с тегом ‹link›, как показано ниже:

<head>
   <link rel="stylesheet" href="index.css">
 </head>
<body>

 <p> I'm a Text </p>

</body>

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

2. Внутренний CSS с тегом ‹style›:

Еще один способ написания кода CSS - использование тега ‹style› в HTML. Это сохранит код CSS непосредственно внутри файла HTML, а не в отдельном файле.

<style>
  p {  
    color: red;
  }
</style>
<body>
  <p> I'm a Text </p>
</body>

3. Встроенный стиль:

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

<p style="color: blue; font-size: 22px;"> I'm a Text </p>

Этот подход не является примером чистого кода и его не рекомендуется использовать.

Заключение

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

В мире CSS есть много других правил и возможностей. Я расскажу о них в следующих статьях.

Если вы хотите узнать больше о веб-разработке, не стесняйтесь подписывайтесь на меня на Youtube!

Большое спасибо и до следующего раза!

Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят +446 678 человек.

Подпишитесь, чтобы получать наши главные новости здесь.