Урок №1. Способы применения CSS в HTML

< >

3 / 5

Автор: Администратор

08.02.2015

Как вам уже должно быть понятно, CSS язык представляет собой набор правил написания кода, которые связываются с определенной HTML страницей. Посредством браузера этот код интерпретируется и стилизует элементы HTML.

В этом уроке мы рассмотрим способы связи CSS-кода с HTML-страницами.

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

<p style="color:#ff0000; font-size:16pt;">Улыбнись и взбодрись!</p>

Теперь перейдем к двум видам связи CSS-кода с HTML-страницей:

Стили указываются непосредственно в HTML странице, перед закрывающим тэгом </head>, внутри специального тэга <style></style>, который говорит браузеру, что внутри него лежат таблицы стилей.

Теперь пример такого варианта:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <style>
        p {color:#000000; font-size:14px; text-transform:uppercase;}
        .red {color:#FF0000!important;}
    </style>
</head>
<body>
    <p>Будьте здоровы и счастливы!</p>
    <p class="red">Тут какой то текст</p>
</body>
</html>

Второй вариант, когда таблица стилей выносится в отдельный файл. Это удобно, когда стили у вас занимают большой объем, да и просто для приличия лучше выносить CSS в отдельный файл и всего одной строчкой подключать его в HTML, для этого существует тэг <link>

Теперь - пример использования такого варианта:
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/css/template.css" type="text/css" />
</head>
<body>
    <p>Будьте здоровы и счастливы!</p>
    <p class="red">Тут какой то текст</p>
</body>
</html>
```

Таким образом мы рассмотрели два способа привязки CSS-стилей к HTML.

Тест

Где предпочтительнее всего размещать тэг <STYLE></STYLE>:
1. Вконце кода
2. Без разницы
3. После открывающего тэга <body>
4. Перед закрывающим тэгом </head>

Ответы на тест

1. - d

< >