CSS, или каскадные таблицы стилей Вам не очень-то и нужны, если Вы собираетесь ограничиться выпусками рассылки, но если в Ваших планах - строительство сайта, то таблицы стилей Вам совершенно необходимы. Конечно, сайт можно сделать только при помощи html, но в таком случае нелюбовь поисковых систем Вам обеспечена.
На самом деле CSS - это не сложно, нужно просто разобраться в его сути. Потихоньку, по ступенькам Вы разберетесь.
Должна предупредить, что в этих уроках только самые азы CSS, их задача - дать представление, что это такое. Но, освоив эти несколько уроков, Вы сможете вполне самостоятельно изучать CSS дальше.
Урок 1. Для чего нам вообще нужен CSS и что это такое?
Вы уже пробовали создавать веб-страницы с использованием только html. И Вы видели, сколько места занимают теги форматирования текста, а уж сколько времени Вы на это потратили...
А теперь представьте себе, что у Вас сделан целый сайт, но Вы решили, что Вам не подходит размер шрифта, который Вы использовали, что он неудобен для читателя, а любое неудобство - это потеря Ваших посетителей. Сколько времени Вам придется потратить на то, чтобы исправить положение? Кроме того, гораздо красивее выглядит сайт, страницы которого оформлены в едином стиле.
Вот здесь нас и спасают каскадные таблицы стилей (CSS). Причем такую таблицу стилей можно создать как для конкретного документа и лежащую непосредственно в нем (вложенные стили), так и в отдельном файле (присоединяемые стили), и тогда она будет использоваться для любых других документов, достаточно просто поставить ссылку. Есть и третий вид стилей - строчной или инлайновый. Этот стиль будет определять оформление одного конкретного тега в одном месте. Нужен бывает обычно там, где оформление уже задано другой таблицей стилей, но в данном конкретном случае Вам требует его изменить.
Все три способа стилевого оформления можно применять одновременно. В этом случае оформление фрагмента будет диктоваться стилем, лежащим ближе всего. То есть, если Ваша страница привязана к внешней таблице стилей, то она будет оформлена в соответствии с заданными стилями этой таблицы. Если на странице создать вложенную таблицу стилей, то приоритетной окажется именно она. И точно так же строчной стиль для какого-либо фрагмента отменит команду всех других таблиц. Отсюда и название - каскадные таблицы стилей.
И вернемся к примеру сайта, на всех страницах которого нам нужно изменить размер шрифта. Если мы использовали CSS, то зайдем в таблицу стилей, внесем изменение в нужный стиль, и на всех страницах, привязанных к этой таблице, шрифт изменится моментально.
Создание сайта без CSS - дело несерьезное, поэтому я использую эти таблицы уже давно. А вот выпуски рассылки делала по старинке, только при помощи html. Теперь исправилась, и этот выпуск уже сделан как положено. Вы можете сравнить код этого выпуска и код любого из прошлых. Разница видна невооруженным взглядом. Выпуск для сравнения возьмите из своей почты, с сайта не надо, там уже все исправлено на CSS. Я бы старые не стала трогать, но ради поисковиков пришлось, они не любят нагромождения html-кодов, предпочитают CSS.
Итак, каскадные таблицы стилей или просто таблицы стилей (CSS — Cascading Style Sheets) — это набор правил, описывающих форматирование разных фрагментов HTML-кода и хранящихся отдельно от него. Одно такое правило, отображающее форматирование какого-то одного фрагмента или однотипной группы фрагментов кода, называется стилем. Таблицы стилей описываются на особом языке CSS и хранятся в особых файлах с расширением сss, хотя могут быть внедрены в саму Web-страницу (цитата из учебника).
Это было своего рода введение. А вот как это все выполняется на практике, мы поговорим в следующих выпусках.
Урок 2. Привязка стилей.
Как браузер узнает, что данная страница должна быть оформлена при помощи таблицы стилей?
Если между тегами
и он увидит вот такой код:
-
то, что находится в тексте между тегами
... будет форматироваться в соответствии с этой таблицей стилей. Это была вложенная таблица, которая находится непосредственно в рассматриваемом документе. Ее удобно использовать, например, для рассылки. Часто вложенные таблицы используют и на сайтах, где нужно придать другие параметры стилям, определенным во внешней таблице.
Если у нас сайт со множеством страниц, то проще не писать для каждой страницы свой стиль, а создать одну или несколько таблиц, которые будут диктовать оформление любой из страниц сайта. Это делается очень просто. Создается отдельный файл с расширением .css, а в заголовке каждой страницы между тегами и размещается ссылка вида:
href="../style.css">
Здесь атрибуты rel="stylesheet" type="text/css" показывают, что мы имеем дело с таблицей стилей типа text/css, Вам их изменять не нужно, а в атрибуте href прописан адрес таблицы стилей "../style.css", вот он у Вас будет свой.
Строчной способ задания стилей задает оформление одного тега.
style="Здесь стиль"> Содержание заголовка
Если требуется придать стиль не тегу, а какому-либо фрагменту страницы, можно воспользоваться тегом .
style="Здесь стиль"> Содержимое фрагмента
Я пока не давала самих стилей для того, чтобы у Вас в голове не образовывалась каша. Прочитайте внимательно то, что написано в этом уроке. Все очень просто, если понять смысл.
А в следующем выпуске мо начнем составлять непосредственно таблицы стилей.
Урок 3. Стили, классы, идентификаторы.
Написание стиля немного отличается от написания тегов html, но те же самые слова Вы здесь встретите.
Стиль описывается вот таким образом:
название элемента{свойство элемента: значение свойства; свойство элемента: значение свойства;}
Обратите внимание на знаки, не забывайте их ставить. Все это делается в английской раскладке клавиатуры. В одном стиле может быть описано несколько свойств.
Название элемента. Мы можем придать единый стиль любому тегу нашей страницы. Если до сих пор в html-документе мы для каждого тега определяли его свойства, то теперь мы сделаем это только один раз.
h1{свойство элемента: значение свойства;}
p{свойство элемента: значение свойства;}
Этими двумя строчками мы определили свойства тегов <h1> ... </h1> и <p> ... </p>, будь их сколько угодно много на странице.
Есть еще способ задания стилей. Бывает, что нам нужно придать какой-либо стиль не определенному тегу, а только их части или вообще разным тегам. Здесь у нас появляется новое понятие - класс, который мы можем прицепить к любым тегам. Название класса дело произвольное, но лучше, если оно будет содержать в себе его значения хотя бы для того, чтобы Вы сами в них ориентировались, особенно, если классов у Вас будет много. Класс записывается вот так:
.red{свойство: значение;}
Обратили внимание на точку в начале? Это обязательный элемент. Теперь, чтобы придать этот стиль какому-то единичному тегу, нужно этому тегу присвоить этот класс. Вот так:
<p class="red">
Предположим, что у Вас есть класс, с помощью которого Вы оформляете элементы своей страницы. Но в одном или нескольких местах Вам необходимо дополнить свойства, описанные данным классом. Здесь на помощь приходит идентификатор (ID).
#green{свойство: значение;}
Присвоить идентификатор мы можем как к ничем не определенному элементу, так и к элементу, уже описанному стилем или имеющему класс.
<p class="red" ID="green">
Те, кто пробовал пользоваться другими учебниками по CSS, заметили, что я даю информацию в совершенно другом порядке, и пользоваться таблицами стилей Вы пока не можете.
Дело в том, что когда я сама осваивала CSS, на меня свалилась куча всего сразу: и сами стили, и как их привязать, и их свойства, всего по чуть-чуть. В моей голове образовалась совершеннейшая каша, все перепуталось. Мне кажется, что в таком порядке мне было бы проще тогда разобраться.
Вот и Вы теперь сначала разобрались, что такое таблица стилей, как ее привязать и из каких элементов она состоит. И в следующем выпуске мы приступим уже к самим свойствам, которые описываются абсолютно одинаково для внешних и вложенных таблиц, для стилей, классов и идентификаторов.
Урок 4. Свойства шрифта.
font-family - определяет тип (название) шрифта, например:
h1 {font-family : Verdana; font-size : 18px; font-style: italic; font-weight: bold;} - все заголовки h1 будут выполнены шрифтом verdana размером 18 пикселей курсивом жирным шрифтом.
.al {font-family : Verdana; font-size : 18px; font-style: italic; font-weight: bold;} - все элементы, которым будет присвоен class="al" будут выполнены шрифтом verdana размером 18 пикселей курсивом жирным шрифтом.
Как прикрепить таблицу стилей к документу, в котором она будет использоваться, Вы знаете из урока 2.
Урок 5. Цвет шрифта и фона. Выравнивание текста.
color - определяет цвет шрифта. Как и в html, может определяться как словом, так и обозначением кода цвета в виде решетки и номера.
background - определяет цвет фона, на котором будет написан текст.
Например:
h1{font-family: verdana; color : #B22222; background : #2E8B57;} - заголовок h1 выполняется шрифтом verdana цветом #B22222 на фоне цветом #2E8B57
text-align - определяет способ выравнивания текста:
text-align: left - выравнивание по левому краю,
text-align: right - ваыравнивание по правому краю,
text-align: center - выравнивание по центру,
text-align: justify - выравнивание по ширине страницы.
Например:
p{font-size: 15px; text-align: justify} - параграфы будут напечатаны шрифтом размером в 15 пикселей и будут выравнены по ширине страницы.
Урок 6. Оформление ссылок.
Для гиперссылок предусмотрено четыре варианта оформления:
A-link - начальный вид ссылки
A-hover - курсор мыши находится над ссылкой
A-active - вид ссылки при щелчке мышкой
A-visited - вид ссылки после посещения
Параметры оформления могут задавать цвет ссылки, подчеркивание, цвет фона, название и размер шрифта и т.д. Почти все эти параметры Вам уже знакомы, они используются так же, как мы это делали при оформлении текста. А вот параметр, отвечающий за подчеркивание, для нас новый. Это text-decoration.
text-decoration : underline - подчеркивание снизу
text-decoration : overline - подчеркивание сверху
text-decoration : none - без подчеркивания
Например:
a-visited{ font-family : Arial; font-size : 12px; color : White; background-color : Black; text-decoration : none;} - посещенная ссылка будет выполнена шрифтом Arial, размером 12 пикселей, белым цветом на черном фоне без подчеркивания.
Урок 7. Переходим к практике.
Тех крохотных знаний по CSS, что Вы получили в прошлых уроках, достаточно, чтобы потихоньку начать применять их на практике. Мы возьмем конкретную веб-страницу, размеченную с помощью html, и начнем ее оформление с помощью CSS. Мы будем использовать те стили, которые Вам уже знакомы и попутно рассматривать новые. Конечно, большинство стилей мы не затронем. Но Вы поймете их суть и сможете продолжить самостоятельно.
Сделаем вот такую страничку:
Что такое CSS?
А это очень удобный способ разметки наших страниц.
Раз его задав, мы избавимся от хлопот по разметке всех элементов. При этом наш код станет очень легким и простым. Изменить стиль целого сайта с этого момента станет очень просто.
Почему CSS лучше знать:
удобно
экономит время
такие страницы любят поисковики
На этой странице присутствует заголовок, параграфы, список, ячейки, которым также можно придать свой стиль.
учимся
учимся
учимся
учимся
А в этой таблице мы воспользуемся двумя разными классами для оформления ячеек. И не нужно будет писать html-теги для каждой ячейки.
А это html-код этой страницы. Красным здесь выделена ссылка на таблицу стилей, которая будет лежать в этой же папке.
в этой таблице мы воспользуемся двумя разными классами для
оформления ячеек. И не нужно будет писать html-теги для
каждой ячейки. </font></p>
</td>
</tr>
</table>
</table>
</body>
</html>
Я Вам советую создать свою подобную страницу, впрочем, можете воспользоваться приведенным кодом. Я его здесь привела сейчас для того, чтобы позже мы могли сравнить с кодом страницы, оформленной с помощью CSS.
Напомню, как это сделать. Создайте отдельную папку для урока, в ней - в блокноте запишите html-код, мой или сделанный самостоятельно. Затем "сохранить как" и в названии добавьте расширение urok.html. Подробнее об этом Вы можете почитать в 23 выпуске рассылки.
Теперь так же создайте в этой же папке документ style.css. Не забудьте про расширение. Теперь все команды, которые мы будем создавать в этой таблице стилей, будут действительно для всех страниц, на которых стоит ссылка на данную таблицу.
Создайте копию своего веб-документа и удалите в нем все html-коды. Теги <HTML>, <head>, <title>, <body>, <table> и ссылку не трогаем.
<td> <p>А это очень удобный способ разметки наших страниц. </p>
<p>Раз его задав, мы избавимся от хлопот по разметке всех элементов. При этом наш код станет очень легким и простым. Изменить стиль целого сайта с этого момента станет очень просто. </p>
<p>Почему CSS лучше знать:</p>
<ul>
<li>удобно</li>
<li>экономит время</li>
<li>такие страницы любят поисковики</li>
</ul>
</td>
</tr>
<tr>
<td><p>На этой странице присутствует заголовок, параграфы, список,
ячейки, которым также можно придать свой стиль. </p>
<p>А в этой таблице мы воспользуемся двумя разными классами для оформления ячеек. И не нужно будет писать html-теги для каждой ячейки.</p>
</td>
</tr>
</table>
</table>
</body>
</html>
Сделаем первую запись в таблице стилей. Придадим стиль заголовку. Сейчас он очень крупный, иногда это выглядит некрасиво. Но ведь нам приходится считаться с тем, что именно заголовки h1 ценятся поисковиками. Здесь мы можем, сохранив тег h1, придать ему совершенно другой стиль.
Здесь Вам все уже знакомо. Этот стиль определил нам шрифт, его размер, цвет и выравнивание. Теперь в любом документе, в котором стоит ссылка на данную таблицу стилей, все заголовки h1 будут выглядеть именно так. Попробуйте поменять стиль, посмотрите, что получится. Не забывайте, что все изменения, вносимые в код или таблицу стилей, будут отображаться в веб-документе только после их сохранения.
Пожалуй, для этого урока уже достаточно. Попробуйте самостоятельно придать стиль параграфам. Это делается абсолютно так же, как и для заголовка.
Урок 8. Продолжаем практику.
В прошлом уроке мы записали первый стиль в нашей таблице стилей:
Цвет шрифта всегда по умолчанию черный, поэтому описывать специально его не нужно. Сохраняем изменения, обновляем вид веб-документа. Как видите, у нас не изменился стиль списка.
Нам нужно задать стиль для ненумерованного списка <ul>. Если шрифт в списке должен выглядеть точно так же, как и в параграфах, мы можем не писать отдельный стиль, а добавить к стилю p через запятую ul.
Теперь все выглядит одинаково, но списки выравнены по центру, это совсем нехорошо. Для того, чтобы такого не было, мы могли записать для списков отдельный стиль, но и можем придать им класс, в котором определим выравнивание. Классу присваиваем произвольное имя, например al. Запись класса начинаем с точки.
.al { text-align : left; }
В отличие от стилей, которые мы только что рассмотрели, класс по умолчанию нигде работать не будет. В этом случае будут меняться только те элементы, которым будет присвоен данный класс al.
Присвоим этот класс тегу списка:
<ul class="al">
<li>удобно</li>
<li>экономит время</li>
<li>такие страницы любят поисковики</li>
</ul>
Сохраняем изменения, обновляем документ. Вот теперь все выглядит лучше. Не оформлены только надписи в ячейках. Этот текст не определен ни как параграф, ни как список. Но их мы оставим на следующий урок. А теперь попробуем один из параграфов оформить по-другому. Это Вам может пригодиться при оформлении сайта. Записываем в таблицу стилей идентификатор:
Видите, стиль этого параграфа изменился. Поэтому стили и каскадные. Сначала параграф приобрел тот вид, который диктуется ему идентификатором, а из внешней таблицы стилей параграф возьмет только те команды, которые идентификатором определены не были, в нашем случае выравнивание.
Потренируйтесь немного, поймите разницу между стилем, классом и идентификатором. Я не даю Вам перечень свойств и их значений, это Вы найдете в интернете. Для нас главное - понять принцип их применения.
В следующем уроке мы займемся таблицами, которые пока у нас не видны. Заодно придадим стиль и текстам внутри ячеек.
Урок 9. Продолжаем практику.
А теперь мы определим классы для ячеек. Как видим, ячеек у нас три вида. Одна просто розовая, и в маленькой таблице еще два разных вида.
Один из классов у нас просто определит цвет ячейки:
.tab1 { color : Fuchsia;}
Присвоим этот класс второй ячейке, где написано, что это удобный способ разметки.
<td class="tab1">
Следующие два класса определят не только цвет ячейки, но и свойства шрифта: сам шрифт, размер, начертание, выравнивание.
И точно так же присвоим эти классы разным ячейкам маленькой таблицы. Проверьте, что получилось.
Потренируйтесь немного. В следующем выпуске я покажу Вам несколько нужных свойств, и на этом мы закончим. Целью уроков было показать Вам смысл CSS, а различные свойства и их значения Вы сможете находить и применять вполне самостоятельно.
Урок 10. Последний.
Теперь Вы немного понимаете, в чем смысл CSS и как им пользоваться, и уже можете использовать различные свойства и их значения, находя их самостоятельно в других источниках. Потихоньку будете почитывать и теорию. Главное в том, что Вы уже можете сделать таблицу стилей, прикрепить ее к документу и определить в ней, как будет выглядеть Ваша страничка. А теперь еще несколько свойств, которые Вам могут пригодиться.
Абзацный отступ можно оформить при помощи свойства text-indent, который может определяться в миллиметрах mm, пикселах px, дюймах in, процентах%. Например:
Параграфы будут отображаться шрифтом Arial размером 16 px с абзацным отступом 20px.
При заполнении таблицы текстом мы часто видим, что буквы наезжают на границы ячеек, что выглядит очень некрасиво. Решить эту проблему можно при помощи свойства padding. Размеры его задаются, как и в отступе. Это свойство определяет размер внутренних полей блока (в нашем случае ячейки). Какое значение мы поставим, настолько и будет отстоять содержимое ячейки от ее границ. Причем мы можем определять как единый отступ со всех сторон, так и разный сверху, снизу, слева и справа. Например:
td { padding : 5px; } - все внутренние поля ячеек равны 5px
.prosvet { padding-left : 20px; } - левое внутреннее поле всех элементов, которым будет присвоен этот класс, будет равно 20px.
Есть и свойство, определяющее внешнее поле блока, margin. Значения определяются точно так же, как и для внутренних полей. Это свойство бывает очень полезным при вставке картинок с обтеканием их текстом, чтобы между картинка и текст не сливались друг с другом. Например:
.kart { margin : 10px;} - элементы, которым будет присвоем класс kart, будут иметь внешнее поле 10px.
Есть замечательная программа TopStyle Pro, с помощью которой очень легко оформлять стили. В ней Вы просто определяете тег, для которого будет действовать стиль, или создаете класс. Дальше Вы просто выбираете из выпавшего списка то свойство, которое Вам необходимо и тут же определяете его значение. Эта программа и описание работы с ней есть на диске с видеокурсом, ссылку на который Вы видите ниже.
Это был последний урок. Дальше Вы можете двигаться без особых проблем вполне самостоятельно.
