CSS style attribute classification

When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case. The value of class and ID is case sensitive in HTML and XHTML.

1. style attributes are mainly divided into the following types: font, background, text, location, layout, edge, list, and others.

 

2. Font

Generic family: A family is a family of fonts with a unified appearance. Sans-serif indicates a group of fonts without "feet", with lines at both ends of the stroke; serif family: With lines at both ends of the stroke; monospace family: with the same width as all characters.

Font-family: Specifies the font name. Multiple font names are separated by commas (,). The preceding font is preferred. We recommend that you provide a family (generic family) at the end of the list. In this way, when no specified font is available, the page can be displayed in at least one font of the same family. For example:h1 {font-family: arial, verdana, sans-serif;}

Font-size: font size. Note that odd numeric characters may be deformed horizontally.

Absolute size values include: XX-small, X-small, small, medium, large, X-large, and XX-large. The default text size of most browsers is 16 PX. Small is 13px

Relative size: larger, smaller.

Absolute unit: Mm, CM, In, PT, PC.

Relative unit: Em relative to the font size, ex relative to the lowercase letter X, % relative to the font value of the parent element, PX relative to the pixel of the device. It is generally considered 1em = 2ex.

Font-style: font style,Normal(Normal ),Italic(Italic) orOblique(Tilt ).

Text-Decoration: adds, strikethroughs, and underscores to the text. Underline overline line-through. Multiple values can be set at the same time, separated by spaces.

The default text-decoration value of the hyperlink is underline. If this parameter is not set, use none.

Font-weight: light intensity. The value can beNormal(Normal ),Bold(BOLD), bolder, and lighter. Some browsers even support numbers ranging from 100 to 900 (in the unit of) to measure the font intensity.

Font-variant:Normal(Normal) orSmall-caps(Uppercase letters ).Small-capsA font is a type of font that uses uppercase letters to replace lowercase letters.

Finally, you can use a font attribute to include all the font setting values, for example, p {Font: italic bold 12pt}, but I do not know how to sort the order during parsing.

The abbreviation font must at least define font-family and font-size, and the font color value cannot be reduced to font.

 

4. Text

Word-Spacing: Word spacing, which can be inherited

Letter-Spacing: horizontal Chinese character or letter spacing of text, which can be inherited

Vertical-align: vertical align, which is applicable only to intra-row elements and has no inheritance.

Baseline, sub, super, top, middle, bottom, text-top, text-bottom, inherit, or a percentage higher than the element row. The default value is baseline.

Float may affect vertical-align performance

When the element content only contains images, if the Row Height of the image is invalid, check whether you want to modify the document type to strict, non-Transitional. DTD

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">

A table is a special element. The browser performs special processing on its vertical alignment.

Text-align: Internal horizontal alignment. It is applicable only to block-level elements and can be inherited. The text-align and HTML attributes of CSS have the same functions.

The value of this attribute can be left, right, or center ),

Justify (two-end alignment) is often used in newspapers and magazines.

Text alignment style = "text-align: justify; text-justify: Inter-ideograph ";

Text-indent: the indent value of the first line. Do not use spaces for the distance between the two characters in front of the paragraph. Use text-indent for the first line.

Text-indent can indent the first line of the container in a certain unit. For example, a Chinese section generally contains two Chinese characters at the beginning of each section.

Em is the unit of relative length. The font size relative to the text in the current object.For examplep {text-indent: 2em;}, P {text-indent: 30px ;}

In either case, negative indentation, hanging indentation, and hidden text are used.

Suspension indentFor example, P {padding-left: 3.5em; text-indent:-3.5em ;}

Hide text: some special font effects on webpages are often implemented using images. For example, H3 uses a special font. If IMG is put in it, it violates the principle of "performance and structure separation, because here is

If the image is added to the text content, the image is displayed as a "representation". The solution is to use the text in H3 and H3 {background :( URL ); text-indent:-9999em ;},

Squeeze text out of the screen.


White-space: Process white spaces in text.

Normal: replace multiple spaces with one and return to the row automatically.

Pre: Do not compress Spaces

Nowrap: Do not compress spaces, do not wrap, until BR. The effect is also affected by the overflow attribute value. For example, adding width: 11em; overflow: hidden; can hide the text that exceeds the limit;

Pre-wrap: space, tab, line feed will not be compressed, but will automatically return to the line.

Pre-line: space. The tab is compressed and the line feed is retained.

Line-Height: the distance between baselines of text lines, which is not the height of elements and can be inherited. Specify the number or PX value or percentage.

The default value is normal, generally from 1 to 1.2. For example, 140% indicates that the row height is 140% of the font height, and 1 indicates that the font height is multiplied by 1.

When there is an image in the content, if the image height is greater than the row height, the image will support the row height, but the Row Height will not be affected.

Vertical center of some single lines of text: Generally, you only need to set the high value of the line to be equal to the height value.

Line box: inline box. The line element will generate a line box. By default, the line box is equal to the content area. The line height will affect the height of the line box.

Row box: line box. The height is equal to the maximum height of all element rows in the row.

Word-wrap;

Word-break;

Text-Decoration: adds different decorative effects to text without inheritance. None is the default value, and some elements are not, such as A, underline, line-through, overline, and blink flashing.

It is often used to set decorative effects for link text.

text-transform：Controls the case sensitivity of text.Capitalize),All uppercase (uppercase)OrAll lower case (lowercase), none is not convertedThe default value is none.

Text-Shadow: Text shadow consists of the following parameters: X-offset, Y-offset, blur, color. set X-offset to negative to move the shadow to the left. set y-offset to negative to move the shadow to the top.

Do not forget that you can use rgba to control the shadow color. You can also specify a shadow list (separated by commas) for text-Shadow ).

The following example uses two text-shadow definitions to control the page output effect (1px shadow and 1px shadow). Text-Shadow: 01px0
# Fff, 0-1px0 #000;

Because most browsers do not support this attribute, It is deleted in css2.1.

Direction:

Unicode-bidi:

6. Layout:

 

 

 

Page-break-before:

Page-break-after:

 

7. Border and fill

8. List

List-style-type: Square list item tag type

List-style-position: Inside, outside.

List-style-image: URL ()

List-style: Square insice URL ()

Table-layout attribute

 

9. Others

Cursor:

Filter:

 

10. filter, CSS Filter

Filter can be used only for elements with border areas.

Possible effects include text flip.

Example: Style = "filter: alpha (opacity = 80) blur (add = 5, direction = 135) flipv"

Filter parameters

Alpha (opacity = ?, Finishopacity = ?, Style = ?, Startx = ?, Starty = ?, Finishx = ?, Finishy = ?) Opacity,

Blendtrans (duration = ?) Set the fade-in and fade-out effect

Blur (add = ?, Direction = ?, Strength = ?) Blur Effect

Chroma (color = ?) To filter out a certain color.

Dropshadow (color = ?, Offx = ?, Offy = ?, Positive = ?) Shadow Effect

Fliph and flipv reverse the elements horizontally and vertically.

Gray, remove the image color, black and white

Invert, invert the image color

Light sets the light source Effect

Xray displays the image outline and X-ray Effect

Glow (color = ?,, Strength = ?) Effect of element edge light

Mask (color = ?) Overwrite a mask on the Element Surface

Revealtrans (duration = ?, Transition = ?) Create a conversion effect for the initial display of Elements

Shadow (color = ?, Direction = ?) A shadow effect.

Wave (add = ?, Freq = ?, Lightstrength = ?, Phase = ?, Strength = ?) Ripple Effect

Symbian theme

In the extended SDK, extendedskinsapi. Zip and personalizationandskinssettingsapi. Zip provide APIs for processing topics.

Using a program to change the current topic requires the ability to writedevicedata.

Http://wiki.forum.nokia.com/index.php/%E6%89%A9%E5%B1%95%E7%9A% AE %E8%82%A4API

Provides detailed sample code.

 

 

12. Float

(1) highly adaptive problem:

When float is applied to all elements in a container, the height of the entire box is not based on the height of the floating object, the height does not increase as the height of the internal element increases, so the display of the content element may exceed the container.

In this case, you need to set the height of the parent block or use overflow to solve the problem! The method is to add overflow: auto; ZOOM: 1; to the parent element, overflow: auto; enables highly adaptive, Zoom: 1; to be compatible with IE6, you can also use height: 1%.

When multiple elements float: left are set, the effect is to Lean to the left in turn.

Float: Left; (float left)This feature separates the specified element from the normal document stream. In addition, float must be applied to block-level elements, that is, float is not applied to inline labels. Or in other words, when float is applied, this element will be specified as a block-level element.

Supplement: CSS hack

The process of writing different CSS codes for different browsers is called CSS hack. Here, overflow: auto; ZOOM: 1; is the so-called CSS hack. This form is used to solve the incompatibility problem by using common code and some special symbols, it is meaningless, but it is implemented based on whether different browsers recognize it.

IE6 BUG: Double margin bug; 3px bug;

The drop-down list (menu) is one of the biggest headaches for everyone. because it does not take effect for many styles, it is ugly to display on the page, and the drop-down list under IE6 is always at the top of the list, many pop-up layers cannot block them. Some designers have come up with many ways to change this situation. In IE6, the background and width styles of the drop-down list take effect. Most of the other settings do not take effect. In IE8, the border and Height Support is added, but this seems to be far away from our requirements. If the floating layer is blocked under IE6, IFRAME can be used, because the drop-down list does not run to the top of IFRAME. Div simulation can be used to replace the drop-down list for higher beautification requirements, but this method is difficult to implement.

 

13. control line feed
{Word-break: Keep-all; white-space: nowrap;}/* disable line breaks */
{Word-break: Break-all;}/* force line feed */

14. Do not use global Reset:

* {Margin: 0; padding: 0 ;}

Not only is it slow and inefficient, but it also causes unnecessary elements to reset the outer and inner margins. We recommend that you refer to Yui reset and Eric Meyer.

/** Clear internal and external margins **/
Body, H1, H2, H3, H4, H5, H6, HR, P,
BLOCKQUOTE,/* structural elements structure element */
DL, DT, DD, UL, ol, Li,/* List elements list element */
PRE,/* Text Formatting elements text format element */
Form, fieldset, legend, button, input, textarea,/* form elements form Element */
Th, TD,/* Table Elements table elements */
IMG/* IMG elements Image Element */{
Border: Medium none;
Margin: 0;
Padding: 0;
}
/** Set the default font **/
Body, button, input, select, textarea {
Font: 12px/1.5 'body', tahoma, srial, Helvetica, sans-serif ;}
H1, H2, H3, H4, H5, H6 {font-size: 100% ;}
Em {font-style: normal ;}
/** Reset the list element **/
Ul, Ol {list-style: none ;}
/** Reset the hyperlink element **/
A {text-Decoration: none; color: #333 ;}
A: hover {text-Decoration: underline; color: # F40 ;}
/** Reset image elements **/
IMG {border: 0px ;}
/** Reset table elements **/
Table {border-collapse: collapse; border-Spacing: 0 ;}

15. Keywords cannot be placed in quotation marks