CSS первый урок

CSS первый урок

На этом уроке мы создадим и подключим к нашему будущему сайту файл style.css

Для чего нужен этот файл? В этом файле прописаны все команды, для страниц нашего сайта, как им выглядеть. В нем весь строительный материал для отделки наших страниц. Для примера мы на этом уроке изменим общий фон нашей страницы.

 На прошлом уроке мы создали страницу index.html Откройте папку где лежит этот файл и по прошлому примеру создайте еще один текстовый документ исохраните его как style.css

Отлично, теперь укажем браузеру где находится этот файл. Для этого откройте файл index.html и добавьте строчку между тэгами <head></head>

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

Атрибут rel="stylesheet" определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href="style.css" определяет где находится файл с таблицей стилей. Ну и атрибут type="text/css" определяет тип данных.

Теперь наш файл index.html будет выглядеть так

<html> 
<head> 
<title>Моя первая страница </title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body> 
<p>Здравствуйте! Это моя первая веб-страница!</p> 
</body> 
</html>

Теперь приступим к добавлению материала в файл style.css Откроем файл в notepad++ и вставим такой код

body{
    background-color:#C1BAFF;
}

Сохраняем, запускаем файл index.html и смотрим изменения ))

Но это только первый способ вводить стиль для оформления, он используется если этот стиль применять ко всем страницам сайта. Если же вам нужно оформить только одну страницу, то можно использовать другой способ. Для этого файл style.css нам не потребуется и стиль мы пропишем прямо в странице.

Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.

1

<style></style>

 

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

Пример:

<html> 
<head> 
<title>Моя первая страница </title> 
<style>
H2
{
font-size: 40px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head> 
<body> 
<H2>Здравствуйте! Это моя первая веб-страница!</H2>
</body> 
</html>

Тэги<H2> </H2> обозначают к чему применить стиль H2 прописанный в между <style><style>  Попробуйте изменить наш файл index.html и запустить его.  

Старайтесь все изменения в файлах делать в ручную, не просто скопировать-вставить, так лучше будет усваиваться материал.