Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Пример 1.2. Содержимое стилевого файла style.css




Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title> Флексагон </title>

<meta charset="utf-8" >

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

</head>

<body>

<h1> Флексагон </h1>

<p> Флексагон представляет собой бумажную фигуру, которая имеет

три и более стороны. Поначалу кажется, что это невозможно, но вспомните

ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,

и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и

склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но

стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,

что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.

Перегибая флексагон, по очереди будем наблюдать все его поверхности. </p>

</body>

</html>


Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel="stylesheet" href="style.css">. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {

font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */

font-size: 11pt; /* Размер основного шрифта в пунктах */

background-color: #f0f0f0; /* Цвет фона веб-страницы */

color: #333; /* Цвет основного текста */

}

h1 {

color: #a52a2a; /* Цвет заголовка */

font-size: 24pt; /* Размер шрифта в пунктах */

font-family: Georgia, Times, serif; /* Семейство шрифтов */

font-weight: normal; /* Нормальное начертание текста */

}

p {

text-align: justify; /* Выравнивание по ширине */

margin-left: 60px; /* Отступ слева в пикселах */

margin-right: 10px; /* Отступ справа в пикселах */

border-left: 1px solid #999; /* Параметры линии слева */

border-bottom: 1px solid #999; /* Параметры линии снизу */

padding-left: 10px; /* Отступ от линии слева до текста */

padding-bottom: 10px; /* Отступ от линии снизу до текста */

}

В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h1> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.

CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.

Типы стилей

Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <H1>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление», как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.

 

Преимущества стилей



комментариев: 18

23.09.2010

Влад Мержевич

Стили являются удобным, практичным и эффективным инструментом при вёрстке веб-страниц и оформления текста, ссылок, изображений и других элементов. Несмотря на явные плюсы применения стилей, рассмотрим все преимущества CSS, в том числе и незаметные на первый взгляд.

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...