Уроки по дизайну ЖЖ. Часть III.
Внимание: это уроки для устаревшей системы стилей S1, хотя, возможно, вы найдете в посте полезную информацию по CSS.
Перейти к актуальным урокам →
Продолжаем изучать CSS : )
Навигация по урокам Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Изменение вида курсора cursor • обозначение вида курсора
• адрес своего курсора
Для просмотра курсора наведите мышь на его название
cursor: pointer; cursor: hand;
cursor: crosshair
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: no-drop;
cursor:not-allowed;
cursor: row-resize;
cursor: url('адрес файла с курсором');
cursor:vertical-text;
Курсор по умолчанию - cursor: default; Примечание к cursor: pointer; cursor: hand;
По отдельности эти коды тоже работают, но в разных браузерах. В объединенном виде работают и в Мозилле, и в ИЕ.
Примечание к cursor: url():
Файл с курсором должен быть в формате .cur или .ani. Конвертировать файлы из формата .bmp в нужный формат можно с помощью специальных программ. В них же обычно можно создавать свои иконки и курсоры.
В Файрфоксе не работает.
Если у вас не видно какой-либо курсор, значит ваш браузер не поддерживате отображение этого стиля.
Я привела пример как заменить курсор на один из стандартных для Windows, но делать этого лучше не стоит, потому как курсор справка или, к примеру, курсор "Подождите" в журнале будет выглядеть неуместно. Разве только сделать появление вопроса над ссылкой Info, которая вполне является справкой : )
Часто это выглядит так, как будто человек узнал как менять курсоры и на радостях поменял везде где мог, а зачем и сам не понял : )
Наоборот - всякие яркие и интересные курсоры, которые можно найти в сети, могут очень украсить ваш журнал : ) Пользователи Мозиллы, к сожалению, этого не увидят
Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Показать/скрыть элемент на странице display • block
• none display:block; - значение элемента по умолчанию, элемент виден.
display:none; - убирает элемент совсем, так, как будто его нет в коде.
Примера видно не будет, так что не делаю : ) Крайне полезный элемент! С его помощью вы легко уберёте ненужные вам части журнала, страница будет выглядеть так, как будто их там никогда и не было! : )
С его помощью, например, крайне удобно прятать верхнее меню, чтобы заменить его на свое : )
visibility • visible
• hidden
visibility: visible;
Значение по умолчанию, элемент виден.
visibility: hidden;
Элемента не видно, но он продолжает занимать место на странице.
От display отличается тем, что спрятаный элемент продолжает влиять на расположение окружающих элементов Уменьшить область отображения элементов, добавить прокрутку если всё не поместилось overflow • visible
• hidden
• scroll
• auto
Однажды в студёную зимнюю пору
Я из лесу вышел.. по моему зря
overflow: visible;
Значение по умолчанию, содержимое показывается целиком вне зависимости от размера содержащего его элемента
Однажды в студёную зимнюю пору
Я из лесу вышел.. по моему зря
overflow: hidden;
Показывается только то, что не выходит за пределы элемента, остальное обрезается
Однажды в студёную зимнюю пору
Я из лесу вышел.. по моему зря
overflow: scroll;
Показывается только то, что не выходит за пределы элемента, появляются полосы прокрутки
Однажды в студёную зимнюю пору
Я из лесу вышел.. по моему зря
overflow: auto;
Браузер сам определяет что и как будет отображаться
Используют для указания области отображения постов, чтобы они не вылезали за пределы какого-нибудь фонового рисунка. Читать такой журнал очень не удобно, но это уже дело вкуса. Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Отступы снаружи и внутри элементов margin
• margin-top
• margin-right
• margin-bottom
• margin-left величина отступа в px или %
Отступ применяется к зелёному блоку
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
margin - это внешний отступ от объекта. Может быть у картинки, у дива, у абзаца, у таблицы и т.д.
Не может быть у ячейки (td) и строки (tr), потому что они находятся внутри таблицы
Разумеется, отступы можно комбинировать. Например:
margin-left: 30px; margin-top: 40px;
Можно записывать коротко:
margin: 20px;
отступ со всех сторон по 20px;
margin: 10 0 0 50; = margin-top: 10px; margin-left: 50px;
первое число - отступ сверху, следующее - отступ справа, и т.д по часовой стрелке
Можно указать в %:
margin-right:10%;
Значения отступов могут быть отрицательными
padding
• padding-top
• padding-right
• padding-bottom
• padding-left величина отступа в px или %
В примерах - отступ до текста
Это всё потому, что кто-то слишком много ест! ©
padding-top:20px;
Это всё потому, что кто-то слишком много ест! ©
padding-right:20px;
Это всё потому, что кто-то слишком много ест! ©
padding-bottom:20px;
Это всё потому, что кто-то слишком много ест! ©
padding-left:20px;
padding - внутренний отступ, расстояние от края элемента до содержимого.
Может быть у body, абзаца (p), div'а, td и любых элементов, которые могут быть контейнерами
padding так же можно произвольно комбинировать и задавать в % Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Ширина и высота • width
ширина
• height
высота величина в px или %
width:50px;height:10px;
width:120px;height:80px;
Можно задать почти у всех элементов: картинок, таблиц, ячеек, div'ов и т.д.
Внимательно отнеситесь к размеру используемых изображений, к их ширине и высоте. Задание большой и тяжелой картинке меньших ширины и высоты уменьшит её только визуально, она не станет легче, а качество будет ужасное.
Лучше уменьшить картинку в графическом редакторе и подготовить её для публикации в сети, тогда качество будет значительно лучше, а вес меньше
Выравнивание по горизонтали и вертикали
text-align уже было описано для текста, но может применяться и к другим элементам, поэтому повторяю тут
text-align
выравнивание по горизонтали
• justify
• center
• right
• left
Если б мишки были пчёлами, то они бы нипочём бы
text-align: left;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: right;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: center;
Если б мишки были пчёлами, то они бы нипочём бы
text-align: justify;
vertical-align выравнивание по вертикали
• baseline
• middle
• top
• bottom baseline middle top bottom sub super Желаемый результат Элементы CSS Возможные значения Как выглядит Примечания Позиционирование элементов position
определяет как расположение элемента влияет на другие • absolute
• relative
• fixed
• static
position: absolute;
блок гуляет сам по себе
Расположение задаётся с помощью указания абсолютного отступа (от края окна браузера), например:
top:20px; left: 30%;
или указанием относительного (от края содержащего его контейнера) -
margin-top:10%; margin-left: 150px;
position: relative;
положение зависит от других элементов
left: 30% и margin-left: 30%; действуют на него одинаково
position: fixed;
position: fixed; left:5%; top:70%;
ведёт себя как absolute, так же позиционируется, но при прокрутке висит всё время в одном месте.
К сожалению, работает только в Мозилле, соответственно и пример виден будет только в ней.
position: static;
Значение по умолчанию, top и left для него не работают
Значения отступов могут быть отрицательными z-index
определяет какой элемент выше, если они друг друга перекрывают число
чем оно больше, тем выше элемент расположен относительно других.
position: absolute;
два дива с position: absolute, у нижнего задан margin:20px, иначе второй полностью закрывает первый
z-index:2;
те же дивы, но у первого задан z-index:2, и теперь он над вторым дивом.
Значение z-index по умолчанию равно 0
Если вы хотите внести поправки или дополнения - Welcome! : )
Разумеется в таблицах приведены далеко не все стили, которые вообще существуют. Если хотите узнать больше - вы легко найдёте в сети множество справочников по CSS.
Заучивать таблицы (если вдруг такое пришло кому-то в голову) не стоит, пользуйтесь ими как справочником - постепенно запомнится само : )
В следующем уроке я расскажу как именно применять стили для того чтобы изменить дизайн журнала
UPD: Почему-то не видно примеров для position и z-index, думаю что страница с комментами их не поддерживает, так же как стили не поддерживает страница юзеринфо, но там, кажется, вообще никакие не работают
Навигация по урокам
I. Общее представление о HEAD, WEBSITE и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.