3 простых, но полезных свойств CSS

28 ноября 2009 года, Размещено в категории: HTML / CSS

3 простых, но полезных свойств CSS

Этот пост о 3 полезных свойствах CSS, с ними Вы уже должны быть знакомы, но скорее всего, редко их используете, а возможно кто-то их впервые увидет (начинающим будет интересно прочитать это пост).
Я не говорю о новых свойствах CSS3.  Я имею в виду старые свойства CSS2  такие как: white-space, cursor, и display. Они поддерживаются всеми браузерами. Так что не пропустите этот пост, потому что вы будете удивлены, насколько полезными они.

1. White-space

White-space -  свойство определяет, какие пробелы обрабатываются в элементе для переноса. Например, укажите  white-space: nowrap теперь текст, который находится в одном теги (<em> текст </ em>) и не умещается в строке, перейдет весь на новую строку.

White-space

em {
  white-space: nowrap;
}

2. Cursor

Cursor - определяет форму курсора мыши, которую он принимает при наведении на элемент страницы. Таким образом, cursor является чрезвычайно полезным для разработки веб-приложений.

Cursor

.disabled {
cursor: default;
}

.busy {
cursor: wait;
}

.clickable:hover {
cursor: pointer;
}
cursor: auto - (значение по умолчанию) заставляет браузера самому определять нужную форму курсора мыши;
cursor: crosshair - крестообразный курсор;
cursor: default - курсор по умолчанию, обычно стрелка;
cursor: hand - "указывающий перст";
cursor: move - стрелка, указывающая "на все четыре стороны";
cursor: text - текстовой курсор;
cursor: wait - "песочные часы", курсор ожидания;
cursor: help - стрелка с вопросительным знаком.

3. Display inline / block

В случае, если вы не знаете: элементы block предоставляются на новую строку, в то время как встроенные элементы оказываются на одной линии. <div>, <h1> и <p> теги являются примерами элемента блока. Примерами Inline теги: <em>, <span> и <strong>. Вы можете изменить стиль отображения, указав отображения: Inline или block.

 Display inline

.block em {
display: block;
}

.inline h4, .inline p {
display: inline;
}

Мой блог находят по следующим фразам
выпадающий вложенный список html
подключить файл со стилями для ie wp
dicim.net
почему браузер плавно не скролит
медленное движение к якорю jquery
http://dicim.net/






4 комментария

  • 8 лет назад Ответить

    Неплохая подборка, я бы еще добавил -moz-border-radius, который делает элемент округлым.

  • 8 лет назад Ответить

    Не такие уж кроссбраузерные свойства, однако, хотя, по большей части так и есть. Аргументы свойства «display». «run-in» (устанавливает элемент как блочный или встроенный в зависимости от контекста) не поддерживается IE и Firefox. Все аргументы, связанные с «table», не поддерживаются IE. «Cursor» — параметр «url(‘путь к курсору’)» не работает в Opera. Один раз мне пригодилось свойство «Cursor», когда надо было сделать ссылки блоками (display: block) с абсолютным позиционированием. При такой установке перестал меняться курсор при наведении на ссылку в каком-то из браузеров, применил свойство «Cursor»

  • 8 лет назад Ответить

    Не знаю, насколько это хорошо — использовать cursor — тот же FireBug плюется на это свойство, уверяя, что оно ошибочно. А display, IMO — это основы верстки. Если нет понимания в отличии блочных элементов от строчных, то, извините, о каком вообще знании HTML может идти речь?
    Извините, пожалуйста, за критику, просто выразил IMO, не более того.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: