Всем привет и доброго здравия!
Вернёмся к урокам по созданию сайта , а именно изменению и редакции шаблонов wordpress.
Сегодня мы рассмотрим что такое таблица стилей и каким образом можно вносить изменения. То есть редактировать свой шаблон блога. Бывают ситуации когда в шаблоне который вы выбрали есть недостатки. То есть сам шаблон почти всем хорош за исключением мелочей. То ли текст мелкий и читать не удобно, то ли заголовки слишком прозрачны и не так выделяются, либо иконки в сайдбарах вас не устраивают. Или цитата выглядит слишком тускло. Это всё можно исправить , подправить и приукрасить.
Для начала коснёмся общеобразовательной темы , что такое CSS.
CSS — на английском Cascading Style Sheets “Каскадные таблицы стилей”– это стиль описания внешнего вида документов , при помощи CSS можно описать как будут выглядеть различные элементы сайта.
Таблица стилей даёт задание отображать браузеру вид шрифтов, текстовых полей, цвета, позицию объектов, высоту и ширину и другие функции. Для редакции нашего шаблона нам хватит перечисленных.
CSS задаёт внешний вид объектов страницы , а HTML структуру.
У всех шаблонов есть своя CSS — в Консоль / Внешний вид / Редактор и в самом низу справа в перечне элементов style.css
Но для редакции удобнее пользоваться FTP-доступом , потому что ракскрыв файл style.css в FileZilla блокнотом notepad++ видно номер строки и легче отыскать нужную для внесения изменений.
Из чего состоит базовый синтаксис CSS. Из селектора и в фигурных скобках его свойства и значения
Селектор {свойство:значение}
Для всего документа используется селектор body ( тело документа )
body{
свойство1 : значение1;
свойство2 : значение2;
свойство3 : значение3;
}
Свойства разные, одни отвечают за текст, другие за фон и т.д.
Кроме селектора body еще существуют:
Селектор a – который отвечает за внешний вид ссылок;
Селектор h1 – отвечает за внешний вид элементов заключенных в тег
; и т.д. по
Селектор h6 – отвечает за внешний вид элементов заключенных в тег
;
p – отвечает за внешний вид текста, который располагается внутри контейнера
b -отвечает за внешний вид текста, который располагается внутри контейнера
Вот краткий экскурс для понятия, будем по понятиям , короче… B-)
А теперь изменим размер шрифта на сайте, путём изменения в свойстве его значения (в CSS)
Для обычного простого шаблона WP хватит вот этих действий. Находите в самом верху тег body ( Ctrl+F ) и прописываете значение , размер шрифта 16 и шрифт Georgia ( вообще-то у меня куча вопросов к паразитам, какого ражна шрифт Грузия если это Русский???)
body{
font-size:16px;
font-family:»Georgia»;
}
вот это вместо body вставите и текст изменится. Но всё было бы хорошо если бы не было так грустно. То есть , не у всех и не все шаблоны одинаковы и последние сделаны так, что кое кто ногу сломит. Такой редакт не пройдёт. То есть ничего не изменится. Поэтому смотрим на свой файл CSS в верхних строчках и ищем font-size: и его значение. Его и пробуем изменить. Не бойтесь ничего страшного не произойдёт, либо текст изменится либо останется прежним, то есть не туда попали.
Вот вам свойства которые отвечают за работу с шрифтами на сайте.
- 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} – цвет текста в поле ввода становится зеленым, когда пользователь устанавливает курсор мышки на поле ввода