CSS

Материал из Викиреальностя
Перейти к: навигация, поиск

CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык разметки, предназначенный для описания внешнего вида документов в форматах HTML, XHTML и XML.

CSS используется для задания внешнего вида элементам документа. Таблица стилей состоит из набора правил описания документа, в свою очередь состоящих из селекторов и значений свойств.

В википроектах таблица стилей находится на сервере. Она может быть изменена редактированием служебного файла MediaWiki:Common.css, который могут править только администраторы; каждый пользователь может создать для себя персональную таблицу стилей в личном пространстве, если это разрешено администратором сервера.

Содержание

[править] Стили для отдельных элементов HTML

Внутристрочный (англ. inline) стиль может быть присвоен элементу HTML при помощи атрибута style.[1]

<p>Это пример <span style="background-color: yellow">желтого</span> подсвечивания текста.</p>

Результатом будет:

Это пример желтого подсвечивания текста.

Этот способ описания стилей работает, к примеру, в LiveJournal или в викидвижке, но может оказаться громоздким при создании множества однотипных элементов HTML (например, абзацев или таблиц), если у нас есть контроль над стилями CSS. Поэтому стили часто описывают отдельно от основного содержания при помощи показанных ниже способов.

[править] Использование готовых стилей

Можно позаимствовать подходящие стилевые описания с других сайтов, подключив их через конструкцию

<link rel="stylesheet" href="style.css" type="text/css" />

где style.css — это файл со стилевым описанием, который нужно положить в соответствующую папку рядом с файлом HTML. Сама эта конструкция должна быть подключена в head-заголовке страницы HTML.

Эквивалентом является конструкция <style type="text/css">...</style>, внутри которой можно поместить стилевое описание: оно будет действовать только на текущий HTML-документ.

[править] Оформление таблицы

Стилевое описание для таблицы может быть, например, таким:

table, td, th
{
border:1px solid black; /* внешний вид рамки */
border-collapse: collapse; /* убирание задвоенности рамки */
padding: 5px; /* отступ от текста до рамки */
}
th
{
background-color:gray; /* цвет фона ячейки */
color:white; /* цвет текста ячейки */
}

[править] Использование имени класса

Чтобы распространить стиль не на все, к примеру, таблицы в документе, а только на некоторые, им присваивают имя класса. [2]

table.wikitable {
 margin: 1em 1em 1em 0; /* отступы вне таблицы */
 background: #f9f9f9; /* цвет фона */
 border: 1px #aaa solid; /* стиль рамки */
 border-collapse: collapse; /* убирание задвоенности рамки */
}
.wikitable th,
.wikitable td {
 border: 1px #aaa solid;
 padding: 0.2em; /* отступ от текста внутри таблицы до рамки */
}
.wikitable th {
 background: #f2f2f2;
 text-align: center; /* выравнивание текста */
}
.wikitable caption {
        font-weight: bold;
}

Использование таких описаний производится следующим образом:

<table class="wikitable"> 
  <tr>
    <th> Заголовок 1 </th>
    <th> Заголовок 2 </th>
  </tr>
  <tr>
    <td> Ячейка 1 </td>
    <td> Ячейка 2 </td>
  </tr>
</table>
</html>

В этом примере wikitable - имя стиля (пример взят из w-ru:Википедия:Оформление таблиц).

[править] Обтекание картинок с подписью

.floatright{
        clear: right;
        float: right;
        position: relative;
        border: 1px solid gray;
        margin-left: 20px; /*внешний отступ*/
        margin-top: 20px; /*внешний отступ*/
        margin-bottom: 20px; /*внешний отступ*/
        padding: 10px; /*внутренний отступ*/
        font-size: small;
        text-align: center;
        font-weight: bold;      
}
 
.floatleft{
        clear: left;
        float: left;
        position: relative;
        border: 1px solid gray;
        margin-right: 20px; /*внешний отступ*/
        margin-top: 20px; /*внешний отступ*/
        margin-bottom: 20px; /*внешний отступ*/
        padding: 10px; /*внутренний отступ*/
        font-size: small;
        text-align: center;
        font-weight: bold;      
}

Использование:

<div class="floatleft" style="width:255px">
<img width=250 height=392 src="name.png" >
Подпись к картинке
</div>

[править] Примечания

  1. http://ru.html.net/tutorials/css/lesson2.asp
  2. http://ru.html.net/tutorials/css/lesson7.asp Урок 7: Идентификация и группирование элементов (class и id)

[править] Ссылки

CSS относится к теме «Программирование»   ±