Если вы решили, что все уже знаете про каскадные таблицы стелей, то глубоко заблуждаетесь! Мы их даже толком и не начинали применять! То, что я рассказала в предыдущих уроках было лишь легкое введение. И сегодня я расскажу вам... нет, не сказку, я расскажу вам что такое селекторы и куда их можно приложить. Я не буду больше рекламировать свой сайт. Он уже достаточно намозолил вам глаза в предыдущих уроках, так что даже не умоляйте меня об этом!!!
Так что же за штука такая страшная "селектор"? Отвечу сразу, что ничего страшного в этом слове нет. Если попробовать перевести это слово с английского, то оно будет обозначать просто "выбор". Вот и запомните, что это выбор по... элементам, классам и по "ID". Если два первых понятия можно еще как-то представить, то третье, по моему скромному мнению, сокращенно от "identifier", что переводится как "идентификатор", или короче, уникальный идентификатор для уникального объекта.
Селекторы по элементам
А теперь, прошу вас вспомнить теги, которым я вас научила за время своих уроков. Надеюсь, они еще не улетучились за лето? Закройте мысленно глаза и начинайте вспоминать.... Нет-нет, не море, и не пляж! не шашлыки и не жареную у костра рыбку!!!! Я ж просила про тееееееееееги!!! Вижу, вы все забыли, и я напомню вам сама... Вот все приходится делать самой! Итак... хм... шашлычка бы сейчас. Тьфу. (полезла в свои собственные уроки). Вот! Вот они мои ненаглядные! Как я только могла их позабыть!!!
- тег тела документа BODY
- теги заголовков от H1 до Н6
- теги абзацев P
- теги неупорядоченных списков UL
- теги упорядоченных списков OL
- теги элементов списков LI
- теги таблиц TABLE
- теги строк таблиц TR
- теги ячеек таблиц TD
- тег ссылок A
Ну, и некоторые другие не столь важных. Вот каждый этот тег и можно считать за элемент! Сейчас каждому элементу мы можем приписать любое значение, какое только взбредет нам в голову. Так начнем же скорее экспериментировать!
На этот раз мы создатим таблицу CSS во внешнем файле. Поэтому всего у нас будет два файла - один файл element.css, а другой - обычный документ element.html. А вы можете дать своим файлам другие названия, и необязательно одинаковые. Это я для себя, чтоб не запутаться!
Вот одно упущение все-таки в моих уроках есть! А может и не одно... Я имею в виду вставка комментариев. Иногда код страниц бывает таким сложным и запутанным, что и сам разработчик не может разобраться с тем, что он тут понаписал, особенно, если времени написания страницы прошло не так уж и мало. И, чтобы не ломать голову, толковые программисты сразу пишут комментарии! Надеюсь среди вас не найдется ни одного бестолкового!
А вставлять комментарии очень просто! Нужно просто включить их между открывающейся скобкой c восклицательным знаком и двумя черточками-тере <!-- и закрывающейся скобкой с двумя черточками, расположенной перед этой закрывающейся скобкой -->, вот так:
<!-- Комментарий -->
И будьте уверены, никто не увидит на страничке ваш комментарий (разве что откроет код и не сопрет весь ваш труд, включая комментарии). Помню, давно, я все не могла решить одну проблему - как поместить свой копирайт внизу страницы, ну, и недолго думая, полезла на сайт Артемия Лебедева (а кто его не знает, а кто к нему не лезет!!!), открыла исходник, и вот что я там увидела... Впрочем, вы и сами сможете улыбнуться, нажав правой кнопкой и выбрав пункт "View Source" на его сайте Артемий Лебедев. Домашняя страница. Вот что значит "без комментариев"...
Однако для стилей CSS комментарии обозначаются немного по другому, а именно:
/* Комментарий */
// Комментарий в одну строчку
Итак, напишем же скорее код!
BODY {
background-color:#ccc;
font-size:18px;
}
/* задаем общий фон на страничке светло-серого цвета, а шрифт размером 18px */
TABLE {
font-size:16pt;
background-color: blue;
width:400px;
}
/* Я думаю, голубая таблица на сером фоне будет смотреться хоть куда!
А шрифт в таблице сделаем поменьше основного, ну и ширину таблицы тут запросто
можно указать, равной 400px */
H2 {
color:red; font-size:30px;
font-family:sans-serif;
text-align:center;
}
/*заголовок красного цвета, размером в 30px, выполненным шрифтом без засечек
и расположенным ровно по центру*/
P {
color: green;
text-align:right;
font-style:italic;
}
/* параграф будет выровнен по краему борту браузера, выведен курсивом зеленого цвета */
LI {
font-size:16px;
font-weight:bold;
color: white;
}
/* элементы списка пусть будут белого цвета, жирненькими и размером в 16 px */
A {
color:yellow;
}
//ссылка будет желтого цвета
Ну и сохраним всю эту прелесть под именем element.css.
Теперь я напишу простую html-страничку. Помните, я обещала не рекламировать свой сайт? Но большего я не обещала! А так как недавно я устроилась на работу страховым агентом, то про свою работу могу и написать несколько строк! А вы, можете вместо моих данных вписать свои! Я не обижусь!
Открываем Notepad и пишем:
<html lang="ru">
<HEAD>
<TITLE>Пример</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="element.css">
</HEAD>
<BODY>
<H2>Я - страховой агент!</H2>
<P>
Никогда не думала, что когда-нибудь стану страховым агентом, но дела повернулись
таким образом,
что я вынуждена была взяться за первую попавшуюся возможность.
<P>
А перед этим я пыталась зарегистрироваться на бирже труда, но там постоянно
что-то было не так
с моими документами - то печать на такая, то фотография не та, то вообще там
выходной или нет бланков...
</P>
И вот теперь я агент Ренессанса - крупной страховой компании! И, знаете, мне там
сразу понравилось!
И вот моя работа:
<TABLE border=5>
<TR>
<TD>
<UL>
<LI>Автострахование
<LI>Добровольное медицинское страхование
<LI>Страхование имущества частных лиц
<LI>Страхование имущества предприятий
<LI>Страхование судов и грузов, авиариски
<LI>Страхование во время поездок
<LI>Страхование от несчастных случаев
<LI>Страхование жизни
<UL>
</TD>
</TR>
</TABLE>
<H2>Так что, если вы еще не застрахованы - спешите стать моим клиентом!!! </H2>
</BODY>
</HTML>
И вот что у меня получилось: Можно посмотреть по ссылке Пример
либо посмотрев на этот рисунок:
Ну вот, вроде все получилось - какие значения присваивали нашим тегам-элиментам, такие они и получились - заголовки красного цвета, ссылки - желтыми и т.д. Так что теперь можно перейти и к следующему разделу - селектору по классам!
Селекторы по классам
Если бы не было селектора по классам, было бы очень грустно. Представьте, вот установили вы для таблиц синий цвет. А потом подумали-подумали... и решили сделать часть таблиц с красным фоном. Но ничего у вас не получается! Таблицы упорно получаются такими, какими мы их определили в своих стилях. Ну и что же делать? Не возвращаться же к дедовским методам, когда мы для каждой таблицы писали свои значения...
Но плохо вы знаете CSS, если решили сдаться! Оказывается, можно просто элементы разбить на классы!!! И каждому классу задать свой стиль! Например, пусть для всех таблиц у нас назначен синий цвет:
TABLE {
color:blue
}
Ну, а для таблиц желтого цвета мы создадим свой класс, который назовем просто yellow. А писать это yellow нужно через точку, вот так:
TABLE {
color:blue
}
//все таблицы будут синего цвета
TABLE.yellow {
color:yellow
}
//кроме этих, конечно!
Ну, и давайте опять подробно, для наглядности я напишу не во внешнем файле, а все в одном:
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Классы стилей</title>
<style type="text/css">
/* Общий стиль для всех таблиц */
table {
color: blue;
background-color: black;
border-collapse: collapse; /* Чтобы рамки были тонкими */
}
/* Уточняющий стиль для таблиц с классом yellow */
table.yellow {
color: yellow;
/* background-color: darkgreen; <- Можно добавить свой фон здесь */
}
</style>
</head>
<body>
Первая таблица (синяя на черном):
<table border="1">
<tr><td>Содержимое синее-пресинее!</td></tr>
</table>
<br>
Вторая таблица (желтая на черном):
<table class="yellow" border="1">
<tr><td>Содержимое желтое-прежелтое!</td></tr>
</table>
</body>
</html>
И вот что получим - Пример таблицы:
Обратите внимание, что мы не назначали вовсе черного фона для второй таблицы!!! А он все равно там есть! Дело в том, что вводя класс для какого-то элемента, мы просто переопределяем какие-то свойства, а все остальные остаются теми же, как и для главного элемента. Так что, если бы вы захотели вообще убрать фон из второй таблицы, вы должны были написать background-color:transparent, либо задать любой другой цвет.
<html lang="ru">
<HEAD>
<TITLE>Классы стилей</TITLE>
<STYLE> TYPE="text/css">
TABLE {
color: blue;
background-color: black
}
TABLE.yellow {
color: yellow;
background-color: transparent
}
</STYLE>
</HEAD>
<BODY>
Первая таблица:
<TABLE border=1>
<TR>
<TD>
Вот она какая синяя-пресиняя!На черном фоне!
</TD>
</TR>
</TABLE>
Вторая таблица:
<TABLE> class="yellow" border=1>
<TR>
<TD>
Вот она какая желтая-прежелтая!
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
И вот что получим:
Первая таблица:
| Вот она какая синяя-пресиняя на черном фоне! |
Вторая таблица:
| Вот она какая желтая-прежелтая! |
Ну, и так для остальных элемнтов! Вводя сколько угодно классов для любого элемента, мы можем так разнообразить свои странички, что все, не знакомые со стилями CSS просто от зависти лопнут!
Хм... что-то я устала... хотела все выложить в одном уроке, но не получится. Но и то, что я вам тут выложила вполне достаточно, чтобы делать красивые страницы. Так что приходите на следующий урок!!!