HTML
.pdf
Шрифт
В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой – это:
Arial
Courier New
Comic Sans
Times New Roman
Verdana
Tahoma
Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен – Ариал. Все эти шрифты есть у 90% всех посетителей. Каждый шрифт – это самостоятельный файл в папке Windows/fonts/ *.ttf (EOT, WOFF, SVG)
Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется:
а) доставить этот файл пользователю(надо учитывать вес файла в 150–300 кб)
б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)
Иерархия элементов в док-те
HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементамипотомками, сестринскими.
Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом.
Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента
<body>
<p><b>Первая</b> строка.</p> <p><b>Вторая</b> строка.</p> </body>
Элементы b будут дочерними элементами своих родительских элементов p, и потомками своих предков body. В свою очередь, для элементов p элемент body будет являться только родителем. И кроме того, эти два элемента p будут являться сестринскими элементами, как имеющими одного и того же родителя — body.
Цитаты
Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.
Синтаксис
<blockquote>Текст</blockquote>
Атрибуты ● универсальные атрибуты
Закрывающий тег Обязателен.
Пример:
<blockquote>
<p>Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. </p> </blockquote>
CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам.
CSS используется создателями веб-страниц для задания цветов, шрифтов,
расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы
(которое теперь производится с помощью формального языка CSS)
Пример:
p {
font-family: Garamond, serif;
}
h2 {
font-size: 110 %; color: red; background: white;
}
Подключение CSS
● посредством тега <link> - внешние
<head>
.....
<link rel="stylesheet"
type="text/css" href="style.css"> </head>
● посредством директивы @import
<head>
.....
<style type="text/css" media="all"> @import url(style.css);
</style>
</head>
● между тегами <style> и </style> - внутреннее
<head>
.....
<style type="text/css"> body {
color: red;
}
</style>
</head>
● в теле какого-то отдельного тега —
строковое
<p style="font-size: 21px; color: green;">Текст</p>
Приоритет стилей
●Внешние стили: 1
●Внутренние стили: 2
●Строковые стили: 3
Если один HTML документ имеет несколько стилей подлюченных разным способом и в них заданы разные свойства оформления для одного и того же элемента, то в итоге элемент будет оформлен согласно содержимому стиля с более высоким приоритетом.
Селекторы CSS
По названию
<style type="text/css"> p {
color:green;
}
</style>
<p>Зеленая строка</p>
Селектор id
когда необходимо выбрать только один определенный элемент на странице с предварительно заданным идентификатором.
Селектор class
для оформления не единственный элемент, а группу элементов.
<style type="text/css">
.test2 { color:green;
font-family:verdana; font-size:1.2em;
}
</style>
<p class="test2">Зеленая строка</p>
|
|
Селекторы атрибутов |
|
<style type="text/css"> |
|
||
#test1 { |
|
|
|
<style type="text/css"> |
|||
color:green; |
|
||
|
[align="center"] {color:green;} |
||
font-family:verdana; |
|
||
|
</style> |
||
font-size:1.2em; |
|
||
|
<p align="center"> Зеленая строка</p> |
||
} |
|
||
|
|
||
</style> |
|
|
|
<p id="test1">Зеленая строка</p> |
|
|
|
|
Форматирование текста
Цвет текста
p{color:green;}
p{color:rgb(0,255,0);}
p{color:#00ff00;}
Выравнивание текста
p{text-align:center;}
p{text-align:left;}
p{text-align:right;}
p{text-align:justify;}
Свойство text-decoration
p{text-decoration:underline;}
p{text-decoration:line-through;}
p{text-decoration:overline;}
font Позволяет установить все свойства шрифта (font-family, font-size, font-style, font-variant, fontweight) за одно определение.
font-family Позволяет установить шрифт текста. font-size Позволяет установить размер текста. letter-spacing Позволяет определить расстояние между символами текста. word-spacing Позволяет определить расстояние между словами текста.
line-height Позволяет установить высоту строк. font-style - стиль шрифта элемента. font-variant Позволяет отобразить текст элемента капителью.
font-weight - толщину шрифта. vertical-align - вертикальное выравнивание текста.
text-transform - управлять регистром символов в тексте.
text-indent - величину отступа первого символа текста.
white-space Позволяет установить как должны оформляться пробелы в тексте элемента.
Установка шрифта
Установка шрифта
CSS свойство font-family позволяет устанавливать шрифт для текста HTML элементов.
p {font-family:Arial;} |
.italic {font-style:italic;} |
Резервные шрифты - будет использован в случае, если основной шрифт не установлен на компьютере пользователя.
p {font-family:Verdana,"Times New Roman",Arial;}
Размер шрифта
CSS свойство font-size устанавливает размер шрифта HTML элементов. Размер шрифта можно задать двумя способами:
Абсолютный способ - позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).
.fz20 {font-size:20px;}
Относительный способ - используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.
.fz1_2 {font-size:1.2em;}
<span>
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <p>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы
Синтаксис <span>...</span>
Закрывающий тег Обязателен.
Атрибуты универсальные атрибуты
Пример 1:
<p><span style="color: red; font-size: 2em">П</span>едложение с первой буквой, выделенной другим цветом.</p>
Пример 2:
<head>
<style type="text/css">
.letter { color: red; font-size: 2em } </style>
<head>
<body>
<p><span class="letter">П</span>едложение с...<p> </body>
Фон
Некоторым элементам страницы можно задавать цвет фона
<head>
...
<style type="text/css"> body {
background: #080; /* Цвет фона */ color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<h1>Hello World!</h1> <body>