Применение свойств Width и Height
В сегодняшнем уроке, я покажу Вам, как можно задавать ширину и высоту различных элементов на страницах вашего сайта. Ведь для всех Вас не секрет, что все элементы на странице имеют свою ширину, даже если мы не указываем ширину определенных элементов, она подстраивается автоматически, но существуют различные нюансы, о которых сегодня мы говорить не будем. А изучим сегодня два важнейших css свойства при создании сайта, width и height.
Мы будем рассматривать эти свойства на примерах. Для этого нам будет необходимо прописать некоторый html код, с которым мы будем работать и применять к нему данные свойства.
<html>
<head>
<title>Ширина и высота</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p>Здесь написан текст, к которому будет применена определенная ширина. Здесь написан текст, к которому будет применена определенная ширина.</p>
<div></div><br />
<img src="images/car.jpg" alt="Автомобиль" />
</body>
</html>
В данном html коде мы создали параграф с текстом, пустой блок, а также изображение, которое изначально имеет довольно большое расширение. Попробуйте открыть файл в браузере без применения css стилей, и посмотрите результат, который получился, чтобы потом смогли проанализировать, почему получилось именно так, после добавления определенных свойств. Ну что же, теперь добавим их.
p {
width: 200px;
}
div {
background: #df8a3d;
width: 70px;
height: 50px;
}
img {
width: 30%;
}
Если вы запускали html код до применения стилей и запустите сейчас, Вы увидите, что все изменилось, причем довольно сильно.
К абзацу мы применили css свойство width, которое устанавливает ширину элемента, и задали ей фиксированное значение в 200 пикселей. Данная ширина не изменится никогда, при любых разрешения, она будет оставаться такой как Вы и указали.
К блоку мы применили свойство, пройденное нами ранее, а именно мы установили цвет фона, а также тоже установили фиксированную ширину и высоту, при помощи свойств width и height. Помните, что при открытии файла без стилей, блока div в браузере мы вообще не видели. Ведь мы не добавляли внутрь данного тега никакой информации, а как я писал ранее, этот тег является всего лишь оболочкой, и чтобы ее увидеть мы добавили указанные стили.
Что касается изображения, то мы задали для него ширину, указав значение не в пикселях, как в предыдущих примерах, а указали значение в процентах, которое не является фиксированным, а будет видоизменяться в зависимости от ширины окна браузера. Данное значение означает, что наша картинка будет занимать место в размере 30 процентов, от ширины окна вашего браузера, т.е. чем больше разрешение пользователя, тем больше будет картинка, чем меньше разрешение, тем меньше будет данная картинка. Вы можете поэкспериментировать, сжимая и растягивая окно вашего браузера.
На этом все, что я хотел сегодня рассказать Вам, надеюсь, данная информация будет полезной для Вас, и Вы будете использовать данные свойства в своей повседневной практике при создании сайтов.
