Как сделать сайт css: Создание простого веб-сайта с помощью HTML, CSS и JavaScript — Training

alexxlab

как сделать или убрать границу?

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline.

border-width

Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.

Количество значений

Результат

1

Одинаковая ширина рамок со всех сторон.

2

Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.

3

1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.

4

Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

border-width: 16px 12px 4px 8px;

border-style

Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style.

Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.

Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:

<p>border-style: solid double dotted none</p>

border-color

Работает так же, как и предыдущие свойства, но отвечает за цвет границ. Ему тоже можно задавать от одного до четырёх значений, и результат вы уже знаете. Если правило не установить, рамки будут иметь цвет текста текущего элемента или, если не указан и он, цвет текста элемента-родителя.

border-color: #C85EFA;

border

Упрощает запись и экономит код, позволяя установить все перечисленные свойства для границ со всех сторон элемента одной строкой:

p { border: 2px solid green; }

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

  • border-top — верхняя граница.
  • border-right — правая.
  • border-bottom — нижняя.
  • border-left     — левая.
p { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.

outline-color

Определяет цвет внешнего контура.

Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.

h2 { border: solid 3px green; outline-style: solid; outline-width: 6px; outline-color: orange; }

outline

Объединяющее три предыдущих свойство, аналог border.

Код:

<!DOCTYPE html>
<html>
<head>
    <title>outline</title>
    <style type="text/css">
    h2 {
	border: solid 3px green;
	outline: solid 6px orange;
    }
    </style>
</head>
<body>
<h2>Заголовок с внешним контуром</h2>
</body>
</html>

Результат:

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (
    не для новичков    ).

Как сделать дизайн сайта в фотошопе

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

3. Включаем линейки. Во время работы они понадобятся, ведь линейки позволяют очень точно отмерять расстояния. Проверьте, включены ли линейки у вас. Если да, то вы увидите шкалы рядом с левой и под верхней панелью инструментов.

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

Линейки должны показывать величину в пикселях. Чтобы переключиться на них с другой меры длины, щёлкните на линейке правой кнопкой мыши и в открывшемся меню установите соответствующий флажок.

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку

Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

На появившейся вверху панели жмём кнопку Зеркальный градиент, выбираем цвет на палитре левее.

Используя инструменты открывшегося окна Редактор градиентов, выбираем нужные цвета. Чтобы задать точный цвет контрольной точки, щёлкните на ней, нажмите кнопку Цвет и в окне палитры цветов укажите его в формате RGB, HSB, CSS или любом другом из доступных.

В результате манипуляций градиент получился следующим.

Чтобы применить градиент к текущему слою, проводим над ним указателем, удерживая при этом нажатой левую кнопку мыши.

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

Так как разрешение экрана нельзя предугадать, из созданного фона можно вырезать полоску толщиной в один пиксель и сохранить как картинку. Браузер будет заполнять задний фон ею по всей ширине.

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (

Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

Сохраняем его отдельным графическим файлом шириной в 1 пиксель, как делали это с подложкой.

9. Создаём верхнее меню. С помощью инструмента Горизонтальный текст добавляем на макет первый пункт меню — Главная. Слой создастся и даже переименуется автоматически, так что с ним можно ничего не делать.

Здесь важно, чтобы все пункты распределились равномерно, поэтому крайне рекомендуется использовать линейки. Чтобы вытянуть вертикальную, проведите указателем, удерживая при этом нажатой кнопку мыши, слева направо.

С помощью линеек отмеряйте расстояние, учитывая, что каждый пункт меню должен занимать в нашем случае 120 пикселей.

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

13. Переходим к боковой панели. Для начала создадим и сохраним отдельным файлом градиентную заливку для её заголовков. С инструментами знакомы, пояснения не требуются.

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

20. Прописываем текст в основной части страницы, используя всё тот же инструмент

Горизонтальный текст.

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

24. Уменьшаем высоту страницы. Получилось так, что все элементы уже прорисованы, а лишнее место ещё осталось. Вот тут-то нам и пригодились осмысленные имена слоёв. Среди прочих выбираем фоновый слой (у нас он так и называется — Фон) и с помощью инструмента Трансформация уменьшаем высоту нашего белого прямоугольника до нижнего края футера страницы.

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

26. Результатом сего действа и стал ещё простой, но уже нормально выглядящий шаблон сайта.

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2. 0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Достаточно ли HTML и CSS для создания веб-сайта? • thecodebytes

Итак, достаточно ли HTML и CSS для создания веб-сайта? Короткий ответ: да, вы можете создать простой веб-сайт, используя только HTML и CSS. Однако, если вы хотите начать создавать действительно классные веб-сайты и иметь больше гибкости в том, что вы можете делать, вам нужно использовать JavaScript, внутренний язык, веб-хостинг и базы данных. С этими доменами вы можете создавать в Интернете все, что захотите!

Существует несколько провайдеров веб-хостинга. Например, AccuWeb Hosting предоставляет все услуги хостинга, такие как виртуальный хостинг, хостинг VPS, выделенный хостинг и т. д.

Даже такой визуализатор алгоритмов в вашем веб-браузере, как этот, который я построил!

Почему HTML и CSS достаточно для создания веб-сайта?

HTML – это код, который используется для структурирования веб-страницы и ее содержимого. Это означает, что любой текст, изображения, формы, ссылки и кнопки, которые вы видите на веб-сайте, создаются с помощью HTML.

CSS — это язык, который вы используете для оформления веб-страницы. Это то, как вы изменяете такие аспекты, как размер, цвет и расположение элементов, перечисленных выше.

Объединив эти два языка, вы получите более чем достаточно инструментов для создания простой одностраничной целевой страницы или бизнес-сайта. Если у вас есть информация, которую вы хотите донести до потенциального посетителя, и этот контент никогда не меняется, и нет никаких дополнительных действий, которые должен предпринять ваш пользователь, вам больше ничего не нужно для создания базового веб-сайта.

Однако веб-разработка — это гораздо больше, чем просто HTML и CSS. Ниже мы собираемся разобрать другие языки и технологии, которые используются, и почему они пригодятся.

Другие компоненты, используемые для создания веб-сайта

JavaScript

HTML и CSS сами по себе могут быть очень ограниченными. Что делать, если вы хотите добавить функциональность на свой сайт? Если вы посмотрите на приведенный выше пример, нажатие кнопки действительно что-то здесь делает. Он запускает визуализатор, сортируя столбцы от меньшего к большему. Ничего подобного нельзя добиться с помощью HTML и CSS. Нам нужно ввести новый язык, JavaScript!

Используя JavaScript, вы можете существенно изменить поведение чего-либо во внешнем интерфейсе. Здесь вы можете быть настолько креативны, насколько хотите.

Вы хотите, чтобы фон веб-страницы менялся каждый раз, когда вы нажимаете кнопку? Как насчет того, чтобы прокручивать страницу вечно? С помощью JavaScript вы можете манипулировать любым визуальным элементом веб-страницы. В результате получаются гораздо более интересные и продуманные веб-сайты.

Если вы хотите увидеть несколько примеров действительно крутых веб-сайтов, которые используют много JavaScript, чтобы сделать свои веб-страницы интерактивными, просмотрите Dribbble, дизайн там действительно вдохновляет!

Базовые языки и базы данных

Итак, мы выяснили, что HTML, CSS и JavaScript составляют весь интерфейс веб-сайта. Что, если вы хотите подключить базу данных к своему веб-сайту, к которой могут получить доступ ваши посетители?

Ну, тогда вам понадобится внутренний язык. Существует множество серверных языков, о некоторых вы, возможно, слышали. Например, Java, PHP, C#, JavaScript и Ruby.

Существует множество веб-сайтов, использующих внутренний язык и базу данных.

В качестве примера подумайте о Facebook. Каждый раз, когда вы входите в систему, Facebook должен запоминать ваше имя пользователя и пароль и обрабатывать ваш запрос на вход. После того, как вы вошли в Facebook, Facebook также запоминает список ваших друзей, ваши публикации и сообщения.

Все эти данные хранятся в базе данных и доступны с помощью внутреннего языка. Если вы хотите иметь такие данные на своем сайте, вам придется реализовать внутренний язык и базу данных.

Веб-хостинг и домен

Наконец, если вы хотите подключить свой веб-сайт к доступному для всех домену, такому как www.grantdarling. com, вам необходимо купить веб-хостинг и зарегистрировать доменное имя. Я лично рекомендую SiteGround в качестве веб-хостинга и NameCheap в качестве доменного имени для новичка с ограниченным бюджетом.

Зарегистрировав доменное имя и разместив файлы в Интернете, вы теперь можете показывать свой веб-сайт любому человеку в мире!

Резюме

Вот и все! Надеюсь, эта статья прольет свет на то, достаточно ли HTML и CSS для создания веб-сайта.

В конечном счете, все зависит от того, что нужно вашему веб-сайту. Если это простой сайт для отображения заданного количества информации, то да, HTML и CSS достаточно для создания веб-сайта. Однако JavaScript, внутренние языки, базы данных, веб-хостинг и доменные имена играют важную роль в веб-разработке, помимо HTML и CSS.

Если вы хотите узнать, что изучать после HTML, CSS и JavaScript, прочтите эту статью.

Если вы новичок в веб-разработке и хотите узнать, как стать веб-разработчиком, прочтите эту статью!

Расширенное оформление веб-страниц с помощью CSS (бесплатное руководство)

💬 «Мышление роста: вера в то, что вы способны чему-то научиться на практике».

Введение

Добро пожаловать на четвертый день краткого курса веб-разработки. Найдите минутку, чтобы оценить тот факт, что всего за три дня вы так много узнали о сети. Вы перешли от чтения о сырых ингредиентах для создания веб-сайта, таких как HTML и CSS, к фактическому использованию некоторых из них на своем первом веб-сайте. Вы также ознакомились с некоторыми передовыми методами работы с HTML и CSS, а затем узнали об адаптивном веб-дизайне.

Следующие два дня будут в равной степени заполнены новыми уроками веб-разработки: немного продвинутого CSS, а затем знакомство с последним столпом Интернета, JavaScript.

Сегодня все о цветах, стилях и анимации. К концу дня наш сайт засияет яркими красками!

Что мы будем делать сегодня?

  1. Добавьте изображения в нашу папку «images»
  2. Заменить изображения-заполнители проекта собственными
  3. Установить пользовательские шрифты на нашей странице
  4. Добавьте больше стилей в нижний колонтитул, чтобы он выглядел красиво 
  5. Научитесь изменять цвет фона нашей страницы
  6. Измените цвета шрифта на нашей странице

Как видите, у нас много работы. Давайте погрузимся прямо в!

1. Подготовка папки «images»

В общем, всякий раз, когда мы работаем с изображениями на веб-странице (что почти всегда), мы стараемся разделить файлы по их типам. Таким образом, все изображения помещаются в одну папку, файлы CSS помещаются в другую папку и так далее. Поскольку у нас был только один файл CSS, мы не помещали его в отдельную папку. Но в следующем разделе мы будем работать с несколькими изображениями. Чтобы не загромождать наш рабочий каталог (так называется папка, в которой находится наш файл index.html), мы создадим новую папку с именем «images» для хранения всех наших изображений.

В эту папку «images» вам нужно добавить несколько изображений, которые мы будем использовать в этом курсе. Мы предоставим вам изображения, так как проще не иметь дело с проблемами размера изображения и соотношения сторон, но вы всегда можете поэкспериментировать со своими собственными изображениями позже. Все наши изображения взяты с Unsplash, сайта бесплатных стоковых изображений для использования в таких проектах, как наш.

Итак, первый шаг — создать папку с именем images в редакторе Sublime внутри папки с портфолио .

После этого загрузите zip-файл по этой ссылке и распакуйте его в только что созданную папку. Как только это будет сделано, вот как это должно выглядеть в Sublime.

Теперь мы готовы начать использовать наши изображения. Во-первых, мы заменим изображение профиля. В нашем HTML-файле мы заменим эту строку в разделе введения:

на эту:

Обратите внимание, что атрибут src изменился. По сути, мы говорим браузеру выбрать изображение, хранящееся локально (поэтому нет https:// ) и отобразить его. Давайте перезагрузим браузер и посмотрим, как это выглядит!

Посмотреть изменения кода на GitHub >

Неплохо, но, возможно, немного простовато, как квадратное изображение. Давайте сделаем его круглым и добавим тени. Добавьте класс с именем `profile-picture` к тому же тегу изображения в вашем HTML-файле, а затем выберите его в CSS, например:

CSS

Оооо, это слишком много. Там есть пара новых свойств, которых мы раньше не видели. Давайте кратко рассмотрим их сейчас:

  • border-radius превращает квадратное изображение в круг. Управляя размером радиуса границы, мы можем получить что угодно, от красивого прямоугольника со скругленными углами до круга. Попробуйте установить другой процент и посмотреть, что произойдет.
  • box-shadow добавляет приятные тени к элементу HTML. Значение этого свойства лучше всего описано на этой странице Mozilla Dev Docs.
  • transition устанавливает пару параметров для анимации (перехода). «all» указывает, что мы хотим анимировать все аспекты перехода этого элемента (например, изменение ширины, высоты, цвета и т. д.), easy-in-out — это временная функция, определяющая скорость кривой (подробнее здесь : https://css-tricks.com/ease-out-in-ease-in-out/), а .2s указывает время (в секундах), в течение которого должна выполняться анимация.
  • . profile-picture:hover { .. } устанавливает свойства CSS для элемента, когда мы наводим на него указатель мыши (или касаемся его на смартфонах и других устройствах с сенсорным экраном). Здесь мы просто увеличиваем размер тени, чтобы она реагировала на наш жест.

Обновите браузер и обратите внимание на тень. Теперь наведите указатель мыши на изображение и посмотрите, как меняется тень, создавая иллюзию того, что изображение поднимается с холста. Красиво, не так ли?

Посмотреть изменения кода на GitHub >

Давайте теперь перейдем к шрифтам и посмотрим, какую разницу мы можем добиться, добавив собственный шрифт (или шрифты) на нашу страницу.

2. Замена изображений-заполнителей проекта нашими собственными

Давайте также заменим изображения в разделе проекта нашими собственными изображениями. В папке, которую вы загрузили ранее сегодня, есть четыре изображения с именами от project-1.jpg до project-4.jpg. Мы заменим изображения-заполнители каждым из них.

HTML

Теперь у вас должно появиться более красочное изображение. В будущем эти изображения могут быть заменены реальными портфолио проектами, над которыми вы работаете!

Посмотреть изменения кода на GitHub >

Дополнительное задание: добавление эффектов к изображениям

Если вы уверены в том, что мы уже узнали, вы можете попробовать добавить еще больше интересных эффектов к своим изображениям. . Давайте добавим закругленные углы, эффекты при наведении и текст при наведении. Мы уже делали что-то подобное для аватарки парой разделов выше, так что здесь не все ново.

По сути, вот что мы делаем. Мы придадим изображениям закругленные углы. Затем мы добавим им тень и более глубокую тень при наведении. Пока что это именно то, что мы сделали для изображения профиля. Но теперь мы добавим каждое изображение в

и добавим h5 (это заголовок 4). Мы сделаем так, чтобы заголовок отображался только при наведении курсора на изображение.

В качестве бонуса добавим к изображению небольшой фильтр яркости, чтобы текст был читабельным, и переход, чтобы сделать все немного плавнее. Результат?

Посмотреть изменения кода на GitHub >

Выглядит здорово, не правда ли? Вот краткое объяснение новых используемых свойств CSS:

  • . видимость: [видимый/скрытый] показывает или скрывает элемент
  • position: [относительный/абсолютный] position: absolute позиционирует элемент относительно родителя с position: relative . То есть родитель с позицией : относительная становится точкой отсчета, а ребенок с position: абсолютные могут быть расположены относительно этого родителя, как мы сделали, расположив h5 так, чтобы он был на 50% сверху и на 50% слева, по существу центрируя его внутри родителя, а именно. . проект-образ-оболочка класса . Подробнее читайте здесь https://developer.mozilla.org/en-US/docs/Web/CSS/position
  • Преобразование : translate(X, Y) перемещает элемент на X процентов по оси X и на Y процентов по оси Y. Это полезно при центрировании дочернего элемента внутри родительского.
  • z-index относится к порядку наложения. Если два элемента накладываются друг на друга, элемент с более высоким z-индексом появится поверх элемента с более низким z-индексом.
  • Фильтр : яркость (0,75) создает фильтр яркости и уменьшает яркость до 75%, когда это свойство активно.

Вы найдете код для изменений кода в коммите, указанном выше.

3. Настройка пользовательских шрифтов

Шрифт определяет стиль отображения текста. Мы, веб-разработчики, любим делать красивые веб-сайты, и иногда нам нужно использовать шрифт (то есть стиль текста), который не предоставляется нам браузером напрямую (браузеры предоставляют нам некоторые шрифты из коробки). Это не проблема, потому что CSS позволяет нам загружать и использовать любой пользовательский шрифт, который мы хотим использовать.

Для этого курса мы выбрали для вас два красивых шрифта. Для заголовков и заголовков мы будем использовать Roboto Mono , а для основного текста — Noto Sans . Преимущество обоих этих шрифтов в том, что они бесплатны для использования и доступны для загрузки по адресу https://fonts.google.com/. Чтобы использовать их, мы просто вставим эту строку в раздел нашей HTML-страницы:

Посмотреть изменения кода на GitHub >

Мы будем использовать свойство font-family для элемента, который мы хотим стилизовать в этом определенный шрифт и добавьте значение «Roboto Mono» или «Noto Sans».

Для быстрого старта мы сделаем шрифт основного текста по умолчанию Noto Sans и шрифт заголовка по умолчанию Roboto Mono:

CSS

Обновите страницу и обратите внимание на разницу в стилях шрифтов! Вот как мы добавляем и используем пользовательские шрифты.

Посмотреть изменения кода на GitHub >

Теперь, когда мы позаботились о разделах вступления и портфолио, давайте сосредоточимся на нижнем колонтитуле. Давайте разобьем форму в нижнем колонтитуле, чтобы каждая метка ввода и поле ввода отображались на отдельной строке. Это делает его немного чище.

Просмотр изменений кода на GitHub >

Обратите внимание на различные варианты CSS, которые мы используем: ввод формы для выбора полей ввода, которые находятся внутри формы, и ввод формы[type=”submit”] для выбора полей ввода внутри формы, у которых атрибут типа установлен на «отправить» (это кнопка отправки внизу). Как мы обсуждали в День 3, вы действительно можете смешивать и сочетать селекторы CSS в соответствии с вариантом использования!

5. Изменение цвета фона страницы

Теперь, когда мы позаботились о некоторых мелких деталях, давайте немного уменьшим масштаб и посмотрим, сможем ли мы внести какие-либо изменения на уровне всей страницы, которые еще больше улучшат эстетику нашей веб-страницы. Прежде всего, давайте установим приятный успокаивающий цвет фона для нашей страницы и добавим физическое разделение между разделами нашей веб-страницы.

HTML-элемент

, h-r для горизонтального правила , идеально подходит для визуального разделения разделов страницы. Добавление поля также помогает создать визуальное разделение. Для цвета фона мы используем оттенок синего, близкий к небесно-голубому. Синий обычно выбирают веб-дизайнеры, и вы увидите, что он используется намного чаще, чем другие цвета (см. Facebook, Twitter, Linkedin и т. д.).

CSS

Мы также стилизуем элемент

, используя свойство background-image: linear-gradient() CSS. Мы передаем этой функции четыре значения: направление, начальный, средний и конечный цвет (и непрозрачность). Он начинается с 0% непрозрачности (прозрачность), доходит до 75% в середине и возвращается к 0% к концу. Другая интересная функция здесь — rgba(red, green, blue, alpha) , где red, green и blue — интенсивность цвета (то есть темнота. Таким образом, 0 — это отсутствие цвета), а alpha — это установщик прозрачности/непрозрачности.

Обратитесь к приведенному выше коммиту и проверьте, где мы добавили

(разделители горизонтальных правил). Также обратите внимание на то, как структурирован код CSS. После внесения изменений у вас должны появиться интервалы и горизонтальные разделители, как на наших изображениях.

6. Изменение цвета шрифта

Хотя черный цвет шрифта по умолчанию в Интернете, немного другой оттенок не помешает. Однако важно помнить, что как веб-разработчики мы должны убедиться, что контраст между текстом и цветом фона сохраняется, чтобы обеспечить удобочитаемость и доступность.

CSS

Посмотреть изменения кода на GitHub >

Откройте коммит и проверьте, как мы внесли изменения. Мы установили цвет шрифта #001f3f, темно-синий. Вы заметили, что текст стал немного легче для глаз? Вот что делает для нас небольшая настройка цвета!

😎Совет : ознакомьтесь с палитрой цветов от Google здесь https://www.google.com/search?q=color+picker и поэкспериментируйте с ней, чтобы понять, как работают шестнадцатеричные коды цветов.

Резюме

Было много CSS и головокружения, но посмотрите, с чего мы начали и где мы находимся прямо сейчас! Это сила нескольких строк CSS. Мы предлагаем вам просмотреть материал курса еще раз, возможно, через пару часов, и посмотреть, было ли что-то, что вы не поняли в первый раз, но теперь поняли. Мы считаем, что вы можете извлечь больше из курса, чем больше вы будете знакомиться с материалом курса.

🧐Ежедневное испытание

Мы прошли долгий путь с тех пор, как начали сегодня с этой бесцветной черно-белой страницы. Но вы можете сделать гораздо больше на этой странице, используя уже имеющиеся у вас знания! В сегодняшней задаче попробуйте следующее:

  • Измените цвет кнопки «Отправить» на тот, который соответствует общей теме страницы (здесь вам нужно будет использовать CSS-свойство background-color )

Методом проб и ошибок найдите другую цветовую комбинацию для фона корпуса и цвета шрифта по умолчанию, которая выглядит красиво (вы можете обратиться к этому веб-сайту за вдохновением).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *