css. Способы применения Каскадных таблиц к htmlстранице. Работа с текстом

• Название: css. Способы применения Каскадных таблиц к htmlстранице. Работа с текстом
• Дата: 18.11.2022
• Размер: 45.61 Kb.
• Имя файла: pr_5-css-.docx
• Тип: Документы; #797044

«Инструментальные средства разработки программного обеспечения»
Тема: «CSS. Способы применения Каскадных таблиц к HTML-странице. Работа с текстом»
Цель: Ознакомиться со способами применения таблиц стилей. Изучить и практически овладеть основами CSS
Теоретическая часть

Введение.

Cascading Style Sheets(CSS)- каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания.

Методы определения таблицы стилей в документе HTML:

1. 
   Связывание(linking)- Внешние таблицы стилей
   
2. 
   Вложение(embeding)- Информация о стиле в заголовке: элемент STYLE
   
3. 
   Встраивание(inline) - Атрибут style
   
4. 
   Импорт(import) - @import url(file_css.css)
   

a) Linking - Подключение css файла происходит в области
b) Embedding - Метод вложения.

Внутрь тега необходимо поместить парный элемент

c) Inline - Метод встраивания.

Стиль помещается внутрь тега как его атрибут: :

< Selector style= “Правило CSS”>
Текстовые стили

Селектор по элементу

Позволяет отобрать на html страницы все одноименные теги. Допустим, мы хотим поменять цвет всех абзацев
с черного на красный:

p {

color:#CC0000;

}

Семейство шрифтов текста задается с помощью свойства font-family. Свойство font-family должно содержать несколько имен шрифтов, как "резервные" системы.


Стиль шрифта

Свойство font-style в основном используется, например, для указания текста курсивом, имеет три значения:

font-style: normal|italic|obligue

• 
  normal - текст отображается нормально
  
• 
  italic - текст отображается курсивом
  
• 
  oblique - текст "наклонный" (oblique очень похож на курсив, но менее поддерживается)
  

Размер шрифта

Свойство font-size устанавливает размер текста в формате:

font-size: абсолютный размер | относительный размер | значение | % | inherit

Как правило, по умолчанию для большинства браузеров:

1em = 12pt = 16px = 100% = medium


Выравнивание текста

Свойсто text-align отвечает за выравнивание текста по горизонтали. Текст можно выравнивать по центру (center), по правому/левому (right/left) краю или по ширине. Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах).

Практическая часть

Задание 1.
Напишите исходный текст страницы и измените стили элементов.

Покрасьте меня в розовый цвет (color: pink).

Данный элемент должен остаться неоформленным.

Покрасьте меня в серый цвет (color: grey).

Данный элемент должен остаться неоформленным.

Покрасьте меня в красный цвет (color: red).

Данный элемент должен остаться неоформленным.

Покрасьте меня в зеленый цвет (color: green).

Покрасьте меня в желтый цвет (color:yellow).

Задание 2.
Напишите исходный текст страницы и измените стили элементов согласно требованиям.

Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.

Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя и выровнен по ширине.

Установите красную строку. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение.

Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей.



Данный абзац написан шрифтом Georgia и имеет размер 2.5em и отцентрирован

Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.