HTML и CSS. Список уроков.


Урок 01. Создание первой страницы.

Урок 02. Форматирование текста.

Урок 03. Макет страницы.

Урок 04. Добавление изображений.

Урок 05. Ссылки и меню.

Урок 06. Компоновка элементов.

Урок 07.

HTML и CSS. Урок 02. Форматирование текста.

Для изучения принципов форматирования текста в CSS добавим в наш пример немного содержания. Между тегами <p>...</p> напечатаем произвольный текст, к которому мы и будем применять настройки шрифта. (Тег <p> в HTML указывает, что  текст до закрывающего тега </p> является абзацем.) Для задания нового шрифта, к примеру Cambria  в нашем файле style.css создадим селектор тега для элемента p и воспользуемся свойством font-family: cambria;

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

Например: font-family: Georgia, "Times New Roman", Times, serif; (Название шрифта из нескольких слов необходимо указывать в кавычках).

Вы можете установить дополнительные шрифты к себе на компьютер перейдя по ссылке

Следующее свойство форматирования текста цветом мы уже применили - color  Существует несколько способов задания конкретного оттенка. color: #912F71;  - это шестнадцатиричное значение. Сразу возникает вопрос : - Как определить какие цифро-буквы соответствуют требуемому цвету? В нашем случае это просто. Во время установки  локального сервера OpenServer Ultimate были загружены и дополнительные программы. Воспользуемся инструментом "Пипетка" .

В примере выше мы указали название цвета текстом, предложенным редактором кода. color: blue;  Полный список названий цветов Здесь в текстовом варианте и шестнадцатеричном обозначении.

Также можно использовать кодировку цвета RGB. При этом каждый цвет указывается либо процентами color: rgb(40%.65%.94%);  либо цифровыми значениями (0-255). color: rgb(105. 80. 255); 

К современному способу задания цвета относится метод RGBA. (Red-красный, Green-зеленый, Blue-синий и Alpha-канал, определяющий "прозрачность" ). Параметр A задается в диапазоне от 0 до 1, где ноль - полная прозрачность. Пример: color: rgba(105. 80. 255. .5); 

Еще один способ задать цвет на странице это аббревиатура HSL и HSLA (Hue - тон, Saturation - насыщенность и Luminance - яркость). Н может равняться 0-360 градусов цветового круга, S принимает значение 0-100%, где 100 - насыщенный цвет, L - степень светлоты - 0-100%. При нуле абсолютно черный цвет, при ста - полностью белый. Пример для задания красного цвета выглядит следующим образом: color: hsl(0. 100%. 50%);

С принципом указания цветов разобрались, теперь рассмотрим  изменение размера шрифта. Нам понадобится свойство font-size, которое и задает этот размер. Пример font-size: 1.25em;  Существует богатый выбор единиц измерения размера шрифта. Это - em, ex, пикселы, проценты, пики, пункты, дюймы и миллиметры. Рекомендуется применять em, пиксели и проценты как наиболее предсказуемые  при отображении в браузерах. В применении каждой единицы измерения есть свои нюансы, рассмотрение которых мы пока отложим. Недавно была добавлена еще одна единица измерения rem (Root EM).

Запомните правильное написание стилей в CSS:

 


 Продолжение: HTML и CSS. Урок 03. Макет страницы.

 

 

 

Параметы