Внимание, блог тестовый, а материалы в нем нечитабелны (это пока что просто наброски для дальнейшей моей обрабтоки).
Поэтому, если вы его покинете, как можно скорее, убережете себя от потери времени.
test
Ричард Руттер, владелец популярного блога о веб-дизайне Clagnut (www.clagnut.com), написал ключевой пост о веб-типографии еще в мае 2004. Пост Руттера в блоге, названный «Как изменить размер текста, используя ems» (www.clagnut.com/blog/348/) рассказывал простой способ, который считается с наследственностью и изменением величины процентных свойств и ключевых слов (даже и в ИЕ) и точностью текста.
Принципом метода Ричарда была простая строчка в CSS:
body {font-size: 62%;}
Почему 62%? Вспомните, что почти все современные веб-браузере обладают изначально настроенным размером текста 16 пикселей. Так как 62,5% от 16 пикселей это 10 пикселей, любой элемент, который является «братом» элемента body, после этого настроился так, чтобы показывать текст на основе 10-пиксельного четырехугольника. Поймите, что 100% равняются 1em. Наши расчеты теперь очень просты, если 1em равен 10 пикселям, 0,8em = 8 пикселям, 1,4em = 14 пикселям и т.д.
Среди сегодняшних дизайнеров, направленных на стандарты, это скорее всего один из самых популярных способов смены размера письма, а мы можем этот способ назвать самым лучшим.
Часто приходится отцентровывать целый лэйаут на середину окна браузера. Если думаете, что это будет работать без всяких хаков, ошибаетесь. Обойти эти ошибки можно довольно просто (а можете использовать это для отцентровки других элементов в лэйауте, не обязательно целой страничке, что является бонусом.
Единственным услвоием является, чтобы у вас вокруг целого лэйаута был «обал». Для этого можете использовать див с идентификатором «обал».
<div id=»obal»>
…
</div>
body {text-align: center;
min-width: 800px;}
#obal {margin: 0 auto;
width: 800px;
text-align: left;}
Установкой text-align: center элменту боди отцентруете лэйаут в ИЕ.ВИН благодаря одной из его викресловацих ошибок, в то время, как размер свойства min-width: 800px (который должен был бы соответствовать размерам элементов с идентификатором обал) исправляет странное поведение некоторых старших версий браузеров Нетскейп и Файрфокс. Автоматически до считанный левый и правый внешний край элемента с идентификатором обал удержит все централизовано в других браузерах а text-align: left снова исправляет выравнивание текста вшаего лэйаута(иначе благодаря предыдущему правилу текст бы выравнивался по центру)
Способо много. Вот один, очень элегантный.
В нижеприведенном коде, внутренний блок вытекает из внешнего.
CSS: Войны специфичности
Присоединяйся ко мне и мы будем править вселенной, как отец и компьютерный маньяк!
Несколько недель назад в Купертино, я видел, как Aaron объяснял, как специфичность CSS селекторов рассчитывается способом, который я еще никогда не видел. А сегодня я столкнулся с довольно запутанной проблемой при работе с XHTML и CSS шаблоном для нового проекта, где два селектора вели себя иначе, чем я рассчитывал и я осознал, что не закончил мой тренинг.
Цель: заменить стандартную системную кнопку на рисунок (кнопку с абсолютно любым дизайном)
1) border: 0 none;
2) In HTML value=» »
Example:
HTML
<div><input name=»search» type=»submit» class=»searchBtn» value=» » /></div>
CSS
.loginBtn {
background-color:transparent;
background-image:url(/data/Image/Templates/loginBtn.png);
background-repeat:no-repeat;
border:0 none;
color:transparent;
height:30px;
width:92px;
}
1. Приходилось ли Вам читать чужой код с длинными селекторами? На этой страничеке находится переводчик кода на английский или испанский язык.
http://gallery.theopalgroup.com/selectoracle/
2. На страничке Энди Кларка очень подробно объясняется свойства специфичности на примере картинок из звездных войн. Очень просто, понятно и доходчиво.
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Нередко, чтобы не нарушать структуру нашей публикации, мы прячем ссылку за текстом.
Например, «нажми сюда«
Но что, если человеку нужно распечатать страничку, как показать этот линк? Очень просто.
1. Создайте отдельный стиль для печати.
2. Вставьте в него следующий код
a[href^=’http://’%5D:after {
content: » [» attr(href) «]»;
font-size: 90%;
}
Совместно с селектором параметров это правило говорит браузеру:
Если элемент href элемента содержит http:// поместить содержимое параметра href после содержимого элемента а и уменьшить размер текста до 90%.
3. При печати все линки будут выводиться в следующем виде:
Нажми сюда [http://www.google.com/]
Этот селектор показывает, как комбинирование различных селекторов дает больший контроль без необходимости править исходный код
Designer's Blog 