Стили CSS для оформления дизайна страницы

Стили CSS позволяют создавать различные красочные дизайны сайтов. Например, зададим размеры и расположение файлов и шрифтов. Основой кода сайта является HTML. Это гипертекстовая разметка, где в заголовок вписывается сторонний файл таблицы стилей. К файлу Index.html подключается файл стилей. Он будет управлять таблицами стилей CSS.Стили CSS

Стили css — подключение файла

Находя эту ссылку в коде HTML, браузер будет переходить к таблице стилей CSS. Станет отображать страницу соответственно заданным параметрам. Например, цвета, размеры, отступы, выравнивание, расположение элементов на странице. Файл html является каркасом страницы. Но за счет таблицы стилей она становится выразительной и красочной.

В блокноте notepad++ откроем новый документ. Сохраним его на локальном диске «С», присвоив название «style.css». Например, сохраняю его в папке, которую назвала «blog2». Теперь файл «style.css» нужно подключить к индексному документу.

В коде заголовка сайта впишем его перед закрывающим тегом </head>. Подключается он с помощью специального не парного тега  <link>.  У link есть несколько атрибутов, которые нужно указать.

  • Атрибут ссылки href=к нему добавляем путь к файлу.
  • Далее следует атрибут «type», который тоже подключим к документу: text/css.
  • Третий атрибут rel=, означающий: «взаимосвязь».

Все вместе получиться в коде:

<!Doctype html> <html> <head> <meta <harset UTF-8> <title>блог 2</title> <strong><span style="color: #993366;" data-mce-style="color: #993366;"><link&nbsp; href= c://xampp/htdocs/blog2/style.css.txt /&nbsp; “type text/css" rel="stylishest"</span>&nbsp;</strong> &nbsp; </head> <body>…..</body> </html>

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

 Стили CSS — cелекторы  

селектор

Подключив к странице html  файл style.css, мы должны его заполнить. Вначале заполняем селекторы. Это теги кода, для которых нужны стили: заголовков, шрифтов, абзацев, картинок и др.

Например, селекторов может быть много. Однако всем селекторам присущи  два типа: свойства и значения. Для одинакового изменения цвета всех абзацев применим, общий селектор — <p>. Например, мы решили, что все абзацы будут на сером фоне. Для этого в файле запишем

Но не всегда нужны однотипные селекторы, можно изменить один элемент. Сделаем только заголовок страницы — красным цветом. Тогда запишем:  в header

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

Но класс нужно приписать тем элементам кода html, который мы хотим выделить заданным цветом.  Например, в стилях CSS — эти 3 вида селекторов употребляются наиболее часто.

Цвета из программы 

Например, для изменения цветов можно пользоваться небольшой программой «color mania». В программе указываются их шестнадцатеричные значения из букв и цифр. Скачать программу можно с официального сайта. Причем коды в виде букв и цифр можно просто копировать и вставлять в файл.

Оставить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Что будем искать? Например,Человек

Мы в социальных сетях