Каскадные таблицы стилей CSS
advertisement
Каскадные таблицы
стилей 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>
