20.04.2011 Протченко Татьяны Олеговны

3 курс, 5 группа, ИДиП (ИД)

Домашняя работа по дисциплине «Редакторская подготовка по отраслям знаний» № 7

Тема: «СТРУКТУРА ТЕКСТА. РАБОТА РЕДАКТОРА ПО ЕЁ УСОВЕРШЕНСТВОВАНИЮ»

Холышлаг, М. Е. Языки HTML и CSS [учеб. пособие] : для создания Web-сайтов / М. Хольцшлаг ; [пер. с англ. А. Климович]. — М. : ТРИУМФ, 2007. — 304 с. : ил. — (Официальный учебный курс). — ISBN 978-5-89392-146-5.

Жанр данного издания — учебное пособие. Книга предназначена для читателей, желающих создать свой сайт. Цель произведения — сформировать у читателей знания и практические умения в области Web-дизайна, научить их использовать все преимущества языков HTML и CSS. В ходе выполнения работы я проанализирую данное издание в целом и конкретный урок 7 «Использование языка CSS» (с. 121–132 в книге).

УРОК 7.

Использование языка CSS

1. {/[Таблицыкаскадных стилейприобрели популярность в конце 1996 года.] [Несмотря на относительно долгое существование этой технологии,[её практическое применение для Web-дизайна ограничивалось управлением шрифтами и цветом], по крайней мере, до недавнего времени.] [Данное ограничение возникло из-за отсутствия совместимой поддержки таблиц стилей браузерами.] [¹[²Поскольку не все браузеры одинаково обрабатывали инструкции языка CSS](если вообще обрабатывали),[дизайнеры не могли в полной мере воспользоваться реальными преимуществами таблиц стилей.]] [Вместо этого ответственность за отображение информации возлагалась на язык HTML.]/

2. /[Теперь, когда поддержка языка CSS реализована гораздо лучше, и, благодаря этому,[можно воспользоваться множеством ценных возможностей языка,][Web-дизайнеры переходят от использования языка HTML как средства стилизации и создания макетов страниц к настоящему дизайну с применением языка CSS.]]/}

3. {[Почему это так важно?] [Причин тому множество]:

4. •[Раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая монитор, принтер, проектор и дажепортативные устройства.]

5. •[Раздельное хранение представления и документа означает уменьшение размера документа,[что, в свою очередь, ускоряет загрузку и отображение страницы, доставляя удовольствие посетителям.]]

6. • /[Язык CSS позволяет управлять как одним документом, так и миллионами документов.] [Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и[это изменение автоматически отразится на всехсвязанных документах.]] [В языке HTML это сделать невозможно.]/

7. • /[CSS-документы кэшируются.] [Это означает, что[они загружаются в память браузера только один раз.]] [При перемещении по сайту браузеру никогда не приходится заново интерпретировать стили.] [В результате мы получаем болееплавные переходыот страницы к странице и более быструю загрузку страниц, что всегда является конечной целью.]/

8. • /[Отделив представление от структуры и содержимого,[легко добиться доступности документа.]] [Документы, в которых не используютсясложные таблицыи большое количество элементов языка HTML, отвечающих за представление, по сути, являются более доступными, чем те документы, у которых перечисленные свойства присутствуют.]/}

9. [Очевидно, что язык CSS предоставляет множество возможностей.] [В этой главе мы узнаем, как эффективно и гибко использовать язык CSS для дизайнов.]

Упрошённая теория языка CSS

10. /[¹[²Перед началом использования языка CSS необходимо узнать некоторые важные моменты], касающиеся самого языка и егоэффективного применения.] [Я постараюсь сделать это быстро и безболезненно, поскольку знаю, что вам не терпится испытать его в действии.]/

Правила языка CSS

11. {/[Правила языка CSS состоят из селектора и, по крайней мере, одного объявления.] [Селектор — это код элемента языка HTML, к которому будет применено правило стиля.]/ [¹[²В этой книге мы сконцентрируемся на наиболее распространённых селекторах,]но, став более квалифицированным специалистом в области применения языка CSS,[³вы сможете использовать более дюжины типов селекторов.]] [Объявление состоит, по крайней мере, из одного CSS-свойства и соответствующего значения.] [При помощи CSS-свойств определяются стили:]

hi {color: red;}

12. /[¹[²Селектор hi отвечает за заголовки hi языка HTML],[³а объявление состоит из свойства color и значения red.] [Проще говоря, это правило изменяет цвет текста элементов hi на красный цвет.] [Обратите внимание, что синтаксис правила стиля отличается от синтаксиса языка HTML.] [Объявления заключаются вфигурные скобки,[за каждым названием свойства следует двоеточие,]а после каждого свойства со значением ставится точка с запятой.] [В правиле можно использовать любое количество свойств.]/}

Применение языка CSS

13. {[Существует шесть типов таблиц стилей:]

14. •/[Стиль браузера — это стандартная таблица стилей, используемая браузером.] [Если никакие правила стиля не объявлены,[применяются эти стандартные стили.]]/

15. •/[Стиль пользователя — пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера.] [¹[²Такой подход используется редко], но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением.] [¹[²В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили.]/

16. •/[Встроенный стиль— стиль, который определяется непосредственно в элементе и применяется с использованием атрибута style.] [Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.]/

17. •[Внедрённый стиль— этот стиль управляет представлением одного документа и размещается внутри элемента style HTML-документа.]

18. • /[Связанный стиль— это таблица стилей, которая связана с HTML-документом при помощи элемента link, размещённого в разделе документа head.] [Любой документ, связанный с данным типом таблицы стилей, получает все стили, определённые в ней, в чём и заключается преимущество управления языка CSS.]/

19. • /[Импортированный стиль— этот тип похож на связанные стили, однако позволяетимпортировать стили в связанную таблицу стилей или непосредственно в документ.] [Он полезен для реализации обходных путей и для управления множеством документов.]/

20. [Мы познакомимся с примерами использования перечисленных таблиц стилей по мере изучения материала главы.]}

Каскад

21. {/[Люди часто интересуются, почему стили называются каскадными.] [Каскад — это иерархия применения — красивое название для системы применения правил.]/ [Если внимательно посмотреть на пять перечисленных типов таблиц стилей, станут очевидными различные способы применения стиля к одному и тому же документу.]

22. [Что же получится в результате, если у нас будет встроенный стиль,внедрённая таблицастилей исвязанная таблицастилей?] [Каскад определяет способ применения правил.] [В случае с типами таблиц стилей,[¹пользовательский стильпереопределяет все остальные стили;] [²встроенный стиль превосходит внедрённый, связанный и импортированный стили;] [³внедрённый стиль имеетпреимущественное значениеперед встроенным стилем;] [⁴связанные и импортированные стили рассматриваются как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей.]] [Стиль браузера используется только в том случае, когда для данного элемента не было предоставлено ни одного стиля.]

23. /[Каскад также относится к порядку применения нескольких таблиц стилей.][Если существуют три связанные таблицы стилей, применена будет та из них, которая интерпретируется браузером при наличии конфликтов между ними.]/}

Наследование

24. {[Наследование означает, что стили наследуются отродительских элементов.]

25. /[Оба элемента hi и р считаются потомками элемента body.] [Стили, заданные для элемента body, будут унаследованы потомками, если не будет применено другое правило, переопределяющее унаследованный стиль.]/ [В языке CSS наследуются почти все свойства, кроме свойств, относящихся к границам и к отступам.]}

Специфичность

26. {[Наконец, если между таблицами стилей существуют конфликты, которые невозможно решить при помощи каскада,[у языка CSS есть алгоритм, разрешающий такие конфликты.]] [Алгоритм основан на специфичности правила.] /[Алгоритм немного сложный для обсуждения в этой книге, но о нём следует упомянуть.]

27. [Понятно, что две страницы текста не могут полностью раскрыть ни одну из этих тем, поэтому,[если вы хотите узнать больше, обязательно обратитесь к части «Дополнительные источники».]]/}

Добавление встроенного стиля

28. {[Ладно, довольно теории —[приступаем к работе!]] [В этой части мы узнаем, как применять встроенный стиль.] /[Встроенные стили используются редко, поскольку они задают стили только для одного конкретного элемента.] [Такой подход препятствует использованию преимуществ управления языка CSS.]/

29. [Более того, встроенный стиль можно сравнить с элементами языка HTML, отвечающими за представление, поскольку[стиль записывается непосредственно в документе, а не отделяется от него, что лишает нас возможности использоватьважнейшие преимуществаязыка CSS.]][Я использую встроенные стили в основном для ситуаций, когда необходимо быстро исправить проблему для одноготребуемого элемента, или в редких случаях, когда на всём сайте существует только этот стиль для одного уникального элемента.]

30. [Рассмотрим следующий элемент:]

<hl>welcome!</hl>

31. [Если бы этот заголовок был частью готового HTML-документа и мы просмотрели его в браузере, результаты были бы такими же, как на рисунке 7.1.]

32. /[Допустим, что нам не нравится стандартный цвет и размер шрифта.] [Можнодобавить CSS-правила непосредственно к этому элементу, воспользовавшись атрибутом style:]

<hl style="color: gray; font-size: 24px;">Welcome!</hl>

33. [Теперь у нас будет заголовок серого цвета с размером шрифта, равным 24 пикселам, как показано на рисунке 7.2.]/}

Использование внедрённого стиля

34. {/[Внедрённый стиль управляет только тем документом, в который он был внедрён.] [Как и встроенные стили,[этот подход не позволяет реализовать возможность применения стилей сразу ко всему сайту.]]/ /[Однако существуют ситуации, в которых удобно использовать именно внедрённый стиль.] [Первая ситуация, когда данный документ является единственным документом на сайте, использующимспецифические стили.] [Другая ситуация относится к процессу разработки.]/ /[¹[²Мне нравится использовать внедрённый стиль при работе над дизайном,]поскольку в этом случае всё находится в одном документе.] [Мне не приходится переключаться между приложениями или окнами, чтобы выполнить задачу.] [Так как правила стилей останутся прежними, [я могу просто вырезать готовые стили из внедрённой таблицы и связать их с документом,] с чем мы сейчас и познакомимся.]/

35. [Внедрённый стиль добавляется в раздел документа head с использованием элемента style иобязательного атрибутаtype, как показано в примере 7.1.]

36. [На рисунке 7.3 показаны результаты.]}

Создание связанной таблицы стилей

37. {/[Чтобы воспользоваться преимуществами языка CSS, большую часть времени мы будем использовать связанные таблицы стилей.] [Связанная таблица стилей — этоотдельный файл с расширением .CSS, в котором размещаются все CSS-правила (но без тегов языка HTML).] [Любой HTML-файл, к которому нужно применить стили, описанные в этой таблице, можно связать с ней, используя элемент link в разделе документа head.]/

38. [В примере 7.2 показана таблица стилей, готовая для связывания.] [Я указала ряд правил стилей и сохранила файл под именем styles.ess в моейлокальной папке.]

39. [В примере 7.3 приведён готовый HTML-документ, связанный с необходимой таблицей стилей, которая размещается в том же каталоге, что и документ.]

40. [Результаты приведены на рисунке 7.4.]

41. [Конечно, с данной таблицей стилей можно связать любое количество документов, используя элемент link.]

42. [Для элемента link используется несколько атрибутов, перечисленных ниже:]

43. • /[rel — атрибут связи, который описывает связь ссылки.] [В данном случае связь осуществляется с основной таблицей стилей, поэтому используется значение stylesheet;]/

44. •[type — как и для элемента style внедрённого стиля, необходимо определить тип языка и используемый формат — в данном случае text/css;]

45. • /[href — знакомый атрибут ссылки.] [В данном случае было указано только имя файла, поскольку оба документа находятся в одном каталоге.] [¹[²Таблицы стилей можно размещать в другом каталоге;] [³просто проверяйте корректность значения атрибута href.] [Можно также использовать абсолютное связывание для непосредственной связи с таблицей стилей;]/

46. • /[media — атрибутmediaпозволяет определять различные стили для различных устройств вывода.] [Если создатьотдельную таблицустилей для данного документа, предназначенную для вывода информации напортативных устройствах, в элементеlinkиспользовалась бы следующая информация:media="handheld".] [Подобным образом атрибутmedia= "print" предполагает использование таблицы стилей только для печати.] [В данном случае атрибуту media присвоено значение screen.] [По умолчанию, значением атрибута media является all, поэтому, [если необходимо применить одни и те же стили ко всем устройствам вывода, используйте это значение или просто не указывайте атрибут media.]]/

47. [Как уже отмечалось, с документом можно связать любое количество таблиц стилей.]}

Импортирование таблиц стилей

48. /[¹[²Импортированные таблицы стилей очень похожи на связанные таблицы стилей,] [³так как дляимпортируемых стилейсоздаётся отдельный документ.]] [После этого эти таблицы можно либо импортировать в основную таблицу стилей, либо импортировать непосредственно в документ.]/

Непосредственное импортирование в документ

49. {/[¹[²При импортировании в документ на самом деле используются два типа таблиц стилей]:[³отдельная импортируемая таблицастилей ([⁴я назвала файл именемimport.css]) и встроенная таблица стилей в документе.]] [Выполнить импортирование при помощи элементаlinkневозможно; поэтому вместо элементаlinkиспользуется директива ©importязыкаCSS, как показано в примере 7.4.]/

50. /[Таблица стилейimport.cssбудет импортирована непосредственно в документ.][Представьте себе, что элементstyleсодержит все правила стилей из файлаimport.css— это как раз то, что происходит.] [Поэтому теперь стиль фактически внедрён в этот файл.]/

51. /[¹[²Этот способ можно использовать для любого количества документов], но[³обычно этот метод используется в основном дляобходных решений.]] [Ряд браузеров, в частности, браузер Netscape версии 4, не поддерживают директиву ©import, но при этом они поддерживают элемент link.] [Поскольку в браузере Netscape 4.x реализованаограниченная поддержкаязыка CSS,[применять стили необходимо сособой осторожностью.]][Выделение стилей, не поддерживаемых браузером, в связанные таблицы стилей, а поддерживаемых — в импортированные таблицы стилей, позволит пользователям браузера Netscape увидеть некоторые стили, но не все.] [Данный метод очень эффективен для обходного решения, когда необходимо поддерживать браузеры Netscape версии 4.]/

52. /[Другое обходное решение с использованием директивы ©import заключается в размещении всех стилей вимпортированной таблице.][Любой браузер, не поддерживающий директиву ©import, просто не сможет прочитать стили, и браузер отобразит документ без стилей.]/}

Квантовый скачок: кратковременное отображение нестилизованного содержимого (Flash of Unstyled Content — FUOC)

53. {/[Если используется метод с директивой ©import, а раздел документа head не содержит элементов link или script,[браузер Internet Explorer будет часто сначала отображатьнестилизованное содержимое, а затем перерисовывать страницу уже с применением стиля.]] [Это раздражающая ошибка, но её легко избежать, добавив элементы link или script в раздел документа head.] [Дополнительную информацию по проблеме FUOC можно получить по адресу http://www.bluerobot.com/web/css/fouc.asp.]/

54. [В большинстве случаев вы не будете использовать директиву ©import во внедрённой таблице, пока для этого не появитсяособая причина.]}

Импортирование стиля в связанную таблицу стилей

55. {[Другое применение директивы ©import и истинная причина, по которой эта директива существует, заключаются в возможности разбивать стили на модули и в их последующем импортировании восновную таблицустилей.] [Рассмотрим пример на рисунке 7.5.]

56. /[Представьте, что каждыймодульный файл(modl.css, mod2.css и mod3.css) содержитспецифические стилидля какой-либо возможности или функции сайта.] [Например, [могут существовать[¹стили для управления рекламой,] [²стили для таблиц]и[³стили для форм.]] [[Все эти стили можно оформить в видеотдельных модульных файлов], а затем импортировать в файл styles.сss, который связан со страницей index.html.] [Основная причина использования данного метода заключается в том, что[¹изменения в модули можно вноситьнезависимо от других модулей], а также [²можно легко избавляться от стилей, когда они больше не нужны.]] [Этот метод наиболее эффективен для очень больших сайтов с множеством стилей.]/}

Квантовый скачок: обходные пути в языке CSS

57. /[Хотя язык CSS теперь используется повсеместно,[иногда приходится применятьобходные путидля обеспечениякросс-браузерной совместимости.]] [Для обходных путей можно использовать описанный методмодулярного импорта.] [[В этом случае, как только обходной путь становится ненужным, можно просто удалить импортируемый файл и соответствующую директиву ©import,]полностью избавившись от обходного пути и очистив таблицу стилей.] [Более подробную информацию по обходным путям в языке CSS можно прочитать в моей статье «StrategiesforLong-TermCSSHackManagement» на сайтеInformITпoадресу http://www.informit.com/articles/article.asp?p=170511.]/

Комментирование и форматирование кода на языке CSS

58. /[Возможность добавлять комментарии в HTML-файлы для описания разделов, сокрытия разметки и содержимого от браузера или добавления указаний для коллег, работающих над документом, существует и в языке CSS.] [И точно так же, как[код на языке HTML можно записывать с отступами или применять другоеиндивидуальное форматирование,]это можно делать и в коде на языке CSS.]/

Комментирование кода на языке CSS

59. {/[Комментарии языка CSS отличаются от комментариев языка HTML.] [Комментарии языка CSS начинаются спрямого слэшаи звёздочки, а закрываются звездочкой, за которой следует прямой слэш.] [Любое содержимое, расположенное в этой области, не интерпретируется браузером, как показано в примере 7.5.]/

60. /[Всё, что выделенонаклонным шрифтом, браузером не интерпретируется, а стили, находящиеся за пределами комментариев, интерпретируются.] [Комментирование может помочь разбить таблицы стилей налогические группы, чтобы ускорить поиск необходимых стилей.] [Кроме того, можно[¹временно скрыть стили, которые в данный момент не нужны,]а также[²оставить пояснения для других людей, работающих над текущей таблицей стилей.]/

61. [Иногда код языка CSS, используемый для определения внедрённой таблицы, заключается в комментарии языка HTML, как показано в примере 7.6.]

62. /[В данном случае комментарии языка HTML используются для сокрытия CSS-кода от старых браузеров, не поддерживающих язык CSS.] [Многие из этих браузеров попытаются отобразить CSS-правила в своём окне.] [[Подобное использование комментариев языка CSS широко распространено в наши дни,]хотя длясовременных браузеровэтот метод является ненужным.]/}

Форматирование кода на языке CSS

63. {/[[¹Возможно, вы обратили внимание, что в этой главе были использованы два подхода по форматированию кода]([²с моей стороны это подло, не так ли?]).][В первом подходе за селектором на одной строке размещается объявление:]

body {background-color: #999; color: black;}

64. [Во втором подходе правило разбивается на строки:]

body {

background-color: #999;

color: black;

}

65. [[¹Оба подхода абсолютно корректны;] [²выбор зависит отиндивидуальных предпочтений.] [Многие CSS-дизайнеры, считающие каждый бит и байт документа, предпочитают первый подход.] [Другие приводят аргументы, что[разбиение правил на строки облегчает поиск необходимых стилей.]] [В любом случае, поскольку требуемый синтаксис не нарушен,[используемый вид форматирования таблицы стилей являетсяперсональным выбором.]/}

Настало время использовать воображение!

66. {[Если после знакомства с материалом данной главы вы считаете, что работать с разметкой и языком CSS скучно,[ваше разочарование вполне обосновано.]] [[¹Крайне необходимо уделять вниманиесложным моментам,]и[²я уверяю вас, что вы уже прошли это, уловив смысл сложных понятий.]]

67. [Но, несомненно, вы хотите применитьприобретённые знанияи получить представление, как использовать язык CSS для улучшениявнешнего видаобъектов.] [Как никак, это то, что я обещала, не так ли?]

68. [К счастью,[следующая глава позволит немного позабавиться:]вы будете использовать своё воображение.]

69. [Мы будем использовать изображения и цвет, чтобы нарядить документы, а также исследовать возможности языка CSS для работы с изображениями и цветом в дизайнах.]}