الحمد لله رب العالمين
GOODBASIS.COM
بسم الله الرحمن الرحيم

CSS

Введение

CSS (Cascading Style Sheets) - это каскадные таблицы стилей. CSS-код содержит написанный особым образом список инструкций для браузера на компьютере пользователя, о том как и где отображать различные элементы веб-страницы. Под «элементами веб-страницы» обычно подразумеваются теги HTML и их содержимое.

Инструкции CSS часто хранят в виде отдельного текстового файла с расширением .css, или включают в код HTML-документа внутри тега <HEAD>. Посредством CSS отделяют дизайн документа от его основного содежания. CSS отвечает за оформление и внешний вид, а HTML - за содержание и логическую структуру документа.

Преимущества CSS заключаются в следующем:

  • Можно управлять отображением множества документов с помощью одной таблицы стилей
  • Возможен более точный контроль над внешним видом страниц
  • Поддерживаются различные представления для разных носителей информации (монитор, печать, телефон, и т. д.);
  • И вообще это хорошо проработанная техника дизайна для веб-страниц.

Существуют три способа применения стилей в документе HTML:

1. Встраивание (inline) используется для стиля который не будет повторяться.

Например код <p style="color: red"> текст красного цвета </p> даст в результате:

текст красного цвета

2. Внедрение (embed) в код HTML-документа внутри тега <HEAD> может использоваться когда страницы собираются из различных блоков посредством PHP или когда такой стиль будет использоваться только на одной странице, а также на этапе проектирования дизайна сайта.

3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом все описания хранятся в отдельном файле (обычно с расширением .css). Этот способ наиболее предпочтителен для тех каскадных таблиц стилей которые применяются одновременно для нескольких или многих веб-страниц.

Margin, padding и color

Напишем код внедрённого CSS-кода в HTML страницу для специального абзаца текста класса "specific" :

<html><!-- Copyright 2010 A.M.Yashukov --><head>

<style type="text/css">

<!--

p.specific {

margin:25;

padding:9;

background-color:green;

color:white;

}

 -->

</style></head><body>

<p>Обычный текст абзаца (параграфа).</p>

<p class="specific">Текст класса "specific".</p>

</body></html>

Между фигурными скобками задаются параметры для различных свойств абзаца (параграфа) p класса "specific".

Рассмотрим эти свойства:

margin - может быть вы слышали слово маргинальный, то есть выходящий за рамки, находящийся за общепринятой чертой. Это свойство показывает в данном случае сколько пикселей будет за границей от края фона для текста, на неё не распространяется значение фона параграфа нашего класса (background-color).

padding - расстояние от края текста до рамки, на территорию заданную этим свойством распространяется цвет фона параграфа (background-color), который у нас определён как зелёный.

Свойство backgraund-color задаёт цвет фона нашего абзаца, у нас он зелёный.

Свойство color задаёт цвет текста нашего абзаца, в данном случае он белый.

Результат выполнения нашего HTML-кода будет следующем:

Обычный текст абзаца (параграфа).

Текст класса "specific".

А.М.Яшуков

 

Рекомендую возможность заработать на сайте путём размещения на нём ссылок (оплата за факт установки ссылок, а не за переходы; возможность предварительной модерации).

goodbasis.com (c) 2009-2012
При цитировании действующая ссылка на сайт обязательна.
Наличие ссылок на внешние ресурсы не следует воспринимать как одобрение содержащихся там материалов.

Исламская литература. Бесплатное скачивание: pdf, doc. Новости Башкирии * Башкирский спорт. Уфа. nur-sport.ru