Без заголовка |
> |
Серия сообщений "ОФОРМЛЕНИЕ ДНЕВНИКА":
Часть 1 - Как пользоваться ссылками на флешку
Часть 2 - ВСЕ ДЛЯ ОФОРМЛЕНИЯ
...
Часть 27 - Кнопки переходы
Часть 28 - Надписи С Новым годом!
Часть 29 - On-line генераторы
Часть 30 - Бродилка по деньгам
|
Без заголовка |
и
|
Без заголовка |
|
Без заголовка |
|
|
Без заголовка |
HTML (HyperText Markup Language, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.
Данный самоучитель предназначен в первую очередь для начинающих, только постигающих азы создания сайтов. Множество примеров, иллюстраций, вопросов для проверки и заданий для самостоятельной работы помогут быстрее изучить HTML.
|
Без заголовка |
|
Без заголовка |
|
|
Без заголовка |
|
|
Без заголовка |
или три способа подключить CSS самостоятельно
Будем рады познакомиться! – Каскадные таблицы стилей.
CSS разработан с целью манипулирования внешним видом элементов страницы.
Каскадные таблицы стилей не являются независимым инструментом — включаются в HTML тремя способами.
<head> </head>.css файл
|
Без заголовка |
Определяем CSS шрифт с засечками и без засечек
Существует множество видов шрифтов, которые образуют, так называемые, семейства:
|
Без заголовка |
CSS текст – форматирование
| Атрибут со значением | Полученный результат |
|---|---|
font-family:Tahoma, sans-serif |
CSS текст – форматирование |
font-size:15px |
CSS текст – форматирование |
font-style:italic |
CSS текст – форматирование |
font-variant:small-caps |
CSS текст – форматирование |
font-weight:bold |
CSS текст – форматирование |
letter-spacing:2px |
CSS текст – форматирование |
word-spacing:7px |
CSS текст – форматирование |
color:#cc0033 |
CSS текст – форматирование |
text-indent:40px |
CSS текст – форматирование
|
text-decoration:underline |
CSS текст – форматирование
|
text-decoration:overline |
CSS текст – форматирование
|
text-decoration:line-through |
CSS текст – форматирование
|
text-transform:capitalize |
CSS текст – форматирование
|
text-transform:lowercase |
CSS текст – форматирование
|
text-transform:uppercase |
CSS текст – форматирование
|
vertical-align:super |
CSS текст – форматирование text |
vertical-align:sub |
CSS текст – форматирование text |
|
Без заголовка |
или как при помощи CSS выровнять текст по правому краю
Примеры горизонтального выравнивания текста
text-align:left |
text-align:right |
|---|---|
|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
|
text-align:justify |
text-align:center |
|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
|
При значении justify, текст растягивается равномерно по обеим краям.
ab-w.net
|
Без заголовка |
Определяем расстояние между строк текста по вертикали
Расстояние между строк по вертикали определяется CSS атрибутoм line-height:
line-height:25px |
line-height:270% |
|---|---|
|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
|
Высота строки может быть или в пикселях, или в процентах.
ab-w.net
|
Без заголовка |
CSS атрибуты, определяющие CSS ссылки
В CSS ссылки также поддаются форматированию:
см таблицуЕще пример:
<head> |
Результат: ссылки в CSS
a:link, a:active – псевдоэлементы, которые определяют первоначальный вид ссылки и в момент нажатия (текст синего цвета, полужирный, по умолчанию подчеркнут).
Псевдоэлемент a:visited определяет уже посещенную ссылку (в данном случае текст зеленый, полужирный и подчеркнутый).
Псевдоэлемент a:hover определяет внешний вид ссылки при наведении на нее курсора мыши (текст красный, полужирный, без декораций).
Еще один пример с псевдоэлементом a:hover:
<head> |
Селектор a соединяет в себе а:link, а:visited, a:active.
Результат: ссылки в CSS
ab-v.net
|
Без заголовка |
CSS атрибуты, определяющие курсоры
Наведите курсор мыши на текст внутри ячейки
| cursor:crosshair | cursor:pointer | cursor:default |
| cursor:wait | cursor:progress | cursor:e-resize |
| cursor:text | cursor:help | cursor:move |
| cursor:n-resize | cursor:ne-resize | cursor:nw-resize |
Пример кода: img {cursor:progress}
ab-w.net
|
Без заголовка |
CSS атрибуты, определяющие фон страницы или элемента
Пусть цвет фона web-страницы будет зеленым:
<head> |
Результат: определяем цвет фона при помощи CSS атрибута background-color
Атрибуты и значения
Следующая запись также будет правильной:
<head> |
Результат: определяем цвет фона при помощи CSS атрибута background
В данном примере цвет фона был задан при помощи CSS атрибута background.
ab-w.net
|
Без заголовка |
CSS атрибуты и значения, определяющие положение фона
Этот урок научит вас тому, как из изображения сделать фон
|
Без заголовка |
CSS атрибуты, определяющие изображение-фон и его позицию
Пример CSS позиционирования изображения-фона:
<head> |
|
Без заголовка |
CSS атрибуты и значения, позволяющие зафиксировать фон
Пример того, как зафиксировать фоновое изображение в нужном месте:
<head> |
По умолчанию фоновое изображение прокручивается вместе с другими элементами web-страницы. background-attachment:fixed фиксирует фоновое изображение в заданной позиции.
Результат: здесь
ab-w.net
|
Без заголовка |
CSS атрибуты и значения, определяющие margin элемента
Ниже схематически показано пространство, которое занимает атрибут margin:
Схему см. здесь
Атрибут margin определяет пространство за пределами границы элемента.
Код примера:
<head> |
Атрибуты и значения
Атрибут margin соединяет в себе:
Часто используется такая запись: margin: 20px 50px 30px 50px, где первое значение соответствует margin-top, второе – margin-right, третье – margin-bottom, а четвертое – margin-left (по часовой стрелке, начиная сверху).
ab-w.net
|