Что обязательно должен знать успешный блоггер? Основы CSS

Что такое CSS? Основы CSS верстки для начинающихКаждый вебмастер стремится выбрать лучший шаблон для своего блога на WordPress, но после установки самого привлекательного замечаешь, что цвет букв оказывается немного не тот, который ожидал увидеть, да и сайдбар не мешало бы чуть-чуть больше сделать ;). Так начинается поиск новой красивой темы WP, но оказывается, вопрос можно просто решить, если знать основы CSS верстки :smile:. Итак, сегодня узнаем, что такое CSS и как использовать язык CSS при редактировании сайтов.

Что такое стили CSS?

CSS или Cascading Style Sheets в переводе означает каскадные таблицы стилей. Этот язык программирования используют для задания внешнего вида блога, именно благодаря нему устанавливается цвет, шрифт и фон сайта.

Для успешного изменения дизайна хватает минимальных знаний основ верстки стилей CSS и их дальнейшее изучение позволит уверенно редактировать тему ВордПресс. К тому же файл, отвечающий за дизайн, доступен из админки WP и называется style.css. Достаточно откорректировать один параметр, как изменения в оформлении сразу же вступят в силу.

В один урок вместить все тонкости языка CSS не возможно, поэтому будут рассмотрены основные теоретические моменты необходимые для быстрого редактирования и создания достойного сайта. Основы языка программирования CSS и верстки шаблона в обязательном порядке стоит изучить каждому блоггеру. И помните, уверенность придет с практикой ;)!

Основы теории CSS верстки

Шрифт

font-family – устанавливает шрифт для элемента (font-family: название шрифта):

font-family: Arial;

font-size – установка размера (font-size: размер шрифта, выраженный в процентах (%)):

font-size: 100%;

И в пикселях (px):

font-size: 20px;

font-style – определяет стиль шрифта:

font-style: italic;
  • normal – нормальный;
  • italic – курсив;
  • oblique – наклонный.

font-weight – степень насыщенности или стиль толщины шрифта:

font-weight: bolder;
  • normal – нормальный;
  • bold – полужирный;
  • bolder – жирный;
  • lighter – светлый.

font — объединяет все свойства шрифта или несколько его параметров (font: жирность стиль размер шрифт):

font: bolder italic 20px Arial;
Свойства текста

text-align – горизонтальное выравнивание текста:

text-align: left;
  • left - по левому краю;
  • right - по правому краю;
  • center – выравнивание по центру;
  • justify - по ширине колонки.

vertical-align – вертикальное выравнивание текста:

vertical-align: top;
  • bottom – выравнивание по нижнему краю;
  • top – по верхнему;
  • middle – по середине;

line-height – межстрочный интервал (line-height: размер, выраженный в  пикселях (px) или в процентах (%)):

line-height: 2px;

Любое значение, которое больше нуля, берется за множитель. Например, параметр 1,5 установит между строками полуторный интервал:

line-height: 1.5;

letter-spacing – интервал между буквами (letter-spacing: значение в пикселях (px)):

letter-spacing: 1px;
  • normal – расстояние по умолчанию;

text-transform – заглавные или прописные буквы в словах:

text-transform: capitalize;
  • uppercase – все символы заглавные;
  • lowercase – строчные;
  • none - по умолчанию;
  • capitalize - первая буква каждого слова большая.
Размер

width – устанавливает ширину элемента (width: значение, выраженное в пикселях (px) или процентах (%)):

width: 215px;

Остальные виды значений CSS стилей, которые находятся ниже, работают по такому же принципу, как width:

height – устанавливает высоту элемента;

max-width – устанавливает максимальную ширину элемента;

max-height – устанавливает максимальную высоту элемента;

min-width – минимальная ширина;

min-height – минимальная высота.

Позиции

float – сторона выравнивания элемента:

float: right;
  • right – выравнивание по правому краю;
  • left – по левому;

visibility – делает элемент видимым или невидимым:

visibility: hidden
  • hidden – скрытие объекта;
  • visible – отображение.
Границы

border – установка границы (рамки) вокруг элемента (border: толщина (2px), стиль (dashed) и цвет границы (black)):

border: 2px dashed black;
  • solid – сплошная рамка;
  • dashed – пунктирная;
  • dotted – точечная.

Остальные свойства границ при верстке CSS, которые представлены ниже, действуют подобным образом:

  1. border-top – верхняя граница;
  2. border-bottom – нижняя;
  3. border-right – правая;
  4. border-left – левая.
Поля

padding – устанавливает значение полей вокруг объекта. Отсчет начинается сверху и далее по часовой стрелке (padding: размер шрифта, выраженный в пикселях (px) сверху (1), справа (2), снизу (3) и слева (4)):

padding: 1px 2px 3px 4px;

Установка параметров отдельно для каждой стороны:

  1. padding-top – поле от верхнего края;
    padding-top: 10px;
  2. padding-bottom – от нижнего;
  3. padding-right – от правого;
  4. padding-left – от левого.
Отступы

margin – значение отступов с 4 сторон (margin: отступ, выраженный в пикселях (px) сверху (10), справа (11), снизу (12) и слева (13)):

margin: 10px 11px 12px 13px;

Параметры отступов для каждой стороны по отдельности:

  1. margin-top – верхний отступ;
    margin-top: 5px;
  2. margin-bottom – отступ нижний;
  3. margin-left – левый;
  4. margin-right – правый.
Фон и цвет

color – цвет элемента:

  • Значение цвета задается с помощью названия оттенков (black, red, white):
    color: red;
  • С помощью шестнадцатеричного кода (#000000 (черный), ff0000 (красный), #000000 (белый)):
    color: #ff0000;

background – характеристика фона:

  1. background-color – параметр цвета фона:
    background-color: ffff00;

    Или

    background-color: yellow;
  2. background-position – стартовое положение фонового изображения (background-position: размер, выраженный в пикселях (px) или в процентах (%) – слева сверху):
    background-repeat: 0% 0%;

    Или заданы свойства по горизонтали (left или right или center)) + по вертикали (top или bottom или center):

    background-repeat: left top;
  3. background-repeat – указывает должно ли фонового изображение повторяться:
    background-repeat: repeat-y;
    • repeat-y – повторение картинки по оси y;
    • repeat-x – повторение по оси х.
  4. background-attachment – делает фон прокручивающимся или фиксированным:
    background-attachment: scroll;
    • fixed – фиксированное положение;
    • scroll – прокручивание вместе с элементами.
  5. background-image – устанавливает url-картинки фона:
    background-image: url(images/good.jpg);
    • url(images/good.jpg) – путь к изображению.
  6. background — задает несколько свойств фона (background: желтый url-изображения повторение по оси y):
    background: #ffff00 url(images/good.jpg) repeat-у;
Псевдоклассы

:hover – установка стиля элемента, когда не него наводят курсор мыши. Устанавливается желтый цвет при наведении мышкой:

a:hover {color: yellow;}

:visited – стиль ссылки, по которой уже перешли. На посещенную ссылку устанавливается серый цвет:

a:visited {color: gray;}

От такого обилия команд у самого голова кругом пошла. И всё же мы узнали, что такое CSS и рассмотрели основы CSS верстки, и, тем не менее, этой верхушки знаний достаточно для того, чтобы успешно внести небольшие изменения в дизайн блога :smile:. Конечно, сразу всё понять очень трудно, но всё приходит с практикой, и со временем основные свойства CSS Вас не будут так пугать. Подробнее о стилях CSS можно познакомиться на сайте htmlbook.ru.

Рекомендую посмотреть на самые красивые сайты в интернете здесь и на самые креативно оформленные подвалы тут, чтобы знать к чему стремиться ;).

В этом анонсе было много теории, которая пригодится в следующих практических уроках по редактированию шаблона WordPress, поэтому подпишитесь на RSS блога и оставайтесь в курсе самых последних событий.

Читайте далее Как быстро вносить изменения в дизайн.

Посмотришь на такое и любые языки программирования покажутся детской забавой :smile::

С уважением, Дмитрий Байдук

Поделиться ссылкой с друзьями

Подпишись на обновление блога! Получай новые статьи на почту:
black-mask-170 black-mask-170 black-mask-170 black-mask-170 black-mask-170 black-mask-170

Отзывов (5)

  1. Основы не только css, но и html, а лучше всего и php,

  2. Татьяна пишет:

    Спасибо Вам за статью. Вставляла по вашей рекомендации баннер RotaBan и ровняла по центру в single.php, но я, видно перестаралась. Помогите, пожалуйста исправить. На моем сайте с главной страницы не видно косяков. Если перейти на любую статью,почему-то вылазит следующая строка из single.php после моих стараний. При удалении всего моего творчества с кодом – удаляется баннер,но косяки на странице почему-то остаются. Очень надеюсь на помощь.

    • Где-то случайно внесли изменения в код файла single.php. Чтобы исправить ситуацию нужно вернуть всё обратно.
      Сделайте в админке хостинга откат файлов на 1 день назад через меню “Управление BACKUP”.

      или попробуйте перед показывающимся на странице куском кода id=”main_col”> поставить вот это:

  3. Татьяна пишет:

    Все получилось!По вашим урокам,не имея знаний программиста мне удалось выровнять баннер по центру.Исправила косяк так: нашла изначальный файл и добавила пропущенное.Спасибо вам!
    Странно,(может,кому прогдится)при копировании файла в HTML коде скопированное не копируется,а перносится на новое место.
    Иду к Вам в подписчики!

  4. Гурий пишет:

    Пиши еще об этом!! :) Интересно просто ужасно, добавляю статью в избранное.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *