Каскадные таблицы стилей CSS Размещение Переопределение стиля в элементе разметки; Размещение описания стиля в заголовке документа в элементе STYLE. Элемент STYLE дает возможность определить стиль отображения для стандартных элементов HTML-разметки; произвольных классов (селектор CLASS); НTML-объектов (селектор ID). Размещение ссылки на внешнее описание через элемент LINK. Переопределение стиля в элементе разметки <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <I> текст курсивом</I> <BR> <I STYLE="text-decoration:underline;font-style:normal;"> Переопределим текст курсивом </I> <BR> </BODY> </HTML> Размещение описания стиля в заголовке документа в элементе STYLE для стандартных элементов HTML-разметки <html> <head> <title>Рамки и отступы</title> <style> p{ border-top-width:5; border-bottom-width:7; border-left-width:10; border-right-width:15; border-style:double; border-color:blue; font-size: xx-large; padding:20; } </style> </head> <body> <p>Первый параграф</p> <p>Второй параграф</p> </body> </html> Размещение описания стиля в заголовке документа в элементе STYLE для произвольных классов (селектор CLASS) <html> <head> <title></title> <style> p.st1 { font-size: 30; font-style: italic; font-family : Fixedsys; color: red; } p.st2 { font-size :20; color: blue; margin-left: 130; } p.st3 { font-size:40; font-family: Arial; color: green; } </style> </head> <body> Определение стилей через классы <br> <p class="st1">текст 1</p> <p class="st2">text 2 </p> <p class="st3">text 3</p> </body> </html> Размещение описания стиля в заголовке документа в элементе STYLE для НTML объектов (селектор ID) <html> <head> <title></title> <style> #iddate { font-size: 30; font-style: italic; color: red; } #st2 { font-size :20; color: blue; margin-left: 30; } #st3 { font-size:40; font-face: arial; color: green; } </style> </head> <body> Определение стилей через идентификаторы <br> <p id=iddate>текст 1</p> <p id=st2>text 2 &sect &copy &reg &pound &yen &trade &frac12</p> text 2 <p id=st3> text 3</p> <font face=arial> text 4</font> <br> <font face=couirer> text 5</font> </body> </html> Размещение ссылки на внешнее описание через элемент LINK <HTML> <HEAD> <TITLE></TITLE> <LINK TYPE="text/css" REL="stylesheet" HREF="s3.css"> </HEAD> <BODY> <P> Пример параграфа</P> <BR> <H1>Пример заголовка первого уровня</H1> <center> <table border=1> <tr><th>text1</th><th>text2</th></tr> <tr><td>1</td><td>2</td></tr> <tr><td>1</td><td>2</td></tr> <tr><td>1</td><td>2</td></tr> </table> </center> </BODY> </HTML> Файл s3.css P{ text-indent: 25; font-size:20; color: red; } H1 { text-align: center; color: blue; } body { background-color:#ffffff; } table { font-family:Verdana; font-size: 12pt; color:#0000ff; background-color:#0000ff; border-width=0; } td { border-width:0; background-color:#c0c0c0; padding:4; } th { border-width:0; background-color:#c0c0c0; padding:4; } Переопределение стиля <i style="text-decoration:underline;font-style:normal;"> <style> .test {color:white;background-color:black;} </style> ... <p class="test"> Этот параграф мы отобразим белым цветом по черному фону </p> ... <P> Эту <A CLASS="test">гипертекстовую ссылку</A> мы отобразим белым цветом по черному фону. </P>