Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 30


Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru в разделе «Теги HTML» появилась интересная особенность (фича, как еще говорится на компьютерном жаргоне). Возле каждого примера внизу справа располагается небольшая кнопка, при нажатии на которую в браузере открывается текущий пример. Технологию назвал «живые примеры» и она позволяет не копировать лишний раз код примера, а сразу же посмотреть, как он работает в вашем любимом браузере.

Оценить можно на самом же первом теге в списке — http://htmlbook.ru/html/a.html

Обратите также внимание, что все ссылки и картинки в примерах действующие. Это значит, что если в тексте имеется ссылка, то на нее можно нажать, не опасаясь, что появится сообщение об ошибке.

Поделиться впечатлениями и замечаниями о новинке можно мне по почте vlad@htmlbook.ru

Сегодня завершаем рассказ об HTML и XHTML и переходим к стилям. Но для начала три задания по закреплению навыков в XHTML. Все задания должны быть выполнены с соблюдением следующих условий:

  • применяется строгий <!DOCTYPE>;
  • код проходит валидацию на http://validator.w3.org, не содержит ошибок и замечаний;
  • результат должен максимально соответствовать приведенному изображению.

Рис. 1

Рис. 1. Таблица

Рис. 2

Рис. 2. Многочлен

Рис. 3

Рис. 3. Список

Решения будут опубликованы в следующем выпуске рассылки.

1. Что такое CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением.

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

Разделение оформления и содержания

Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задается через стили. При подобном разделении формирование дизайна и верстка сайта могут вестись параллельно.

Единое оформление документов

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

Централизованное хранение

Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Благодаря этому удобно править стиль в одном месте, при этом оформление элементов автоматически меняется на всех страницах, которые связаны с указанным файлом. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.

Расширенные возможности

В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

Быстрая работа

При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счет кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.

Замечание

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

В настоящее время современный подход к созданию сайтов предполагает активное использование стилей для управления видом элементов веб-страниц и их верстки. Так называемая блочная верстка или верстка с помощью слоев приобретает все больше поклонников, а это в свою очередь предполагает знание свойств CSS и их правильное применение на сайте.

Замечание

Условно верстка веб-страниц делится на табличную верстку, где в качестве невидимой модульной сетки выступают ячейки таблицы, и верстку с помощью слоев. В дальнейшем, под слоем будем понимать элемент <div> или <span>, к которому добавляются стилевые параметры для изменения оформления и положения элемента.

Сравните между собой две картинки одного и того же HTML-документа. В первом случае применяется «чистый» HTML (рис. 4), а во втором — к нему же добавляется CSS-файл (рис. 5). Код при этом различается только одной строкой, которая нужна в качестве ссылки на файл со стилем.

Рис. 4

Рис. 4. Страница без использования стилей

Рис. 5

Рис. 5. Та же страница, но с добавлением CSS

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное