Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки CSS arrow Уроки web-программирования: «Введение в CSS».
15.06.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки web-программирования: «Введение в CSS». Печать E-mail
Автор megabax   
13.09.2009 г.

New Page 1

Уроки web-программирования: «Введение в CSS».

 

Со стилями оформления (CSS) вы уже познакомились в уроке №3, в котором рассматривалось, как сделать так, что бы при наведении на ссылку мышкой, она становилась красной подчеркивалась, а при убирание курсора мыши со ссылки подчеркивание исчезало и цвет возвращался в исходный. Это мы делали при помощи CSS стилей. Вспомним еще раз этот тег:

 

<STYLE TYPE="text/css">
<!--
A {text-decoration:none;}
A:hover {color:red;text-decoration:underline;}
-->
</STYLE>

 

На самом деле, описание стилей можно вынести в отдельный файл. Это очень удобно, когда нам нужно сменить оформление, просто поменяем содержимое этого файла. Вот как прикрепляется к HTML-документу файл стилей CSS:

 

<html>

<head>
<title>Урок 9. Введение в CSS</title>
<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">
</head>

<body>
<Table>
<TR>
<TD><b>Товар</b></TD>
<TD><b>Цена</b></TD>
<TD><b>Количество</b></TD>
<TD><b>Стоимость</b></TD>
</TR>
<TR>
<TD id="selcell">Телевизор</TD>
<TD>10000</TD>
<TD>2</TD>
<TD>20000</TD>
</TR>
<TR>
<TD>Кофеварка</TD>
<TD>1000</TD>
<TD>5</TD>
<TD>5000</TD>
</TR>
<TR>
<TD>Утюг</TD>
<TD>700</TD>
<TD>3</TD>
<TD>2100</TD>
</TR>
</Table>

</body>

</html>

 

Если в файл styles.css поместим такой текст:

TD { background-color:green;
color:red;
}
#selcell { background-color:yellow;
color:black;
}
 

 

То пример выдаст вот такую таблицу:

 

CSS, HTML, web-программирование, style

 

Правилом:

 

TD { background-color:green;
         color:red;
         }

 

для каждой ячейки таблицы мы задали стиль оформления "красные буквы на зеленом фоне". А правилом

 

#selcell { background-color:yellow;
         color:black;
         }
 

задали стиль "черные буквы на желтом фоне" только для элементов, имеющих id равное "selcell".  Этим id мы пометили ячейку (<TD id="selcell">Телевизор</TD>), которая и стала "белой (точнеее желтой :) ) вороной".

 

Последнее обновление ( 24.08.2010 г. )
 
« След.
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги