Значення дужок в CSS

Автор: Judy Howell
Дата Створення: 5 Липня 2021
Дата Оновлення: 13 Травень 2024
Anonim
Вычисления в CSS: calc(), min(), max(), clamp()
Відеоролик: Вычисления в CSS: calc(), min(), max(), clamp()

Зміст

Акронім CSS походить від англійської «каскадних таблиць стилів» або «каскадних таблиць стилів». CSS надає веб-розробникам і дизайнерам більший ступінь художнього та дизайнерського контролю, розділяючи вміст від параметрів відображення. Висловлювання CSS розміщуються в заголовку веб-документа і потім відображаються в тілі веб-сторінки за допомогою фігурних дужок - {}. Всередині дужок знаходяться дужки - () - або дужки - [] - які позначають інші елементи CSS.


Скоби CSS використовуються в тілі веб-документа (Comstock / Comstock / Getty Images)

Ключі

Ключі - це основні елементи синтаксису CSS. Вони означають відкриття та закриття всіх параметрів CSS, що містяться в них. Представлені як {}, вони слідують елементам CSS, які означають зображення, позицію, елемент відображення або будь-яку комбінацію елементів. Ключі можуть існувати всередині будь-якого елемента / шару div і завжди знаходяться всередині тегів "</ body>". Ось приклад:

div # example {padding: 5px; запас: 20px; ширина: 350px; }

Дужки

Реляційні елементи, такі як відсотки і кольори, укладені в дужки. Дужки надають додаткове визначення елементів CSS. У версіях CSS до CSS3, дужки можуть визначати елементи так само, як і ключі. Два приклади - кольорові (визначаються шістнадцятковим кодом) і фонові зображення, відповідно:


колір: rgb (128, 128, 255); зображення: url ("/ images / bg.png")

Кронштейни

Дужки - [] -, відомі як селектори атрибутів, використовуються для позначення значень атрибутів елемента. У CSS2 було чотири різних значення, а в CSS3 - три. Чотири оригінальні селектори визначають наявність атрибута - [title], що відповідає будь-якому елементу, який має заданий атрибут "title"; просте значення атрибута - input [type = "send"], що відповідає будь-якому елементу входу, тип атрибута якого дорівнює "send"; значення атрибуту списку - p [class ~ = "literary"], що відповідає пунктам, чий атрибут класу є списком слів, розділених пробілами, один з яких є "літературним"; і часткове значення атрибута - [href ^ = "http:"], що відповідає елементам зв'язку, значення атрибута яких починаються з "http:". Кронштейни не використовувалися до початку Internet Explorer 7, оскільки IE6 їх не розпізнавав.


Багато алгебраїчні символи використовуються як елементи CSS (BananaStock / BananaStock / Getty Images)

Шеврони

Селектори та розділи базової мови розмітки гіпертекстової розмітки (HTML) та документів розширюваної мови розмітки (XML) розділені загостреними дужками, відомими як шеврони . Вони також представляють дочірній елемент деяких елементів CSS. У CSS "дочірній селектор" складається з двох або більше елементів, розділених шевроном ">". Вони позначають певні визначені розділи веб-сторінки: тіло, яке є видимою сторінкою; шари, які можуть бути укладені, як листи паперу один над одним; або титрування, що позначає певні об'єкти або дати, відомі як "мікроформати".

Примітки CSS

Вони відокремлені від CSS-дужок, але все ще є цінним організаційним інструментом для складних розкладів CSS. Це коментарі, які нічого не додають до HTML-коду, і тому не збільшують час завантаження сторінок; вони надають начерки для тривалих і складних CSS. Нотатки в CSS розміщуються в межах власного атрибута - / * - так:

/ Будь-який коментар міститься в сегментах, розділених косою рискою і зірочкою. /

Вони можуть бути надзвичайно корисними, щоб допомогти вам у навігації розділами каскадних таблиць стилів.

CSS може допомогти вам розробити сторінки для різних розмірів екрана без створення окремих макетів (Comstock / Comstock / Getty Images)

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

  • "Майстерність CSS: розширені рішення веб-стандартів"; Andy Budd, et al.; 2009
  • W3 Школи: Синтаксис CSS
  • "Кінцева посилання CSS"; Томмі Олссон та ін.; 2008

Рейси

  • W3C: CSS Selectors [англійською мовою]
  • New2HTML: Синтаксис CSS [англійською мовою]