• База знаний
  • /
  • Блог
  • /
  • Wiki
  • /
+380 (44) 364 05 71

Что же такое CSS? Что нужно знать SEO-специалисту

Оглавление:

  1. Основные способы привязки CSS стилей к HTML коду
  2. Основные CSS стили, которые применяются для стилизации html кода
  3. Отступы
  4. Фон
  5. Позиционирование элементов (блоков)

От англ. Cascading Style Sheets - каскадные таблицы стилей. Это код, который используется для стилизации Вашей вэб страницы, ее HTML элементов. 

С  помощью этих таблиц мы объясняем браузеру, где какой фон или картинку вставить, на какую ширину растянуть блок.

В прошлой статье мы разобрали основные HTML теги, которые должен знать каждый SEO специалист для успешного продвижения.

Теперь рассмотрим тот минимум, который необходим каждому сеошнику.

Ведь часто, нам нужно провести внутреннюю оптимизацию сайта, что-то поправить на сайте, изменить размер картинки, фон, передвинуть меню и т.д. Не будете же Вы каждый раз обращаться к программисту или верстальщику?

Основные способы привязки CSS стилей к HTML коду

Для начала рассмотрим, как CSS можно привязать к основному HTML коду:

  1. Встроенные CSS

С помощью атрибута style стиль прописывается отдельно для каждого элемента HTML. 

Пример:

<p style="color: #112233">text</p>

  1. Внешние 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&amp;subset=cyrillic-ext" rel="stylesheet">

    <title>Mogo</title>

</head>

Файл CSS

body {

    background-color:#ffffff;

    font-size: 15px;

    line-height: 1.6;

    color: #000}

  1. Внутренние 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>

<body>

<h1>Внутренние стили CSS - Пример</h1>

</body>

</html>

В блоке <style></style> можно разместить основные стили CSS, о остальные уже грузить асинхронно.

Подробнее о асинхронной загрузке смотрите здесь.

Основные CSS  стили, которые применяются для стилизации html кода

font-family

Определяет семейство шрифтов, которое будет использовано для оформления.

Названия шрифтов указывайте аналогично их названиям в Word, Google Doc и других программ и сервисов.

Названия семейств указывайте через запятую по альтернативности.

Если название состоит из нескольких слов, то его следует брать в одинарные или двойные кавычки.

Можно указывать несколько семейств шрифтов.

Когда браузер встречает первое название семейства, он начинает искать его на клиентском устройстве. Если первый шрифт не будет найден, то браузер перейдет по списку к второму названию,

Возможно, в исходном макете будет достаточно редкий шрифт, для этого 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&amp;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 и padding

При при задании стилизации через “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/ntro.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;}

position: absolute - пример применения

 

.services_icon {

position: absolute;

top: 0;

left: 58px;

z-index: 1;}

  position: absolute - пример смещения картинок

На нижнем скриншоте видно, что при  увеличении значения “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
Автор: Яременко Владислав под редакцией Евгения Шермана
Голосование

Авторам статьи важно Ваше мнение. Будем рады его обсудить с Вами:

comments powered by Disqus
Спасибо, что выбираете FREEhost.UA