3 простых, но полезных свойств CSS
28 ноября 2009 года, Размещено в категории: HTML / CSS
Этот пост о 3 полезных свойствах CSS, с ними Вы уже должны быть знакомы, но скорее всего, редко их используете, а возможно кто-то их впервые увидет (начинающим будет интересно прочитать это пост).
Я не говорю о новых свойствах CSS3. Я имею в виду старые свойства CSS2 такие как: white-space, cursor, и display. Они поддерживаются всеми браузерами. Так что не пропустите этот пост, потому что вы будете удивлены, насколько полезными они.
1. White-space
White-space - свойство определяет, какие пробелы обрабатываются в элементе для переноса. Например, укажите white-space: nowrap теперь текст, который находится в одном теги (<em> текст </ em>) и не умещается в строке, перейдет весь на новую строку.
em { white-space: nowrap; }
2. 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.
.block em { display: block; } .inline h4, .inline p { display: inline; }
Мой блог находят по следующим фразам
• выпадающий вложенный список html
• подключить файл со стилями для ie wp
• dicim.net
• почему браузер плавно не скролит
• медленное движение к якорю jquery
• http://dicim.net/
11 лет назад
Неплохая подборка, я бы еще добавил -moz-border-radius, который делает элемент округлым.
11 лет назад
Я -moz-border-radius оставил на позже 🙂
11 лет назад
Не такие уж кроссбраузерные свойства, однако, хотя, по большей части так и есть. Аргументы свойства «display». «run-in» (устанавливает элемент как блочный или встроенный в зависимости от контекста) не поддерживается IE и Firefox. Все аргументы, связанные с «table», не поддерживаются IE. «Cursor» — параметр «url(‘путь к курсору’)» не работает в Opera. Один раз мне пригодилось свойство «Cursor», когда надо было сделать ссылки блоками (display: block) с абсолютным позиционированием. При такой установке перестал меняться курсор при наведении на ссылку в каком-то из браузеров, применил свойство «Cursor»
11 лет назад
Не знаю, насколько это хорошо — использовать cursor — тот же FireBug плюется на это свойство, уверяя, что оно ошибочно. А display, IMO — это основы верстки. Если нет понимания в отличии блочных элементов от строчных, то, извините, о каком вообще знании HTML может идти речь?
Извините, пожалуйста, за критику, просто выразил IMO, не более того.