Шпаргалка по верстке для больших и маленьких


Приветствую!
Шпаргалка по верстке для больших и маленьких
Хочу представить вашему вниманию небольшую шпаргалку, в которой собраны решения некоторых из часто встречающихся проблем, а также кое-какие малоизвестные, на мой взгляд, факты.

Статья рассчитана скорее на новичков и на людей, имеющих косвенное отношение к верстке, но которым по долгу службы часто приходится иметь с ней дело. Возможно, даже гуру верстки найдут в ней что-нибудь новое для себя, если давно не совершенствовали свои навыки.

CSS

Нулевая высота блока с плавающими элементами.

Часто эту проблему решают, задавая float: left родительскому элементу. Но флоатомания (float: left — везде!) – не самая лучшая привычка. Она противоречит хорошему тону написания стилей, и порой приводит к неприятным последствиям.
Оптимальным решением такой проблемы будет:

overflow: hidden


Но нужно помнить, что это свойство не может быть применено к блокам, за пределы которых будут выходить дочерние элементы.

Шпаргалка по верстке для больших и маленьких
Центрирование текста относительно изображения

Лично у меня такая задача постоянно возникает при верстке блока с именем разработчика сайта в футере. Самым простым и экономящим код решением будет назначение изображению свойства vertical-align с отрицательным значением:

div.class img {vertical-align: -50%;}


Шпаргалка по верстке для больших и маленьких
При этом верстка вокруг не едет, смещается только текст около картинки. Такой прием прекрасно работает во всех основных браузерах.

UPD. Намного лучший прием подсказал пользователь equinox7
vertical-align: middle



Выбор элементов по атрибутам

Странно, но немногие знают, что помимо id и class, любой атрибут можно использовать для выбора элементов. Более того, нам не обязательно знать значение атрибута целиком.
Синтаксис:
элемент[атрибут=”значение”]
элемент[атрибут^=”начальная часть значения”]
элемент[атрибут$=”окончание значения”]
элемент[атрибут*=”подстрока, содержащаяся в значении”]

Примеры:

img[title]  /* все изображения с атрибутом title */
a[href=”http://habrahabr.ru/”] /* ссылка с определенным урлом */
a[href^=”http://”] /* ссылка на внешний ресурс */
a[href$=”.pdf”] /* ссылка на .pdf файл */
img[src*=”habr”] /* файл изображения, в имени которого есть подстрока ”habr” */


Указание версии css файла

Бывает ситуации, когда в css рабочего файла вносятся правки. Но современные браузеры активно кешируют файлы стилей, и конечный пользователь может увидеть изменения еще очень нескоро. Как же нам форсировать события?
Очень просто. В строке подключения css файла, в атрибуте href после имени файла пишем “?v=версия_файла”.
Пример:

<link rel="stylesheet" media="all" href="..css/style.css?v=1" />

Браузер запоминает этот параметр, и проверяет его при каждом посещении сайта. Если версия файла изменится… ну вы и сами все поняли:)

Разные значения border у одного элемента

Предположим, у блока 4 границы, и у всех разные цвета. Можно задать это вот так:

border-top: 1px solid red;
border-right: 1px solid green;
border-bottom: 1px solid blue;
border-left: 1px solid yellow;

Но есть более короткий и красивый путь:

border: 1px solid red;
border-color: red green blue yellow;

По аналогии с margin или padding, в последней строке последовательно задаются цвета для верхней, правой, нижней и левой границ.
Такой же прием можно провернуть и с другими параметрами границ:


Шпаргалка по верстке для больших и маленьких

HTML5

Шпаргалка по верстке для больших и маленьких

Спецификацию HTML5 утвердили на этой неделе, и это отличный повод начать делать сайты нового поколения!

Возможно, вы не захотите переходить на новый стандарт, так как думаете, что старые браузеры не будут корректно отрисовывать новые теги… Что ж, они и правда не будут этого делать. Но всего 2 простые корректировки позволят это исправить.

Добавим новые теги с помощью javascript:

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('section');
      document.createElement('footer');
      document.createElement('nav');
      document.createElement('article');
      document.createElement('aside');
   </script>
<![endif]-->

Немного подкорректируем css:

header, section, footer, nav, article, aside {display: block;}



Вуаля! Теперь наши старички прекрасно отображают сайты с новыми стандартами верстки.
Шпаргалка по верстке для больших и маленьких
Если вы по каким-то причинам не хотите или не можете использовать новые теги, то хотя бы указывайте новый доктайп. Этим вам врядли удастся что-то испортить:

<!DOCTYPE html>


Не правда ли, он прекрасен? Несите добро — указывайте новый доктайп!

На этом все. Надеюсь, кому-то эти советы помогут в нелегком деле верстальщика. Успехов!

источник http://habrahabr.ru/post/163871/


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

Небольшая PHP библиотека для SEO

Намедни написал небольшую библиотеку для оптимизаторов и вебмастеров, которым приходится работать с разными CMS на разных версиях PHP. Однако, и некоторые программисты тоже найдут ее полезной.... читать далее

Четыре облома собственного бизнеса

Полезная статья для желающих начать свой бизнес с хабрахабр.ру Есть четыре основных мотива, которые подталкивают к началу своего бизнеса. Парадокс: все четыре – ошибочны! Что обычно называется в... читать далее

Web-разработка / Ссылка Поддержка браузерами модели RGBa

Модель RGBa отличается от RGB тем, что позволяет дополнительно указать прозрачность цвета. Это тоже самое, что и привычное нам написание background и opacity. Но последнее делает прозрачным все... читать далее

Каскадные Таблицы Стилей / Вспомогательные классы

Лично мне, иногда, при верстке очередной страницы или изменении существующей, требуется (или просто хочется) добавить несколько простейших параметров стилей. Писать определение стиля в разметке не... читать далее

Яндекс / Ссылка Информация о поисковых запросах для вашего сайта

В сервисе Яндекс. Вебмастер появился отчет "Поисковые запросы". В нем отображается информация о 25 запросах, по которым сайт наиболее часто показывался в результатах поиска, а также о 25... читать далее

Web-разработка / Верстка для мобильных устройств

Общая информация Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте Власти Египта намерены построить для страны новую столицу, сообщает AOinform.com