Skip to content

Визначення дизайну властивості CSS

24 de Липень de 2021

Візуальний стиль та макет веб-сайту продиктовані CSS або каскадними таблицями стилів. Це документи, що формують HTML-розмітку веб-сторінки, надаючи веб-браузерам інструкції щодо відображення сторінок, які є результатом цієї розмітки. CSS обробляє макет сторінки, а також кольори, фонові зображення, типографіку та багато іншого. Якщо ви подивитесь на файл CSS, то побачите, що, як і будь-яка мова розмітки або кодування, ці файли мають певний синтаксис. Кожна таблиця стилів складається з ряду правил CSS. Ці правила, взяті в повному обсязі, визначають стиль сайту.

Частини правила CSS

Правило CSS складається з двох різних частин – селектора та оголошення. Селектор визначає, що стилізується на сторінці, а декларація – як його слід стилізувати. Наприклад: p {
колір: # 000;
}

type = “code”> Це правило CSS. Селекторна частина – це стор, який є елементом вибору елементів для “абзаців”. Отже, він вибрав би ВСІ абзаци на веб-сайті та надав їм цей стиль (якщо немає абзаців, на які націлено більш конкретні стилі в іншому місці вашого документа CSS). Частина правила, яка говорить: “колір: # 000;“називається декларацією. Ця декларація складається з двох частин – майно та значення. майно є колір шматок цієї декларації. Він визначає, який аспект селектора буде візуально змінено. значення це те, на що буде змінено вибрану властивість CSS. У нашому прикладі ми використовуємо шістнадцяткове значення # 000, що є абревіатурою CSS для “чорний”. Отже, використовуючи це правило CSS, на нашій сторінці абзаци відображатимуться чорним кольором шрифту.

Основи властивостей CSS

Коли ви пишете властивості CSS, ви не можете просто скласти їх так, як вважаєте за потрібне. Наприклад, “колір” – це фактична властивість CSS, тому ви можете ним користуватися. Ця властивість визначає колір тексту елемента. Якщо ви спробували використати “text-color” або “font-color” як властивості CSS, вони не зможуть, оскільки вони не є фактичними частинами мови CSS. Інший приклад – властивість “background-image”. Ця властивість встановлює зображення, яке можна використовувати для фону, наприклад: .logo {
background-image: url (“/ images / company-logo.png”);
}

type = “code”> Якщо ви спробували використати “background-picture” або “background-graphics” як властивість, вони зазнають невдачі, оскільки знову ж таки це не фактичні властивості CSS.

Деякі властивості CSS

Існує ряд властивостей CSS, які можна використовувати для стилізації сайту. Деякі приклади:

  • Кордон (включаючи стиль кордону, колір межі та ширину кордону)
  • Прокладка (включаючи відступ зверху, відступ праворуч, відступ нижній та відступ лівий)
  • Поля (включаючи поля зверху, поля праворуч, поля знизу та поля зліва)
  • Сімейство шрифтів
  • Розмір шрифту
  • Колір фону
  • Ширина
  • Висота

Ці властивості CSS чудово використовувати як приклади, оскільки всі вони дуже прості і, навіть якщо ви не знаєте CSS, ви, мабуть, здогадуєтесь, що вони роблять, виходячи з їх імен. Є й інші властивості CSS, з якими ви також зіткнетесь, і які можуть бути не такими очевидними, як вони працюють на основі їх імен:

  • Поплавок
  • Ясно
  • Переповнення
  • Перетворення тексту
  • Z-індекс

Поглибившись веб-дизайном, ви зустрінете (і використаєте) усі ці властивості та багато іншого!

Властивості потребують цінностей

Кожного разу, коли ви використовуєте властивість, ви повинні надавати йому значення – і певні властивості можуть приймати лише певні значення. У нашому першому прикладі властивості “color” нам потрібно використовувати значення кольору. Це може бути шістнадцяткове значення, значення RGBA або навіть кольорові ключові слова. Будь-яке з цих значень буде працювати, однак, якщо ви використовуєте слово “похмурий” з цією властивістю, воно нічого не робить, оскільки, наскільки описовим це слово може бути, воно не є визнаним значенням у CSS. Наш другий приклад “фонового зображення” вимагає шляху до зображення, щоб використовувати фактичне зображення з файлів вашого сайту. Це значення / синтаксис, яке потрібно. Усі властивості CSS мають значення, які вони очікують. Наприклад:

  • Border-color очікує значення кольору.
  • Розмір межі передбачає значення розміру, як-от пікселі або відсотки.
  • Стилі меж очікує один із зарезервованих стилів, що використовуються для цього властивості, наприклад “твердий”.

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

Формат mla apa chicago Ваше посилання

Кірнін, Дженніфер. “Визначення дизайну властивості CSS.” ThoughtCo, травень. 14, 2021, thinkco.com/property-definition-3466899.
Кірнін, Дженніфер. (2021, 14 травня). Визначення дизайну властивості CSS. Отримано з https://www.thoughtco.com/property-definition-3466899
Кірнін, Дженніфер. “Визначення дизайну властивості CSS.” ДумкаCo. https://www.thoughtco.com/property-definition-3466899 (доступ 24 липня 2021 р.).