Встраивание стилей и правила CSS

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

Получаем:

span1
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="Учебник" ]

2 thoughts on “Встраивание стилей и правила CSS”

  1. Pingback: Создание блога на WordPress » Использовать id или class?

  2. Валентина

    Спасибо за статью.
    Подскажите пожалуйста как решить проблему:
    внедряю поисковик с другого сайта способом 1. Связывание, все отображается, только поисковик сделан таким образом, что при поиске выдает только 10 наименований, а на самом деле их больше. Страницу при этом разбивает еще на несколько (в зависимости от того сколько позиций найдено), но WP не отображает их содержимое. Подскажите пожалуйста, как решить?
    Если в настройка покопаться и поставить отображение записей больше 10 - не лечит.
    (нажать поиск)

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *


Еще записи