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

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

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

Все задания выполнять, используя css.

1. 
   Проверить все примеры, приведенные в описании.
   
2. 
   Поставить фоном страницы картинку, чтобы она находилась только сверху и повторялась по горизонтали слева на право.
   
3. 
   Поместить изображение в центре web-страницы.
   
4. 
   Оформить текст страницы по образцу (текст берем любой)
   
   1. 
      Используя правило создания стилевого класса, сделайте фон страницы желтый, слева на странице сверху вниз повторяется фоновое изображение.
      
   2. 
      Используя правило переопределения тэга, сделайте все заголовки 1-го уровня красные с синим фоном.
      
   3. 
      Используя правило переопределения тэга, сделайте текст в параграфах зеленый
      

Шрифты в CSS

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

За шрифты в CSS отвечают следующие свойства:

• 
  font-family
  
• 
  font-style
  
• 
  font-variant
  
• 
  font-weight
  
• 
  font-size
  
• 
  font
  

Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Обратите внимание на следующее: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки".

h1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}

Т.е. вначале пишется самый приоритетный шрифт, затем менее приоритетный и т.д., перечисляем их через запятую, а затем желательно писать имя семейства.

Надпись из примера выше:
h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif.

Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:

• 
  normal - обычный;
  
• 
  italic - курсивный;
  
• 
  oblique - наклонный;
  

Чем же отличается курсивный от наклонного? Дело в том, что значение italic означает использование встроенного в шрифт курсивного начертания. Почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном.
А значение oblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.

h1{
font-family: verdana, arial, sans-serif;
font-style:normal;
}
h2{
font-family: verdana, arial, sans-serif;
font-style:italic ;
}
h3{
font-family: verdana, arial, sans-serif;
font-style:oblique;
}

Свойство FONT-VARIANT

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

normal - значение по умолчанию, текст отображается обычным образом.
small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.



Т.е. большие (заглавные буквы) остаются без изменений, а маленькие - представляют собой копию заглавных букв, только слегка меньшего размера.

По умолчанию текст будет отображаться обычным начертанием.

Пример записи стиля:

h1{
font-family: verdana, arial, sans-serif;
font-variant:small-caps;
}
h2{font-family: verdana, arial, sans-serif;}

Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным.

Основные значения:

• 
  normal - обычный
  
• 
  bold - жирный.
  
• 
  Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Например, 400 равносильно normal, а 700 - bold .
  

H1 {font-family: arial, verdana, sans-serif;}
P {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}

Свойство FONT-SIZE

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

Пример записи стиля:

h1 {
font-family: arial, verdana, sans-serif;
font-size: 18px;
}
h2{
font-family: arial, verdana, sans-serif;
font-size: 36px;
color: red;
}

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

Сокращенная запись. Свойство FONT

Все, перечисленные выше свойства, можно записать в краткой форме. Это помогает экономить время и делать код стилей более легким.

При этом нужно записывать значения всех свойств через пробел, в такой последовательности:

font-style_ font-variant_font-weight_font-size_font-family

Например:

P{
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

И то же самое в краткой форме:

P{ font : italic normal bold 30px arial,sans-serif; }