Введение в CSS Базовый синтаксис CSS селектор { свойство1: значение; свойство2: значение; } селектор — некоторое имя стиля, для которого добавляются параметры форматирования Пример использования стилей <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Заголовки</title> <style type="text/css"> h1 { color: #a6780a; font-weight: normal; } h2 { color: olive; border-bottom: 2px solid black; } </style> </head> <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> </body> </html> Способы добавления стилей на страницу 1. Внутристрочная стилевая информация. 2. Использование элемента STYLE в разделе HEAD HTML–документа. 3. Определение внешних стилевых таблиц. Внутристрочная стилевая информация. Атрибут style <P style="color: green; font-weight: bold; font-family: Arial;"> Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. </P> ________________________________ Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. Использование тэга style в разделе HEAD HTML–документа. <html><head><title>…<title> <style type="text/css"> p {color: green; font-weight: bold; font-family: Arial;} </style> </head> <body> <p>Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. </p> </body></html> _____________________________________________ Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. Определение внешних стилевых таблиц. Тэг link <html> <head><title>…<title> <link href="mystyle.css" rel="stylesheet" type="text/css"> </head> </body> <h1>Заголовок</h1> <p>Текст документа…</p> </body> </html> Определение внешних стилевых таблиц. Стилевой файл H1 { color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; } Преимущества стилей Разграничение кода и оформления Разное оформление для разных устройств Расширенные по сравнению с HTML способы оформления элементов Ускорение загрузки сайта Единое стилевое оформление множества документов Централизованное хранение