В этой статье приведена краткая справка по встраиванию стилей и некоторые несложные примеры задания 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 - не лечит.
(нажать поиск)