Синтаксис CSS

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

У CSS достаточно простой синтаксис.

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

Схематически это можно показать так:

селектор, селектор {

свойство: значение;

}

Например:

p {

font-family: "Garamond", serif;

}

h2 {

font-size: 110 %;

color: red;

background: white;

}

.note {

color: red;

background: yellow;

font-weight: bold;

}

p#paragraph1 {

margin: 0;

}

a:hover {

text-decoration: none;

}

#news p {

color: blue;

}

Здесь приведено шесть правил с селекторами p, h2,.note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например: <p class="note"> этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберет подчеркивание, когда курсор мыши находится над этими элементами.

Последнее, шестое правило применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

Селектор определяет, к каким элементам HTML-документа будет применено данное правило. В самом простейшем случае селекторы совпадают с именами тегов. Кроме этого, бывают селекторы атрибутов, уникальных элементов, классов, псевдоэлементов, псевдоклассов, такие селекторы называются комбинированными. Например,

p a, li a

Этот селектор указывает на элементы <a>...</a>, но не на все подряд, а только на такие, которые заключены в контейнерах <p>...</p> и <li>...</li>.

При помощи CSS можно переопределить внешний вид маркеров списков, в том числе и путём назначения графического изображения в качестве маркера. Кроме того, CSS позволяет определить, каким образом должны располагаться маркеры списка относительно его содержания. Для задания внешнего вида маркера используется свойство list-style-type. Значение этого свойства применимы как к спискам, заданным тегом <ul>, так и к спискам, определённым при помощи тега <ol>.

Использование в качестве маркера графического изображения позволяет свойство list-style-image. В качестве значения этого свойства выступает URL картинки.

Свойство list-style-position указывает, где по отношению к содержимому списка должны находиться маркеры — внутри содержимого элементов (значение inside) или за его пределами (значение outside, используемое по умолчанию). Ниже приводится пример с использованием свойства list-style для управления внешним видом элементов списка.

<?xml version="1.0" encoding="windows-1251"?>

<head>

<title>Управление внешним видом элементов списков</title>

<!--

body {

color: #000;

background-color: #fff;

}

ul {

list-style: url(bullet.png) square inside;

}

ol {

ist-style-type: lower-roman;

}

-->

</style>

</head>

<body>

<p>Хороший сайт отличают как минимум следующие черты:</p>

<ul>

<li>высокое качество информационного наполнения и грамотность его подачи;</li>

<li>оригинальность и эстетическая привлекательность внешнего облика страниц;</li>

<li>доступность содержания сайта для максимально широкого круга пользователей вне зависимости от применяемых ими типов устройств и версий браузеров, а также от ограничений по состоянию здоровья;</li>

<li>эргономичность элементов пользовательского интерфейса сайта, обеспечивающая высокую эффективность, но в то же время легкость и непринужденность взаимодействия посетителя с веб-ресурсом;</li>

<li>надежность и безопасность используемых технологических решений, четкая согласованность работы всех компонентов;</li>

<li>безупречная проработка всех деталей и нюансов.</li>

</ul>

<p>Технологическая цепочка создания сайта состоит из следующих шагов:</p>

<ol>

<li>постановка задачи, включающая в себя:

<ul>

<li>анализ существующих конкурирующих и/или родственных проектов;</li>

<li>выработку концепции;</LI>< p>

</ul>

</li>

<li>подготовка первоначального информационного наполнения;</li>

<li>разработка макетов страниц;</li>

<li>подготовка шаблонов страниц;</li>

<li>проектирование и реализация сервисов;</li>

<li>сборка всех компонентов воедино;</li>

<li>тестирование;</li>

<li>ввод в эксплуатацию;</li>

<li>пожизненное сопровождение — информационное наполнение и техническая поддержка.</li>

</ol>

</body>

</html>

Ниже приводится пример использования CSS свойств, управляющих фоновым изображением. Используя свойство background-repeat, мы запретили размножение фонового рисунка. В значении свойства background-attachment мы указали, чтобы картинка прокручивалась вместе с текстом страницы. Изображение смещено на 50 пикселов вправо и на 150 пикселов вниз относительно левого верхнего угла страницы благодаря применению свойства background-position.

<?xml version="1.0" encoding="windows-1251"?>

<head>

<title>Вставка фонового изображения</title>

<!--

body {

color: #000;

background-color: #fff;

background-image: url(fortress.jpg);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: 50px 150px;

}

-->

</style>

</head>

<body>

<h1>Вставка фонового изображения</h1>

<p>В эпоху, когда каскадные листы стилей были еще в диковинку, существовал лишь один алгоритм рендеринга фона — размножение фонового изображения от верхнего левого угла того или иного элемента страницы по всей площади последнего.</p>

<p>Благодаря CSS арсенал средств по управлению фоновыми изображениями существенно расширился.</p>

<p>За отображение фонового рисунка отвечают четыре свойства: background-image, background-repeat, background-attachment и background-position.</p>

</body>

</html>

Дата добавления: 2015-11-14; просмотров: 58 | Нарушение авторских прав

<== предыдущая страница	\|	следующая страница ==>
CSS — каскадные таблицы стилей	\|	Включение CSS в HTML

mybiblioteka.su - 2015-2024 год. (0.01 сек.)