Друзья, приветствую Вас на своем сайте. Сегодня я хочу показать Вам как изменить внешний вид сайта при помощи 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>
Результат:
Свойства 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, и практикуйтесь как много больше в изменении внешнего вида сайта.