Шаг №41.Как изменить внешний вид сайта.Осваиваем CSS на практике.

Друзья, приветствую Вас на своем сайте. Сегодня я хочу показать Вам как изменить внешний вид сайта при помощи CSS(каскадных таблиц стилей).В прошлый раз я рассказывал о основных свойствах css, а сейчас посмотрим как применить теоритические знания на практике и попробуем внести изменения во внешний вид сайта при помощи CSS.

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

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

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

Пример:

<p style=”color:red;font-size:15px”>Пример</p>

— Делает текст в теге <p> красным, размером 15 пикселей
Результат выполнения:

Пример

Таким образом Вы можете добавить CSS свойства, прямо в редакторе записей Вашего сайта wordpress, или на любом другом сайте.

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

Изменяем внешний вид сайта.

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

Изменяем внешний вид шрифтов на сайте.

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

font-family,font-weight, и font-style а также для установки цвета  обычно использую свойство color.

<p style='font-family: Geneva, Arial, Helvetica, sans-serif;'>Пример font-family: Geneva</p>

Результат применения CSS:

Пример font-family: Geneva

<p style='font-weight: 600'>Пример установки шрифта в font-weight: 600</p>

Результат установки шрифта в font-weight в 600

Результат установки шрифта в font-weight: 600

А также font-style:

<p style='font-style: italic;'>Пример font-style: italic</p>

Результат выполнения:

Результат font-style: italic

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

Чаще всего в моей практике приходится пользоваться этими свойствами, когда приходится задавать конкретный размер для таблицы либо дивов <div>, а именно свойства width и height.А именно создадим тестовый

<div style='color:green;width:300px;height:30px'>

результат выполнения Вы можете увидеть ниже.

Пример выполнения

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

text-align:left и text-align:right наиболее используемые свойства мной.

<div style='width: 300px;text-align: right;background-color:grey'>text-align:right</div>

Результат:

text-align:right

Свойства CSS.Отступы.

<div style="margin: 10px 200px 0px 40px;background-color:grey">Отступы элемента</div>

Результат:

Отступы элемента

Отступы элемента(сверху 10 пикселей, справа 200 пикселей,снизу без отступа или 0 пикселей, и слева 40 пикселей).

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

<div style="padding:10px 20px 30px 40px;background-color:grey;color:white">Отступы внутри элемента</div>

Результат:

Отступы внутри элемента

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

Ну и пробежимся по свойствам css использующие псевдоклассы.

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

a:hover{color:red,text-decoration:none}

Устанавливает цвет ссылки при наведении в красный, и убирает подчеркивание.

Что нужно сделать, для того чтобы изменить внешний вид сайта?

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

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

    Артем, а ты свой дизайн делал сам?
    спасибо кстати за кнопку, теперь очень удобно проматывать))

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

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

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

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

  • http://archdialog.ru Sveta

    Артем, с вашей помощью сделала сайт, хотя до этого ничего подобного не делала! Спасибо! Остался один косяк. В одном браузере ( google chrome) вообще не видно логотипа, а в другом (Int Explorer) видно, что он не открывается.

    Вот сайт (логотип в верхнем левом углу) http://archdialog.ru/

  • Антон

    Здравствуйте, Артем. Подскажите как в теме «learning_wp_theme» изменить цвет фона страниц центральный столбец (цвет «Кремовый» eed3c3).

  • Майя

    Здравствуйте, Артем. У меня возник вопрос: в моей теме на главной странице и в категориях отображаются фотографии (в виде сетки), но также они автоматически отображаются и в записях (меня не устраивает слишком большая высота изображения). Когда убираю миниатюру, то фотографии не выводятся вообще нигде. Где и как изменить код, чтобы в записях фото не появлялись, а на главной и в категориях остались или хотя бы, как уменьшить высоту? Тема Tiara (изначально предназначена для портфолио). Спасибо.

  • http://investvremia.ru/ igor

    Здравствуйте Артем!У меня тема с меняющимися картинками,просуществовала три месяца! Теперь тема просто не управляема,пробовал менять фон,не меняется,загружал и активировал другую тему-все пропадает!чистил кэш -без результатов!Что может быть?Спасибо!С уважением Игорь.

  • http://pletevo.ru Юля

    А каким образом, можно поменять заглавные буквы в заголовках и в наименованиях статей? У меня внезависимости от вида написания, все буквы выводятся заглавными.