CSS & Изображения
В этой статье предполагается, что вы знаете хотя бы базовый HTML; Вы знаете, что такое тег и как использовать простые теги, такие как тег <img> или <p>. Если это вас смущает, вам нужно прочитать мой учебник для начинающих веб-дизайн - это действительно легко, и людям это нравится, так что давай!
Хорошо, я предполагаю, что все знают, что такое изображения, так как мы все видели изображения на веб-страницах. Изображения технически не вставляются в веб-страницу (если быть точным), скорее изображения связаны с веб-страницами, и обычно мы используем тег изображения (<img>), чтобы создать пространство для хранения (или ссылку на изображение) для изображения ,
Когда кто-то загружает веб-страницу (переходя по URL-адресу), именно браузер на тот момент получает изображение с веб-сервера и вставляет его на страницу, чтобы вы увидели - имеет смысл?
Это отличается от использования такой программы, как, например, MS Word, когда в Word при вставке изображения в документ Word изображение фактически становится «частью» фактического документа. Когда вы сохраняете файл Word, все, что вам нужно отслеживать, это один файл Word, и вы знаете, что вставленные вами изображения будут там, когда вы откроете его снова, независимо от того, куда вы перемещаете файл.
Как и в случае с HTML-страницей, поскольку вы ссылаетесь только на изображения с тегом image, вы должны убедиться, что изображения, на которые вы ссылаетесь, всегда остаются в одном месте по отношению к веб-странице. Когда люди путают этот путь между HTML-страницей и изображениями, на которые она ссылается, вы получаете значок разорванной ссылки, который все любят видеть. Вы видите этот значок неработающей ссылки, потому что браузер не может найти изображение, на которое вы ссылаетесь, в теге <img>.
Хорошо, если вы не знали много о механизме загрузки изображений на веб-страницах, теперь вы знаете слишком много! Давайте перейдем к чему-то практичному.
Использование CSS для вставки изображений в ваши веб-страницы
Эта следующая часть действительно проста для понимания, проста в использовании и может быть очень мощной - тройной бонус! С помощью CSS для всех блочных и встроенных элементов (тегов) могут быть вставлены фоновые изображения. теги уровня блока <p> и <div>.
Несмотря на то, что вы можете вставлять изображения в теги любого типа (на уровне блока или в строке), я думаю, что в большинстве ситуаций лучше использовать теги уровня блока для такого рода вещей. Но в действительности не имеет значения, используете ли вы теги уровня блока или встроенные теги, потому что вы можете превратить любой тег в тег уровня блока и наоборот; с помощью этого простого кода CSS я изменяю любой тег на уровень блока:
Или наоборот:
И что? Помните мой информационный бюллетень, где я говорил вставка фонов с CSS? Таким же образом вы можете вставлять изображения в фоновые рисунки своих веб-страниц, вы можете делать это с любым другим элементом. Это в сочетании с дополнительным дополнением, и вы получите изображение заголовка, где вы хотите.
Взгляните на этот код, где я использую эту технику:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> CSS размещение изображения </ title> <meta http-equ = "Content-Type" content = "text / html; charset = iso-8859-1"> <style type = "text / css" media = "screen"> # headline1 {background-image: url (images / newsletter_headline1.gif); повторение фона: без повтора; background-position: слева вверху; обивка-топ: 68px; край дно: 50px; } # headline2 {background-image: url (images / newsletter_headline2.gif); повторение фона: без повтора; background-position: слева вверху; обивка-топ: 68px; } </ style> </ head> <body> <div id = "headline1"> Некоторый текст… </ div> <div id = "headline2"> Еще немного текста .. </ div> </ body> </ html>
Чтобы сделать этот пример простым, я вставил код CSS в саму веб-страницу. Обычно я помещаю свой код CSS в отдельный файл CSS и делаю ссылку на него, чтобы я мог повторно использовать код CSS на многих страницах.
В приведенном выше коде CSS вы заметите, что я вставляю фоновое изображение для каждого идентификатора (headline1 и headline2) и увеличиваю отступ в верхней части (padding-top: 68px), чтобы вытолкнуть текст вниз, чтобы освободить место для фоновых изображений.
Это может показаться неясным сейчас, так что просто возьмите посмотрите на страницу а затем откройте исходный код и убедитесь сами. Не стесняйтесь взять копию и поиграть с номером заполнения и посмотреть, как он меняет вещи. Почему я добавил 68px к отступам? Изображение имеет высоту 68px, но я могу указать любое число, которое мне нравится, чтобы получить желаемое место размещения. Обивка не влияет на фоновое изображение; это влияет только на содержимое внутри тега / элемента. В этом случае я использовал теги <div>.
Помните мой информационный бюллетень, где я говорил вставка фонов с CSS?Почему я добавил 68px к отступам?