В этой статье приведена краткая справка по встраиванию стилей и некоторые несложные примеры задания CSS-стилей, а также полезные ссылки. Содержание:
Способы встраивания стилей в документ | Импорт в .css-файле |
Селекторы | Псевдоклассы | Группировка | Приоритет |
Внедрение шрифтов | JavaScript (expression)
Способы встраивания стилей в документ
В WordPress стили элементов страниц должны задаваться в отдельных файлах с расширением .css, т.к. WordPress-сайт строится на документах, написанных на языке сценариев XHTML. (Основной файл стилей темы WordPress - это файл style.css в папке темы.) Поэтому в WordPress можно использовать два способа связывания HTML-страниц с таблицей стилей:
1. Связывание с помощью тега link позволяет хранить таблицу (список) стилей в отдельном файле и использовать ее для разных HTML-страниц. href задает путь к файлу стилей. Если документ и файл стилей style.css находятся в одной папке, можно написать:
<link rel="stylesheet" type="text/css" href="style.css">
2. Импортирование позволяет использовать внешнюю таблицу стилей, указав ее url-адрес:
<style type="text/css" media="screen">@import url( http://mysite.ru/styles/style.css );</style>
*** Теги link и style должны находиться в разделе документа head.
Два следующих способа, предусматривающих задание стилей внутри самого документа, в WordPress не используются.
3. Внедрение - это задание таблицы стилей в самом документе в разделе документа head. Стили записываются по тем же правилам (см. ниже), что и в отдельном файле. Список правил стилей располагается внутри тега style:
<head>
<style type="text/css">
<!--
h1 {color: green; text-transfortm: uppercase;}
p {background-color: lightgrey}
-->
</style>
</head>
*** Поскольку этот тег может не поддерживаться какими-то браузерами (старыми версиями браузеров), его содержимое помещается в тег комментария <!-- ... -->
4. Встраивание позволяет изменять форматирование конкретных элементов страницы внутри раздела документа body:
<h1 style="color: green; text-transfortm: uppercase">Этот заголовок будет отображаться зеленым и прописными буквами</h1>
Еще раз все вместе:
<head>
...
<!-- Связывание -->
<link rel="stylesheet" type="text/css" href="style.css">
...
<!-- Внедрение -->
<style type=""text/css>
<!--
b {text-transform: uppercase;}
p { text-align: center;}
-->
</style>
</head>
<body>
...
<!-- Встраивание -->
<p style="color: white; font: 14pt Arial"> Текст...</p>
...
<!-- Импорт -->
<p style="@import: url(mystyle.css)"> Текст...</p>
...
Импорт в .css-файле
Инструкции импорта таблиц стилей должны находиться в начале .css-файла. После инструкции обязательно ставится точка с запятой ;, а url() можно опустить
/* Эти записи эквивалентны: */
@import "sitestyle.css";
@import url("sitestyle.css");
Больший приоритет имеют последующие описания стилей внутри .css-файла.
А теперь правила задания стилей в CSS-файле:
Селекторы
Тег
/* тело документа */
body {
color: black; /* цвет текста */
font-family: "Times New Roman";
background: url(fon.gif) white; /* фон белый, если файл fon.gif недоступен*/
}
/* все теги h1: с полями 10px со всех сторон с цветом текста #ССС*/
h1 {color: #ССС; margin: 10px;}
id (идентификатор - уникальное имя)
/* для одного тега в документе (например, <span id="box1">) */
#box1 {border:1px solid #CCC;}
/* для тега div в документе (<div id="top">) */
div#top {height: 150px; margin: 0; background: #EEE; color: #79B30B;}
class (класс)
/* для любых тегов (<h1 class="box">, <span class="box"> и т.д.)*/
.box {border:2px dotted #CCC;}
/* для тегов h1 (<h1 class="header">)*/
h1.header {color: red;}
Маска *
/* для всех тегов*/
* { font-size: 14pt}
! Использование этого селектора может замедлять отображение веб-страницы
Контекстные селекторы
Вложенные элементы наследуют некоторые свойства, например:
/* цвет любого выделенного курсивом текста */
em { color:yellow; }
/* цвет выделенного курсивом текста внутри тега <div id="box1"> */
div#box1 em { color:red; }
Псевдоклассы
Псевдоклассы и псевдоэлементы используются для изменения поведения при некоторых условиях. Самые известные и поддерживаемые - это
Псевдоклассы ссылок
a:link {color:yellow;} /* непосещенная ссылка */
/* a можно опускать: */
:visited {color:yellow;} /* посещенная ссылка */
/* поддерживаются не всеми браузерами: */
:active {color:yellow;} /* выбранная в данный момент ссылка */
:hover {color:yellow;} /* ссылка, на которую наведен указатель мыши */
Группировка
Свойства margin (поля) и padding (отступы или "внутренние" поля)
Поля и отступы задаются аналогично:
#container1 {
margin-top: 0px;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 3px;
}
#container2 {margin: 1px 2px 3px 4px;}
*** В краткой записи размеры указываются в порядке вверху, справа, внизу, слева
(обход по часовой стрелке, начиная с верхнего поля).
Автоматическое задание полей слева и справа
#container {width: 700px; margin: 0 auto;} /* выравнивание по центру */
Свойства font (шрифт)
/* */
.text1 {font-face: Veranda, Arial, Helvetica}
/* объединение свойств шрифта*/
.text2 {
font-weight:bold;
font-size:10pt;
font-family: Arial;
}
.text2 {font: bold 10pt Arial}
Группировка селекторов
Селекторы можно группировать, перечисляя через запятую
h1, h2, h3, div#box1, span.light { color:lime; font: bold Arial}
h1{ font-size:24pt; }
h2{ font-size:18pt; }
h3{ font-size:14pt; }
Приоритет
Правила, расположенные ближе к концу списка стилей, переопределяют предыдущие. Если записано два правила для одного и того же селектора, применяться будет последнее:
/* текст внутри тега h4 будет черным и подчеркнутым*/
h4 { color:green; text-decoration:none; }
...
h4 { color:black; text-decoration:underline; }
div.post span { color:blue; font: bold Arial }
span.content { color:black;}
Если в .css -файле задан некоторый стиль, но вместо него применяется другой стиль, следует назначить для нужного стиля более высокий приоритет, например:
<div class="mypost"> <span>span1</span> <span class="mycontent">span2</span> </div>
В css:
div.mypost span {color:blue; font: bold Arial}
span.mycontent {color:black !important;}
Получаем:
span2
Внедрение шрифтов
<style>
@font-face{ font-family: myFont; src: url(http://mysite.ru/myFont.ttf)}
p {font-family: myFont, Arial, sans-serif;}
</style>
<p>К этому тексту будет применен загружаемый шрифт myFont или, если он недоступен, следующий на ним в списке шрифт Arial</p>
! Фотмат шрифта зависит от браузера. Например, для Internet Explorer нужен формат EOT, а формат TTF подходит для браузеров Firefox (начиная с 3.5), Safari (начиная с 3.2), Opera (начиная с 10) и Chrome (с января 2010 г.).
Поэтому использовать можно так:
/* для IE */
@font-face {
font-family: myFont;
src: local("myFont"),
url(path-to/myFont.eot);
}
/* для остальных браузеров */
@font-face {
font-family: myFont;
src: local("myFont"),
url(path-to/myFont.ttf);
}
*** src: local("myFont") - имя шрифта, установленного на локальном компьютере
Подробнее: [ref url="http://www.xiper.net/collect/html-and-css-tricks/typographics/font-face-non-standart-fonts-on-css.html" text="1"] , [ref url="http://vremenno.net/html-css/cross-browser-font-face/" text="2"]
JavaScript
Вычисление ширины бокса
Ширину можно указать точным числом, в процентах и ... вычислить (работает в IE):
#box11 {
position:absolute;
top:0; left:0; right:0;
margin:10px; padding:10px; border:solid blue 2px;
width:expression(document.body.offsetWidth-44);
}
document.body.offsetWidth - это текущая ширина бокса страницы, а 44 - это сумма всех значений margin+padding+border с двух сторон бокса.
Для вычисления ширины произвольного бокса используется его id (например, "box1"): box1.offsetWidth. (см. Практический JS: оптимизируем CSS expressions)
Почитать еще о CSS:
- [ref url="http://www.w3.org/TR/CSS21/cover.html#minitoc" text="Документация"]
- [ref url="http://softwaremaniacs.org/blog/category/primer/" text="Учебник" ]
Уведомление: Создание блога на WordPress » Использовать id или class?
Спасибо за статью.
Подскажите пожалуйста как решить проблему:
внедряю поисковик с другого сайта способом 1. Связывание, все отображается, только поисковик сделан таким образом, что при поиске выдает только 10 наименований, а на самом деле их больше. Страницу при этом разбивает еще на несколько (в зависимости от того сколько позиций найдено), но WP не отображает их содержимое. Подскажите пожалуйста, как решить?
Если в настройка покопаться и поставить отображение записей больше 10 - не лечит.
(нажать поиск)