Лист типа HTML

Листы каскадируя типа (CSS) описывают как документы на экранах, в печати, или возможно как они произнесены. W3C активно повышало пользу листов типа на паутине в виду того что основал консорциум в 1994.

Листы каскадируя типа (CSS) обеспечивают легкие и эффективные алтернативы для того чтобы определить различные атрибуты для бирок HTML. Используя CSS, вы можете определить несколько свойств типа для, котор дали элемента HTML. Каждое свойство имеет имя и значение, отделенные двоеточием (:). Каждое объявление свойства отделено точкой с запятой (;).

Пример

Во первых препятствуйте нам рассматривайте пример документа HTML который использует бирку <font> и связанные атрибуты для того чтобы определить текстовый цвет и размер шрифта:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color="green" size="5">Hello, World!</font></p>
</body>
</html>

Мы можем перезаписать вышеуказанный пример с помощью листу типа следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">Hello, World!</p>
</body>
</html>

Это даст следующий:

Hello, World!

Вы можете использовать CSS в 3 путях в вашем документе HTML:

  • Внешний лист типа - определите правила листа типа в отдельно архиве .css и после этого включите тот архив в вашем документе HTML используя бирку <link> HTML.

  • Внутренний лист типа - определите правила листа типа в разделе коллектора документа HTML используя бирку <style>.

  • Встроенный лист типа - определите правила листа типа сразу вместе с элементами HTML используя атрибут типа.

Препятствуйте нам увидеть все 3 случая по-одному с помощью соответствующим примерам.

Внешний лист типа

Если вам нужно использовать ваш лист типа к различным страницам, то свое всегда ое, что определить общий лист типа в отдельно архиве. Архив листа каскадируя типа будет иметь выдвижение по мере того как .css и оно будут включены в архивах HTML используя бирку <link>.

Пример

Рассматривайте нас определите архив style.css листа типа который имеет следующие правила:

.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}

Здесь мы определили 3 правила CSS которое будут применимо до 3 различных типа определенного для бирок HTML. Я предлагаю что вы не должно докучать о как эти правила определяются потому что вы выучите их пока изучающ CSS. Теперь препятствуйте нам используйте вышеуказанный архив CSS external в нашем следовать документе HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>
</body>
</html>

Это даст следующий:

This is red

This is thick

This is green

This is thick and green

Внутренний лист типа

Если вы хотите приложить правила листа типа к одинарному документу только после этого, то вы можете включить те правила в разделе коллектора документа HTML используя бирку <style>.

Правила определенные в внутреннем листе типа отвергают правила определенные в внешнем архиве CSS.

Пример

Препятствуйте нам перезаписывать вышеуказанный пример еще раз, но здесь мы напишем правила листа типа в таком же документе HTML используя бирку <style>:

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}
</style>
</head>
<body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>
</body>
</html>

Это даст следующий:

This is red

This is thick

This is green

This is thick and green

Встроенный лист типа

Вы можете приложить правила листа типа сразу к любому элементу HTML используя атрибут типа уместной бирки. Это должно быть сделано только когда вы заинтересованы сделать определенное изменение в любом элементе HTML только.

Правила определили inline с элементом отвергают правила определенные в внешнем архиве CSS так же, как правила определенные в элементе <style>.

Пример

Препятствуйте нам перезаписывать вышеуказанный пример еще раз, но здесь мы напишем правила листа типа вместе с элементами HTML используя атрибут типа тех элементов.

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is thick and green</p>
</body>
</html>

Это даст следующий:

This is red

This is thick

This is green

This is thick and green

Advertisements