Создание веб-сайта - отличный способ заявить о себе. Хотя существует множество инструментов для создания веб-сайтов, написание их самостоятельно - интересный способ узнать больше о том, как веб-сайты работают за кулисами. Хороший проект для начинающих - создать веб-сайт и добавить фоновое изображение с помощью CSS. Этот проект научит вас работать как с HTML, так и с CSS.
Что такое CSS?
CSS расшифровывается как Cascading Style Sheet. Это язык программирования, позволяющий стилизовать языки разметки. Одним из таких языков разметки является HTML или язык гипертекстовой разметки. HTML используется для создания веб-сайтов. Хотя вы можете управлять некоторыми стилями веб-сайта с помощью HTML, CSS предлагает гораздо больше возможностей управления и дизайна.
Создание базового веб-сайта с помощью HTML
Поскольку CSS - это просто язык стилей, для его использования нам сначала нужно что-то стилизовать. Нам будет достаточно самого простого веб-сайта, чтобы начать играть с CSS. Наша страница отобразит «Hello World».
Привет, мир
Если вы не знакомы с HTML, давайте быстро рассмотрим, что делают все элементы. Как уже упоминалось, HTML - это язык разметки, что означает, что он использует теги для обозначения текста. Всякий раз, когда вы видите слово в окружении <> это тег. Есть два типа тегов: тег, который отмечает начало раздела с помощью <>, и один, который отмечает конец раздела с помощью
В нашем примере у нас есть четыре тега. В html тег указывает, какие элементы являются частью веб-сайта. В голова содержит информацию заголовка, которая не отображается на странице, но необходима для создания страницы. Все отображаемые элементы находятся между тело теги. У нас есть только один отображаемый элемент, п тег. Он сообщает веб-браузеру, что текст является абзацем.
Связанный: 10 простых примеров кода CSS, которые вы можете изучить за 10 минут
Хотите узнать больше об использовании CSS? Для начала попробуйте эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.
Добавление CSS в HTML
Теперь, когда у нас есть простая страница, мы можем настроить стиль с помощью CSS. Наша страница сейчас довольно проста, и мы мало что можем сделать, но давайте начнем с выделения нашего абзаца, чтобы мы могли отличить его от фона, добавив границу.
Привет, мир
Теперь наш абзац будет окружен черной рамкой. Добавление описания стиля в CSS к нашему тегу абзаца сообщило веб-сайту, как стилизовать абзац. Мы можем добавить больше описаний. Давайте увеличим пустое пространство или отступ вокруг нашего абзаца и отцентрируем наш текст.
Привет, мир
Наш веб-сайт выглядит лучше, но наш HTML начинает выглядеть беспорядочно из-за всех этих описаний в теге абзаца. Мы можем переместить эту информацию в наш заголовок. Наш заголовок предназначен для информации, которая нам нужна для правильного отображения веб-сайта.
Привет, мир
Теперь наш HTML легче читать. Вы заметите, что нам пришлось кое-что изменить. Тег стиля сообщает информацию о стиле веб-браузера, а также о том, что нужно стилизовать. В нашем примере мы использовали два разных способа указать, что нужно стилизовать. В п в теге стиля указывает веб-браузеру применить этот стиль ко всем тегам абзаца. В #ourParagraph раздел говорит, что стиль только для элементов с идентификатором нашПараграф. Заметь я бы информация была добавлена в тег p в нашем теле.
Импорт файла CSS на ваш сайт
Добавление информации о стиле в заголовок значительно упрощает чтение нашего кода. Однако, если мы хотим одинаково стилизовать множество разных страниц, мы должны добавить этот текст в верхнюю часть каждой страницы. Это может показаться не таким уж большим трудом, в конце концов, вы можете скопировать и вставить его, но это создает много работы, если вы захотите изменить элемент позже.
Вместо этого мы собираемся сохранить информацию CSS в отдельном файле и импортировать файл для стилизации страницы. Скопируйте и вставьте информацию между тегами стиля в новый файл CSS. ourCSSfile.css.
п {
выравнивание текста: центр
}
#ourParagraph {
стиль границы: сплошной;
отступ: 30 пикселей;
}Затем импортируйте файл в файл HTML.
Привет, мир
Добавление фонового изображения с помощью CSS
Теперь, когда у вас есть прочная база в HTML и CSS, добавить фоновое изображение будет проще простого. Во-первых, определите, для какого элемента вы хотите создать фоновое изображение. В нашем примере мы добавим фон на всю страницу. Это означает, что мы хотим изменить стиль тело. Помните, что теги тела содержат все видимые элементы.
тело{
фоновое изображение: url ("sky.jpg");
}
п {
выравнивание текста: центр
}
#ourParagraph {
стиль границы: сплошной;
отступ: 30 пикселей;
}Чтобы изменить стиль тела в CSS, сначала используйте тело ключевое слово. Затем добавьте фигурные скобки, как мы делали до {}. Вся информация о стиле тела должна быть заключена в фигурные скобки. Атрибут стиля, который мы хотим изменить: фоновая картинка. Есть много атрибутов стиля. Не рассчитывайте запомнить их все. Добавить в закладки Шпаргалка по свойствам CSS с атрибутами, которые вы хотите запомнить.
Связанный: 8 крутых HTML-эффектов, которые каждый может добавить на свой сайт
После атрибута используйте двоеточие, чтобы указать, как вы измените атрибут. Чтобы импортировать изображение, используйте url (). это означает, что вы используете ссылку, чтобы указать на изображение. Поместите расположение файла в скобки между кавычками. Наконец, завершите строку точкой с запятой. Хотя пробелы в CSS не имеют значения, используйте отступы, чтобы облегчить чтение CSS.
Наш пример выглядит так:
Если ваше изображение отображается неправильно из-за размера изображения, вы можете изменить изображение напрямую. Однако в CSS есть атрибуты стиля фона, которые можно использовать для изменения фона. Изображения, размер которых меньше размера фона, будут автоматически повторяться в фоновом режиме. Чтобы отключить это, добавьте фон-повтор: нет повторения; к вашей стихии.
Также есть два способа заставить изображение покрывать весь фон. Во-первых, вы можете установить размер фона в соответствии с размером экрана с помощью размер фона: 100% 100%;, но это приведет к растяжению изображения и может слишком сильно исказить его. Если вы не хотите, чтобы пропорции изображения изменялись, вы также можете установить размер фона на крышка. Обложка заставит фоновое изображение закрывать фон, но не искажает изображение.
Изменение цвета фона
Изменим еще кое-что. Теперь, когда у нас есть фон, наш абзац трудно читать. Сделаем фон белым. Процесс похожий. Элемент, который мы хотим изменить, - это #ourParagraph. Знак # указывает, что "ourParagraph" - это имя идентификатора. Далее мы хотим установить фоновый цвет относить к белому.
тело{
фоновое изображение: url ("sky.jpg");
}
п {
выравнивание текста: центр
}
#ourParagraph {
цвет фона: белый;
стиль границы: сплошной;
отступ: 30 пикселей;
}Намного лучше.
Продолжаем создавать свой сайт с помощью CSS
Теперь, когда вы знаете, как изменить стиль различных элементов HTML, нет предела! Основной метод изменения атрибутов стиля тот же. Определите элемент, который вы хотите изменить, и опишите, как изменить атрибут. Лучший способ узнать больше - поиграть с разными атрибутами. Испытайте себя следующим образом: измените цвет текста.
Хотите выучить HTML для кодирования собственных веб-сайтов и приложений? Используйте эти примеры веб-страниц и исходный код, чтобы научиться HTML и CSS.
- Программирование
- HTML
- Веб-дизайн
- CSS
Дж. Ситон - научный писатель, специализирующийся на рассмотрении сложных тем. Она имеет докторскую степень в Университете Саскачевана; ее исследование было сосредоточено на использовании игрового обучения для повышения вовлеченности студентов в онлайн. Когда она не работает, вы обнаружите, что она читает, играет в видеоигры или занимается садоводством.
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Еще один шаг…!
Пожалуйста, подтвердите свой адрес электронной почты в электронном письме, которое мы вам только что отправили.