На предыдущей мини-лекции мы узнали для чего нужны CSS — каскадные таблицы стилей. И, что теперь HTML отвечает за СТРУКТУРИЗАЦИЮ документа, а CSS за ПРЕЗЕНТАЦИЮ. Если раньше чтобы украсить какой либо тег мы должны лично его обложить кучей аргументов со своими значениями. И даже если этих одинаковых тегов 1000, мы должны все эти чёртовы аргументы навешивать 1000 раз!!! Теперь же за всё это отвечают CSS! Достаточно дать им понять, что от них хотят всего один раз и 1000 тегов мгновенно будут украшены... Так как же устроены эти CSS и вообще, что это такое?
Разные авторы каждый по-своему трактует сущность CSS. Чаще слышно, что это технология. Кто-то просто называют их спутником HTML (XHTML). Проскочила даже фраза, что это своеобразный язык общения WEB-дизайнера с браузером и сродни языкам программирования. Ну, а нам то, что? Для нас это как бы бамашка на которой чёрно по белому написаны стили, правила поведения браузера в отношении объекта к которому и надо применить это правило! Помните как у Жванецкого про правило (поведения)?
— Зайдёт Гриша, дайте ему в морду! Заранее благодарю!
Что такое СТИЛЬ? Заглянем в вумную книгу, а там... Аж шесть понятий, начиная латино-греческого «ПАЛОЧКА для письма на вощёной доске» и заканчивая календарём в летоисчисление. Нам же более подходит: Способ выполнения чего либо, отличающийся совокупностью характерных приёмов. Всё это выражается в правилах для браузера, по аналогии с HTML-атрибутами. Вот на рис1 Вы и видите такое правило. Не трудно догадаться, что селектор — тег абзаца <P>, только вот все эти скобочки теговские не показывают. Теги могут быть самыми разными лишь бы правила соответствовали самому тегу, в смысле чтобы бюстгальтер был женским!
Остальное понятно, — цвет красный. Абзац (текст абзаца) будет весь красным. Свойств может применяться несколько нужно лишь следующее свойство отделить от первого пробелом и закончить точкой с запятой. Вот тут-то и первый подводный камень?! Абзацев то в тексте много, и они все покраснеют? Да, как заказывали?! А если нам нужно только один какой-то? Есть несколько способов и один из них КОНТЕКСТНЫЙ СЕЛЕКТОР рис4. В нашем случае абзац окрасится только тот, что запрятан в теге DIV! А, если таких тегов много? Есть ещё способы. На том же рис4. Это КЛАССЫ и ИДЕНТИФИКАТОРЫ. И если они делают как бы одно тоже но? Но ИДЕНТИФИКАТОР используется в документе только один РАЗ! А КЛАССЫ скока хош?! Лишь бы соответствовал... И если в случае с селектором нужно применять те буковки (теги) к чему применять правила, то классам и идентификаторам это глубоко ПО БАРАБАНУ!!! Главное, чтобы Вы потом сами не запутались во всех (от балды) обозначениях?! :-)).
Вот на рис3 Вы видите окно программки TopStyle и в левой половине таблица стилей. Точнее часть её. Верхнее правило для идентификатора (#card), ниже для класса (.p7). Вместо p7 можно написать слово и что-то нужное Вам, скажем как card, cardik, что хотите?.. В правой половине весь иконостас нашего листа стилей всех (почти) селекторов. Как видите ещё один класс .p77 и куча идентификаторов со словами. Вся страница (документ для которого CSS) лишь типа открытки с картиной художника, отсюда и card. header — шапка, вершина страницы, заголовок. Footer — подвал, низ документа. Но это не критично, пишите, что хотите?! Лишь бы не на деревню, дедушке?!
А как же браузер угадает куда и что ставить? Для этого, кому надо ставят «чёрную метку»! Вот так: <p class="p7">Художник Иван Константинович Айвазовский 1817 - 1900 гг.</p> То есть, если в HTML сразу видно, что применено и к какому тегу, то здесь тёмный лес! И только заглянув в лист стилей понимаешь, что класс p7 подразумевает: цвет шрифта зелёный, шрифт по умолчанию, фон чёрный и текст по центру. Там ещё куча всякого, того о чём Вы пока ещё не не знаете?! Всего восемь правил! И всё примерно такое же как и в случае для идентификаторов, только для них чёрная метка выглядит так:<h1 id="header">Иван Константинович Айвазовский</h1> В таблице же стилей аж двенадцать правил. Кроме как обычно для всех, задаётся шрифт не по умолчанию, а целое семейство шрифтов пригодных для заголовков (рубленный шрифт!). Плюс ко всему для наведения теней, светов правила уже от CSS3. Поэтому старенькая TopStyle забракует, также как на рис3, окрасит правило в красный цвет. Правда нигде не найдёте объяснения, но внимательный взгляд и всё ясно! У background на конце два dd! Программа такого не знает и пишет, что это ошибка... Но это ещё не всё?! Она же старая (у меня) и знает только CSS1 и CSS2, а про CSS3 не в курсах, поэтому всё, что касается CSS3 она признает как ошибку и покрасит соответственно в красный...
А, что это на рис4 внизу какие-то псевдоклассы? Псевдо от греческого pseudos «ложь» — часть сложных слов, обозначающая «ложный»,«мнимый». Всё дело в том, что все классы (нормальные) привязаны к чему-то и мы всё это видим в коде, а здесь? Здесь классы которые псевдо показывают реакцию браузера на действие мышки, на всякие щелчки... Что означают эти иероглифы?
L1nk — просто ссылка, сама по себе чего-то ждёт?
Visited — просмотренная ссылка.
Hover — указатель мышки наведён на ссылку.
Active — ссылка в момент щелчка.
Вообще-то вместо ссылки (а) можно подставить, скажем div или p, эффект будет тот же рис4с! Конечно если назначить правила?.. Для примера вот такие p: hover {background-color: gray} В данном случае при наведение указателя мышки на абзац он примет вид прямоугольника с текстом внутри и всё (фон) будет окрашено серым... А, если применить вот такие правила к тегу абзаца p:hover { color: blue; font-size: 24px; font-weight: 900; text-decoration: none; background-color: yellow;} , то картина получится ещё более интересной! Прямоугольник окрасится в жёлтый цвет. Шрифт текста станет синим, увеличится до размеров в 24 px. Мало того он ещё примет полужирный вид. И всё будет выглядеть увеличенным, словно Вы всё это видите через линзу! С тегом div ещё интересней и не есть хорошо, если в него входит весь контент?! Всё окрасится в жёлтый цвет!
Псевдоэлементы, это как бы элементы есть, но на самом деле их нет! Вот на рис4 Вы их и видите. Они влияют на уже готовое x:first-letter влияет на первую букву абзаца. Добавьте шрифтовых правил и всё увидите. Первоначально я назначил цвет синий первой букве. Второй вариант: увеличил размер, изменил цвет и назначил цвет фона. Всё видно по стрелочкам рис4а... Второй псевдоэлемент влияет на первую строку абзаца, я её подкрасил в синий цвет. Правила на риc4b. На рис1а и рис2 диаграмма наследственности тегов HTML. А, за ними тянутся и CSS, всё те же игры в дочки-матери и предки-потомки. Правда здесь не всё так просто как кажется?! И всё из-за каскадности этих самых CSS.
Вопрос каскадности наверное самый трудный (для понимания-восприятия) во всём этом CSS-бардаке! Я коснусь лишь начала этой каскадности...
Начнём с того, с чего браузер начнёт, что-то предпринимать? С листов (таблиц) и просто стилей. Их несколько, перечень ниже:
1) Таблица стилей браузера по умолчанию. Да, она существует и запрятана в недрах программного барахла. Опираясь на неё браузер автоматически, скажем, фон страниц отображает белым, а шрифт чёрным. Текст заголовков <h>Текст заголовка</h> отображает увеличенным (уменьшенным) размером, в зависимости от цифорки после h... Самый большой у h1 и маленький у h6 ;
2) Пользовательская таблица стилей. Но это так сказать экзотика... Представьте себе, что Вы лично прямо сейчас пишите (ну, очень грамотно) таблицу стилей нужных Вам для просмотра страниц. Затем под видом сантехника проникаете в браузер и там всё размещаете...Надеюсь, что 99,999% читателей делать этого не будет?!! Но, если есть такая возможность браузер будет и этот вариант рассматривать;
3) Авторская таблица стилей, та которую и пишет WEB-дизайнер (в будущем, Вы!). Таблица которая находится вне документов (внешняя);
4) Авторские вложенные стили. Это те, что находятся внутри документа и правила распространяются только для данного документа;
5) Авторские строчные (линейные) стили. Это те, что касаются какого-нибудь тега и подключаются при помощи XHTML-атрибута style.
Вот этот порядок по которому браузер и начинает свои разборки. В смысле у кого, какой и перед кем приоритет. Перед законом все равны, но есть равнее... За кровавое убийство для ОПГ оправдательный приговор, а простому смертному за фингал под глазом от и до с конфискацией...
Как Вы понимаете в трёх словах так сразу и не скажешь, тем более познать нужно всего ещё столько, да ещё полстолько, да ещё четверть столько...