CSS syntax (WCSS) in WAP2.0)

WAP2.0 exclusive CSS: WCSS is also called wap css/wireless profile CSS (WAP Cascading Style Sheet) is a subset of css2 + Some WAP-specific extensions
Purpose: To define the style and layout of a document and separate it from the document content.
Importance: different mobile devices have diverse features, such as the screen size.
WML does not support WCSS
Note: W3C CSS mobile profile is different from wap css.

WCSS is a subset of css2.0, so the syntax is similar.

The following are the WCSS syntax rules.

WCSS Declaration: Selector {property: property_value}
Multiple Attributes are allowed, separated.
Multiple selectors are allowed, separated by commas.
Note:/* orz */, which is ignored by the WAP browser.

How to Apply in xhtml mp documents
Link to the external WCSS (recommended) and place it in the head of the document. Use the style attribute to define the WCSS style.
<Link href = "url" rel = "stylesheet" type = "text/CSS"/>. You can add multiple types without modifying the rel and type attributes.
<Style type = "text/CSS"> some WCSS statements </style>
<HR style = "color: Blue"/>

Different Selector
Type selector: h1 {font-style: italic} element name must be in lower case.
The class selector:. Class {color: Blue} corresponds to the class attribute of the tag. You can also use h1.class {color: Blue} with the element name }.
Id selector: # ID {color: Red} the ID attribute of the tag can also be associated with the element name.
General selector: * {color: Blue}, all labels. Note: style rendering slows down in some WAP browsers. (Not recommended)

Common attribute values
Length: %, PX, em, ex, CM, mm, in, PT, PC (spaces are not allowed between values and units: margin-top: 1px instead of margrin-top: 1 px ).
Color: RGB (R %; G %, B %), RGB (R, G, B), # rrggbb, # RGB, red (16 ).
URL: ul {list-style-image: url(bullet.gif)} No quotation marks, double quotation marks, or single quotation marks.

Font and text attributes
Font Name: P {font-family: "Times New Roman"} the name contains spaces or multiple words that must be enclosed in quotation marks.
Font size: P {font-size: 12px}. You can also use XX-small, X-samll, small, medium, large, X-large, XX-large.
Font Style: italic, bold, and underline (font-style, font-weight, text-decoration ).
Set text align and float. In WAP, float (left, right, none) is often used in IMG and table labels.

List attributes
List-style-type: disc by default. Other values: Circle, square, and none. It can be applied to UL and Li elements.
Change the order of the ordered list: decimal by default. Other values: Upper-alpha (A), lower-alpha (A), upper-Raman (I), lower-Raman (I ), none
3. Use the image file as a small icon: List-style-image: url(bullet.gif ). Note: Some icons are saved locally in the openware WAP browser and can be used as small icons, for example: ul {list-style-image: localsrc ("rightarrow1 ")}

Color attributes and border attributes
Set the foreground and background color: Color and background-color.
Set border style: border-style (border-top-style, etc.) attributes with many values, but only none and solid are widely supported by WAP browsers. Table {border-style: solid}
Set the Border Width: border-width (same as above) attribute. The value is a numerical value, and thin, medium, and thick are also accepted. Note: The border-width and border values are invisible. Border-style values must be set to non-None values.
Set the border color: border-color (same as above) attribute. Note the same as above.
The shortcut for setting the border attribute is table {border: 2px solid black.

In addition, WCSS has some WAP-specific CSS extensions:
WCSS shortcut key Extension
Define the shortcut key for the element:-wap-accesskey attribute
Available attribute values *, #,
Input. wcss_class {-wap-accesskey: 4}
Directly define * and # In violation of the css2 syntax. Unicode escape characters \ 2a and \ 23 are required. However, some WAP browsers (Sony Ericsson WAP browsers) require \ 2a and \ 23, and some (openwave mobile browsers) require * and #. It is the same as the accesskey attribute of the element. If it is defined at the same time, the attribute value is displayed. Only four elements a, input, label, and textarea are used. Other definitions are invalid.

WCSS input Extension
It consists of two attributes:-wap-input-famat and-wap-input-required, which correspond to the format (definition type and number of characters) of the <input> element in WML) and emptyok (whether it can be left blank) attributes. The WAP browser on the mobile device was not supported earlier, but the format and emptyok attributes were supported as xhtml mp extensions. For better compatibility, we recommend that you use both WCSS and WML.

WCSS marquee Extension
Some content (one line of text, one image, one link, etc.) can be scrolled on the screen, but some WAP browsers only support scrolling text. It is useful when the content exceeds the screen.