Сокращенная запись font
Используя сокращенную запись 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> <link rel="stylesheet" type="text/css" href="style9_10.css" /> </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-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> <style type="text/css"> th { text-align: right; } td { text-align: center; } p { text-align: justify; } </style> </head> <body> <table width=100% border=4> <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> <html> <head> <title> Работа с текстом </title> <style type="text/css"> 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> Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление. </p>
</body> </html>
Популярное: Организация как механизм и форма жизни коллектива: Организация не сможет достичь поставленных целей без соответствующей внутренней... Личность ребенка как объект и субъект в образовательной технологии: В настоящее время в России идет становление новой системы образования, ориентированного на вхождение... Генезис конфликтологии как науки в древней Греции: Для уяснения предыстории конфликтологии существенное значение имеет обращение к античной... Как выбрать специалиста по управлению гостиницей: Понятно, что управление гостиницей невозможно без специальных знаний. Соответственно, важна квалификация... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (594)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |