Ми впевнені, що серед наших клієнтів є багато професіоналів IT, які працюють над цікавими проектами. Якщо у Вас виникає бажання розповісти про них, Ви можете розмістити статтю у нашому блозі. А щоб було цікавіше, ми зробили конкурс статей, щомісяця три переможці отримуватимуть призи.
Стаття також доступна російською (перейти до перегляду).
Зміст:
- Основні способи прив'язки CSS стилів до HTML коду
- Основні CSS стилі, які застосовуються для стилізації html коду
- Відступи
- Фон
- Позиціювання елементів (блоків)
З англійської Cascading Style Sheets - каскадні таблиці стилів. Це код, який використовується для стилізації Вашої веб сторінки, її HTML елементів.
За допомогою цих таблиць ми пояснюємо браузеру, де який фон або картинку вставити, на яку ширину розтягнути блок.
У минулій статті ми розібрали основні HTML теги, які повинен знати кожен SEO фахівець для успішного просування.
Тепер розглянемо той мінімум, який потрібний кожному сеошнику.
Часто нам треба провести внутрішню оптимізацію сайту, щось поправити на сайті, змінити розмір картинки, фон, перемістити меню тощо. Не будете ж Ви кожного разу звертатися до програміста або верстальника?.
Основні способи прив'язки CSS стилів до HTML коду
Спершу розглянемо, як CSS можна прив'язати до основного HTML коду:
-
Вбудовані CSS
За допомогою атрибуту style стиль прописується окремо для кожного елементу HTML.
Приклад:
<p style="color: #112233;">text</p>
-
Зовнішні CSS
Найпоширеніший спосіб стилізації.
Таблиці стилів css розміщуються в окремому файлі, а посилання на них розміщуються в розділі <head></head>.
Розміщуйте тут посилання тільки на найважливіші стилі, які потрібні для відображення сторінки. Решту можна розмістити знизу.
Це прискорить завантаження сторінки, спочатку завантажиться те, що важливо, а потім асинхронно все інше.
Такий спосіб прив'язки дозволяє стилізувати HTML код усього сайту за допомогою одного CSS файлу.
Також можна стилізувати за допомогою окремих CSS файлів окремі сторінки (про нас, контакти, форма зворотнього зв'язку тощо).
Приклад:
Файл index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700&subset=cyrillic-ext" rel="stylesheet">
<title>Mogo</title>
</head>
Файл CSS
body {
background-color:#ffffff;
font-size: 15px;
line-height: 1.6;
color: #000;
}
-
Внутрішні CSS
Стилі задаються за допомогою атрибуту <style>, який розміщується в розділі <head></head>.
Так роблять, коли необхідно задати стилі до якоїсь окремої посадкової сторінки.
Приклад:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Внутрішні стилі CSS</title>
<style>
H1 {
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#555566;
}
</style>
</head>
<h1>Внутрішні стилі CSS - Приклад</h1>
</body>
</html>
У блоці <style></style> можна розмістити основні стилі CSS, а решту вже завантажувати асинхронно.
Детальніше про асинхронне завантаження дивіться тут.
Основні CSS стилі, які застосовуються для стилізації html коду
font-family
Визначає сімейство шрифтів, яке буде використане для оформлення.
Назви шрифтів вказуйте аналогічно до їх назв у Word, Google Docs та інших програм і сервісів.
Назви сімейств вказуйте через кому по альтернативності.
Якщо назва складається з кількох слів, то її слід обрамляти одинарними чи подвійними лапками.
Можна вказувати декілька сімейств шрифтів.
Коли браузер зустрічає першу назву сімейства, він починає шукати його на клієнтському пристрої. Якщо перший шрифт не буде знайдено, то браузер перейде за списком до другої назви.
Можливо, у вихідному макеті буде досить рідкісний шрифт, для цього HTML код треба прив'язати до онлайн бібліотеки. Посилання розміщується в розділі <HEAD>.
Приклад:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700&subset=cyrillic-ext" rel="stylesheet">
<title>Mogo</title>
</head>
Як це зробити читайте у статті "Як підключити нестандартні шрифти в HTML верстці та оптимізувати швидкість їх завантаження".
Для збереження авторського стилю можна використати загальні сімейства шрифтів:
-
serif шрифт із засічками;
-
sans-serif - без засічок;
-
monospace - моноширинний;
-
cursive - курсив;
-
fantasy - декоративний;
-
emoji - для відображення емодзі.
Це дозволить написати шрифт із засічками чи без, в курсиві тощо.
Приклад використання стилю font-family:
-
font-family: 'Kaushan Script', cursive;
-
font-family: 'Montserrat';
-
font-family: cursive.
Детальніше про веб шрифти дивіться тут.
font-size
Визначає розмір шрифту елемента або блока.
Розмір шрифту визначається в абсолютних значеннях: xx-small, x-small, small, medium, large, x-large, xx-large та відносних: larger та smaller.
Також використовуються наступні одиниці
em (висота шрифту елемента),
ex (у символах),
у пунктах (pt),
у відсотках (%),
у пікселях (px).
Мінімальне рекомендоване значення для зручності користування на мобільних пристроях та успішного просування – 12 px.
color
Цей стиль визначає колір тексту. У атрибуті можна вказувати як код кольору (color:#555111; color:#ffffff), так і ключові слова (color:red; color:green).
text-align
Визначає горизонтальне вирівнювання тексту в межах блоку, елементу.
Ось основні атрибути, які застосовуються найчастіше:
-
center. Текст вирівнюється по центру;
-
justify. Текст розтягується по всій ширині елемента, блоку, сторінки. Будьте уважні при такій верстці, оскільки можлива поява некрасивих та великих пробілів;
-
left. Текст вирівнюється по лівому краю;
-
right. Текст вирівнюється по правому краю;
-
також застосовуються атрибути auto, inherit, start, end.
line-height
Визначає міжрядковий інтервал.
Як значення застосовуються такі одиниці вимірів: відсотки % (100%, 150%), пікселі px (12px, 1.2 em), інтерліньяж 1.5 – полуторний інтервал.
font-weight
Визначає насиченість, жирність тексту.
Жирність тексту встановлюється через наступні значення: bold, bolder, lighter, normal. А також в значеннях від 100 – максимально світле зображення, до 900 – найжирніше зображення, з кроком в 100 одиниць. За умовчанням встановлено значення 400.
Приклад:
.stat_count {
text-align: center;
font-size: 72px;
font-weight: bold;
line-height: 1;
margin-bottom: 10px;
}
text-transform
Перетворює текст у блоці або елементі в малий або великий вид.
Вказуються наступні значення:
-
capitalize
Перший символ у кожному слові буде у верхньому регістрі (великими);
-
lowercase
Усі символи у цьому елементі або блоці будуть в нижньому регістрі (малими);
-
uppercase
Усі символи в цьому елементі або блоці будуть у верхньому регістрі (великими);
-
inherit
Наслідує значення батьківського елементу.
border
Визначає межу (рамку) навколо елемента.
Ця властивість дозволяє визначити товщину, стиль та колір рамки.
Для виведення рамки лише з певного боку використовуйте:
-
border-top;
-
border-right;
-
border-bottom;
-
border-left.
Застосовується наступний синтаксис:
border: [border-width || border-style || border-color] | inherit
-
border-width
Встановлює товщину лінії у пікселях (PX);
-
border-style
Встановлює стиль рамки: dotted, solid, double, groove, ridge, inset, outset;
-
border-color
Встановлює колір рамки за допомогою ключових слів або коду кольору.
Приклад:
border-left: 1px solid #b5eae0;
Відступи
padding
Визначає відступ всередині блоку, починаючи від його меж.
Вимірюється у пікселях (px), у відсотках (%) або auto, якщо потрібно зробити рівномірний відступ від полів.
Число значень, від одного до чотирьох, які вказуються в атрибутах, залежить від величини відступів зліва, зверху, справа ти знизу.
Також використовуються наступні стилі
-
padding-top;
-
padding-right;
-
padding-bottom;
-
padding-left.
margin
Визначає відступ самого блоку від кожного його краю, а також відстань між сусідніми блоками.
Відступ визначається від зовнішньої межі поточного елементу до внутрішньої межі батьківського елементу.
Або від краю браузера, якщо в елемента немає батьківського елемента.
Аналогічно властивості padding, для вертикальних, лівих, нижніх та правих відступів використовуються наступні відступи:
-
margin-top;
-
margin-right;
-
margin-bottom;
-
margin-left.
Для наочності дивіться схему внизу.
При стилізації через “margin” відступи задаються за годинниковою стрілкою в наступному порядку: верх (top), справа (right), знизу (bottom), зліва (left).
Допускається вказувати кількість відступів від 1 до 4:
-
Вказано один відступ – відступи будуть встановлені одночасно з усіх сторін на вказане значення.
margin: auto;
-
Вказано два значення. Перше значення – визначає відступ зверху та знизу, друге – справа та зліва.
margin: 25px auto;
-
Вказано три значення. Перше значення – визначає відступ зверху, друге – справа та зліва, третє – знизу.
margin: 0 auto 50px;
-
Вказано чотири значення. Перше – зверху, друге – справа, третє –знизу, четверте – зліва.
margin: 10px 20px 30px 20px.
Застосовуються атрибути auto, inherit.
У SEO просуванні стиль margin можна використати для усунення помилки "Інтерактивні елементи розташовані надто близько".
Оскільки він встановлює відстань між блоками.
Фон
Для оформлення та редагування фону використовуйте наступні CSS стилі.
background-color
Використовуйте цей стиль, щоб встановити колір фону.
А в якості атрибуту, який визначить колір, ключові слова або код.
Приклад:
background-color: #95e1d3;
background-color: cadetblue;
background-image
Використовується, якщо Ви хочете вставити зображення як фон.
Пишеться в наступному форматі:
background-image: url (шлях до файлу).
При стилізації одного элементу одночасно допускається вказувати як background-color, так і background-image.
Якщо на картинці, яку Ви вставляєте через background-image, є прозорі елементи, то через них Ви побачите і колір фону.
Також колір фону може стати альтернативою, якщо основне зображення не завантажиться з якоїсь причини.
Приклад:
background-image: url("../images/ntro.jpg")
background-repeat
Встановлює повторення фонового зображення, яке було встановлено за допомогою background-image.
Повторення встановлюється по горизонталі (repeat-x), по вертикалі (repeat-y) або по обох напрямках (repeat).
Для економії трафіку та часу завантаження рекомендуємо використовувати такі алгоритми. Це стосується фонових зображень з градієнтом або малюнком, що повторюється:
-
На PSD макеті вирізаєте один блок, що повторюється;
-
Вставляєте таку смужку як фон через background-image;
-
Розтягуєте цю смужку на необхідну висоту або ширину за допомогою стилю background-repeat.
Приклад:
body {
background-image:url("/images/intro.jpg");
background-repeat: repeat-x.
}
opacity
Визначає прозорість елементу.
Синтаксис: opacity: значення.
Прозорість визначається наступними значеннями.
-
0 - повністю прозорий елемент
-
0.5 - напівпрозорий;
-
1 - повністю непрозорий елемент.
Приклад:
opacity: 0.5.
Позиціювання елементів (блоків)
Положення елементів (блоків) регулюється значеннями: top, left, bottom та right.
position: absolute
Позиціонує елемент відносно верхнього лівого кута браузера.
Положення елементу залежить від значення position батьківського елементу.
Якщо у батьківського елементу значення position позначено як absolute, relative або fixed, то відлік позиції буде вестись від лівого верхнього лівого краю батьківського елементу.
position: relative
Відносне позиціювання.
Положення елементу відраховується відносно лівого верхнього краю батьківського елементу.
position: fixed
За своїми властивостями подібне до position: absolute.
Але особливість в тому, що при такому позиціюванні елемент не змінює свого положення незалежно від положення браузера та прокрутки.
Приклад:
.services_icon {
position: absolute;
top: 0;
left: 28px;
z-index: 1;
}
.services_icon {
position: absolute;
top: 0;
left: 58px;
z-index: 1;
}
На нижньому скриншоті видно, що при збільшенні значення “left” іконки змістилися праворуч.
float
Визначає з якого боку вирівнюватиметься елемент або блок, при цьому інші блоки чи елементи обтікатимуть його з протилежного боку.
Застосовуються наступні значення:
-
left
Вирівнювання елемента по лівому краю, сусідні елементи обтікають його справа;
-
right
Вирівнювання елемента по правому краю, сусідні елементи обтікають його зліва;
-
none
Вирівнювання відсутнє;
-
inherit
Вирівнювання наслідується за батьківським елементом.
Таке вирівнювання застосовується наприклад для вирівнювання зображень на сайті.
Варто відмітити, що такі стилі на сьогодні застосовуються досить рідко.
display
Визначає, як елемент або блок має бути показаний в документі.
Найчастіше застосовуються наступні значення:
-
flex
Використовується для створення складних гнучких макетів та адаптивної верстки. З урахуванням того, що на деяких сайтах більшість трафіку з мобільних пристроїв, значення “flex” для стилю display є одним з найчастіше використовуваних.
Детальніше про застосування такої верстки читайте тут.
-
block
Якщо немає особливих умов з позиціювання через float, то елементи розташовуються один над одним.
За умовчанням блок розширюється на всю ширину браузера, але можна вказати ширину та висоту вручну.
Відстань між блоками регулюється через margin, за умовчанням вони притиснуті один до одного впритул;
-
inline
Елементи або блоки розташовуються одні за іншими, в лінію. Їх ширина та висота залежать від їх вмісту.
Також застосовуються такі значення як: none, inline-block, inline-table, list-item, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group.
Детальніше про застосування цього стилю читайте тут.
Ми представили Вам основні CSS стилі, знання яких обов'язково стануть у пригоді будь-якому SEO фахівцю.
Ці знання допоможуть йому поліпшити SEO показники та підкоригувати верстку самостійно, без допомоги програмістів і верстальників.
Ми щось не вказали або в чомусь помилилися?
Напишіть про це в коментарях і компанія FREEhost.UA із задоволенням на них відповість.
|
Дата: 06.08.2021 Автор: Яременко Владислав під редакцією Євгена Шермана
|
|
Рекомендовані статті на тему:
- 10 подсказок о том как правильно назвать свой бизнес
- Перелінковка та просування сайту за допомогою застарілого контента завдяки 301 редиректу
- Як правильно складати мета - теги для ТАЙТЛ та дескрипшн
- Преимущества платного хостинга перед бесплатным
- Как выработать Link Building стратегию? Шаблон автоматической таблицы
Авторам статті важлива Ваша думка. Будемо раді його обговорити з Вами:
comments powered by Disqus