CSS

Web-master / Your website / Web Help

CSS

Cursors

CURSOR:crosshair cursor:crosshair
CURSOR:move cursor:move
CURSOR:e-resize cursor:e-resize
CURSOR:ne-resize cursor:ne-resize
CURSOR:nw-resize cursor:nw-resize
CURSOR:n-resize cursor:n-resize
CURSOR:sw-resize cursor:sw-resize
CURSOR:se-resize cursor:se-resize
CURSOR:s-resize cursor:s-resize
CURSOR:w-resize cursor:w-resize
CURSOR:text cursor:text
CURSOR:wait cursor:wait
CURSOR:help cursor:help

The last cursor is given a double value so that it is correctly displayed in all browsers.

LETTER

<style>
P:first-letter {font-size:200%;float:left}
P {font-size:12pt;line-height:12pt}
</style>

Thus, you can simply select the first letter, ex, in a different way. Make another color or highlight bold.

Set the encoding to CSS

@charset "utf-8";

PASSAGE OF PICTURES IN OPERA

Unfortunately, in this case, browsers understand the style in different ways, solves this problem-


<style type="opera/css">
.prm { margin-bottom: -2px; }
</style>


LINKS

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

create print.css

For example, you have a style.css style file and it's a link

<link href=style.css type=text/css rel=stylesheet>

We create an additional style file and name it, ex. print.css, the link will look different on it:

<link rel=stylesheet type=text/css href=print.css media=print>

To view the site page, the browser will use the style specified in style.css, and print print.css. Thus, what we see and what we print does not necessarily have to be the same.


body {font-size: 12px}

Style for printing:
@media print {
body {font-size: 20px}
}


Remove graphics img {display:none}

Remove top, menu, footer and define the text parameters.

#top, #menu, #footer {display: none}
#text {position: absolute; top: 0px; left: 0px; width: 100%; font: 14pt "Times New Roman", Times, serif;}

You can pass parameters to all headers (H1, H2, H3 ...) at once, for example.

h* {text-align: left;}

We create a tag, ex. <ph4></ph4> and write to style.css

ph4 {visibility: hidden;}

and it does not appear in the browser.

And write to print.css

ph4 {visibility: visible;}

It will be like a watermark.


How to use the operating system styles in CSS

In CSS 2.1, there is one interesting feature that not everyone knows about - it's the ability to set fonts and colors on the web page that are used in the current system theme of the operating system.
This can be useful in situations where you want to bring the interface of your page closer to the user interface of the operating system. For example, you want to write an Adobe AIR application, or make a reference interface, like native chm help.

In fact, everything is very simple and without any magic. We will use standard css-properties with slightly non-standard values.

System Fonts

System fonts are specified by the usual font property with only one parameter - the font type. Of course, the type, size, and other attributes are already contained within this parameter.

Example to use:

.menu
{
font: menu;
}

Full table of all available values:

Value Description
caption Font on the control elements (buttons, radio, drop-down lists)
icon Font for Icons
menu Font used in the system menus
message-box Font in dialog boxes
status-bar Font in the status bar

System colors

System colors can be assigned to any property that supports a value color.

Example to use:

.dialog
{
color: WindowText;
background-color: Window;
}

Full table of all available values:

Value Description
ActiveBorder The color of active frame of the window
ActiveCaption The color of title frame of the window
AppWorkspace Background color in applications with MDI interface
Background Desktop Background
ButtonFace The color of the front surface for 3d elements (for example buttons)
ButtonHighlight The color of the shadow in the 3d elements in the position 'face from light'
Buttons hadow The color of the shadow for 3d elements
ButtonText Text at the pressed button
CaptionText Text color in labels
GrayText Inactive (Locked) Text Color
Highlight The color of the selected menu item
HighlightText The color of the text inside the element under the selection
InactiveBorder Inactive window frame
InactiveCaption Color of inactive window title
InactiveCaptionText Text inside an inactive window title
InfoBackground Background color for information tooltips
InfoText Text inside tooltype
Menu Menu element background color
MenuText Text inside menu color
Scrollbar Scrollbar color
Window Windows background color
WindowFrame (the comments will prompt)
WindowText Text inside windows