Урок 8. СSS – Вступление.

Привет! Сегодня очень важный урок! А именно – вступление в CSS! Теперь мы будем писать код в 2 разных документах одновременно. Это очень удобно и делает страницы разборчивее. Кроме того что сам код выглядит “чище”, CSS дает новые возможности в оформлении веб-страниц.
Давайте наведу пример для лучшего понимания. У нас есть кусок текста с гипертекстовой ссылкой. Вот такой:

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Информацию обо мне можно прочесть <a href="about.html">ЗДЕСЬ</a>.</p>
</body>
</html>

В браузере это выглядит так:
CSS вступление
Обратите внимание, ссылка выделена синим цветом и подчеркнута. Почему? Потому что у браузера есть свой стандартный CSS файл, значения которого применяются к страницам, если вы их не задали самостоятельно.
Попробуем изменить внешний вид ссылки. Для этого нам нужно вписать внутрь тега “а” параметр “style” с значением цвета (например “color: red;”). Как вы уже догадались, ссылка станет красной. Вот как это должно выглядеть в коде:

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Информацию обо мне можно прочесть <a href="about.html" style="color: red;">ЗДЕСЬ</a>.</p>
</body>
</html>

И в результате ссылка становится красной!
Анкор красного цвета
Также можно убрать подчеркивание ссылки. В стандартном CSS файле браузера к тегу “а” применен параметр “text-decoration” (англ. оформление текста) со значением “underline” (англ. над линией). А мы изменим на “none” (англ. никакое), вот так:

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Информацию обо мне можно прочесть <a href="about.html" style="color: red; text-decoration: none;">ЗДЕСЬ</a>.</p>
</body>
</html>

Смотрим изменения:
Ссылка без подчеркивания
И так, я показал как изменять оформление элементов через “стили”, но в начале статьи шла речь о том, что мы будем писать код в два разных документа. Для этого нам понадобится сначала создать второй документ. ЗДЕСЬ указано как сделать index.html, по такому же принципу делаем style.css.
В этом документе мы будем задавать параметры оформления всех тегов. Удаляем это style=”color: red; text-decoration: none;” из файла index.html и вписываем в style.css. Но нам также нужно указать, что данный параметр применяется к тегу “а”. Записывается это так:

a {color: red; text-decoration: none;}

Но чтобы аккуратно выглядело, пишут так:

a {
   color: red; 
   text-decoration: none;
}

Может здесь и не видно что оно стало аккуратнее :) но в html редакторе (Sublime text) выглядит так:
CSS в Sublime Text
Также давайте зададим цвет фону страницы. Тело страницы это тег “body”, так что дописываем такое:

a {
   color: red; 
   text-decoration: none;
}
body {
   background-color: gray;
}

Сейчас обновляем страницу и видим что ничего не изменилось :) Дело в том что мы нигде не указали файлу index.html, откуда он должен брать параметры тегов.
а указывается это так:

<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Информацию обо мне можно прочесть <a href="about.html">ЗДЕСЬ</a>.</p>
</body>
</html>

Если файл style.css находится не в одной папке с index.html, а например в папке ccs-folder, то пишете так:


<link rel="stylesheet" type="text/css" href="ccs-folder/style.css">

А вот сейчас изменения вступили в силу. Смотрим на результат.
css изменения вступили в силу
Цвет режет глаза, но это только для примера. Думаю что на сегодня достаточно, но еще хочу сказать что записывать стили так как я показывал в начале урока нельзя!!! Я это делал только для лучшего понимания вами принципов CSS (я надеюсь что это было для лучшего понимания, а не запутало вас окончательно :) ). CSS записывайте только в style.css!!!
Делать вот так, это плохой пример:


<p>Информацию обо мне можно прочесть <a href="about.html" style="color: red; text-decoration: none;">ЗДЕСЬ</a>.</p>

Ждите новые уроки! Подписывайтесь! Вопросы в комменты!

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>