Привет всем читателям и подписчикам сайта http://wp.infohub.su.
Когда то давно, а может для кого то и не очень давно я писал статью Редактирование шаблона 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.
До скорых встреч на страницах сайта wp.infohub.su