Методичка по Веб. Методичка 2курсWEB. 1. Ввод и форматирование текста Webстраницы 4

• Название: 1. Ввод и форматирование текста Webстраницы 4
• Анкор: Методичка по Веб
• Дата: 25.12.2022
• Размер: 0.95 Mb.
• Имя файла: Методичка 2курсWEB.docx
• Тип: Контрольная работа; #862540
• страница: 7 из 9

Практические задания

1. 
   Проверить все примеры из теории
   
2. 
   Оформить текст по следующим правилам (текст произвольный):
   
   1. 
      Первое предложение сделать курсивным и пусть все буквы в нем будут заглавные. Оформить, используя встроенный метод определения стилей.
      
   2. 
      Во втором предложении, переопределить тэг , в который заключен текст, таким образом, чтобы он стал жирный, красного цвета и 24рх.
      
   3. 
      Для третьего предложения, определите стилевой класс: шрифт Arial, цвет голубой, размер 10px, наклонного начертания, фон у текста черный
      
3. 
   Оформит страницу по образцу (образец в папке CSS-задания/ задания_свойста_шрифта)
   

Текст в CSS

Основные свойства CSS отвечающие за форматирование текста.

• 
  text-align
  
• 
  text-decoration
  
• 
  text-indent
  
• 
  text-transform
  
• 
  letter-spacing
  
• 
  word-spacing
  

Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения:

left - выравнивание по левому краю (значение по умолчанию);
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине(по правому и левому краям одновременно).

Пример:

h1{ text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;}

Свойство TEXT- DECORATION

Позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:

none - значение по умолчанию. Дополнительного оформления не происходит;
underline - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through - текст перечеркивается;

h1 {
text-align:center;
text-decoration:underline;
}
h2 {
text-align:center;
text-decoration:overline;
}
h3 {
text-align:center;
text-decoration:line-through;
}

Свойство TEXT-INDENT

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

h1{text-align:center;}
p {
px;
}

Однако можно задать и в процентах от общей длины базовой строки (строки без отступа)

h1{text-align:center;}
p {
%;
}

Свойство TEXT-TRANSFORM

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

• 
  capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например: "создайте сайт сейчас" станет "Создайте Сайт Сейчас".
  
• 
  uppercase - делает из всех букв заглавные. Например: "текст в css" станет "ТЕКСТ В CSS
  
• 
  lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".
  
• 
  none - не производит смены регистра; это значение используется по умолчанию.
  

Свойство LETTER-SPACING

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

h1 { letter-spacing: 10px;}
p{ letter-spacing :4px; }

В примере выше для заголовков установлен интервал между буквами в 10px, а для параграфов в 4px;

Свойство WORD-SPACING

Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.

h1 { word-spacing: 20px;}
p{ word-spacing :10px; }

Практические задания

1. 
   Отредактировать текст по образцу (образец в папке CSS-задания/ задания_работа_с_текстом)
   

Рамки в CSS

Рамки предназначены для выделения блоков текста с целью повышения читабельности текста на странице. В HTML рамки можно было создавать только при помощи таблиц. В CSS же рамку можно сделать для любого блока текста.

Основные свойства рамок в CSS следующие:

• 
  border-width
  
• 
  border-color
  
• 
  border-style
  

Свойство BORDER-WIDTH

Это свойство задает толщину рамки. Значение обычно указывается в пикселях.

Например:

P{border-width: 3px}
Для всех абзацев на странице будет создана рамка толщиной 3px.

Свойство BORDER-COLOR

Данное свойство задает цвет рамки. Цвет может задаваться также как и в HTML: по имени или по шестнадцатеричному коду.

Например:

H1{border-color:red}
Для всех заголовков первого уровня создаст рамки красного цвета.

Свойство BORDER-STYLE

Данное свойство определяет, какого вида будет рамка. Всего существует 8 видов. Рассмотрим каждый поподробнее.

1. 
   Solid-сплошная линия
   
   
2. 
   Dotted-Точечная рамка
   
   
3. 
   DASHED-Пунктирная рамка
   
   
4. 
   DOUBLE- Двойная сплошная линия(минимальная толщина 3px)
   
   
5. 
   GROOVE – Вдавленная линия с имитацией объема
   
   
6. 
   RIDGE – Выпуклая линия с имитацией объема
   
   
7. 
   INSET – вдавленная рамка
   
   
8. 
   OUTSET – выпуклая рамка
   
   

Сокращенная запись border

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

Пример:

h1 {
border:30px outset red;
}

Рассмотрим несколько примеров:

Пример1:

h1 {
border-width: 4px;
border-style: dotted;
border-color: red;
}

h2 {
border-width: 18px;
border-style: inset;
border-color: red;
}

p {
border-width: 2px;
border-style: solid;
border-color: blue;
}

Пример2:

h1 {
border-width: 30px;
border-style:outset ;
border-color: red;
}

h2 {
border-width: 20px;
border-style: dashed;
border-color: gold;
}

h3 {
border-width: 16px;
border-style: double;
border-color: green;
}

p {
border-width: 1px;
border-style: dotted;
border-color: blue;
}

На данный момент мы рассмотрели настройку всей рамки. Но есть возможность отдельно настраивать левую, правую, верхнюю и нижнюю рамку. Для этого нужно к border через дефис добавить название соответствующей стороны: право-right, лево-left, верх-top, низ-bottom.

Пример:

h1 {
border-top-width: 30px;
border-top-style:solid ;
border-top-color: red;

border-right-width: 20px;
border-right-style:dashed ;
border-right-color: gold;

border-bottom-width: 10px;
border-bottom-style:dashed;
border-bottom-color: green;

border-left-width: 40px;
border-left-style:solid ;
border-left-color: blue;
}