Селекторы по элементам
Каждый тег можно считать элементом (BODY, от H1 до Н6 , P , UL , OL , LI , TABLE , TR , TD, A).
Для стилей CSS комментарии обозначаются так:
/* Комментарий */ // Комментарий в одну строчку |
Напишите код (файл element2.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}//ссылка будет желтого цвета |
Откройте блокнот и создайте файл element2.html:
<HTML> <HEAD> <TITLE>Пример</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="element2.css"> </HEAD> <BODY> <H2>Я - страховой агент!</H2> Никогда не думала, что когда-нибудь стану страховым агентом, но дела повернулись таким образом, что я вынуждена была взяться за первую попавшуюся возможность. <P> А перед этим я пыталась зарегистрироваться на бирже труда, но там постоянно что-то было не так с моими документами - то печать на такая, то фотография не та, то вообще там выходной или нет бланков... </P> И вот теперь я агент Ренессанса - крупной страховой компании! И, знаете, мне там сразу понравилось! И вот моя работа: <TABLE border=5> <TR> <TD> <UL> <LI>Автострахование <LI>Добровольное медицинское страхование <LI>Страхование имущества частных лиц <LI>Страхование имущества предприятий <LI>Страхование во время поездок <LI>Страхование жизни </UL> </TD> </TR> </TABLE> <H2>Так что, если вы еще не застрахованы - спешите стать моим клиентом!!! </H2> </BODY> </HTML> |
Сохраните изменения и просмотрите результат в браузере.
Селекторы по классам
Например, пусть для всех таблиц назначен синий цвет:
TABLE {color:blue} |
Для таблиц желтого цвета мы создадим свой класс, который назовем просто yellow. Записать yellow нужно через точку:
TABLE {color:blue} //все таблицы будут синего цвета TABLE.yellow {color:yellow} //кроме этих, конечно! |
Создайте документ:
<HTML> <HEAD> <TITLE>Классы стилей</TITLE> <STYLE TYPE="text/css"> TABLE {color:blue; background-color:black} TABLE.yellow {color:yellow} </STYLE> </HEAD> <BODY> Первая таблица: <TABLE border=1> <TR> <TD> Вот она какая синяя-пресиняя! На черном фоне! </TD> </TR> </TABLE> Вторая таблица: <TABLE class="yellow" border=1> <TR> <TD> Вот она какая желтая-прежелтая! </TD> </TR> </TABLE> </BODY> </HTML> |
Сохраните изменения и просмотрите результат в браузере.
Обратите внимание, что мы не назначали черного фона для второй таблицы! А он все равно там есть! Дело в том, что вводя класс для какого-то элемента, мы просто переопределяем какие-то свойства, а все остальные остаются теми же, как и для главного элемента. Так что, если бы вы захотели вообще убрать фон из второй таблицы, вы должны были написать background-color:transparent, либо задать любой другой цвет.