Приветствую читателей! Продолжаем изучать основы сайтостроения и отвечать на вопрос: “Как создать сайт?”
В прошлом уроке мы создали свою первую страничку в блокноте. Сегодня предлагаю углубиться в код и наполнить нашу страничку цветами и красками=)
За отображение и позиционирования различных элементов страницы отвечают их стили.
CSS – (англ. Cascading Style Sheets — каскадные таблицы стилей), подробное определение можно посмотреть на Википедии.
видоизменяем код из предыдущего урока следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <style> body{ color:green; background-color:silver; } </style> </head> <body> Моя первая страница </body> </html> |
Открыв этот файл в браузере мы увидим следующее:
Мы видим, что фон окна изменился на серый, а цвет текста стал зеленым, т.к. мы вставили css стили <style></style> внутрь тега <head>. В стилях указывается какие свойства какому элементу применить. Мы применили элементу body свойства color – отвечает за цвет текста внутри элемента, а свойство backgroun-color – за цвет фона элемента.
Как изменить размер текста на сайте?
Размер шрифта на сайте можно поменять применив свойство стиля font-size.
|
1 2 3 |
body{ font-size:28px; } |
Размер шрифта задается в пикселях. Мы можем применять свойство ко всему документу или к отдельным элементам. Про основные элементы страницы я расскажу вам в следующих уроках, а пока давайте изменим заголовок сайта.
Как изменить заголовок сайта? Тег <title>.
Сейчас у нас тег <title> не добавлен на страницу и поэтому в заголовке по умолчанию отображается имя документа. Давайте это исправим и внутри тега <head> добавим тег <title>
|
1 2 3 |
<head> <title>Заголовок моей первой страницы</title> </head> |
Обновляем документ и смотрим результат.
На сегодня все, в следующем уроке, я познакомлю вас с основными элементами(тегами) документа. Подписывайтесь, чтоб не пропустить самое интересное.