Короткий посібник з мови дизайну в Інтернеті.
CSS (каскадні таблиці стилів) - це те, що робить веб-сторінки гарними та презентабельними. Це важлива частина сучасної веб-розробки та обов’язкова навичка будь-якого веб-дизайнера та розробника.
У цій статті я дам вам короткий вступ, який допоможе вам розпочати роботу з CSS.
Ми також запустили безкоштовний повний курс CSS на Scrimba. Клацніть тут, щоб перевірити.
Я припускаю, що ви добре знаєте HTML, але крім того, що для цього підручника немає передумов.
Починаємо
Почнемо з того, що ми можемо включити CSS у наші проекти. Як правило, це три способи.
1. Вбудований CSS
По-перше, ми можемо включити CSS безпосередньо в наші елементи HTML. Для цього ми використовуємо styleатрибут, а потім надаємо йому властивості.
Hello world!
Тут ми надаємо йому властивість colorі встановлюємо значення blue, що призводить до наступного:
Ми також можемо встановити кілька властивостей всередині styleтегу, якщо хотіли. Однак я не хочу йти далі цим шляхом, оскільки все починає заплутуватися, якщо наш HTML захаращений великою кількістю CSS всередині нього.
Ось чому був запроваджений другий метод, що включає CSS.
2. Внутрішній CSS
Інший спосіб включити CSS - використання styleелемента в headрозділі документа HTML. Це називається внутрішнім укладанням.
h1 { color: blue; } В елементі стилю ми можемо надати стиль нашим HTML-елементам, вибравши елементи (елементи) та надавши атрибути стилю. Так само, як ми застосували colorвластивість до h1елемента вище.
3. Зовнішній CSS
Третім і найбільш рекомендованим способом включення CSS є використання зовнішньої таблиці стилів. Ми створюємо таблицю стилів з .cssрозширенням і включаємо його посилання в документ HTML, наприклад:
У наведеному вище коді ми включили посилання на style.cssфайл за допомогою linkелемента. Потім ми пишемо весь наш CSS в окрему таблицю стилів, яка називається style.cssтак, щоб ним було легко управляти.
h1 { color: blue; } Цю таблицю стилів також можна імпортувати в інші HTMLфайли, тому це чудово підходить для повторного використання.
Селектори CSS
Як ми вже обговорювали раніше, CSS - це мова дизайну, яка використовується для стилювання елементів HTML. І для того, щоб стилізувати елементи, спочатку потрібно їх вибрати. Ви вже бачили, як це працює, але давайте заглибимось трохи глибше в селектори CSS і розглянемо три різні способи вибору елементів HTML.
1. Стихія
Перший спосіб вибрати елемент HTML - це просто використання назви, що ми зробили вище. Давайте подивимось, як це працює:
h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } Наведений вище приклад є майже зрозумілим. Ми вибрати різні елементи , таких як h1, p, divі даючи їм різні атрибути стилю. У font-sizeконтролює розмір тексту, colorвстановлює колір тексту, і marginдодає інтервал навколо елемента.
2. Клас
Інший спосіб виділення елементів HTML - це використання атрибута class. У HTML ми можемо призначити різні класи для наших елементів. Кожен елемент може мати кілька класів, і кожен клас також може бути застосований до кількох елементів.
Побачимо це в дії:
This is heading
.container { margin: 10px; } У наведеному вище коді ми призначили клас containerелементу div. У таблиці стилів ми вибираємо наш клас, використовуючи .classNameформат, і надаємо йому 10pxполе.
3. посвідчення особи
Як і класи, ми також можемо використовувати ідентифікатори для вибору елементів HTML та застосування стилів до них. Єдина різниця між класом та ідентифікатором полягає в тому, що один ідентифікатор може бути призначений лише одному елементу HTML.
This is a paragraph
#para1 { color: green; font-size: 16px; } У наведеному вище прикладі показано, як ми призначаємо ідентифікатор елементу абзацу, а пізніше використовуємо селектор ідентифікатора в таблиці стилів, щоб вибрати абзац і застосувати до нього стиль.
Шрифти та кольори
CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:
1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)
2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)
For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS is Coooooool!!!!
.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 
As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.
In the stylesheet, we select the container class and set its width, height, background-color, and text-align.
Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.
Conclusion
You might feel a bit overwhelmed by all this information, but don’t worry.
Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
