Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


10 CSS уловок, которые Вы могли не знать.


1. Записываем CSS правила для шрифта в сокращенном виде.


Вместо того чтобы прописывать все свойства по отдельности, например, так:


font-size: 12 px;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;


Мы можем использовать более короткий вариант:


font: 12px/1.5em bold italic small-caps verdana,serif;


Намного лучше!


Но учтите, что эта сокращенная формулировка работает только в том случае, когда Вы указываете и свойство font-size и font-family т.е. нельзя опустить какое-то из этих двух свойств. Также имейте в виду, что если Вы не указываете свойства font-weight, font-style и font-variant, то они автоматически принимают значение normal.



2. Два класса вместе.


Обычно все CSS правила, с помощью которых мы хотим изменить внешний вид элемента, прописываются в один класс. Но это совершенно не означает, что нельзя использовать два класса одновременно.


Например, так:


<p class="text side">Текст абзаца</p>


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



3. Значение CSS рамки по умолчанию.


Когда Вы пишите правило для рамки, Вы обычно указываете значения цвета, толщины и стиля (в любом порядке). Например, написав border:3px solid #000000, Вы получите сплошную рамку, черного цвета в 3 пикселя толщиной.


Однако, иногда совсем не обязательно прописывать все свойства т.к. достаточно бывает указать только стиль рамки.


Например, Вы можете написать просто border: solid. В этом случае, остальные два параметра (толщина и цвет) примут значения по умолчанию.


Что это за значения по умолчанию?


По умолчанию толщина рамки ставится в значение medium, что эквивалентно примерно 3-м или 4-м пикселям в толщину. А цвет рамки по умолчанию будет таким же, как и цвет текста, который находится внутри рамки.


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



4. !important игнорируется браузером Internet Explorer.


Обычно в CSS, когда два правила описывают одно и то же свойство, то приоритет получает правило, которое расположено ниже.


Например, если Вы укажите:


margin-top: 10 px;
margin-top: 20 px;


то все браузеры сделают отступ в 20 пикселей.


Однако если Вы допишите после команды строку !important, то Вы отмените приоритеты и уже свойство с такой командой будет иметь более высокий приоритет, даже если стоит выше.


Например, если Вы укажите:


margin-top: 10 px !important;
margin-top: 20 px;


то браузер сделает отступ в 10 пикселей.


Это справедливо для всех браузеров кроме Internet Explorer. т.е. этот браузер просто не понимает смысл строки !important и в любом случае сделает отступ в 20 пикселей.


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



5. Техника замены изображения.


В этой технике мы рассмотрим такую ситуацию. Допустим, Вы продавец холодильников и у Вас есть сайт, с которого Вы эти холодильники продаете. Если Вы хотите, чтобы поисковые системы привлекали на Ваш сайт посетителей по запросу "Холодильники", то желательно, чтобы на всех страницах Вашего сайта вверху были текстовые заголовки "Холодильники".


Но проблема в том, что если Вы напишите просто слово "Холодильники" и поместите это слово, например, в тэг заголовков <h1></h1>, то это может испортить весь Ваш дизайн т.к. это слово, написанное через обычную html разметку будет отображаться одним из обыкновенных шрифтов - таким как Verdana, Arial и т.д.


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


Как же совместить ключевые слова, которые важны для поисковиков и графическую шапку, которая важна для посетителей?


Эта проблема может быть решена следующим образом:


Поместите в верхнюю часть сайта такой код:


<h1><span>Холодильники</span></h1>


А в CSS файле, который прикреплен к данной странице пропишите такой код:


h1
{
background: url(image.gif) no-repeat;
}


h1 span
{
position: absolute;
left:-2000px;
}


Теперь у Вас вверху страницы будет видна только красивая графическая шапка (картинка image.gif), а обычный текст уйдет за пределы страницы в соответствии с правилом left:-2000px.



6. CSS box model hack alternative.


Здесь мы будем решать проблему с неверным отображением блоков в браузере Internet Explorer 6 и ниже. Суть проблемы состоит в том, что внутренние отступы и рамки, которые мы задаем должны расширять границы блока, но этого не происходит в IE 6.


Вот пример:


У нас есть CSS правило:


#box
{
width: 100px;
border: 5px;
padding: 20px;
}


Это CSS правило будет применяться так:


<div id="#box">Текст</div>


Во всех браузерах кроме IE это означает, что общая ширина блока будет 150 пикселей (100 пикселей ширина (width) рамка с каждой стороны по 5 пикселей и два отступа по 20 пикселей). В IE же общая ширина блока будет равна 100 пикселей и туда войдут и отступы и рамки.


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


Для этого пишем CSS правила таким образом:


#box
{
width: 150px;
}


#box div
{
border: 5px;
padding: 20px;
}


Новый HTML код будет выглядеть следующим образом:


<div id="box"><div>Текст</div></div>


Отлично! Теперь ширина в любом случае будет 150 пикселей независимо от браузера!



7. Выравнивание по центру блочного элемента.


Предположим, Вы хотите создать сайт фиксированной ширины, который должен располагаться строго по центру экрана.


В этом случае Вы можете использовать следующее CSS правило:


#content
{
width: 700px;
margin: 0 auto;
}


Затем Вы можете обернуть всё, что находится между тэгами <body></body> в тэг
<div id="content"></div> и Вы получите нужный результат - Ваш сайт всегда будет автоматически выравниваться по центру экрана.


Все просто, если не учитывать тот факт, что браузер Internet Explorer до 6-й версии игнорирует эти правила и не выравнивает элемент по центру.


Чтобы исправить эту ситуацию и добиться одинакового внешнего вида сайта во всех браузерах, нужно использовать такие CSS правила:


body
{
text-align: center;
}


#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}


В этом случае мы достигнем нашей цели, но при этом весь текст у нас также будет выравниваться по центру. Чтобы этого избежать мы добавили дополнительное правило text-align: left;



8. Вертикальное выравнивание в CSS.


Сделать вертикальное выравнивание текста в ячейке таблицы дело простое. Для этого есть правило vertical-align.


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


Если написать так:


#item {
height:30px;
width:200px;
border:1px solid black;
vertical-align:middle;
}


И применить это к нашему навигационному элементу:


<div id="item">Текст</div>


То текст все равно останется вверху блока т.е. в данном случае правило vertical-align:middle не срабатывает.


Как же это исправить?


А исправляется это заменой правила height:30px на line-height:30px


т.е. в итоге, CSS код будет выглядеть так:


#item {
line-height:30px;
width:200px;
border:1px solid black;
vertical-align:middle;
}



9. CSS позиционирование внутри контейнера.


Одна из лучших возможностей CSS заключается в том, что Вы можете позиционировать объект на странице как Вам угодно. Также возможно (а иногда и желательно) позиционировать объект внутри контейнера. Сделать это просто. Для этого можно просто написать такое правило:


#container
{
position: relative;
}


Теперь любой объект внутри этого контейнера будет позиционирован относительно него.


Скажем, у Вас есть такая HTML структура:


<div id="container"><div id="navigation">Текст</div></div>


Теперь, чтобы позиционировать блок с идентификатором navigation внутри контейнера точно на 30 пикселей от левого борта и на 5 пикселей от верхнего, Вы должны написать так:


#navigation
{
position: relative;
left: 30px;
top: 5px;
}


Отлично!


Хотя в данном примере также можно было использовать внешние отступы (margin), но все равно, часто бывают ситуации, когда предпочтительнее использовать позиционирование.



10. Фоновый цвет колонки до самого низа экрана.


Один из недостатков CSS верстки состоит в том, что Вы не можете контролировать вертикаль, из-за чего возникает одна специфичная проблема, которой лишена табличная верстка.


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


Здесь напрашивается такое правило для левой колонки:


#navigation
{
background: blue;
width: 150px;
}


Однако здесь есть проблемка т.к. навигация, скорее всего не будет доставать до самого низа страницы и из-за этого фоновый голубой цвет будет "обрезаться" на том месте, где заканчиваются навигационные элементы.


Что Вы можете здесь сделать?


К сожалению, единственное решение в данном случае это использовать специальный чит, добавив к тэгу body фоновую картинку точно такого же голубого цвета, как и в левой колонке.


Вот как это выглядит:


body
{
background: url(blue-image.gif) 0 0 repeat-y;
}


Эта фоновая картинка должна быть точно 150 пикселей по ширине и иметь такой же голубой цвет как в навигационном блоке.


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




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-03-02    Просмотров: 1995    Сайт-источник: www.evgeniypopov.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (1)


Комментарий by Юрий, От 2010-09-08

Хорошая статья, пополнил свой арсенал еще парочкой альтернативных методов. Спасибо!

Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее


При восстановлении свойств программы Photoshop, использовавшихся по умолчанию, все созданные вами шаблоны кистей удаляются. Во избежание этого сохраняйте образцы кистей в отдельном файле Brushes.abr. Щелкните по стрелке рядом с ярлычком палитры Brushes и выберите из открывшегося меню пункт Save Brushes (Сохранить кисти). Введите имя файла с расширением .abr и нажмите кнопку Save.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *