Заключение

После рассмотрения технологии CSS можно сделать выводы, что она является очень удобной, функциональной, дружелюбной и простой в освоении.

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

Список использованных источников

1. Мак-Дональд, М. Microsoft ASP.NET 3.5 с примерами на C# для профессионалов / М.Мак-Дональд. – М.: Бином, 2009. - 1480 с.

2. Брайан д. Css учебник // wisdomweb.Ru: сервер разработчиков web – приложений. 2011. Url: http://www.Wisdomweb.Ru/css/insert.Php (дата обращения: 01.04.2012).

3. Сина д. Css Online учебник // cssonline.Net.Ru: сервер приверженцев css. 2011. Url: http://cssonline.Net.Ru/edu.Php (дата обращения: 01.04.2012).

ПРИЛОЖЕНИЕ

Тег <link>

Internet Explorer Chrome Opera Safari Firefox Android iOS

3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

Синтаксис

HTML

<head>

<link атрибуты>

</head>

XHTML

<head>

<link атрибуты />

</head>

Атрибуты

Charset Кодировка связываемого документа.

Href Путь к связываемому файлу.

Media Определяет устройство, для которого следует применять стилевое оформление.

Rel Определяет отношения между текущим документом и файлом, на который делается ссылка.

Sizes Указывает размер иконок для визуального отображения.

Type MIME-тип данных подключаемого файла.

Закрывающий тег Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Тег LINK</title>

<link rel="stylesheet" href="ie.css">

<link rel="alternate" type="application/rss+xml"

title="Статьи с сайта htmlbook.ru" href="http://htmlbook.ru/rss.xml">

<link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico">

</head>

<body>

<p>...</p>

</body>

</html>

В данном примере подключается внешний файл со стилями с помощью атрибута rel="stylesheet" тега <link>, указывается RSS-документ текущего сайта (link rel="alternate" type="application/rss+xml") и устанавливается иконка сайта в адресной строке браузера (link rel="shortcut icon").

Тег <style>

Internet Explorer Chrome Opera Safari Firefox Android iOS

2.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.

Синтаксис

<head>

<style type="text/css">

...

</style>

</head>

Атрибуты

Media Определяет устройство вывода, для работы с которым предназначена таблица стилей.

Type Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

Закрывающий тег Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Тег STYLE</title>

<style type="text/css">

h1 {

font-size: 120%;

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #333366;

}

</style>

</head>

<body>

<H1>Hello, world!</H1>

</body>

</html>

Результат примера показан на рис. 1. Обратие внимание, что цвет текста и начертание шрифта в теге <H1> изменились.

-moz-border-radiusInternet Explorer Chrome Opera Safari Firefox Android iOS

1.0+ 3.5+

Краткая информация Значение по умолчанию 0

Наследуется Нет

Процентная запись Да, относительно ширины блока

Применяется Ко всем элементам, за исключением таблиц с border-collapse: collapse

Версии CSSCSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-moz-border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений Число значений Результат

1 Радиус указывается для всех четырех уголков.

2 Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.

3 Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.

4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). Эта возможность работает только в Firefox 3.5 и старше.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>-moz-border-radius</title>

<style>

.radius {

background: #fc0;

padding: 15px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<div style="-moz-border-radius: 50px 0 0 50px;" class="radius">

-moz-border-radius: 50px 0 0 50px;

</div>

<div style="-moz-border-radius: 40px 10px;" class="radius">

-moz-border-radius: 40px 10px;

</div>

<div style="-moz-border-radius: 10em/1em;" class="radius">

-moz-border-radius: 13em/1em;

</div>

<div style="-moz-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;" class="radius">

-moz-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;

</div>

<div style="-moz-border-radius: 8px; border: 1px solid black;" class="radius">

-moz-border-radius: 8px; border: 1px solid black;

</div>

</body>

</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовка после применения стилей