Мини-лекции 8. HTML CSS

   Первоначально HTML и не собирался быть красивым, но? Но с появлением интернета... Сначала робко, а потом... И все заорали: «Сделайте нам красиво!». И в угоду интернет-сумасшествию стал HTML обрастать так называемым, презентационным кодом... По утверждению автора книги «Стильный сайт с помощью CSS», Чарльза Уайк-Смита, большинство WEB-сайтов на 60% и более состоят из презентационного кода! Как же нам непонятливым это понять? Очень просто. Так скажем на страницах чётный АБЗАЦ должен в отличие от другого текста выполнен определённым шрифтом с определённым размером, мало того полужирным курсивом. И теперь мы должны создать вот такую конструкцию <P><font face="Arial" size="5" color="red"><b><i>Текст абзаца</i></b></font></P> И всё это нужно вписывать в каждый чётный абзац, на каждой странице... И в случае смены чего-то всё начинать сначала! Весь текст абзаца обрастал этим презентационным кодом! Удобно? Ещё как удобно!!! Так, что появление лекарства было не за горами...

   Так на фоне HTML-бардака по-тихому появились эти самые CSS-каскадные таблицы стилей. Как и всё новое пробиралось долго и поначалу вообще всё это почти никто не замечал. Первой ласточкой были CSS1. И только в 1996 г. W3C проснулся и были как бы узаконены CSS2, а потом и CSS3... Ладно, не мы создавали, не нам что-то исправлять. Примем всё это (CSS) как есть!

   Появление CSS наконец-то разделили гремучую смесь на структурный код и презентационный! Отныне и вовеки-веков XHTML отвечает за СТРУКТУРИЗАЦИЮ сайтов, а CSS за ПРЕЗЕНТАЦИЮ! CSS дали WEB-дизайнерам (и нам соответственно) такое, какое HTML и не снилось! Вот только благодаря всё тому же бардаку браузеры разных контор не воспринимали нововведение одинаково... Как бы там ни было но все продвинутые браузеры теперь воспринимают CSS3, хотя... Уже поговаривают о CSS4... И чем вся эта гонка закончится???

   Что нам дали эти CSS3? Это можно посмотреть сравнивая реакцию браузеров разных версий? Я для работы (мне так удобнее) использую Internet Explorer 6-й версии. А для прочего одна из последних версий (развелось их блин-н-н-н?!) Firefox. Для примера, на рис2 заголовок моих фотоальбомов. Верхний текст по умолчанию без всяких вмешательств-украшательств. Второй текст все красивости с помощью CSS3 в Firefox. Самый нижний, то что видит Internet Explorer6! Почувствуйте разницу... На рис1а иконка семейного фотоальбома из моих фотоальбомов. Тени созданы не в фотошопе, а именно с помощью CSS3, равно как и в заголовке.

   И последнее. На рис1 показан код ссылки с презентационном украшением. За исключением атрибута href всё остальное презентационный код! На рис3,4,5 показаны фрагменты страниц моего бывшего сайта с разными видами применения стилей. На рис3 так называемые ЛИНЕЙНЫЕ, или ЛОКАЛЬНЫЕ, встраиваемые в теги стили и относящиеся только к конкретному тегу во всём документе. Тем более в сайте! На рис5 ВЛОЖЕННЫЕ стили, помещённые в сам документ и относится только к этому документу. И влияющие на соответствующие элементы. Но разные стили к разным элементам. ВНЕШНИЕ стили рис4, стили находящиеся вне документов и подключаются с помощью соответствующих ссылок. На риc4, это ссылка на лист стилей kartiny.css Здесь Вы можете увидеть и один линейный стиль применённый к элементу (img), — изображению!

   Продолжение темы в мини-лекции CSS.