HTML+CSS Синтаксис CSS

Уроки HTML+CSS: Синтаксис CSS

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

Где писать CSS.

CSS можно прописывать несколькими способами .

Первый, это непосредственно в HTML файле, прописав в <head> тег <style>.

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

Если вы используете второй способ, вам необходимо прописать в <head> тег <link>. Мы с ним уже сталкивались когда рассматривали теги для подключения сторонних файлов.
<link type="text/css" rel="stylesheet"href="путь до файла со стилями">

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

<p style="color:#082020;"></p>.

Синтаксис

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

Название_элемента {
  свойство: значение;
  свойство: значение;
}

Давайте попробуем на примере. В HTML пропишем код.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
    <p>Пример текста</p>  
</body>
</html>

Теперь в CSS файле изменим для этого элемента свойства. Давайте изменим цвет и шрифт текста находящегося в этом элементе .

p {
  color: #ff0000; //цвет текста
  font-size: 20px; //размер шрифта
}

Пример текста

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

Обращение по классу и идентификатору.

Представьте что у вас на странице есть несколько элементов p, а вам нужно обратиться только к одному из них, к конкретному тегу.
Для того чтобы это сделать, вам необходимо прописать для элемента атрибуты class или id.
Если вы прописали class, то обратиться по нему можно следующим образом.

<p class="text1">Пример текста</p>
.text {
  color: #808000;
}

В примере видно, что для того чтобы обратиться к элименту по классу. Нужно прописать атрибут class для элемента, а в CSS файле поставить точку и прописать
имя класса(в нашем случае это text).

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

<p id="text1">Пример текста</p>
#text {
  color: #808000;
}

В примере видно, что для того чтобы обратиться к элементу по идентификатору. Нужно прописать атрибут id для элемента, а в CSS файле поставить символ решетки и прописать
имя идентификатора(в нашем случае это text).

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

<h1 class="text">Пример заголовка</h1>
<p class="text">Пример текста</p>
h1.text {
  color: red;
}

p.text {
  color: green;
}

Пример заголовка

Пример текста

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

<div>
<p>Пример текста</p>
</div>
div p {
...
}

То же самое касается и обращения через классы …

<div class="wrap">
<p class="text">Пример текста</p>
</div>
.wrap .text {
...
}

и идентификаторы.

<div id="wrap">
<p id="text">Пример текста</p>
</div>
#wrap #text {
...
}

Вот что мы узнали в этом уроке:

  • CSS задает стили для элементов и  не используется без HTML.
  • Есть несколько способов для прописания CSS: подключение стороннего файла, внутри HTML в теге style, как значения внутри атрибута style для выбранного элемента.
  • Для того чтобы задать стили для элемента, необходимо к нему обратиться по тегу, классу или идентификатору. Стили записываются в столбик и разделяются символом “точка с запятой”.

Оставить комментарий

avatar
  Подписаться  
Уведомление о