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

2015-12-15

587

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 12 13 14 15 161718 19 20 21 Следующая ⇒

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

Например, вот четыре строки описания свойств шрифта для <p>:

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

Используя сокращённую запись, код можно упростить:

p {

font: italic bold 30px arial, sans-serif;

}

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Задание 9.10

Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите результат в браузере

Default9_10.htm:

<html>

<head>

<title>Мой документ</title>

</head>

<body>

<h1>Примеры использования Сss</h1>

<p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

</p>

</body>

</html>

Style9_10.css:

p {

font: italic bold 30px arial, sans-serif;

}

Раздел 2. Текст

Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

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

Свойство text-indent

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:

Задание 9.11

Измените содержание выше созданных файлов, сохраните их под новыми именами и просмотрите результат в браузере

Default9_11.htm:

<html>

<head>

<title>Работа с текстом</title>

<style type="text/css">

……….p {

text-indent: 30px;

}

</style>

</head>

<body>

<h1>Заголовок1</h1>

<p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

</p>

<h2> Заголовок2- имеет совсем другой вид!!!</h2>

<p>

Заголовки второго уровня отображаются шрифтом "Times New Roman" . Если он не установлен на пользовательской машине, будет использоваться шрифт семейства serif, шрифт с засечками.

</p>

</body>

</html>

Свойство text-align

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.

В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:

Задание 9.12

Default9_12.htm:

<html>

<head>

<title> Работа с текстом </title>

th {

text-align: right;

}

td {

text-align: center;

}

p {

text-align: justify;

}

</style>

</head>

<body>

<tr >

<th> первый столбец</th><th>второй столбец </th><th>третий столбец </th>

</tr>

<tr>

<td>первая ячейка</td><td>вторая ячейка</td><td>третьячейка</td>

</tr>

</table>

<p>

Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

</p>

</body>

</html>

Свойство text-decoration

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.

Задание 9.13

Default9_13.htm:

<html>

<head>

<title> Работа с текстом </title>

h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through;

}

</style>

</head>

<body>

<h1>Примеры использования Сss</h1>

<p>CSS это язык стилей, определяющий отображение HTML-документов.

Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной,

фоновыми изображениями, позиционированием элементов и многими другими вещами.

HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

</p>

<h2> Примеры использования Сss</h2>

<p>

Нормальная форма отображения

</p>

<h3>заголовок 3</h3>

<p>

</p>

</body>

</html>

2015-12-15

587

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 12 13 14 15 161718 19 20 21 Следующая ⇒

Обсуждение в статье: Сокращенная запись font

Обсуждений еще не было, будьте первым... ↓↓↓