CSS містить правила стилю, які інтерпретуються браузером, а потім застосовуються до відповідних елементів вашого документа. Правило стилю складається із трьох частин:

• Селектор- це HTML-тег, до якого застосовуватиметься стиль. Це може бути будь-який тег, наприклад,

  або і т.д.

  Властивість- це тип атрибуту HTML-тегу. Простіше кажучи, всі атрибути HTML перетворюються на властивості CSS. Ними можуть бути кольори, межі, відступи тощо.

  Значення- Встановлюється властивості. Наприклад, властивість кольору може мати значення green #008000 і т.д.

  Синтаксис селекторів у CSS наступний:

  Селектор ( властивість: значення )

  приклад.Ви можете задати межу таблиці таким чином:

  Table ( border: 2px solid #FF8C00; )

  Тут синтаксис селектора такий: table – це селектор, а border – властивість, а 2px solid #FF8C00 – значення цієї властивості.

  Ви можете задавати селектори у різний спосіб, як Вам буде зручно. Нижче представлені види селекторів.

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

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

  H1 ( color: #8B4513; )

  Універсальні селектори

  Замість того, щоб вибирати елементи певного типу, універсальний селектор просто відповідає імені будь-якого типу елемента:

  * ( color: # 808080; )

  Це правило відображає вміст кожного елемента в сірому кольорі в нашому документі.

  Селектори нащадків або вкладені селектори

  Припустимо, Ви хочете застосувати правило стилю до певного елемента лише тоді, коли воно знаходиться всередині певного елемента, то в цьому Вам допоможуть вкладені селектори чи селектори нащадків. Як показано в прикладі, правило стилю буде застосовуватися до елемента тільки тоді, коли воно знаходиться всередині тега

  .

  Ul em (color: #CD5C5C; )

  Селектори класу

  Ви можете встановити правила стилю для елементів на основі атрибута class. Усі елементи, що мають цей клас, будуть відформатовані відповідно до певного правила.

  Blue ( color: #0000FF; )

  class="blue". Ви можете зробити селектор класу трохи конкретнішим. Наприклад:

  H1.blue ( color: #0000FF; )

  з атрибутом class="blue".

  Ви можете застосувати до одного елемента кілька класів селекторів. Розглянемо наступний приклад:

  Цей абзац буде оформлений класами centerі bold.

  ID селектори

  Ви можете встановити правила стилю для елементів на основі атрибута id. Усі елементи, що мають цей ідентифікатор, будуть відформатовані відповідно до певного правила.

  #blue (color: #0000FF; )

  Це правило відображає у нашому документі вміст у синьому кольорі для кожного елемента з атрибутом id="blue". Ви можете зробити id селектор трохи конкретнішим. Наприклад:

  H1#blue ( color: #0000FF; )

  Це правило відображає вміст у синьому кольорі лише для елементів

  з атрибутом id="blue".

  Справжня потужність id селекторів - це коли вони використовуються як основа для селекторів-нащадків, наприклад:

  #blue h2 (color: #0000FF; )

  У цьому прикладі всі заголовки другого рівня відображатимуться у синьому кольорі, коли вони будуть знаходитись у тегах з атрибутом id="blue".

  Дочірні селектори

  Ви вже знаєте селектори нащадків. Існує ще один тип селектора, який дуже нагадує селектори нащадків, але має іншу функціональність, це дочірній селектор. Розглянемо наступний приклад:

  Body > p ( color: #0000FF; )

  Це правило відображатиме всі абзаци у синьому кольорі, якщо вони є прямим дочірнім елементом . Інші абзаци, розміщені всередині інших елементів типу

  або

  Сусідні селектори HTML-елементи, що йдуть один за одним, називаються сусідніми. Розглянемо наступний приклад: Strong + em (color: #0000FF; ) Це правило відображатиме вміст тега у синьому кольорі, якщо він йде після елемента . Інші теги , що йдуть не після тегу , не матимуть жодного ефекту цього правила. Селектори атрибутів Ви також можете застосовувати стилі до HTML-елементів із певними атрибутами. Нижче правило стилю відповідатиме всім input елементам, що мають атрибут type зі значенням text: Input ( color: #0000FF; ) Перевага використання селекторів атрибутів полягає в тому, що елемент не змінюється, а колір застосовується лише до потрібних текстових полів. Для селектора атрибутів застосовуються такі правила: p – вибирає всі елементи абзацу з атрибутом lang. p - вибирає всі елементи абзацу, де атрибут lang має точне значення ru. p – вибирає всі елементи абзацу, де атрибут lang містить слово «ru». p - вибирає всі елементи абзацу, де атрибут lang містить значення, які є точними ru або починаються з ru. Декілька правил стилю Можливо, Вам потрібно буде визначити кілька правил стилю для одного елемента. Ви можете встановити ці правила для об'єднання кількох властивостей і відповідних значень в один блок, як показано в наступному прикладі: H1 ( color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; ) Усі пари властивостей та значень розділяються крапкою з комою (;). Ви можете зберегти їх в одному рядку або кількох рядках. Для кращого читання зберігайте їх в окремих рядках. Не турбуйтеся про властивості, згадані у вищезгаданому блоці. Ці властивості пояснюються у наступних уроках. Угруповання селекторів у CSS Ви можете застосувати стиль для багатьох селекторів, якщо хочете. Просто відокремте селектора коми, як показано в наступному прикладі: H1, h2, h3 (color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; ) Це правило стилю буде застосовано до елементів h1, h2 та h3. Порядок списку групування селекторів не має значення. Усі елементи в селекторі матимуть відповідні оголошення, які застосовуються до них. Ви можете групувати різні id селектора разом, як показано нижче: #header, #content, #footer ( position: absolute; width: 300px; left: 250px; ) Отже, селектор - це елемент, до якого застосовується оголошення в правилі стилю. Терміни, які використовуються в описі правил CSS. Рис.1. Звичайне правило CSS. Рис.2. Приклад правила CSS. Коротко про синтаксис запису правил CSS: Оголошення стилю в парвілі береться у фігурні дужки - () Властивість і значення в оголошенні поділяються двокрапкою - : В одному оголошенні (в одній парі фігурних дужок) може бути зазначено скільки завгодно пар властивість: значення Наприкінці кожної пари властивість: значенняставиться крапка з комою -; Після останньої пари властивість: значенняточку з комою ставити необов'язково. Синтаксис CSS не чутливий до пробілових символів (пробіли, табуляція, перенесення стік). Синтаксис CSS не є чутливим до регістру символів. В якості селекторів може виступати будь-який тег HTML, а також є селектори класу або id-селектори. Розгляньмо все по порядку. Селектори тегів Як писалося раніше, будь-який тег може бути селектором у правилі CSS. Розглянемо приклад. Вітання! Заголовок h2! До речі, групі селекторів можна задати одне оголошення. Наприклад, ми хочемо, щоб теги заголовків , і були синього кольору та вирівнювалися по центру блоку. Для цього можна в селекторі перерахувати ці теги, розділивши їх комою. Ось приклад коду: Привіт h1! Заголовок h2! Такий запис стилю дорівнює наступній групі правил: Селектори нащадків Можна призначити стильові правила елементам залежно від того, чи вкладено цей елемент до іншого. Якщо один тег вкладений в інший, то вкладений тег називається його нащадком, а тег який вкладений нащадок називається предком. Наприклад, потрібно поставити абзаци Всередині таблиці Червоний колір тексту. Для вирішення такого завдання в селекторі елементи розташовуються в порядку вкладеності та поділяються пробілами. Тобто наше завдання вирішується так: Вітання! Текст абзацу в таблиці. Текст абзацу поза таблицею. Усі теги Усі таблиці документа відображатимуть колір червоним. Зверніть увагу, тег Що знаходиться всередині тега також відображає текст червоним кольором. Насправді, замість можна було вказати тег , так як тег завжди повинен містити тег . Для подальшого вивчення селекторів CSS потрібно освоїти кілька нескладних термінів структури документа. Дерево документа (англ. document tree) - це схема побудови HTML документа, що показує порядок проходження тегів та його вкладеність друг в друга. Наведемо приклад такої схеми: Дерево документа наочно показує зв'язки в HTML документі, порядок проходження тегів та їх вкладеність. Його використовують розробники для написання CSS стилів та JavaScript сценаріїв. Ось приклад коду, який відповідає схемі дерева елементів з малюнка 1. Вітання! Текст абзацуі жирний. Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Отже, між тегами HTML документа є зв'язки. Вони виражаються у вкладеності тегів або порядку проходження одного тега за іншим. Ці зв'язки називають родинні зв'язки, а для позначення різних типів родинних зв'язків використовують терміни, такі як предок та нащадок, батьківський та дочірній елемент та інший "сімейні" терміни. Тепер розглянемо всі типи зв'язків. Предки та нащадки Предки (ancestor) - елементи, які містять інші елементи, тобто елемент є предком для всіхвкладених у нього елементів. Нащадки (descendant) – елементи, вкладені в інший елемент. Селектори нащадків вже було розглянуто вище. Батьки та дочірні елементи Батько (parent) - це предок першого рівня (безпосередній предок) елемента. Дочірній елемент (child – дитина) – це нащадок першого рівня. Батьківський елемент може мати необмежену кількість дітей. У нашому дереві елементів у тега наступні дочірні елементи: , , і ще один Братські чи сестринські елементи Братські або сестринські елементи (англ. siblings - брати і сестри), група елементів має спільного батька. Наприклад, теги , , та другий Сестринські, бо мають спільний батько . Суміжні елементи Сумежні елементи - це сусідні братні елементи, тобто елементи, що мають спільного батька і йдуть поряд у дереві елементів. У прикладі суміжними елементами будуть пари: і , І , і Тепер повернемося до селекторів. Дочірні селектори Коли нас цікавлять не всі нащадки, а тільки нащадки першого рівня, тобто дочірні елементи, CSS використовують дочірні селектори. Для вказівки того, що правило стилю встановлено лише до дочірнього елемента, у селекторі використовується символ ">". Вітання! Текст абзацу в таблиці. Текст абзацу в таблиці (в контейнері div). Текст абзацу поза таблицею. HTML код цього прикладу повністю збігається з кодом прикладу для селектора нащадків, відрізняється тільки правило стилю. Внаслідок застосування дочірнього селектора текст абзацу в таблиці у контейнері вже не червоного кольору, тому що для цього абзацу тег батько, а тег предок. Суміжний (сусідний) селектор Селектор суміжного елемента вибирає елемент, розташований безпосередньо за іншим заданим елементом. Синтаксис цього селектора: селектор попереднього елемента, знак "+" та за ним селектор обраного елемента. Розгляньмо реальний приклад. У великих статтях, що містять кілька розділів, що мають назву теги бажано збільшити верхній відступ (властивість margin-top). Відступ у 20px надаватиме тексту читабельності. Але ось у випадку, якщо тег йде відразу після , а це може бути на початку статті, вірний відступ над тегом буде зайвим. Вирішити таке завдання можна за допомогою сумісного селектора елемента. Ось html-код із прикладом роботи селектора суміжного елемента. Вітання! Заголовок h2 Заголовок h2 Текст абзацу на про неймовірні пригоди. Інша назва суміжних селекторів: сусідні селектори, тут можна прочитати докладніше про цей тип селекторів. Споріднений селектори Селектор спорідненого елемента схожий на сусідній селектор, тільки він поширюється на всі зазначені елементи, що йдуть за вибраним. Синтаксис спорідненого селектора: селектор попереднього елемента, знак "~" (тильда) і за ним селектор елементів, що вибираються. Приклад застосування сестринського селектора. Вітання! Текст абзацу №1 на про неймовірні пригоди. Текст абзацу №2 на неймовірні пригоди. Текст div №1 на неймовірні пригоди. Текст абзацу №3 на про неймовірні пригоди. З прикладу видно, що після текст абзацу №3 також був червоним кольором. Тобто для присвоєння стилю сестринські елементи не повинні йти один за одним. Універсальний селектор Якщо в селекторі правила CSS вказано символ "*", це правило застосовується до всіх елементів сторінки без винятку. Складно уявити випадок, коли таке правило має сенс. Але є один випадок, коли розробник хоче "обнулити" всі зовнішні та внутрішні відступи. Тоді потрібно використовувати такий стиль: * ( margin: 0; padding: 0; ) Але символ "*" можна використовувати у складових селекторах. Ul* (color: red) Цей код призначає червоний колір тексту всіх нащадків елемента . Класи Класи в CSS - найрозповсюдженіший спосіб призначення стилю групі елементів. Клас застосовують коли потрібно задати різні стилі елементам HTML-документа, створеним одним тегом. Синтаксис класу: Тег.Ім'я класу У селекторі стилю спочатку пишеться потрібний тег, потім через точку вказується ім'я класу. Ім'я класу має починатися з латинської літери і може містити символи дефісу (-) і підкреслення (_). Приклад, коли застосовують класи: на сайті верхнє, бічне та нижнє меню створюється за допомогою тегів , цим трьом меню потрібно створити три різні стилі. У CSS створюють три класи ul.menu-top, ul.menu та ul.menu-bottom. У тілі html-документа різні меню створюються із зазначенням класу в атрибуті class : class = "menu-top "> ... class = "menu "> ... class="menu-bottom">... Класи - часто використовуються інструменти CSS. Він зручний і, крім того, робить код стилю більш читаним. Можна створити клас, який буде застосований до будь-якого тегу. Для цього використається універсальний селектор. *.Ім'я класу ( властивість1 : значення ; властивість2 : значення ; ... ) Цей запис можна скоротити, прибравши символ "*". Ім'я класу ( властивість1 : значення ; властивість2 : значення ; ... ) ID селектори (ідентифікатори) Ідентифікатори – це типи селекторів, що задають унікальне ім'я елемента. Унікальне - означає, що зустрічається один раз у коді документа. За допомогою ідентифікаторів можна створити стиль, але їхнє основне призначення - звернення до них за допомогою скриптів. При описі ідентифікатора спочатку вказується символ ґрат (#), потім іде ім'я ідентифікатора. #Ім'я ідентифікатора(Властивість1: значення; властивість2: значення; ...) Також, як і ім'я класу, ім'я ідентифікатора має починатися з латинської літери і може містити символи дефісу (-) і підкреслення (_). Селектори атрибутів HTML має ряд тегів, які в залежності від атрибутів змінюють свою дію. Наприклад, тег Залежно від значення атрибута типу може створювати поле форми, кнопку та інші елементи форми. Отже, якщо застосовувати стиль до селектора input , він змінить всі елементи форми, створені цим тегом. Для точного керування такими елементами CSS існують селектори атрибутів. Селектори атрибутів бувають різні. За допомогою селекторів атрибутів можна встановити стиль тегу, якщо він має певний атрибут або якщо певний атрибут тега має певне значення. Селектори атрибутів – тема окремої великої статті. У рамках цієї статті ми лише наголосимо, що вони є. Псевдокласи Ще одна велика тема в CSS – псевдокласи. Приставка "псевдо" означає уявність чи помилковість. Справа в тому, що це елементи html документа змінюються в залежності від дій користувача. Наприклад, посилання змінюється залежно від наведення на неї курсора. За допомогою псевдокласів створюються динамічні ефекти на сторінці. Синтаксис псевдокласу: Селектор: псевдоклас(Властивість1: значення; властивість2: значення; ...) Можна використовувати псевдокласи до селекторів ідентифікаторів чи класів (ul.menu:hover (color : green )). Для новачків зазначу: якщо імен класів та ідентифікатів розробник вигадує назви сам, то імена псевдокласів в CSS - це зарезервовані слова. Псевдоклас: Active виконує правило стилю, якщо елемент активний. Наприклад, на посилання наведено курсор і зроблено клік. Псевдоклас :hover - курсор миші просто наведений на елемент, наприклад посилання. Є ще багато псевдокласів. Повністю розкрити тему псевдокласів можна у межах окремої статті. Тут ми торкнулися її лише поверхово. Псевдоелементи За допомогою псевдоелементів можна додавати до контенту сторінки додатковий вміст, якого немає у вихідному коді. Також можна змінювати частину елемента, наприклад, першу літеру в абзаці. Тобто створював уявний елемент html – першу літеру зі своїм стилем відображення. Псевдоелементи CSS також велика тема, для повного розкриття якої потрібна окрема стаття. Синтаксис псевдоелементів такий самий, як і у псевдокласів: Селектор: псевдоелемент(Властивість1: значення; властивість2: значення; ...) Усього існує сім типів селекторів. Це: Селектор тега Селектор класу Селектор id Універсальний селектор Селектор атрибуту Селектор псевдокласу Селектор псевдоелемента Найпростіший – він записується як назва тега без кутових дужок. Наприклад, div . Цим записом ми говоримо, що весь вміст усіх тегів нашого документа чи документів буде написано шрифтом червоного кольору. Якщо нам потрібно якомусь одному параграфу задати якесь, припустимо, фон. То ми можемо використати селектор класу. Але перед тим, як писати правила, нам потрібно в тезі Цього параграфа написати атрибут class, у значенні якого можна писати все, що завгодно (крім латинських літер, можна використовувати знак дефісу і цифри), але потрібно дати назву нашому селектору так, щоб потім було зрозуміло, до чого він відноситься. Потім у таблиці стилів, або в тезі нашого документа міжми пишемо крапку, а після неї значення атрибуту class, і у фігурних дужках задаємо правила даного параграфа. Якщо у документі: То у таблиці стилів: Pravilo ( … } При цьому різні елементи документа можуть мати ті самі значення атрибута class . Тобто ми можемо кілька тегів віднести до одного й того класу і їх зміст буде якимось чином оформлятися. Це дозволяє створити універсальне правило, наприклад, для виділення важливих частин тексту, а в документі просто додавати атрибут classу теги. Перше, про що варто сказати – це те, що значення атрибуту id у HTML – унікальне. На відміну від class, ми не можемо його приписати будь-якому тегу, а лише одному! У таблиці стилів він зображується як знака решітки, а документі потрібно до тегу додати атрибут id з якимось значенням. Якщо у документі: То у таблиці стилів: #pravilo( … } Універсальний селектор записується як "зірочка". Якщо в таблиці задати правила для цього селектора, це правило буде застосовуватися до вмісту всіх тегів. *{ … } Всі ці чотири типи селекторів працюють на сьогоднішній день у всіх браузерах. Але є селектори, які працюють не скрізь, наприклад, Internet Explorer версій 7,6 і нижче. Записуються вони так: { … } Цим записом ми говоримо, що все, що укладено в теги, що мають атрибут title, матиме такий вигляд, що прописаний у фігурних дужках. Причому абсолютно не важливо, чи має цей атрибут якесь значення. Він може бути порожнім і записаний так: Все одно до тегу Будуть застосовані правила, які записані у селекторі. Якщо потрібно, щоб правила були застосовані до атрибуту (наприклад, до title) з певним значенням, тоді слід записати так: { … } Якщо потрібно, щоб правила були застосовані до вмісту певного тега з якимсь атрибутом (наприклад, з title), мають певне значення, треба записати так: p ( … } Якщо ми хочемо, щоб правила були застосовані до вмісту тегів з атрибутом title(або якимось іншим), у значенні якого міститься якесь слово цілком, потрібно записати це так: { … } title(або інший), у значенні якого зустрічається не слово цілком, а просто якийсь шматочок тексту (наприклад, у каспійському слові міститься каспій). Тоді треба записати так: { … } Якщо ми хочемо, щоб правила були застосовані до вмісту тега, що має атрибут title(або інший), значення якого починається з якихось символів (літер). Тоді треба записати так: { … } Якщо ми хочемо, щоб правила були застосовані до вмісту тега, що має атрибут title(або інший), значення якого закінчується якимись символами (літерами). Тоді треба записати так: { … } Селектори атрибутів - це дуже потужний інструмент, який, на жаль, зараз не так широко використовується, "завдяки" Microsoft і його IE 6,7 і нижче. Але, незабаром, коли остаточно відімре IE версій 6,7 і нижче, дані селектори міцно увійдуть в CSS і будуть широко застосовуватися. Селектори псевдокласів відповідають за вигляд вмісту елементів, коли він перебуває у якомусь стані. Це селектори:link, :visited, :active, :hover, :focus та:first-child. Перші два ставляться лише до посилань, тобто. до вмісту тегів а інші можуть бути застосовані до будь-якого тегу, який має зміст. :link оформляє незаймані користувачем посилання. a:link (color:blue) Цим записом ми говоримо, що всі незаймані користувачем посилання на документ або документи будуть пофарбовані в синій колір. a:visited (color:red;) :active оформляє активний елемент (у момент натискання мишкою). Може застосовуватися до будь-якого елемента, але в IE 6 працює тільки для гіперпосилань. p:active (color:red) Цим записом ми говоримо, що всі параграфи в момент натискання на них мишкою будуть пофарбовані в червоний колір (літери). :hover – оформляє елемент, коли користувач наводить мишкою. Також може застосовуватися до будь-яких елементів, але IE 6 працює тільки для гіперпосилань. p:фокус (color:red;) При натисканні на Tab текст в елементах буде червоного кольору :first-child - ставить правила для перших "дітей" всіх елементів. У IE 6 не працює. Докладніше про те, що таке діти та батьки ми поговоримо в іншій статті, а зараз просто скажу те, що тег, який знаходиться всередині іншого тегу, є його "дитиною". Наприклад, у нас є код: Під час перегляду в браузері вміст першого тэга Забарвиться у червоний колір. Селекторів псевдоелементів лише два. Це:first-line та:first-letter :first-line – перша лінія (рядок) :first-letter – перший символ Якщо записати: p:first-line (color:blue), то у всіх параграфах документа чи документів перші рядки забарвляться у синій колір. Якщо записати: p:first-letter (color:blue), то у всіх параграфах перші літери забарвляться у синій колір. Обидва ці селектори не працюють у браузері IE 6. Ось начебто б і все про селектори, якщо щось упустив або десь припустився помилки - пишіть у коментарях до матеріалу. Селектор служить у тому, щоб однозначно визначити елемент у html документі, якого ми хочемо застосувати той чи інший стиль CSS . Селектор за елементом; Селектор за класом; Селектор з id; Контекстний селектор; Селектор за елементом До цього моменту ми з вами працювали саме з цим селектором. як селектор використовувалося безпосередньо ім'я html елемента, до якого ми хотіли застосувати цей стиль. Тобто. написавши клас наприклад для параграфа(Р), всі параграфи на сторінці набували стиль даного класу. P ( font-size: 12px } А тепер уявіть ситуацію, коли необхідно зробити перший параграф в одному стилі, другий в іншому, третій у третьому тощо. Тут нам на допомогу прийде селектор за класом. Селектор класу Давайте розберемо як створити універсальний клас у CSS. А зробити це дуже просто: спочатку ставимо крапку, потім одразу, без пробілу, пишемо ім'я класу, а потім у фігурних дужках стиль. Наприклад: .green ( font-family: arial, verdana, sans-serif; font-size: 12px; color:green; } Як застосувати цей стиль? Допустимо ми хочемо застосувати цей стиль до певного параграфа в документі. Ось як це буде виглядати в html: Текст параграфа... Як бачите, використовується атрибут classіз значенням назви стилю. ПРИКЛАД: Це звичайний параграф, для нього використовується селектор за елементом Цей параграф зелений, тому що до нього застосували клас А цей параграф більшого шрифту та червоний Цей параграф знову звичайний, за класом селектора елемента p ( font-family:arial,verdana,sans-serif; font-size:18px; } .green (color:green;) .big_red( font-size:28px; color:red; } Вказуємо спочатку базовий стиль для всіх параграфів (селектор за елементом), а потім вже, якщо хочемо в якомусь параграфі щось змінити, створюємо для нього спеціальний стиль (селектор за класом) і присвоюємо його параграфу. Коли ми створюємо цей спеціальний клас, ми повинні писати туди лише ті властивості, які хочемо додати, або змінити по відношенню до базового стилю для цього елемента. Класи з прикладу вище, можна застосувати як до параграфу, а й, наприклад, до заголовків, чи, наприклад, до осередку таблиці, чи до всієї таблиці, коротше вони можуть застосовуватися скрізь, де вони можуть щось вплинути (у цьому у разі скрізь, де є параметр колір, і текст). Зробити так, щоб клас діяв тільки на певний елемент (наприклад параграф) можна вказавши назву елемента перед точкою: P.green (color:green;) Тепер клас green не діятиме ні на що інше, крім елемента P. Селектор з id Цей селектор застосовується, якщо необхідно виділити один єдиний елемент, унікальний, відмінний від решти в документі. Наприклад, виділимо перший заголовок на сторінці певним чином: html-частина: <Н1 id="firstheader">Перший заголовок на сторінці css - частина: H1#firstheader ( color: red; font-weight: bold; text-align: center ) Як бачите в html-частині замість атрибута class тут використовується атрибут id , а css - замість точки використовується знак #. В принципі, те саме можна зробити і з використанням селектора за класом J Контекстний селектор Це дуже корисна річ. Припустимо, ми маємо сторінку з таблицями і параграфами тексту, причому у таблиці, й у параграфах зустрічаються виділені жирним шрифтом(strong) слова. Необхідно зробити так, щоб слова в параграфі, виділені жирним, стали зеленого кольору. Так ось: p strong (color:green) Тобто. на початку Pпотім пробіл, потім STRONG,а вже потім стиль. Читається цей рядок приблизно так: Якщо всередині елемента Pє елемент STRONGто елементу strong присвоїти стиль зеленого кольору. Вкладеність може бути будь-якого рівня. Ось ще приклад: «Якщо раптом усередині комірки таблиці ( td) , зустрінеться параграф ( P) ,всередині якого буде виділене слово жирним ( STRONG), то нехай це слово стане червоним! « td p strong (color:red;) Влад Мержевич Ідентифікатор (називається також "ID селектор") визначає унікальне ім'я елемента, яке використовується для зміни його стилю та звернення до нього через скрипти. Синтаксис застосування наступного ідентифікатора. Універсальний селектор Влад Мержевич Іноді потрібно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, встановити шрифт або зображення тексту. У цьому випадку допоможе універсальний селектор, який відповідає будь-якому елементу веб-сторінки. Для позначення універсального селектора застосовується символ зірочки (* ) і синтаксис буде наступним. * ( Опис правил стилю ) Селектори атрибутів Влад Мержевич Багато тегів відрізняються за своєю дією залежно від того, які в них використовуються атрибути. Наприклад, тег може створювати кнопку, текстове поле та інші елементи форми лише рахунок зміни значення атрибута type . При цьому додавання правил стилю до селектора INPUT застосує стиль одночасно до всіх створених за допомогою цього тега елементів. Щоб гнучко керувати стилем подібних елементів, CSS введені селектори атрибутів. Дочірні селектори Влад Мержевич Дочірнім називається елемент, який безпосередньо розташовується усередині батьківського елемента. Щоб краще зрозуміти відносини між елементами документа, розберемо невеликий код (12.1). Приклад 12.1. Вкладеність елементів у документі HTML5 CSS 2.1 IE Cr Op Sa Fx Сусідні селектори Влад Мержевич Сусідні називаються елементи веб-сторінки, коли вони йдуть безпосередньо один за одним у коді документа. Розглянемо кілька прикладів відношення елементів. Lorem ipsum dolor sit amet. У цьому прикладі тег є дочірнім по відношенню до тегу Оскільки він знаходиться усередині цього контейнера. Відповідно Виступає як батько . Контекстні селектори Влад Мержевич Під час створення веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб стилі цих тегів використовувалися коректно, допоможуть селектори, які працюють лише у певному контексті. Наприклад, задати стиль для тега тільки коли він розташовується всередині контейнера Таким чином, можна одночасно встановити стиль для окремого тега, а також для тега, який знаходиться всередині іншого. ПОХОДЖЕННЯ СТАТТІ Корпуси Як скинути налаштування на Samsung різними способами Корпуси Як зробити скріншот на самсунгу Блоки живлення Як перенести програму Android на карту пам'яті? Материнські плати Meizu U10 - Технічні характеристики Meizu u10 огляд російською мовою Інтернет Чому Водафон йде стопами МТС і вводить регіональність? Мультимедіа One M8 скидання налаштувань та скидання пароля Блоки живлення З світу по нитці (Кращі, обрані та ексклюзивні новини) Фаблети Xiaomi Mi Mix Мультимедіа Смартфон Mi4 Xiaomi: відгуки та технічні характеристики Xiaomi mi4 чорний огляд Блоки живлення Соло на клавіатурі Як навчитися швидко друкувати на клавіатурі наосліп Рекомендуємо Відеокарти Як встановити XAP файл на Windows Phone смартфон Щасливі власники смартфонів на базі операційної системи Windows Phone 8.0 не всі знають, як можна встановлювати файли формату *. Установка офіційної прошивки Samsung Galaxy J5 SM-J500F Корпуси Прошивка Highscreen Spade, recovery, root Блоки живлення Соло на клавіатурі Соло російською мовою Монітори Які формати відеофайлів кращі за інші? Windows 7 Клонування жорсткого диска Windows 7 Як підключити жорсткий диск від комп'ютера до ноутбука (нетбука) Як підключити звичайний hdd до ноутбука Windows 7 Порівняння моделей для мультиспорту від годинникових марок GARMIN, POLAR та SUUNTO Історія фінської компанії Polar Electro O Як змінити пошукову систему «за умовчанням» Радіо мобільного пристрою є вбудованим FM-приймачем Як скинути налаштування на Samsung різними способами Як скинути налаштування на Samsung різними способами Як зробити скріншот на самсунгу Як перенести програму Android на карту пам'яті? Meizu U10 - Технічні характеристики Meizu u10 огляд російською мовою Чому Водафон йде стопами МТС і вводить регіональність? One M8 скидання налаштувань та скидання пароля З світу по нитці (Кращі, обрані та ексклюзивні новини) Фаблети Xiaomi Mi Mix Смартфон Mi4 Xiaomi: відгуки та технічні характеристики Xiaomi mi4 чорний огляд Соло на клавіатурі Як навчитися швидко друкувати на клавіатурі наосліп Як встановити XAP файл на Windows Phone смартфон Установка офіційної прошивки Samsung Galaxy J5 SM-J500F Прошивка Highscreen Spade, recovery, root Соло на клавіатурі Соло російською мовою Які формати відеофайлів кращі за інші? Copyright 2024 - Ремонт комп'ютерів та ноутбуків. Відеокарти, вінчестери, Інтернет, монітори.