Home-theater-designers
Создание веб-сайта - отличный способ заявить о себе. Хотя существует множество инструментов для создания веб-сайтов, написание их самостоятельно - интересный способ узнать больше о том, как веб-сайты работают за кулисами. Хороший проект для начинающих - создать веб-сайт и добавить фоновое изображение с помощью CSS. Этот проект научит вас работать как с HTML, так и с CSS.
Что такое CSS?
CSS расшифровывается как Cascading Style Sheet. Это язык программирования, позволяющий стилизовать языки разметки. Одним из таких языков разметки является HTML или язык гипертекстовой разметки. HTML используется для создания веб-сайтов. Хотя вы можете управлять некоторыми стилями веб-сайта с помощью HTML, CSS предлагает гораздо больше возможностей управления и дизайна.
Создание базового веб-сайта с помощью HTML
Поскольку CSS - это просто язык стилей, для его использования нам сначала нужно что-то стилизовать. Нам будет достаточно простого веб-сайта, чтобы начать играть с CSS. Наша страница отобразит «Hello World».
Hello World
Если вы не знакомы с HTML, давайте быстро рассмотрим, что делают все элементы. Как уже упоминалось, HTML - это язык разметки, что означает, что он использует теги для обозначения текста. Всякий раз, когда вы видите слово в окружении это тег. Есть два типа тегов: тег, который отмечает начало раздела, использующий, и один, который отмечает конец раздела, использующего. Текст внутри раздела также предназначен для того, чтобы сделать это различие более заметным.
В нашем примере у нас есть четыре тега. В html указывает, какие элементы являются частью веб-сайта. В голова Тег содержит информацию заголовка, которая не отображается на странице, но необходима для создания страницы. Все отображаемые элементы находятся между тело теги. У нас есть только один отображаемый элемент, п ярлык. Он сообщает веб-браузеру, что текст является абзацем.
Связанный: 10 простых примеров кода CSS, которые вы можете изучить за 10 минут
Добавление CSS в HTML
Теперь, когда у нас есть простая страница, мы можем настроить стиль с помощью CSS. Наша страница сейчас довольно проста, и мы мало что можем сделать, но давайте начнем с выделения нашего абзаца, чтобы мы могли отличить его от фона, добавив границу.
Hello World
Теперь наш абзац будет окружен черной рамкой. Добавление описания стиля в CSS к нашему тегу абзаца сообщило веб-сайту, как стилизовать абзац. Мы можем добавить больше описаний. Давайте увеличим пустое пространство или отступ вокруг нашего абзаца и отцентрируем текст.
Hello World
Наш веб-сайт выглядит лучше, но наш HTML начинает выглядеть беспорядочно из-за всех этих описаний в теге абзаца. Мы можем переместить эту информацию в наш заголовок. Наш заголовок предназначен для информации, которая нам нужна для правильного отображения веб-сайта.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Теперь наш HTML легче читать. Вы заметите, что нам действительно пришлось кое-что изменить. Тег стиля сообщает не только информацию о стиле веб-браузера, но и то, что нужно стилизовать. В нашем примере мы использовали два разных способа указать, что нужно стилизовать. В п в теге стиля указывает веб-браузеру применить этот стиль ко всем тегам абзаца. В #ourParagraph раздел говорит, что стиль только для элементов с идентификатором нашПараграф . Заметить, что я бы информация была добавлена в тег p в нашем теле.
как играть в майнкрафт с другом
Импорт файла CSS на ваш сайт
Добавление информации о стиле в заголовок значительно упрощает чтение нашего кода. Однако, если мы хотим одинаково стилизовать много разных страниц, мы должны добавить этот текст в верхнюю часть каждой страницы. Может показаться, что это не так уж много работы, в конце концов, вы можете скопировать и вставить, но это создает много работы, если вы хотите изменить элемент позже.
Вместо этого мы собираемся сохранить информацию CSS в отдельном файле и импортировать файл для стилизации страницы. Скопируйте и вставьте информацию между тегами стиля в новый файл CSS. ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Затем импортируйте файл в файл HTML.
Hello World
Добавление фонового изображения с помощью CSS
Теперь, когда у вас есть прочная база в HTML и CSS, добавить фоновое изображение будет проще простого. Во-первых, определите, для какого элемента вы хотите создать фоновое изображение. В нашем примере мы добавим фон на всю страницу. Это означает, что мы хотим изменить стиль тело . Помните, что теги тела содержат все видимые элементы.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Чтобы изменить стиль тела в CSS, сначала используйте тело ключевое слово. Затем добавьте фигурные скобки, как мы делали до {}. Вся информация о стиле тела должна быть заключена в фигурные скобки. Атрибут стиля, который мы хотим изменить: фоновая картинка . Есть много атрибутов стиля. Не рассчитывайте запомнить их все. Добавьте в закладки шпаргалку по свойствам CSS с атрибутами, которые вы хотите запомнить.
Связанный: 8 крутых HTML-эффектов, которые каждый может добавить на свой сайт
лучшее бесплатное приложение для редактирования фотографий для iphone
После атрибута используйте двоеточие, чтобы указать, как вы измените атрибут. Чтобы импортировать изображение, используйте url () . он указывает на то, что вы используете ссылку, чтобы указать на изображение. Поместите расположение файла в скобки между кавычками. Наконец, завершите строку точкой с запятой. Хотя пробелы не имеют значения в CSS, используйте отступы, чтобы облегчить чтение CSS.
Наш пример выглядит так:
Если ваше изображение отображается неправильно из-за размера изображения, вы можете изменить изображение напрямую. Однако в CSS есть атрибуты стиля фона, которые можно использовать для изменения фона. Изображения, размер которых меньше размера фона, будут автоматически повторяться в фоновом режиме. Чтобы отключить это, добавьте фон-повтор:нет повторения; к вашей стихии.
Также есть два способа заставить изображение покрывать весь фон. Во-первых, вы можете установить размер фона в соответствии с размером экрана с помощью размер фона: 100% 100%; , но это приведет к растяжению изображения и может слишком сильно исказить его. Если вы не хотите, чтобы пропорции изображения изменялись, вы также можете установить размер фона на крышка . Обложка заставит фоновое изображение закрывать фон, но не искажает изображение.
Изменение цвета фона
Изменим еще кое-что. Теперь, когда у нас есть фон, наш абзац трудно читать. Сделаем фон белым. Процесс похожий. Элемент, который мы хотим изменить, - это #ourParagraph. Знак # указывает на то, что 'ourParagraph' - это имя идентификатора. Далее мы хотим установить фоновый цвет относить к белому.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Намного лучше.
Продолжаем создавать свой сайт с помощью CSS
Теперь, когда вы знаете, как изменить стиль различных HTML-элементов, нет предела! Основной метод изменения атрибутов стиля тот же. Определите элемент, который вы хотите изменить, и опишите, как изменить атрибут. Лучший способ узнать больше - поиграть с разными атрибутами. Испытайте себя следующим образом: измените цвет текста.
Делиться Делиться Твитнуть Эл. адрес 8 лучших сайтов для качественного HTML-кодированияХотите выучить HTML для кодирования собственных веб-сайтов и приложений? Используйте эти примеры веб-страниц и исходный код, чтобы научиться HTML и CSS.
Читать далее Похожие темы- Программирование
- HTML
- Веб-дизайн
- CSS
Дж. Ситон - научный писатель, специализирующийся на рассмотрении сложных тем. Она имеет докторскую степень в Университете Саскачевана; ее исследование было сосредоточено на использовании игрового обучения для повышения вовлеченности студентов в онлайн. Когда она не работает, вы обнаружите, что она читает, играет в видеоигры или работает в саду.
Ещё от Jennifer SeatonПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться