CSS

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

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

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

Стили для отдельных элементов HTML

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

<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; /* цвет текста ячейки */
}

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

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

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>

История

В 1998 году была введена спецификация CSS2. Она была принята 26 марта и утверждена 13 мая 1998 года консорциумом W3C. В CSS2 была добавлена поддержка языка XML, возможность загрузки шрифтов с сервера, поддержка звуков, позиционирование текстовых и графических элементов, поддержка двунаправленного текста для разных языков, пишущихся слева направо и справа налево.

Браузер Internet Explorer стал поддерживать стили начиная с версии 3.0.

Ссылки

• t:Cascading Style Sheets на сайте Традиция.

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

Программирование и веб-разработка [править] Мета Программирование • Веб-программирование Языки Си • C++ • Java • Cyclone • Cython • Delphi • FreeBASIC • J • JavaScript • Limbo • Pascal • Perl • PHP • Python • Ruby • SML • SQL • T++ • Visual Basic Понятия Байт • Юзерскрипт • Фича • MHTML • Phar • JSONP Сайты ForthWiki • Freshports.org • SourceForge • Sql.ru • Regexper • Regex101 • TechNet Library • compileonline.com • hashcode.ru • Pawn-Wiki • Ru-Board • IT RockOut • IT happens • Onlineconversion • Stack Overflow • ‎Server Fault • PC Portal Код Функция скрытия и раскрытия • Фёдор Бутов: Вики-обновитель, Набор вики-скриптов • Datejs • JQuery • Whoosh • LIMB • Jqplot • Sphinx • XtraBackup • AfterLogic WebMail Lite Распространенные ошибки Setting locale failed • Problem with the SSL CA cert В культуре Великий Программист Вселенной