Основы работы с языком CSS
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Как правило, CSS команды () хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Если мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, то эти изменения применятся на всей тысяче HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Файл со стилями должен иметь расширение .css . Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:
В следующем примере к нашему HTML файлу подключается CSS файл styles.css :
Создайте и подключите ко всем вашим страницам файл styles.css .
Как работать с CSS
Каждому тегу в HTML соответствует так называемый CSS. К примеру, тегу
соответствует CSS селектор p , с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.
После селектора следует ставить фигурные скобки, внутри которых следует писать CSS . Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте, например, покрасим все абзацы в красный цвет:
В вашем файле styles.css разместите код, красящий абзацы в красный цвет. Откройте страницы вашего сайта в браузере и убедитесь в том, что все абзацы стали красными.
Другие значения для цвета
Помимо ключевого слова red , задающего красный, можно использовать и другие английские слова для цвета, например, green — зеленый, blue — голубой, yellow — желтый, orange — оранжевый, black — черный, white — белый.
Используя соответствующие селекторы покрасьте заголовки h1 в зеленый цвет, заголовки h2 в голубой, заголовки h3 — в красный, а абзацы — в оранжевый.
Практика на макетах
Попрактикуемся в создании макетов, наполняя их содержимым. Давайте, например, сделаем вот такой макет:
Для начала сделаем основную структуру макета:
Давайте теперь разберемся с хедером. Как видно на образце в хедере будет название сайта и менюшка. При этом эти блоки стоят на одинаковом расстоянии от левого края. Логично в таком случае объединить их общим родителем, двигая эти блоки как одно целое:
Добавим содержимое блоков хедера:
Давайте теперь напишем стили блоков хедера. При этом не будем задавать высоту хедера — пусть он раздвигается своим содержимым:
Напишем код, создающий три колонки в контейнере. При этом не будем задавать высоту контента — пусть она формируется его содержимым:
Напишем теперь остальные стили нашего макета и получим решение нашей задачи:
Our blog
.
.
.
.
.
* < box-sizing: border-box; >.wrapper < width: 1100px; margin: 30px auto; border: 1px solid black; >header < border: 1px solid black; >.container < display: flex; >main < width: 660px; padding: 20px; border: 1px solid black; >.left < width: 200px; margin-right: 20px; padding: 20px; border: 1px solid black; >.right < width: 200px; margin-left: 20px; padding: 20px; border: 1px solid black; >footer < padding: 30px 0; border: 1px solid black; text-align: center; >.block < margin: 20px 0 50px 220px; >.sitename < margin-bottom: 10px; font: 20px Arial; >nav < display: flex; width: 600px; border: 1px solid black; >nav a < padding: 10px; color: blue; text-decoration: none; font: 15px Arial; >nav a:hover, nav a.active < color: red; text-decoration: underline; >main h1 < font: 20px "Times New Roman"; >main p < margin: 10px 0; text-align: justify; font: 15px Arial; >
Практические задачи
По следующей ссылке 1.zip скачайте макет. Откройте его в браузере и повторите страницу по этому образцу.
По следующей ссылке 2.zip скачайте макет. Откройте его в браузере и повторите страницу по этому образцу.
Введение в HTML и CSS
Для того, чтобы сделать сайт, нужно знать много разных веб языков.
Языки HTML и CSS предназначены для верстки сайтов (верстка — это размещение элементов сайта по нужным местам). Язык PHP нужен для программирования сайта (с его помощью можно, к примеру, сделать регистрацию пользователей). Язык JavaScript нужен для того, чтобы «оживить» сайт: к примеру, сделать меняющиеся картинки (слайдер).
Язык HTML
Язык HTML — это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере. Если сравнивать страницу сайта и обычную бумажную книгу, то на сайте, как и в книге, есть абзацы и заголовки.
В книге есть название всей книги (по сути самый главный заголовок), есть названия глав, параграфов в этих главах и так далее. Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью HTML .
Что такое HTML теги?
HTML теги — это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.
Теги строятся по такому принципу: уголок < , потом имя тега, а потом уголок >. Имя тега может состоять из английских букв и цифр. Примеры тегов:
Теги обычно пишутся парами — открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш / .
К примеру,
— так я открыл тег, а так —
— я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.
Бывают теги, которые не нужно закрывать, например,
или .
Атрибуты
В тегах также могут размещаться — специальные команды, которые расширяют действие тега. Атрибуты размещаются внутри открывающего тега в таком формате:
Кавычки могут быть любыми — одинарными или двойными, допустимо их вообще не ставить, если значение атрибута состоит из одного слова (но это не желательно).
Язык CSS
Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.
Итак, приступим
Итак, вооружившись некоторыми предварительными теоретическими знаниями, приступим к подробному изучению языка HTML на практике.