Шаг №40.Основные свойства CSS.Изменяем внешний вид сайта при помощи CSS.

Привет всем читателям и подписчикам сайта http://wpcreate.ru.

Когда то давно, а может для кого то и не очень давно я писал статью Редактирование шаблона wordpress, и в той статье я коснулся немного темы использования CSS при редактировании сайтов. Сегодня мы более обширно коснемся этой темы, разберемся что такое css, для чего используют css, и на практических примерах рассмотрим CSS в действии.

Что такое CSS?

Начнем с того, что CSS (с английского Cascading Style Sheets переводится как “Каскадные таблицы стилей”) – это формальный язык описания внешнего вида документов(по мнению Википедии) простыми словами, при помощи CSS мы можем описать как будут выглядеть различные элементы на нашем сайте.

Лет 7 или 8 назад, когда я только начинал изучать HTML и CSS, для меня это была тьма-тьмущая, информация в интернете была, и я потихонечку начал разбираться во всем этом.

Если и Вы пытаетесь разобраться в CSS и Вам кажется,что это очень сложно, то не пугайтесь, сложного в CSS ничего нет, главное разобраться что к чему, и немного практики, понимание придет во время процесса.

В один урок запихнуть всю информацию о CSS это просто не реально, и потому я расскажу про те моменты, которыми пользуюсь сам при создании и редактировании сайтов.

Что может CSS?

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

CSS по сути представляет более гибкие возможности по манипулированию внешним видом различных объектов веб-странички, чем HTML.Если HTML используется для создания структуры веб-странички, то CSS описывает то, как будет выглядеть та самая веб-страничка.

Вот список основных свойств языка CSS, которые мы рассмотрим сегодня:

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

Как использовать CSS  на сайте?

Давайте от теории перейдем поближе к практике и рассмотрим различные примеры применения CSS на сайте.

Все шаблоны, которые сейчас есть для wordpress используют CSS в полной мере.Файл с таблицей стиля Вы сможете найти в папке с Вашим шаблоном.Называется он как правило style.css(но может и по другому,главное что расширение у него должно быть css) и отвечает за внешний вид Вашего сайта. Предлагаю открыть его, и познакомиться с его содержимым немножечко ближе.

Куча непонятных обозначений – body, a, a:hover,#header,h1,h2,h3 да и еще непонятные фигурные скобки,что же делать?

Ну давайте начнем по порядку.

Базовый синтаксис CSS состоит из:

Селектор {свойство:значение}

Другими словами из селектора, и в фигурных скобках идет перечисление свойств и значений,не пугайтесь в начале это кажется очень сложно, но на самом деле это не так, читайте дальше и убедитесь что ничего сложного в этом нет.

Для того что бы стили применить для всего документа используется селектор – body, я уверен что и в Вашей таблице стилей есть данный селектор.

body{

свойство1 : значение1;

свойство2 : значение2;

свойство3 : значение3;

}

Существуют различные свойства, одни свойства отвечают за работу с текстом, другие свойства за работу с фоном и так далее.

Какие еще существуют селекторы?

Кроме рассмотренного выше селектора body еще существуют:

Селектор a – который отвечает за внешний вид ссылок;

Селектор h1 – отвечает за внешний вид элементов заключенных в тег <h1>;

Селектор h6 – отвечает за внешний вид элементов заключенных в тег <h6>;

p – отвечает за внешний вид текста, который располагается внутри контейнера <p>

b -отвечает за внешний вид текста, который располагается внутри контейнера <b>

Свойства CSS отвечающие за шрифт.

Я пообещал что переходим к практике, а значит давайте изменим размер шрифта по умолчанию для всего веб-сайта.Для этого в селектор body нам нужно дописать свойство которое отвечает за изменение размера шрифта – font-size;

Как изменить размер шрифта на сайте?

body{

font-size:16px;

}

Данный код устанавливает размер шрифта в 16 пикселей для всего сайта;

Как изменить шрифт на сайте?

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

body{

font-size:16px;

font-family:»Georgia»;

}

Теперь у нас весь текст на сайте отображается шрифтом Georgia и имеет размер 16 пикселей.

Далее я перечислю все свойства которые отвечают за работу с шрифтами на сайте, и которые Вы сможете использовать в селекторе body:

  • font-family – Устанавливает шрифт;
  • font-size – Устанавливает размер шрифта;
  • font-stretch – Устанавливает начертание шрифта( узкое,нормальное,или широкое);
  • font-style – Определяет начертание шрифта( обычное, курсив, наклонное);
  • font-variant – Определяет как нужно представлять строчные буквы;
  • font-weight – Устанавливает насыщенность( жирность) шрифта;

Свойства CSS отвечающие за размер элементов.

width — устанавливает ширину для блочных элементов (допустимые значения – значение в пикселях|проценты|auto|inherit);

width:65%;

height— устанавливает высоту для блочных элементов(допустимые значения – значение в пикселях|проценты|auto|inherit);

height:145px;

max-width – свойство устанавливает максимальную ширину элемента(значение | проценты | none | inherit);

max-width: 80%;

max-height – свойство устанавливает максимальную высоту элемента(значение | проценты | none | inherit);

max-height: 80px;

min-width – Задает минимальную ширину элемента(значение | проценты | inherit).

min-width: 420px;

min-height – Задает минимальную высоту элемента(значение | проценты | inherit).

min-height: 13px;

Свойства CSS отвечающие за текст.

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

Возможные значения:

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

vertical-align –свойство отвечающее за вертикальное выравнивание;

У данного свойства есть множество значений, но основные которыми пользуюсь я это:

  • vertical-align:bottom; – выравнивает элемент по нижней части элемента строки;
  • vertical-align:top; – по аналогии только верхней части строки;
  • vertical-align:middle; – золотая середина;

color – цвет текста;

Для того, что бы изменить цвет текста на сайте например на зеленый используется свойство color , вот так:

color:green;

Того же эффекта можно добиться если вместо слова green использовать код цвета 00ff00, но в таком случае перед кодом цвета нужно использовать символ # —

color:#00ff00;

line-height – задает высоту строки(множитель | значение | проценты | normal | inherit);

line-height: 1.5;

text-transform – преобразовывает текст либо в заглавные либо в строчные символы;

  • text-transform:capitalize; – Изменяет каждый первый символ в предложении на заглавный символ;
  • text-transform:lowercase; – Все символы преобразовываются в строчные;
  • text-transform:uppercase;– Все символы преобразовываются в заглавные;
  • text-transform:none; – Не меняет регистр символов:
  • text-transform:inherit; – Наследуется значение родительского элемента;

text-shadow – Добавляет тень к тексту;

Свойства CSS  отвечающие за позиционирование элементов.

float – отвечает за выравнивание элемента (left | right | none | inherit);

float:left; – Происходит выравнивание элемента по левому краю, текст обтекает элемент по правой стороне;

visibility – свойство предназначенное для отображения либо сокрытия элемента на странице(visible | hidden | collapse | inherit);

visibility:hidden; – скрывает элемент на странице.

Свойства CSS  отвечающие за фон.

background – позволяет установить либо цвет либо фоновую картинку на сайт.

background: #fff url(images/bakground.png) repeat-y; В данной записи на первом месте указан цвет фона, путь к фоновому изображению, и указан параметр повторение фоновой картинки по вертикали.

background-position –  указывает на начальное положение фонового рисунка, в качестве значения использует 2 параметра, 1 – положение по горизонтали (left, center, right), 2 – положение по вертикали (left, center, right);

background-position: 0% 0%; – фоновый рисунок расположен в левом верхнем углу;

background-position: 50% 50%; – фоновый рисунок расположен по центру;

background-color – позволяет установить фоновый цвет элемента;

Возможны такие параметры установки цвета:

background-color: #4465C1;

background-color: RGB(13, 201, 19);

background-color: green;

background-attachment – устанавливает будет ли прокручиваться фоновое изображение,или будет зафиксированным(fixed | scroll | local);

background-attachment: fixed; – фиксированное

background-attachment: scroll; – прокручивается

background-image – задает путь до файла с фоновым изображением;

background-image: url(images/background.png);

background-repeat – указывает должно ли фоновое изображение повторяться.

background-repeat: repeat-y; – повторение по горизонтали

background-repeat: repeat-x; – повторение по вертикали

Свойства CSS регулирующие отступы элементов.

margin – свойство позволяющее задать отступы сразу с 4 сторон;

margin: 1px 2px 3px 4px; – Создает отступы 1 пиксель сверху,2 справа,3 снизу,4 слева

И по отдельности для каждой из сторон:

margin-left:13px; – Задает отступ с левого края на 13 пикселей;

margin-right:16px; – Задает отступ с правого края на 16 пикселей;

margin-top:15px; – Задает отступ сверху на 15 пикселей;

margin-bottom:18px; – Задает отступ сверху на 18 пикселей;

Свойства CSS которые позволяют установить размер поля для элемента.

padding – позволяет установить значение полей вокруг содержимого элемента.

padding:12px 13px 16px 14px поля устанавливаются начиная от верхнего в 12 пикселей и потом по часовой стрелке, справа 13 пикселей,снизу 16 пикселей и слева 14 пикселей

И по отдельности для каждой из сторон:

padding-left:13px; – Задает поле с левого края на 13 пикселей;

padding-right:16px; – Задает поле с правого края на 16 пикселей;

padding-top:15px; – Задает поле от верхнего края содержимого элемента на 15 пикселей;

padding-bottom:18px; – Задает поле от нижнего края содержимого элемента на 18 пикселей;

Псевдоклассы.

Псевдоклассы – это такая штука в CSS которая позволяет управлять стилями элементов, когда пользователь на страничке выполняет какие либо действия, например нажимает на ссылку, или просто навел указатель мыши.

Синтаксис псевдоклассов таков:

Селектор:Псевдокласс { Описание правил стиля }

Теперь кратенько рассмотрим какие бывают псевдоклассы:

:active – выполняется при активации пользователем элемента. Чаще всего используется для изменения стиля ссылок.

a:active {color:green} – Означает, что когда ссылка становится активной

:hover – выполняется когда на элемент навели мышку,и до произведения щелчка по элементу.

a:hover{color:red} – ссылка становится красной при наведении на нее мышкой;

:visited – как правило применяется для назначения стилей ссылок, на которые уже был произведен переход.

a:visited{color:grey} – устанавливает серый цвет для посещенных ссылок

:focus – применяется как правило для элементов, в момент получения ими фокуса.

input:focus{color:blue} – цвет текста в поле ввода становится зеленым, когда пользователь устанавливает курсор мышки на поле ввода

И в заключение.

Друзья в данной статье я описал самые главные моменты, которые должен знать человек, который занимается созданием сайтов. Конечно в одну статью уместить абсолютно все селекторы и свойства было бы не разумно, поэтому я описал все основные моменты, которыми пользуюсь сам и Вам советую. Если после прочтения статьи Вам кажется, что все очень запутанно, не стоит расстраиваться со временем запомнятся все основные свойства CSS, и селекторы к которым они применяются.Этот урок получился больше теоретическим, поэтому  в следующем уроке мы еще раз на практике посмотрим как применяются CSS стили при редактировании внешнего вида сайта на WordPress.
А вот собственно сам урок для ознакомления Как изменить внешний вид сайта?

Также советую воспользоваться отличным учебником по CSS, на сайте htmlbook.ru.

До скорых встреч на страницах сайта WPcreate.ru

  • http://uhodzadetmi.ru/ ильдар

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

    • http://wpcreate.ru Артем Петрусенко

      Ильдар, оно не так сложно, как кажется на первый взгляд, нужно немного практики ,для того что бы разобраться в основах css, следующий урок напишу обязательно по практической части использования css. Хотя вспоминаю себя, тоже помню что казалось что css мне не выучить.

  • http://uhodzadetmi.ru/ ильдар

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

  • http://www.xukku.ru Евгений

    Артем, можете в одной из последующих статей рассказать об оформлении именно текста, как поменять шрифты на нестандартные, где их взять, как правильней оформить и сделать читабельней. Еще волнует вопрос о том , как сделать так, чтобы, заходя в запись , не было видно боковой колонки и виджетов , а было бы больше места для текста, думаю это многих волнует. Заранеее спасибо.

    • http://wpcreate.ru Артем Петрусенко

      Да, обязательно напишу. По поводу отключения боковой колонки, шаблон должен поддерживать full — page.

    • http://wpcreate.ru Артем Петрусенко

      Можно вообще удалить боковую колонку для раздела записи.

  • Андрей

    Спасибо за урок! Самый полезный из всех!
    Отличный блог, Артем, удачи Вам!

  • http://bestofjapan.ru/ Василий

    спасибо за статьи, очень понятно описываешь, я в создании сайтов пока новичек, но благодаря твоим статьям с каждым днем понимаю все больше и больше:) в Инете мало таких полезных ресурсов! Желаю тебе успеха!

  • Ольга

    А если я не скачивала шаблонов, а пользуюсь стандартной темой Wjrd Press, то где мне искать файлы CSS? Хотелось бы размер шрифта изменить…

    • http://wpcreate.ru Артем Петрусенко

      В папке с названием стандартного шаблона!

  • Влад

    Здравствуйте, нужна срочная помощь от вас. У меня под каждой записью в блоге распологается подобная информация «Edit // Апрель 10th, 2013 // 1 Comment » // Без рубрики». необходимо срочно от нее избавится, дабы с появлением новых записей она не появлялась. Чую носом, что искать нужно в коммент.пхп, однако я понятия не имею какой параметр за это отвечает

    • http://dachnica.com Валентина

      Влад, из Вашего сообщения непонятно, в каком месте появляется ненужная Вам запись. Если это на главной странице блога под каждой записью, то посмотрите файл page.php, а если уже при просмотре поста, то посмотрите в файле single.php код, который вы бы хотел удалить и изымите его. Я на своем блоге расписала основные составляющие темы (шаблона) WordPress http://vdemchenko.com/sajt-svoimi-rukami/shagi-v-wordpress/wordpress-13/.

    • http://vdemchenko.com/ Валентина

      Обратитесь ко мне на моем блоге http://vdemchenko.com , я Вам смогу помочь и за бесплатно.

  • http://taro-v-sumochke.ru Надежда

    Артем, здравствуйте ещё раз. Я вроде всё правильно сделала, но размер шрифта не изменился на сайте. Что это может быть?

  • http://dachnica.com Валентина

    Артем, спасибо Вам за статью. Обращаюсь с просьбой о помощи. У меня сайте http://dachnica.com в теме блога отсутствует курсив, т.е., когда пишу текст статьи и выделяю курсивом, то в тексте поста стоит тэг , а при просмотре опубликованного текста поста там, где должен быть курсив, выделено жирным и никакого курсива (italic). Может, подскажите, где и что можно посмотреть и подправить класс CSS, чтобы вернуть курсив?
    Заранее спасибо!

  • http://dachnica.com Валентина

    Артем, благодаря Вашей статье у меня получилось сделать курсив в тэге

    , а вот в тексте поста не могу сообразить, куда вставить описание стиля курсива font-style:italic; 🙁

  • http://dc9lesnoy.ru/ Екатерина

    /*
    Уважаемый Артем!
    Хочу разобраться во всех этих штучках, о чем Вы пишете здесь, но у меня вот что в разделе стили.css:
    Theme Name: Striking
    Description: Designed by Kaptinlin. Follow KaptinLin on Twitter for the updates. Get support from Forum.
    Author: Kaptinlin
    Version: 5.0.1
    Author URI: http://themeforest.net/user/Kaptinlin
    */font-family: ‘Lobster’, cursive;

    • Виталий

      Екатерина, внутри символов /* и */ можно писать любой текст, так как эти символы предназначены для комментариев. Например, текст /* This is the description of site…. bla bla bla… */ не будет отображаться и работать на сайте, а дальнейший текст, например, код
      a{
      color:red;
      }
      соответственно будет.

  • http://naryn.info Bek

    Артем, благодарью тебя, все подробно описываещь. Кому интересно, сидеть и заниматься. Дай Бог, тебе здоровье!!!

  • Алексей Кощеев

    Подскажите с помощью чего открывать файл style.css? он у меня находится в архиве. я вношу изменения и в архивном файле и в http://localhost/wp-admin/theme-editor.php?file=style.css&theme… сохраняю, но ничего не меняется.