Тема 4. Основы CSS.

💸 Как сделать бизнес проще, а карман толще?

Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое раписание, но и напоминать клиентам о визитах тоже. Проблема в том, что средняя цена по рынку за такой сервис — 800 руб/мес или почти 15 000 руб за год. И это минимальный функционал. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
⚡️ Для новых пользователей первый месяц бесплатно. А далее 290 руб/мес, это в 3 раза дешевле аналогов. За эту цену доступен весь функционал: напоминание о визитах, чаевые, предоплаты, общение с клиентами, переносы записей и так далее.
✅ Уйма гибких настроек, которые помогут вам зарабатывать больше и забыть про чувство «что-то мне нужно было сделать».
Сомневаетесь? нажмите на текст, запустите чат-бота и убедитесь во всем сами!

Тема 4. Основы CSS.

Создать стиль для оформления текста, заголовка и гиперссылки в соответствии с примером рисунок 1.

1.Приведите пример использование трех способов задания стиля.

Раз уж Вы решили изучить основы CSS то вам уже наверняка известно, что HTML состоит из тегов, каждый из тегов по умолчанию, отображает свое содержимое (то что заключено между тегами) определенным образом, т. е. он имеет какой-то свой стиль оформления. При помощи CSS мы можем поменять этот стиль и придать тому или иному объекту такой вид, который нам необходим.

Описание стилей различных элементов заключается между тегами < STYLE> < /STYLE>. Сам способ записи в CSS не такой как запись тегов в HTML. Присвоение свойств какому либо элементу делается при помощи следующей записи:

-где селектор это тег, класс или идентификатор, которому мы хотим присвоить определенные свойства, свойство это свойство данного тега которое мы хотим изменить, а значение это значение которое мы хоти присвоить данному свойству.

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

Ниже приведен пример, чтобы Вы могли видеть, как это работает на практике. В данном примере с помощью CSS задан цвет текста. Создайте из этого кода HTML страницу. Для этого скопируйте данный код, вставьте его в текстовый редактор “Блокнот”, а затем пройдите в пункт меню " Файл" > > " Сохранить как...", и сохраните этот файл с расширением.html После этого откройте сохраненный файл при помощи вашего браузера и Вы увидите, что текст имеет синий цвет.

< title> Моя первая страница с использованием CSS< /title>

< p> Пример использования CSS при оформлении текста< /p>

Обратите внимание, что описание стилей в html коде располагаются между тегами < head> < /head>, а тег p которому присваивается свойство пишется без угловых скобок. Кроме этого мы можем расширить свойства нашего тега p и задать нашему тексту не только цвет, но и размер и фон и т. д.

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

< title> Моя первая страница с использованием CSS < /title>

< STYLE > p {color: #330099; background-color: #FFFF99; font: 14px Verdana, Arial, Helvetica, sans-serif; }< /STYLE>

< p> Пример использования CSS при оформлении текста< /p>

Существует три способа использования стиля, выше мы рассмотрели вариант, когда описание стилей находится в самом html файле и располагается вверху между тегами < head> < /head>.

Кроме этого описание стилей может быть расположено в самом html коде. Например, создадим тот же стиль для тега p, только поменяем размер и цвет текста. Код в этом случае будет выглядеть так:

< P STYLE=" color: #009900; background-color: #FFFF99; font: 18px Verdana, Arial, Helvetica, sans-serif; " > 2-й пример использования CSS при оформлении текста< /P>

Скопируйте его и вставьте в любое место между тегами < body> < /body>. Получится следующее:

Обратите внимание, что ранее мы уже задавали стиль тегу < p> и по логике везде, где на данной странице мы будем использовать тег < p> он должен отображаться, так как мы задумали заранее. Однако браузер всегда отдает предпочтение тому стилю, который мы задали непосредственно в html коде перед текстом. Поэтому во втором случае Вы можете видеть, что цвет и размер текста поменялся.

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

Для того чтобы посмотреть как это работает, сделайте следующее: в той же папке где лежит ваша страница которую мы создали ранее, создайте текстовый документ, затем из кода ранее созданной нами страницы вырежьте то что расположено между тегами < STYLE> < /STYLE> и вставьте его во вновь созданный текстовый документ, а потом сохраните его с именем style и расширением.css. Сами теги < STYLE> < /STYLE> в html документе удалите, а вместо них вставьте следующий код:

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

< title> Моя первая страница с использованием CSS < /title>

< p> Пример использования CSS при оформлении текста< /p>

И второй файл style.css который содержит стили, его код должен выглядеть так:

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

Поэтому чаще всего используется именно такой способ при создании интернет страниц.