С именем Аллаха Благого Милостивого

CSS

CSS - это сокращение от английского "Cascading Style Sheets", что значит "каскадные таблицы стилей". 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".

А.М.Яшуков

См. также: Mнемоники или специальные символы HTML, понятие о CSS через простые примеры.

Информационные технологии

Для того, чтобы сделать сайт и разместить его в сети, хорошо ознакомиться с многолетним опытом использования разных хостингов и регистрации доменных имён, полезного для лучшего выбора на основе отзывов специалиста.

См. также: Ислам: убеждения и предписания, история.

И вся хвала и слава Аллаху Господу миров! Ему Всевышнему принадлежат прекраснейшие имена.

© 2009-2016, 2018 sofiaexpress.ru