Параметры css width и height для задания размеров элементов html страницы : WEBCodius
Здравствуйте, уважаемые читатели! Сегодня мы рассмотрим как задавать размеры блочных элементов веб страницы с помощью css свойств и настроить отображение контента в случае если он не помещается в элементе.
width и height — ширина и высота элементов в css
С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:
width: auto|<ширина>|inherit
height: auto|<ширина>|inherit
В качестве значений можно использовать любые доступные в css единицы измерения — например, пикселы (px), дюймы (in), пункты (pt) и др.:
p {width:200px; height:150px}
Кроме абсолютных единиц можно задавать относительное значение размера элементов в процентах. В этом случае ширина и высота элемента будет зависеть от ширины и высоты родительского элемента. Если родитель явно не указан, то размеры будут зависеть от окна браузера.
div {width:40%;}
Значение auto отдает управление размерами элемента веб-браузеру и является значением по умолчанию. В этом случае размеры элемента будут такие, чтобы в нем полностью поместилось все его содержимое.
Рассмотрим несколько примеров.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>width and height</title>
<style>
.layer1 {
width: 300px;
height:300px;
background: #fc0;
border: 1px solid #ccc;
}
.layer2 {
background: #eee;
}
</style>
</head>
<body>
<div>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
</div>
</body>
</html>
Результат:
В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.
Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:
.layer2 {
background: #eee;
width:250px;
}
Результат:
Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.
Теперь давайте зададим высоту и ширину абзаца в процентах:
.layer2 {
background: #eee;
width:50%;
height:50%;
}
Результат:
Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.
При задании ширины и высоты каких-либо элементов в относительных единицах, может понадобиться указать минимальные и максимальные возможные размеры. Ведь, например, при изменении размеров окна браузера размеры элемента могут уменьшаться и увеличиваться до таких размеров, что удобочитаемость сайта станет очень низкой.
Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:
min-width: <ширина>
min-height: <высота>
Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:
max-width: <ширина>
max-height: <высота>
Понятно, что при задании максимальных и минимальных значений высоты и ширины, размеры элемента не смогут стать больше максимального и меньше минимального значений.
Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов, так как для строчных элементов эти параметры браузером не обрабатываются.
Может получиться так, что при задании жестких параметров высоты и ширины элементу, содержащийся в нем контент может не вписаться в ограниченную область.
Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:
.layer2 {
background: #eee;
width:100px;
height:100px;
}
Результат:
Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.
Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Результат:
Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.
Теперь у первого абзаца ограничим ширину:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Результат:
Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.
Ну а теперь ограничим у первого абзаца и высоту:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
В результате получилось, что текст в такой ограниченный абзац не влазит и поэтому он наехал на область нижнего соседа. Соответственно прочитать текст ни в первом ни во втором абзацах практически не возможно. Именно для управления поведением контента в таких ситуациях существует правило overflow:
overflow: visible|hidden|scroll|auto|inherit
По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.
Правило overflow:hidden скрывает все, что не помещается в контейнере:
Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:
<p> Текст первого абзаца</p>
Наиболее популярным и логичным решением, если вам понадобится сделать полосы прокрутки для контейнера является значение auto. В этом случае браузер сам будет определять когда и по каким осям стоит отображать полосы прокрутки:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Результат:
Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом overflow-x отвечает за горизонтальную ось, а overflow-y за вертикальную ось.
Поэтому если вам, например, нужно чтобы в абзаце горизонтальная прокрутка не появлялась никогда, а вертикальная появлялась только по необходимости, то достаточно написать следующее правило css:
p{overflow-x:hidden;overflow-y:auto;}
И задача будет решена.
На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:
CSS — width в процентах%
CSS — width в процентах%Процент это единица измерения элемента относительно содержащего его блока. Это здорово работает для изображений: здесь мы устанавливаем габариты для изображения, ширина которого всегда равна 50% от ширины контейнера. Попробуйте сузить размер окна браузера, чтобы увидеть что происходит!
article img {
float: right;
width: 50%;
}
Вы даже можете использовать max-width что бы ограничить максимальный и минимальный размер картинки!
percent width layout
Вы можете использовать процент для создания шаблона, однако такой подход потребует больше работы. В этом примере, содержание элемента nav начинает обволакиваться неприятным образом, когда окно браузера слишком узкое. Все зависит от того, что лучше работает с вашим контентом.
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
} Когда макет слишком узкий, элемент nav сплющивается. Хуже того, вы не можете использовать min-width для nav чтобы это исправить, потому как данное свойство не удержит от наступления колонку справа.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section> 13 / 19seodon.ru | Учебник HTML — Изображения
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.
Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер—качество изображения — это GIF, JPG (JPEG) и PNG.
В следующих уроках вы научитесь вставлять изображения в HTML-страницы и использовать их по своему усмотрению. Чтобы не искать нужные для обучения картинки — вы можете скачать их по этой ссылке.
Тег <IMG> или как вставить изображение в HTML?
Для вставки изображения в HTML страницу используется тег <IMG>. Это самый обычный встроенный (inline, уровня строки) элемент, то есть он не создает впереди и после себя переводы строк в начало. Но вот содержимого у него не может быть, так как <IMG> не имеет закрывающего тега и является пустым.
У тега <IMG> есть два обязательных атрибута — это src, который указывает путь (URL) к изображению и alt, выводящий альтернативный текст, когда в браузере отключен показ изображений. Если src вы вряд ли забудете указать, ведь без него изображение просто-напросто не загрузится, то про alt очень часто забывают даже опытные вебмастеры. А все потому, что все браузеры спокойно воспринимают отсутствие alt, не считая это ошибкой. Ну что же, я постараюсь сделать так, чтобы вы не забыли о нем, даже разбуди вас ночью.
Атрибут src использует абсолютно такие же значения адресов, что и атрибут href тега <A>, которые мы рассматривали в уроке Ссылки и их разновидности, только ведут они к изображениям. Ну и, естественно, можно указывать как абсолютные, так и относительные адреса.
Пример вставки изображений в HTML-страницу
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Вставка изображений в HTML</title>
</head>
<body>
<div>
<img src="image/straus.gif" alt="Бегущий страус">
<img src="image/orel.gif" alt="Летящая птица">
Такие вот разные птицы.
</div>
</body>
</html>Результат в браузере
Такие вот разные птицы.Если отключите в своем браузере показ изображений, то увидите альтернативный текст атрибута alt.
Изменение размеров изображений в HTML
По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега <IMG> можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.
Пример изменения размеров изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размеров изображений</title>
</head>
<body>
<div>
<img src="image/orel.gif" alt="Летящая птица">
</div>
</body>
</html>Результат в браузере
Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.
Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.
Ребята, еще раз хочу обратить ваше внимание на то, что только в размерах атрибута style указываются единицы измерения пиксели и пункты (px, pt), а все потому, что он относится к CSS. У всех (абсолютно всех) остальных атрибутов HTML, которые мы с вами изучили и еще изучим, пиксельный размер пишется просто цифрами, без указания единиц измерения. И только процентные размеры и там и там указываются со знаком %. Кстати, ошибки связанные с этой путаницей занимают одно из первых мест у новичков, так что перечитайте это примечание еще раз и будьте внимательны.
Выравнивание изображений
В старых версиях HTML для выравнивания изображений у тега <IMG> имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.
Вы уже сталкивались с выравниванием в уроке о Выравнивании содержимого тегов, но как вы знаете, его нельзя применять к встроенным тегам, таким, как <IMG>, да и никакого эффекта это не даст. Поэтому и значения атрибута style будут совершенно другие, предназначенные для выравнивания не содержимого, а HTML-элемента целиком:
style=»float:left» — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.
style=»float:right» — прижимает изображение к правой стороне блока, а текст обтекает его слева.
Пример выравнивания изображения по левому краю.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Выравнивание изображений</title>
</head>
<body>
<p>Первый параграф.</p>
<p>Текст перед картинкой.
<img src="image/orel.gif" alt="Летящая птица">
После картинки.
</p>
<p>Последний параграф.</p>
</body>
</html>Результат в браузере
Первый параграф.
Текст перед картинкой. После картинки.
Последний параграф.
Как видите, первый параграф-блок выравнивание не затронуло, зато весь текст второго параграфа и третьего параграфа обтекли картинку справа.
Хорошо, а если нам не надо, чтобы нижестоящие блоки обтекали изображение? В этом случае вам поможет еще одно значение атрибута style, которое вы можете применить внутри любого блочного тега.
style=»clear:left» — прерывает обтекание изображений выровненных по левой стороне.
style=»clear:right» — прерывает обтекание изображений выровненных по правой стороне.
style=»clear:both» — прерывает обтекание изображений выровненных по обеим сторонам.
Пример прерывания обтекания изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Прерывание обтекания изображений</title>
</head>
<body>
<p>Первый параграф.</p>
<p>Текст перед картинкой.
<img src="image/orel.gif" alt="Летящая птица">
После картинки.
</p>
<p>Последний параграф.</p>
</body>
</html>Результат в браузере
Первый параграф.
Текст перед картинкой. После картинки.
Последний параграф.
Создание внешних отступов у изображений
Я думаю, вы обратили внимание, что изображения всегда вплотную прижимаются к окружающим элементам. Будь в предыдущем примере не тег параграфа а, например, блок <DIV>, то рисунок вообще со всех сторон было бы прижат. Так вот, в старом HTML у тега <IMG> были два атрибута, hspace и vspace, которые изменяли размер внешних полей (отступов) между изображением и окружающими элементами, но теперь их нет и неизвестно, сколько еще времени браузеры будут их поддерживать. Поэтому вновь применяем атрибут style, общий синтаксис такой:
style=»margin:размер» — Устанавливает одинаковый размер полей для всех сторон изображения.
style=»margin:сверху справа снизу слева» — Размеры полей для каждой стороны, пишутся через пробел по часовой стрелке.
В качестве значений можете указывать известные вам единицы измерения: пункты (pt), пиксели (px), проценты (%), чаще всего применяют пиксели. Кстати, если каким-то из значений у вас является ноль (0), то единицы измерения можно не ставить, а можно и ставить — в данном случае без разницы.
Пример изменения полей вокруг изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размеров внешних полей</title>
</head>
<body>
<p>Текст перед картинкой.
<img src="image/orel.gif" alt="Летящая птица">
После картинки.
</p>
</body>
</html>Результат в браузере
Текст перед картинкой. После картинки.
Всплывающий текст-подсказка у изображений в HTML
Как и у многих других HTML-тегов, у тега <IMG> есть атрибут title, выводящий текстовую подсказку при наведении курсора мыши на изображение.
title=»Любой текст.»
Примера не будет, так как тут все элементарно. Главное не путайте title и alt. Содержимое alt отображается, если в браузере отключен показ картинок и, в отличие от title, он является обязательным атрибутом.
Иногда у меня возникает чувство, что я пишу учебник по CSS, а не по HTML — так часто мы используем style. Но что делать, если столько тегов или их атрибутов стали устаревшими в современном HTML. Ну вам-то это только на пользу — не будете, как я, переучиваться.
Домашнее задание.
- В папке, где находится ваша страничка, создайте подпапку с названием image и пусть все ваши рабочие изображения хранятся там.
- Создайте первый параграф и укажите там одно изображение, но три раза: в натуральный размер, в два раза больше, увеличьте только ширину.
- Во втором параграфе сделайте рисунок среди текста, пусть его боковые поля будут по 30px и имеется всплывающая подсказка.
- Ниже создайте изображение и пусть его левое и нижнее поля будут равны 20px
- Еще ниже напишите два параграфа и сделайте так, чтобы текст первого обтекал указанное выше изображение слева.
- В конце сделайте так, чтобы один из рисунков примеров данного урока загрузился на вашу страницу прямо с сайта Сеодон. Как? Подумайте.
Посмотреть результат → Посмотреть ответ
Атрибут height | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
| HTML | |
| XHTML | |
Значения
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная высота изображения.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег IMG, атрибут width</title>
</head>
<body>
<p><img src="/images/sample.gif"
alt=""></p>
</body>
</html>Как изменить размер таблицы в HTML
Размеры таблицы, ее высота и ширина, определяются автоматически в зависимости от того, что содержат внутри себя ячейки. Чем больше наполнения в ячейках, тем больше размеры таблицы и наоборот.
Однако возможности CSS позволяют изменить размер таблицы в HTML, указывая именно те значения ширины и высоты, которые необходимы. Справедливости ради следует отметить, что еще атрибуты таблицы позволяют задавать нужные размеры. Однако, в настоящий момент мы поговорим лишь о CSS.
Необходимо подчеркнуть, что каждая таблица имеет свою минимальную ширину и минимальную высоту, на которые влияет ее содержание. И даже если вы зададите значения ширины и высоты еще меньше, то ничего не произойдет. Стороны таблицы не переступят свой минимум.
Чтобы указать ширину таблицы необходимо использовать CSS-свойство width, а чтобы задать высоту необходимо применять свойство height.
На примере это выглядит следующим образом.
table {
width: 500px;
height: 100px;
}Результат в браузере:
Полный код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица с заданными размерами</title>
<style>
table {
border: solid 1px blue;
border-collapse: collapse;
width: 500px;
height: 100px;
}
td, th {
border: solid 1px blue;
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Таблица с заданными размерами</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</table>
</body>
</html>Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.
Если вы используете проценты, чтобы задать размеры таблицы, то они будут высчитываться, отталкиваясь от размеров родительского элемента. Если говорить о нашем примере, то речь идет про окно браузера.
Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.
width: auto;или
height: auto;Хотим акцентировать ваше внимание на еще таком важном моменте. Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.
Указание размеров отдельных ячеек и столбцов
Если вы считаете, что браузер не корректно задал ширину колонок, отталкиваясь от содержимого ячеек, то вы вправе размеры ячеек и столбцов указать самостоятельно. И сейчас мы поговорим о том, как изменить размер ячейки в таблице HTML.
Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height.
Чтобы добавить стили ячейкам, можно использовать один из двух вариантов:
- Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
class="cell-50px"А после этого следует применить стили для данных классов.
- Задействовать атрибут style, внутри которого прописать необходимый CSS-код.
На практике второй вариант будет выглядеть следующим образом:
<td>
...
</td>Однако, хотим отметить, что менять размеры ячеек по отдельности необходимость возникает не так уж часто. Как правило, это делается в тех ситуациях, когда необходимо задать определенную ширину столбцов таблицы. В таком случае, задача решается проще. Необходимо всего лишь указать ширину ячеек первой строки.
Пример:
<table>
<caption>Таблица с заданными размерами</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</table>Результат в браузере:
Как изменить размер шрифта в таблице
Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size. Давайте зададим размер шрифта для элементов <th>:
th {
font-size: 30px;
}На этом данный урок заканчивается. Предлагаю хорошенько поразмыслить над домашним заданием. Прямо так внимательно его изучите и порассуждайте. Всем всего хорошего!
Атрибут width | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
| HTML | |
| XHTML | |
Значения
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина изображения.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег IMG, атрибут width</title>
</head>
<body>
<p><img src="images/sample.gif"
alt=""></p>
</body>
</html>