Здравствуйте, уважаемые друзья, коллеги. Смею предположить, что вы оказались здесь не случайно, а решили всерьез изучить основы создания сайтов. Именно изучение основ позволяет двигаться дальше и изучать уже что-то более сложное. Так что же такое каскадные таблицы стилей CSS. CSS — это специальный язык, отвечающий за оформление внешнего вида интернет-страниц, написанных при помощи языка разметки HTML. Другими словами — мы можем писать в HTML документе как угодно, а потом оформить так, как нам нужно. Изменить цвет, фон, перенести элемент, сдвинуть, сделать необходимые отступы и многое другое. Давайте разберем простой пример оформления страницы при помощи CSS.
Создадим HTML документ и напишем в нем фразу заголовка.
1
2
3
4
5
6
7
8
| <html>
<head>
<title>Пример оформления страницы при помощи CSS</title>
</head>
<body>
<h1>Заголовок HTML документа</h1>
</body>
</html> |
<html>
<head>
<title>Пример оформления страницы при помощи CSS</title>
</head>
<body>
<h1>Заголовок HTML документа</h1>
</body>
</html>
Давайте посмотрим как это выглядит в браузере.
Демо
Как видим, что мы написали, то и получили. Вид всего этого оставляет желать лучшего, оформления нет никакого. И теперь самое интересное, сейчас будем изменять внешний вид этой страницы и подключим к ней CSS. Для этого напишем следующий код. И в нем я оставил комментарии.
1
2
3
4
5
6
| body{
background: #99CCFF; /* устанавливаем цвет фона документа */
font-family: sans-serif; /* Делаем шрифт без засечек */
text-align: center; /* Выравнивание текста по центру */
color: #990000; /* Устанавливаем цвет текста */
} |
body{
background: #99CCFF; /* устанавливаем цвет фона документа */
font-family: sans-serif; /* Делаем шрифт без засечек */
text-align: center; /* Выравнивание текста по центру */
color: #990000; /* Устанавливаем цвет текста */
}
Размещаем код CSS прямо в документе между тегами head.
Такой способ подключения таблицы стилей используется в том случае, если CSS кода не так много. А если его много, то уже нужно подключать внешний файл с таблицей стилей. Но об этом поговорим в другой раз.
В итоге документ должен получиться такой
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<title>Пример оформления страницы при помощи CSS</title>
<style>
body{
background: #99CCFF; /* устанавливаем цвет фона документа */
font-family: sans-serif; /* Делаем шрифт без засечек */
text-align: center; /* Выравнивание текста по центру */
color: #990000; /* Устанавливаем цвет текста */
}
</style>
</head>
<body>
<h1>Заголовок HTML документа</h1>
</body>
</html> |
<html>
<head>
<title>Пример оформления страницы при помощи CSS</title>
<style>
body{
background: #99CCFF; /* устанавливаем цвет фона документа */
font-family: sans-serif; /* Делаем шрифт без засечек */
text-align: center; /* Выравнивание текста по центру */
color: #990000; /* Устанавливаем цвет текста */
}
</style>
</head>
<body>
<h1>Заголовок HTML документа</h1>
</body>
</html>
И смотрим теперь результат.
Демо
В CSS есть некоторые правила, которые нужно усвоить. Сначала идет селектор, в нашем случае — это body. Затем свойство и потом значение. Например Селектор — body, свойство — background, значение — #99CCFF.
Любому элементу на странице можно присваивать идентификаторы (id) или классы (class) и уже к ним применять стили, например при создании таблицы зебры.
Вот таким вот образом делается оформление web страниц. Мы полностью изменили внешний вид документа и вы узнали только самую малость возможностей CSS. Потенциал у него огромный, можно делать много, например красивые таблицы css. За последние несколько лет произошла настоящая эволюция. При помощи таблиц стилей можно делать даже анимацию, CSS стал более динамичным. Но об этом в следующих сериях. Удачного изучения!
784![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
Добавить комментарий