Справка CSS
Курсоры
cursor:crosshair | |
cursor:move | |
cursor:e-resize | |
cursor:ne-resize | |
cursor:nw-resize | |
cursor:n-resize | |
cursor:sw-resize | |
cursor:se-resize | |
cursor:s-resize | |
cursor:w-resize | |
cursor:text | |
cursor:wait | |
cursor:help |
Последнему курсору дано двойное значение, чтобы он корректно отобразился во всех браузерах.
БУКВИЦА
<style>P:first-letter {font-size:200%;float:left}
P {font-size:12pt;line-height:12pt}
</style> Таким образом, можно просто выделить другим образом первую букву, напр. сделать другим цветом или выделить жирным.
Задать кодировку в CSS
@charset "utf-8";ОТСТУПЫ КАРТИНОК В OPERA
К сожалению, в этом случае браузеры понимают стиль по-разному, решает эту проблему. <style type="opera/css">.prm { margin-bottom: -2px; }
</style>
ССЫЛКИ
A:link IMG { border: 2px solid blue }A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime } A.blank { color: orange } /* внешняя ссылка */
ПЕЧАТЬ
содаем print.css
Например, у вас есть файл стиля style.css и на него стоит ссылка <link href=style.css type=text/css rel=stylesheet> Мы создаем дополнительный файл стиля и называем его, напр. print.css, на него ссылка будет выглядеть иначе: <link rel=stylesheet type=text/css href=print.css media=print> Для просмотра страницы сайта браузер будет использовать стиль, заданный в style.css, а для печати print.css. Таким образом, то что мы видим и что печатаем не обязательно должно быть одно и тоже.body {font-size: 12px}
Стили для печати:
@media print {
body {font-size: 20px}
}
Убираем графику img {display:none} Убираем top, menu, footer и определяем параметры текста. #top, #menu, #footer {display: none}
#text {position: absolute; top: 0px; left: 0px; width: 100%; font: 14pt "Times New Roman", Times, serif;} Можно придать параметры всем заголовкам (H1, H2, H3 ...) сразу, напр. h* {text-align: left;} Придумываем тег, напр. <ph4></ph4> и пишем в style.css ph4 {visibility: hidden;} и он не отображается в браузере. А в print.css пишем ph4 {visibility: visible;} Это будет вроде водяного знака.
Как использовать стили операционной системы в CSS
Источник habr.com/blogs/css/68699/В CSS 2.1 появилась одна интересная фича, о которой не все знают - это возможность задавать на веб-странице шрифты и цвета, которые используются в текущей системной теме операционной системы. Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы.
Например, вы хотите написать Adobe AIR приложение, или сделать справочный интерфейс, наподобие нативной CHM-справки.
На самом деле, все очень просто и без всякой магии. Мы воспользуемся стандартными css-свойствами с немного нестандартными значениями.
Системные шрифты
Системные шрифты задаются обычным свойством font всего с одним параметром - тип шрифта. Разумеется, тип начертания, размер и прочие атрибуты уже содержатся внутри этого параметра.Пример использования:
.menu{
font: menu;
}
Полная таблица всех доступных значений:
Значение | Описание |
caption | Шрифт на управляющих элементах (кнопки, радио, выпадающие списки) |
icon | Шрифт для иконок |
menu | Шрифт, используемый в системных меню |
message-box | Шрифт в диалоговых окнах |
status-bar | Шрифт в строке состояния |
Системные цвета
Системные цвета могут быть назначены для любого свойства, поддерживающего значение color.Пример использования:
.dialog{
color: WindowText;
background-color: Window;
}
Полная таблица всех доступных значений:
Значение | Описание |
ActiveBorder | Цвет активной рамки окна |
ActiveCaption | Цвет заголовка активного окна |
AppWorkspace | Цвет фона в приложениях с MDI-интерфейсом |
Background | Фон рабочего стола |
ButtonFace | Цвет лицевой поверхности для 3d-элементов (например кнопки) |
ButtonHighlight | Цвет тени в 3d-элементах в положении "лицом от света" |
ButtonShadow | Цвет тени для 3d-элементов |
ButtonText | Текст у нажатой кнопки |
CaptionText | Цвет текста в лейблах |
GrayText | Цвет неактивного (заблокированного) текста |
Highlight | Цвет выбранного пункта меню |
HighlightText | Цвет текста внутри элемента, находящегося под выделением |
InactiveBorder | Неактивная рамка окна |
InactiveCaption | Цвет неактивного заголовка окна |
InactiveCaptionText | Текст внутри неактивного заголовка окна |
InfoBackground | Цвет фона для информационных тултипов (подсказок) |
InfoText | Текст внутри тултипов |
Menu | Фоновый цвет элементов меню |
MenuText | Цвет текста внутри меню |
Scrollbar | Цвет скроллбара |
Window | Фоновый цвет окон |
WindowFrame | (в комментариях подскажут) |
WindowText | Текст внутри окон |