Web-Programming.in.ua

Пошук

Авторизація

Запам`ятати
Реєстрація

Останні коментарі

Популярні статті

Корисні поосилання

RSS

Вступ в CSS. Синтаксис. Селектори

06.03.2015 17:42 | Admin

Привіт, в цій статті ми розберемо наступні питання:

  1. Синтаксис CSS.
  2. Як задати CSS стиль?
  3. Які є селектори CSS?

Синтаксис CSS:

CSS стилі складаються із списку правил. Кожне правило має один або багато селекторів.

Синтаксис такий: спочатку пишеться селектор, потім в фігурних дужках вказуються всі його властивості і через двокрапку їх значення.

Приклад:

p {
  margin-top: 10px;
  font-size: 15px;
  color: green;
}

В цьому прикладі селектором є "p". "padding", "font-size", "color" - властивості, а "10px", "15px", "green" - їхні значення.

Це означає, що все що знаходиться в тегах "p" стане зеленого кольору, розміром шрифту в 15 пікселів і верхнім відступом в 10 пікселів.

Існує декілька типів селекторів:

  1. Контекстні селектори,
  2. Селектор ID,
  3. Селектор CLASS,
  4. Селектори параметрів,
  5. Стадартний селектор.

Також є псевдоелементи, які потрібні для налаштування властивостей певного стану елементу.

Наприклад наведеного курсора мишки на посилання:

a:hover {
  color: blue;
  font-size: 1.3em;
}

Тут ми встановили параметри наведеного посилання: блакитний колір, і розмір шрифту 1.3em.

Селектори CSS:

Селектор ID:

Синтаксис:

ім`я_тегу#ID_елементу {
  властивість1: значення1;
  властивість2: значення2;
  властивість3: значення3;
}

Або:

#ID_елементу {
  властивість1: значення1;
}

Приклад:

HTML:

<div id="block"></div>

CSS:

#block {
  height: 100px;
  width: 100px;
  background-color: green;
}

Зазвичай селектор ID використовують для масивних блоків, від яких залежить верстка і т.д!

Селектор CLASS:

Синтаксис:

ім`я_тегу.CLASS_елементу {
  властивість1: значення1;
  властивість2: значення2;
  властивість3: значення3;
}

Або:

.CLASS_елементу {
  властивість1: значення1;
}

Приклад:

HTML:

<div class="block"></div>

CSS:

.block {
  height: 100px;
  width: 100px;
  background-color: green;
}

Контекстні селектори:

Цей вид селекторів потрібний для того, щоб стиль застосовувався при умові, що даний елемент лежить в середині іншого тегу.

Синтаксис:

тег1 тег2 {
  властивість1: значення1;
  властивість2: значення2;
  властивість3: значення3;
}

Приклад:

HTML:

<div>
  <p>Text....</p>
</div>

CSS:

div p {
  color: green;
  font-size: 2em;
}

В цьому випадку ми застосували стиль до тегу "p", що лежить в тезі "div".

Тобто, якщо написати просто:

<p>Text.....</p>

То стиль застосований НЕ БУДЕ.

Селектори параметрів:

Синтаксис:

ім`я_тегу[ім`я_атрибуту="значення_атрибуту"] {
  властивість1: значення1;
  властивість2: значення2;
}

Приклад:

HTML:

<input type="text">

CSS:

input[type="text"] {
  border: 2px dashed black;
  outline: none;
  padding: 5px;
}

Стандартний селектор:

Стандартний селектор - це звичайний тег.

Як задати CSS стиль:

Варіанти:

  1. Inline-стиль.
  2. Вбудований стиль.
  3. Імпортований стиль.
  4. Стиль імпортований Із файлу.

1. Стиль задається в самому тезі:

<p style = "font-size: 150%; float: right;">Текст....</p>

2. Стиль вбудовується на саму сторінку в тезі "<style>":

<style>
  div {
    margin-top: 100px;
    margin-left: 200px;
  }
</style>

3. Цей спосіб дозволяє імпортувати стилі:

<style>
  @import url("style.css");
</style>

4. Це найпопулярніший і найзручніший спосіб підключення CSS файлу:

В тезі "<head>" вставляємо:

<link rel="stylesheet" type="text/css" href="style.css">

Дякую за увагу.

Категорія: CSS | Коментарі відсутні »

Тільки авторизовані користувачі можуть додавати коментарі.

Нагору