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 комментария

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

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

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

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

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

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

Добавить комментарий для y0ung5eo Отменить ответ

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

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