Як створити сss (з ілюстраціями)

CSS - це мова таблиць стилів, за допомогою якого можна створювати веб-сторінки і одночасно керувати декількома функціями, призначаючи групам певні елементи. Наприклад, за допомогою колірного коду дизайнер може змінити колір фону на всіх сторінках сайту, внісши всього одна зміна в CSS-код.

кроки

Частина 1 з 4:

Як написати вбудований CSS-код

1. Ознайомтеся з HTML-тегами. Необхідно знати, як працюють теги та атрибути src і href.

2. Вивчіть деякі з основних властивостей CSS. Існує безліч властивостей, але не потрібно запам`ятовувати все.

Запам`ятайте наступні основні властивості CSS: color і font-family.

3. Вивчіть значення відповідних властивостей. Для кожного властивості вказується значення. Наприклад, для властивості color можна вказати значення red.

4. Ознайомтеся з HTML-атрибутом style. Він використовується всередині елемента href або src. Щоб використовувати вказаний атрибут, в лапках після знака рівності введіть CSS-атрибут, двокрапка, а потім значення властивості. Це називається CSS-правилом.

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

Частина 2 з 4:

Як написати простий CSS-код

1. Запустіть програму, в якій можна створити файли HTML і CSS.

Якщо спеціальної програми немає, скористайтеся Блокнотом або іншим текстовим редактором. Просто збережіть файл як текстовий файл і файл CSS.

2. Відкрийте HTML-код. Зробіть це в HTML-редакторі (якщо він є).

У HTML-редакторі можна працювати з HTML-кодом і з CSS-кодом.

3. створіть тег внутріHTML-тега . В цьому випадку CSS-код можна написати без необхідності створювати окремий файл.

4. Виберіть елемент, до якого хочете додати стиль. Тепер введіть ім`я елемента і фігурні дужки ({ }). Щоб зробити код більш розбірливим, другу фігурну дужку завжди вводите на новому рядку.

5. Усередині дужок введіть CSS-правило, як якщо б ви використовували атрибут style. Кожен рядок повинен закінчуватися крапкою з комою (-). Щоб зробити код розбірливим, кожне правило вводите на окремому рядку, а кожен рядок повинна мати відступ.

Зверніть увагу, що цей стиль буде впливати на «все» елементи обраного типу на сторінці. Більш конкретний стиль буде розглянуто в наступному розділі.

Частина 3 з 4:

Як написати більш складний CSS-код

1. Створіть CSS-файл (а не HTML-файл) і збережіть його з розширенням .css. Також відкрийте HTML-файл.

2. створіть тег внутріHTML-тега . Так ви зв`яжете окремий CSS-файл з HTML-файлом. для тега потрібні три атрибути: rel, type і href.

rel вказує браузеру, як ставитися до HTML-файлу. Тут цей атрибут повинен мати значення stylesheet.

type повідомляє, до якого типу медіа відноситься посилання. Тут цей атрибут повинен мати значення text / css

href тут використовується так само, як в елементі , але тут цей атрибут повинен посилатися на CSS-файл. Якщо CSS-файл знаходиться в одній папці з HTML-файлом, в лапках вкажіть тільки ім`я файлу.

3. Виберіть елементи різних типів, до яких потрібно додати один стиль. додайте атрибут class до таких елементів і прирівняти їх до імені обраного класу. В цьому випадку у елементів буде однаковий стиль.

4. Вкажіть, який стиль отримає клас. В CSS-файлі введіть ім`я класу після точки ., тобто так: .class.

5. Виберіть окремі елементи, до яких потрібно додати спеціальний стиль, і додайте атрибут id. В CSS ідентифікатори створюються за допомогою символу #, а не точки.

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

Частина 4 з 4:

Як вивчити CSS і HTML

1. Відкрийте сайт HTML Academy. На ньому можна навчитися основам веб-розробки.

2. Знайдіть інші сайти, спеціально призначені для вивчення HTML і CSS.Шукайте авторитетні джерела, щоб примножити свої знання.

3. Спілкуйтеся з веб-дизайнерами і розробниками. Їх досвід допоможе вам опанувати цінними знаннями та навичками.

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

Поради

Існує безліч різних властивостей, якими можна маніпулювати за допомогою CSS. Знайдіть веб-сайт, який вам подобається, і перегляньте його вихідний файл. Якщо всередині тегів HEAD є ім`я CSS-файлу, клацніть по ньому, щоб переглянути різні властивості і значення, призначені елементам.

попередження

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