позиция фона — учебник CSS
Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y.
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
left— фоновый рисунок прилеплен к левой стороне элемента;center— фоновый рисунок расположен в центре оси x;right— фоновый рисунок прилеплен к правой стороне элемента.
div {
background-position-x: left;
}
Ключевые слова для вертикального позиционирования
top— фоновый рисунок прилеплен к верхней стороне элемента;center— фоновый рисунок расположен в центре оси y;bottom— фоновый рисунок прилеплен к нижней стороне элемента.
div {
background-position-y: bottom;
}
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */
Значения можно менять местами — они будут работать так же.
Примеры выравнивания фона с помощью background-positionЕсли вы установили повтор фона с помощью свойства background-repeat, то background-position будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
div {
background-position: 10px 25px;
}
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
div {
background-position: right 15px bottom 40px;
}
Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Важно: фоновые изображения и печать
Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег
Поддержка браузерами
Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.
Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.
Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.
Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.
Далее в учебнике: background-attachment — фиксация фона.
Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Обновлено 10 января 2021 Просмотров: 284740 Автор: Дмитрий Петров- Тега Img и его атрибуты Src, Width и Height
- Как вставить картинку с ссылкой, назначение Alt и Title
- Обтекание картинки текстом в Html — атрибут Align
- Background — как задать фон для сайта в чистом Html
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Про то, какие именно форматы растровой графики (Gif, Png, Jpg) и в каких случаях лучше всего будет использовать для вставки картинок на страницы своего сайта, мы подробно успели поговорить с статье, ссылка на которую приведена чуть выше.
Сегодня же мы подробно рассмотрим все аспекты использования тега Img для вставки изображений, посмотрим как задать обтекание фотографии текстом в Html коде, узнаем как использовать изображения в качестве фона для сайта, как изменять их размер и задавать выравнивание (по центру, влево и вправо).
Использование тега Img и его атрибутов Src, Width и Height
Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента языка гипертекстовой разметки, одни из которых мы уже упомянули, а три остальных — Iframe (современный вариант использования фреймов), Object и Embed (для вставки видео и другого медиа контента).
Ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (фото в случае Img или видео и флеш в случае Object и Embed). Любой из этих четырех элементов подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную в нем атрибутами.
Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src.
<img src="путь_до_файла_изображения">
Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.
Когда изображение начинает загружаться с вашего сервера на компьютер пользователя, браузер определяет истинные размеры этой картинки и раздвигает на эти самые размеры ту строчную область, которую создал при обнаружении в коде элемента Имг.
Если вы хотите, чтобы браузер сразу же выделял для этого элемента область нужного размера, а не потом ее изменял при получении данных о размере загружаемого изображения, то вы должны будет обязательно указать атрибуты Width и Height.
<img src="путь до файла изображения">
Если вы задали их, то тогда браузер пользователя создает область с нужными размерами и туда уже будет вписывать ваше фото, даже если оно другого размера. Кстати, иногда приходится встречать на сайтах начинающих вебмастеров такую ошибку.
На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.
И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).
Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). Сжать фото можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, онлайн фотошопе Пикслр.
Кстати, кроме заблаговременного уменьшения размера изображений для вставки на страницы сайта, следует со всей тщательностью подойти еще и к оптимизации веса. Порой можно без потери качества добиться кратного уменьшения веса графических файлов, что приведет к гораздо более быстрой их загрузке и снижению нагрузки на сервер хостинга. Можете для этой цели воспользоваться очень удобным и эффективным онлайн сервисом по оптимизации изображений.
Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и относительные, и абсолютные ссылки, о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.
Т.е. Src может содержать, например, следующие записи:
<img src="название_файла">
<img src="папка/название_файла">
<img src="https://ktonanovenkogo.ru/папка/название_файла">
В первом случае, графический файл должен лежать в той же папке, что и файл вашей веб страницы (в случае использования вами CMS, первые два варианта вам вряд ли подойдут, хотя для задания фонового изображения в CSS это очень удобно). Во-втором случае, графика лежит во вложенной папке относительно файла вашей страницы, ну, а в третьем случае, в Src указан абсолютный путь до файла с картинкой.
И тут следует обратить внимание, что картинка, которую вы вставляете в Html код, может лежать абсолютно на любом сервере. Т.е. вы можете, допустим, скопировать путь до нее на моем блоге и вставить этот путь в атрибут Src тэга Img на своем сайте. Все будет прекрасно работать, правда, если я не запрещу подобные действия в .htaccess на своем сервере, но это уже отдельная песня (погуглите на тему «Защита от хотлинков»).
Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.
В этом, кстати говоря, заключается один из способов повышения скорости загрузки. Да и те же самые счетчики посещений, которые вы наверняка будет использовать на своем ресурсе для наблюдения за статистикой посещаемости, тоже будут подгружать свои информеры и скрипты с отличных от вашего хостов.
Как вставить картинку с ссылкой, назначение Alt и Title в Img?
Если Img по своей сути является строчным элементом, то его можно просто считать большой буквой, а значит нам ничто не мешает сделать изображение ссылкой, заключив этот тег внутрь гиперссылки. Вообще, про это я уже достаточно подробно писал в недавней статье про создание гиперссылки в Html коде, но немного повториться будет не грех.
<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>
В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:
<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>
Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt.
Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.
Но чтобы пользователь имел представление, что на этом месте страницы должна быть картинка, вы и прописываете Alt в Img, где и вводите текст с описанием того, что здесь должно быть изображено. Содержимое Alt будут выводиться в области неподгрузившейся фотографии.
<img src="путь до файла изображения" >
Ну, и кроме этого, для картинок в Html коде, а так же и для других элементов языка гипертекстовой разметки (например, все для тех же гиперссылок) имеется возможность при наведении пользователем на них курсором мыши показывать ему какой-либо сопровождающий текст.
Делается это с помощью специального атрибута Title, который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.
Раньше, кстати, к всплывающей подсказке приводило и добавление текста Alt, но сейчас от такого поведения отказываются и этот атрибут теперь в основном выполняет только роль альтернативного текста, а Title используется исключительно для всплывающих подсказок.
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.pngя" alt="" title="">
На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.
Для этого нужно не забывать употреблять в них ключевые слова, как я об этом неоднократно писал, например, в статье про продвижение сайта своими силами или же в публикации про то, как раскрутить сайт самому.
Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.
Обтекание картинки текстом в Html — атрибут Align тега Img
Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.
Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках h2-H6 и т.п.).
Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.
Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:
По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">
В этом случае произошло выравнивание текста в строке, где расположена фотография, по верхнему ее краю.
Возможно еще одно значение этого атрибута align=»middle»:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">
В этом случае текст в строке с картинкой будет выравниваться по середине этого самого рисунка.
Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.
При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.
Например, при align=»left» мы получим такой результат:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">
Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">
При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.
Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">
Background — как сделать фон для сайта в чистом Html
Графические файлы можно использовать не только как элементы кода страницы, но и как заливку в качестве ее фона. Вообще, фон для сайта в языке Html можно задать либо цветом, либо с помощью фоновых изображений. Ну, а в современной верстке с использованием свойств CSS , фоновые картинки (background image) являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.
Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и тегов таблицы Table, показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).
Например, добавив в Body атрибут Background следующего вида:
<body background="https://ktonanovenkogo.ru/image/bgkletka.gif">
Мы получим фон для нашего сайта, состоящий из размноженной фотки, которой будет заполнена вся видимая область на манер плитки:
Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor, в качестве значения которого вы может вставить код цвета, например, так:
<body bgcolor="#f0f8ff">
То получим следующий цвет фона заданный через bgcolor:
Точно так же, как и в случае с атрибутом background, bgcolor можно еще использовать и для задания фона всей таблицы или же отдельных ее элементов.
Внимание! Атрибуты bgcolor и background сейчас не рекомендуются к использованию. Как и другие описанные выше атрибуты, задающие обтекание и отступы. Вместо них нужно использовать соответствующие CSS свойства.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Тег body в HTML | вебисторий
Редко какая веб-страница создаётся не для распространения контента. Именно внутри тега <body> должен располагаться весь тот контент, что мы хотим показать на странице. Это и текст, и изображения, и скрипты, и многое другое. Сегодня разберём этот очень важный для HTML-документа тег.
Хотя тег <body> считается своего рода стандартом, его наличие в HTML-документе не является обязательным. С другой стороны, выделение основной части HTML-документа является «хорошим тоном».
Для тега <body> доступно довольно много атрибутов, в том числе и универсальных. Также для тега <body> доступны события.
alink — устанавливает цвет активной ссылки. Текущий цвет меняется, когда на ссылку нажимают курсором мыши или выделяют её при помощи клавиатуры. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.
<body alink="red"> <p><a href="https://sitename.ru">Ссылка</a></p> </body>
background — задаёт фоновый рисунок для веб-страницы. Для фонового рисунка не устанавливаются ширина и высота, он всегда отображается в масштабе 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется как мозаика. В качестве фона допускается использовать анимированные изображения в формате GIF, но это считается «плохим тоном» из-за того, что они отвлекают внимание посетителей сайта.
<body background="images/fon.gif"> <p>текст</p> </body>
bgcolor — устанавливает цвет фона веб-страницы. Может использоваться совместно с background, чтобы цвет фона гармонировал с фоновым рисунком. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.
<body bgcolor="#008000"> <p>текст</p> </body>
bgproperties — определяет, прокручивается фоновый рисунок вместе с текстом и другими элементами на странице или нет. По умолчанию фоновый рисунок прокручивается вместе с содержимым веб-страницы. Чтобы зафиксировать фон, нужно использовать bgproperties=»fixed». Чтобы фон не фиксировался, достаточно не использовать bgproperties или использовать bgproperties=»».
<body background="images/fon.gif" bgproperties="fixed"> <p>текст</p> </body>
bottommargin — определяет размер отступа от нижнего края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.
<body bottommargin="15"> <p>текст</p> </body>
leftmargin — определяет размер отступа от левого края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.
<body leftmargin="15"> <p>текст</p> </body>
link — устанавливает цвет непосещённых ссылок. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.
<body link="green"> <p><a href="https://sitename.ru">Ссылка</a></p> </body>
rightmargin — определяет размер отступа от правого края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.
<body rightmargin="15"> <p>текст</p> </body>
scroll — управляет отображением полос прокрутки, когда размер контента превышает размер текущего окна. Для запрета отображения полос прокрутки нужно использовать scroll=»no», для разрешения не использовать scroll или использовать scroll=»yes».
<body scroll="no"> <p>текст</p> </body>
text — устанавливает цвет текста, используемый на веб-странице по умолчанию. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах. Цвета отдельных элементов можно изменять с помощью стилей.
<body text="maroon"> <p>текст</p> </body>
topmargin — определяет размер отступа от верхнего края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.
<body topmargin="15"> <p>текст</p> </body>
vlink — задаёт цвет посещённых ссылок. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.
<body vlink="#008080"> <p><a href="https://sitename.ru">Ссылка</a></p> </body>
В целом, спецификация HTML не одобряет использование атрибутов background, alink, bgcolor, link, text и vlink. Валидный код в таком случае будет только если использовать переходный <!DOCTYPE …>.
Использование атрибутов bgproperties, bottommargin, leftmargin, rightmargin и topmargin и вовсе осуждается спецификацией HTML и их наличие приведёт к невалидному коду. А браузер Mozilla Firefox не поддерживает эти атрибуты в принципе.
Ну и отдельно про атрибут scroll. Использовать его особенно не рекомендуется. Мало того, что его наличие сделает код невалидным, так он ещё и не поддерживается почти всеми браузерами кроме Internet Explorer.
Что такое фоновый тег в HTML? (с изображением)
В HTML нет такого понятия, как фоновый тег. То, что могло называться фоновым тегом в старых версиях HTML — атрибут background тега
HTML — использовалось для отображения фонового изображения для веб-страницы. Текущая рекомендация Консорциума World Wide Web (W3C) — HTML 4.01 / XHTML 1.0. В этой рекомендации фоновый атрибут устарел. : он больше не считается допустимым HTML.Связанный атрибут bgcolor , который можно рассматривать как фоновый тег, также устарел. Фоновые теги предоставляли подробную информацию о фоне для веб-страниц в более старых версиях HTML, но эта функция выполняется с помощью таблиц стилей в более новых версиях.Каскадные таблицы стилей (CSS) следует использовать для установки всех фоновых эффектов на допустимой веб-странице HTML или XHTML. Использование CSS для определения свойств фона намного более гибкое, чем старый метод. Атрибут background или тег background был ограничен отображением фонового изображения. Свойства фона в CSS могут определять, где начинается фоновое изображение, как оно повторяется и будет ли оно прокручиваться вместе с остальной частью страницы или оставаться на том же месте. Свойства фона CSS можно применять ко всей веб-странице или элементам на странице.
Свойства фона включают background-color , background-image , background-attachment , background-position и background-repeat . Все эти свойства можно объединить в свойстве background, а не задавать как отдельные свойства.Это называется сокращенным свойством.
Как и старый атрибут bgcolor, цвет фона может быть в форме значения RGB, шестнадцатеричного кода или имени цвета. Фон любого элемента, к которому применяется это свойство, будет отображаться в этом цвете. Значением background-image является URL-адрес изображения.
Другие свойства — background-attachment, background-position и background-repeat — могут быть определены, но если это не так, будут использоваться значения по умолчанию. Background-repeat используется для повторения фона либо по вертикали, либо по горизонтали; по умолчанию он повторяется по вертикали и горизонтали.Фоновое прикрепление заставляет фоновое изображение либо прокручиваться вместе с остальной частью страницы, что используется по умолчанию, либо оставаться на одном месте. Положение фона по умолчанию — это верхний левый угол элемента.
Различные веб-браузеры могут по-разному отображать свойства фона или требовать более конкретных определений в CSS.Например, хотя Internet Explorer® 8 поддерживает значение наследования для некоторых свойств, он не поддерживает его для фоновых свойств. В Firefox® свойство background-position не работает должным образом, если для свойства background-attachment не установлено значение fixed. Разработчики должны протестировать свои страницы в различных браузерах, чтобы убедиться, что они отображаются должным образом.
HTML: тег
HTML5 Документ
Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:
Пример HTML5 от www.techonthenet.com
Заголовок 1
Тест по математике в пятницу .
В этом примере документа HTML5 мы создали тег , который группирует три элемента управления для имени, адреса и телефона. Мы добавили тег
HTML 4.01 Переходный документ
Если вы создали новую веб-страницу в HTML 4.01 Переходный, ваш тег может выглядеть так:
HTML 4.01 Transitional Example by www.techonthenet.com
Заголовок 1
Тест по математике в пятницу .
В этом HTML 4.01 Пример переходного документа, мы создали тег , который группирует три элемента управления для имени, адреса и телефона. Мы добавили тег
Переходный документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть так:
Переходный пример XHMTL 1.0 от www.techonthenet.com
Заголовок 1
Тест по математике в пятницу .
В этом примере переходного документа XHTML 1.0 мы создали тег , который группирует три элемента управления для имени, адреса и телефона.Мы добавили тег
Строгий документ XHTML 1.0
Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть так:
XHTML 1.0 Строгий пример от www.techonthenet.com
Заголовок 1
Тест по математике в пятницу .
В этом примере строгого документа XHTML 1.0 мы создали тег , который группирует три элемента управления для имени, адреса и телефона. Мы добавили тег
XHTML 1.1 Документ
Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть так:
XHTML 1.1 Пример с сайта www.techonthenet.com
Заголовок 1
Тест по математике в пятницу .
В этом примере документа XHTML 1.1 мы создали тег , который группирует три элемента управления для имени, адреса и телефона. Мы добавили тег
5.3. Цвета документа и фоновые изображенияHTML 4 и XHTML стандарты предоставляют ряд атрибутов для тега которые позволяют определять цвета текста, ссылок и фона документа в в дополнение к определению изображения, которое будет использоваться в качестве фона документа.Internet Explorer расширяет эти атрибуты, чтобы включить документ поля и лучший контроль фонового изображения. И, конечно же, новейшие технологии таблиц стилей, интегрированные в текущие браузеры позволяют управлять всеми этими различными параметрами отображения.5.3.1. Дополнения и расширения тегаАтрибуты, управляющие фоном документа, цветом текста и поля документа используются с ярлык. Раздел 3.8.1, «Тег»5.3.1.1. Атрибут bgcolorОдин стандартный, хотя и устаревший, способ изменить цвет фона по умолчанию в окно браузера в другой оттенок с помощью bgcolor атрибут для тега . Словно цветовой атрибут для тег , необходимое значение Атрибут bgcolor может быть выражен в любом из двумя способами: как красный, зеленый и синий (RGB) компоненты желаемого цвет или как стандартное название цвета. Приложение G, «Названия и значения цветов» предоставляет полное обсуждение цветового кодирования RGB вместе с таблица допустимых названий цветов, которые можно использовать с атрибут bgcolor.Установить цвет фона очень просто. Чтобы получить чистый красный фон используя кодировку RGB, попробуйте: Для более тонкого фона попробуйте: 5.3.1.2. Атрибут фонаЕсли цветного всплеска недостаточно, вы также можете разместить изображение в фон документа с фоновый атрибут в его тег .Требуемое значение атрибута фона: URL-адрес изображения.Браузер автоматически повторяет (мозаично) изображение как по горизонтали, так и по вертикали, чтобы заполнить все окно. Обычно следует выбирать небольшое, несколько тусклое изображение, чтобы создать интересный, но ненавязчивый фоновый узор. Кроме того, небольшой, простое изображение проходит по сети намного быстрее, чем сложное, полноэкранное изображение. На рис. 5-21 показано, как расширенные браузеры рендеринг одного кирпича, чтобы создать стену из кирпичей для документа фон: Рисунок 5-21. Один кирпич превращается в множество на фоне NetscapeФоновые изображения различных размеров и размеров создают интересные вертикальные и горизонтальные эффекты на странице. Например, высокий тонкое изображение может выделять заголовок вашего документа:
Если файл vertical_fountain.gif — узкий, высокий изображение, цвет которого становится светлее к основанию и длина которого превышает длину тела документа, итоговый документ может выглядит так, как показано на Рисунке 5-22. Рисунок 5-22. Высокий и худой фонВы можете добиться аналогичного эффекта по горизонтали с изображением, которое намного шире, чем длинное (см. Рисунок 5-23). Рисунок 5-23. Длинный и худой фонАтрибут background не рекомендуется в HTML 4. и XHTML, поскольку вы можете добиться аналогичных эффектов с помощью таблиц стилей. 5.3.1.3. Атрибут bgpropertiesbgproperties расширение атрибута для Тег является эксклюзивным для Internet Explorer и работает только вместе с фоном расширение атрибута. Атрибут bgproperties имеет одно фиксированное значение. Замерзает фоновое изображение в окно браузера, поэтому оно не прокручивается с другим содержимым окна. Следовательно, пример h3Omark.gif фоновое изображение служит водяной знак для документа:5.3.1.4. Текстовый атрибутКак только вы измените цвет фона документа или добавить фоновое изображение, вы также может потребоваться настроить цвет текста, чтобы пользователи могли читать текст. Стандартный текстовый атрибут HTML 4 / XHTML для тег делает именно это: он устанавливает цвет всего текста без привязки во всем документе.Присвойте текстовому атрибуту значение цвета таким же формат, используемый для указания цвета фона (см. bgcolor в Разделе 6.3.1.1, «Разрешенный контент») — триплет RGB или название цвета, как описано в Приложении G, «Названия и значения цветов». Для Например, чтобы создать документ с синим текстом на бледно-желтом фон, используйте: Конечно, лучше выбрать цвет текста, который хорошо контрастирует с вашим цветом фона или изображением. Текстовый атрибут устарел в HTML 4 и XHTML, поскольку вы можете добиться аналогичных эффектов с помощью таблиц стилей. 5.3.1.5. Атрибуты link, vlink и alinkВ ссылка, vlink и атрибуты alink Тег управляет цветом гипертекста (тег ) в ваших документах. Все трое принимать значения, которые определяют цвет как триплет RGB или имя цвета, точно так же, как текст и bgcolor атрибуты.Атрибут ссылки определяет цвет всех гиперссылки, по которым пользователь еще не переходил. В Атрибут vlink устанавливает цвет всех ссылок, пользователь следил в то или иное время.В Атрибут alink определяет цвет активной ссылки текст — тот, который в данный момент выбран пользователем и находится под курсор мыши с нажатой кнопкой мыши. Как и цвет текста, вы должны быть осторожны при выборе цветов ссылок, которые могут читаться на фоне документа. Кроме того, цвета ссылок должны отличаться как от обычного текста, так и друг от друга. Эти атрибуты устарели в HTML 4 и XHTML, так как вы можете добиться аналогичных эффектов с помощью таблиц стилей. 5.3.1.6. Атрибут leftmarginСвойство Internet Explorer, левое поле расширение атрибута для Тег позволяет отступать от левого поля относительно левого края окна браузера, как и поля на листе бумаги. Другие браузеры игнорируют этот атрибут и обычно выровненное по левому краю содержимое тела примыкает к левому краю окно документа.Значение атрибута leftmargin — это целое число пикселей для этого отступа левого поля; ценность по умолчанию.Поле заполняется цветом фона или изображение. Например, Internet Explorer отображает следующий текст по ширине с полем в 50 пикселей от левого края браузера окно (см. Рисунок 5-24): Internet Explorer позволяет делать отступ для Рисунок 5-24. Атрибут leftmargin в Internet Explorer для отступа содержимого текста5.3.1.7. Атрибут topmarginКак и leftmargin, расширение атрибута topmargin в настоящее время является эксклюзивным в Internet Explorer. Internet Explorer может предоставить ваши документы небольшой дополнительный запас по высоте. Рисунок 5-25. Атрибут topmargin в Internet Explorer для уменьшения содержания основного текста5.3.1.8. Атрибуты стиля и классаВы также можете установить все различные связанные со стилями функции, а затем некоторые с каскадными таблицами стилей. Но хотя ты может включать атрибут стиля с, чтобы создать встроенный стиль для всего содержимого тела, мы рекомендуем вам установить стили для весь текст документа на уровне документа (тег |