(Note: attributes with * are CSS3 new properties)
I. BASIC RULES
1.CSS is typically stored in the style sheet, which defines how HTML elements are displayed;
The 2.CSS consists mainly of two parts: selectors and one or more declarations.
Selectors are usually HTML elements of a style that need to be changed, and the declaration needs to be surrounded by curly braces, each of which includes an attribute and a corresponding value, with each declaration ending with a semicolon;
Example: p {color:red; Text-align:center}
3. Note:/* There is a comment on the side */
4.css Style Insert Method:
(1) External style, that is, read from the external CSS file format should be on the Web page, when the style needs to be applied to more than one page, this method can be used;
Cases:<head><link rel="stylesheet" type="text/css" href="abc.css"></head>
(2) Internal style: use style label to define CSS format in header file. This method can be used when a single document needs special style;
Example:
<head><style>p {margin-left:20px;}#x {color:yellow;}</style></head>
(3) Inline style, that is, the method of writing style inside a single element label;
Priority: (3) >;
2、 Declare properties
1. Background
Background color: background color, which can be hexadecimal color value, RGB color representation (such as RGB (255255,0)), color name (such as red)), transparent (default)
Background image background image, which is tiled by default; for example: body {background image: URL ('ba. JPG ');}
Background repeat: repeat-x (horizontal tiling), repeat-y (vertical tiling), no repeat (non tiling)
The background attachment background map is fixed and scrolled with the rest of the page. The values are fixed and scroll (default)
The starting position of background position is composed of X and Y directions, which are center by default. The X direction values are left, right and center, and the Y direction values are top, center and bottom. If only one value is specified, the other values will be center. The coordinates can also be used, which can be a unit (0px0px) or a percentage (0% 0%)
Backgoud merges shorthand and writes all the above attributes together in the above order (unnecessary attributes can be omitted); for example: body {backgoud: Red URL ('p.png ') no repeat right top;}
Drawing area of background clip * background, value: border box (default), padding box (within the padding box), content box (within the content box);
Background origin * background image positioning area, padding box (relative border), border box (relative margin), content box (relative content box);
Background size * the size of the background picture. There are two values of height and width. If one is omitted, the other will be calculated automatically in proportion. The values can be in length units and%
2. Text
Color text color, the value is CSS color value, which can be expressed in many ways;
Direction text writing direction, the values are RTL (right to left), LTR (left to right by default);
Letter spacing character spacing, the value is the value in PX pixels, negative value can be used;
Line height row spacing. Values can be in pixels (PX), numbers or percentages (to zoom in and out of the current font size);
Text align alignment, with values of left, right, center and justify;
Text decoration decoration, values include underline, overline, line through, blink, none (default none);
Text indent, the value is pixel value;
Text shadow * shadow, the value has four parameters: h-shadow (vertical shadow), v-shadow (horizontal shadow), blur (blur distance), color (shadow color). The first two are required, the value is pixel Px, and the last two are optional
Text transform text case conversion, values include capitalization (capitalization), uppercase (all uppercase), lowercase (all lowercase), none (default none)
Whether the Unicode bidi text is rewritten? The values include normal (no additional embedded layer is used by default), embed (create an additional embedded layer), bidi override (create, reorder depends on the direction property) and initial (set the property to its default property)
Vertical align vertical alignment, values are baseline (default), sub (subscript), super (superscript), top (top of element is aligned with top of highest element), bottom (bottom is aligned with bottom of lowest element), text top (top of parent element is aligned), middle (middle of parent element), text bottom (bottom of parent element is aligned),% (arranged by line height value percentage)
White space white space processing method, the values are normal (ignore blank by default), pre (keep blank), nowrap (text does not wrap until < br >), pre wrap (keep blank character, also can wrap normally), pre line (merge blank sequence, keep wrapping)
The word spacing in the word spacing field is pixel PX;
Hanging punctuation * sets whether the punctuation character is outside the wireframe, the values are none (not outside the box), first (outside the first edge of the line), last (end edge of the line), allow end, force end;
Punctuation trim * trims the punctuation. Values: none, start (punctuation at the beginning), end (punctuation at the end of line trimming), allow end, adjacent;
Text align last * last line alignment, value: Auto (default left), left, right, center, justify (align both ends), start, end, initial, inherit;
Text emphasis * highlights text, including two values, style and color;
Text justify * specifies the alignment method to use when text align is set to justify. Values: Auto, none, inter word, inter ideograph, inter cluster, kashida, distribute;
Text outline * text outline, including three values: thickness, blur, color; the first is required, and the last two are optional;
Text overflow * handle when text overflows; value: clip (trim), ellipsis (display ellipsis), string (display with given character);
Text wrap * line breaking rules, values: normal, none (no line breaking), unrestricted (line breaking between any two characters), suppress (line breaking in compressed elements);
Word break * non CJK text line breaking rules, values: normal, break all (line breaking within words is allowed), keep all (line breaking at half space or hyphen only);
Word wrap * splits the long and indivisible words and changes them to the next line; value: normal, break word (line wrapping can be performed within the word);
3. Font
Font family type. If the font name is more than one word and needs to be surrounded by quotation marks, multiple fonts can be specified at the same time. If the browser does not support one font, it will continue to try the next font
Font size, the default value is 16px, the value can be absolute size Px, or relative size em, which is based on the current browser's 16px. There are also: x x samll, X-Small, small, medium, large, X-LARGE, XX Large, sampler, large;
Font style style, the values are normal (default), italic (italics), oblique (tilt);
Font variant font size, value small caps small capital letter font, that is, although it is a capital letter, but the size will be smaller than the ordinary one;
Font weight weight: normal (default, 400), bold (bold, 700), lighter (finer), or 100-900;
Font font all attribute sets;
4. list (UL)
List style image list item marks the image with the value of URL ('anypicture. PNG ');
List style position list item tag location, the values are inside (inside the text), outside (outside the text, on the left);
List style type list tag type, values include none (no tag), disc (default solid circle), circle (empty circle), square (solid square), decimal (number), Roman English Latin, etc;
List style list all attribute sets; the order is type, position, image; if you want to select its sub items, just use UL Li style to select
5. Border
Set all properties of border border; set uniform format for all borders, with the value of width style color; default, no order requirements;
Border style: a value represents four sides, two values are up and down, left and right, three values are up, left and right, and four values are up, right, down and left;
The order of assignment is the same as above;
Border color all color sets of border; the order of assignment is the same as above;
All attribute sets of border bottom border; the value is width style color; it can be defaulted without order requirements;
Border bottom color: the color of the bottom border. The value is CSS color;
Border bottom style lower border style, with values of none (no border), hidden (the same as none, except when used for tables), dotted (DOT), dashed (dashed line), solid (solid line), double (double line), groove (define double line, width as border width), ridge (three-dimensional diamond), inset (three-dimensional concave border), set (three-dimensional convex border);
Border bottom width: the width of the bottom border. The values are medium (default), thick, thin, and PX;
Set of all attributes of border left border;
Border left color left border color;
Border left style left border style;
Border left width;
All attributes of the right border are combined;
Border right color right border color;
Border right style right border style;
Border right width right border width;
Set of all attributes of border top;
Border top color;
Border top style top border style;
Border top width top border width;
Border image * is a collection of image border styles. For example: {- WebKit border image: URL (border. PNG) 30 round; / * Safari 3.1-5 * / - o-border image: URL (border. PNG) 30 round; / * opera 11-12.1 * / border image: URL (border. PNG) 30 round;}
Border image source * image source, the value is URL (source);
The edge of border image slice * image is offset inwards, the value is Px,%, fill (keep the middle part of the image);
Border image width * image border width, value: Auto, number (border width multiple),%;
Border image set * sets the amount of pictures drawn outside the border, including four values (for example: 11 11 1), two values are up and down, left and right, three values are up, right and down; the value is: number (border width multiple), length unit value;
Border image repeat * image layout style, values include stretch (default stretch), repeat (tile), round (tile, but if it can be fully tiled, it will be scaled), space (if it can't be completely tiled, the extended space is distributed around the image), initial, inherit;
Border radius * specifies the circle angle of four clockwise corners starting from the upper left corner. Four values can be defaulted; value: length unit,%;
Box Shadow * adds one or more drop-down shadows to the box. For example: h-shadow v-shadow blur spread color inset, except for color, all values are length unit values. The first two are required and others are optional;
6. Outline
The outline is a line around the border, which can play the role of highlighting elements;
Outline all contour attribute sets; no order requirements;
Outline color; value is CSS color;
Outline style style; values are none, dotted, dashed, solid, double, groove, ridge, inset, outline
Outline width; values include medium (default), thick, thin, pixel value PX;
7. Margin
Margin four sides attribute set, the value can be pixel, centimeter, percentage (relative to the parent element); one value represents four sides, two values are top, bottom, left, three values are top, left, right, bottom, left; margin bottom outer margin; the value can be pixel, centimeter, percentage (relative to the parent element);
Margin left margin; value can be pixel, centimeter, percentage (relative to parent element);
Margin right outer right margin; value can be pixel, centimeter, percentage (relative to parent element);
Margin top margin; value can be pixel, centimeter, percentage (relative to parent element);
8. Padding
Padding four sided attribute set, the values can be pixel, centimeter and percentage (relative to the parent element); one value represents four sides, two values are up and down, left and right, three values are up, left and right, and four values are up, right, down and left;
Padding bottom inner margin; value can be pixel, centimeter, percentage (relative to parent element);
Padding left inner margin; value can be pixel, cm, percentage (relative to parent element);
Padding right inner right margin; values can be pixel, centimeter, percentage (relative to parent element);
Padding top inner margin; value can be pixel, cm, percentage (relative to parent element);
9. Dimension
It is used to control the height and width of elements, and also to increase row spacing;
Height element height; the value defines the height in PX, cm and other units, or% (based on the block level object containing it);
Max height element maximum height; the value defines the height in PX, cm and other units, or% (based on the block level object containing it);
Min height element minimum height; the value defines the height in PX, cm and other units, or% (based on the block level object containing it);
Width element width; the value defines the height in PX, cm and other units, or% (based on the block level object containing it);
The maximum width of the max width element; the value defines the height in PX, cm and other units, or% (based on the block level object containing it);
Min width element minimum width; the value defines the height in PX, cm and other units, or% (based on the block level object containing it); 7 line height row height; the value defines the height in PX, cm and other units, or% (based on the block level object containing it);
10. Position
Position specifies the location type of the element. The values are static (default), absolute (absolute), fixed (relative to browser), and relative (relative to normal)
The bottom locates the offset between the bottom edge of the element and the bottom edge of its containing block. The value is CSS unit value;
The offset between the left margin boundary of the left positioning element and the left boundary of its containing block, with the value of CSS unit value;
Right locates the offset between the right margin boundary of the element and the right boundary of the containing block. The value is the CSS unit value;
Top locates the offset between the top edge distance boundary of the element and the top edge of its containing block. The value is the CSS unit value;
Clip clip an absolute positioning element; if the square with the value of Rect (top, right, bottom, left) coordinates has overflow, visible first, then the clip attribute does not work;
Cursor displays the display type of the cursor moving to the element area; values include URL ('picture '), default, auto (browser default), crosshair, pointer, move, e-resize, NE resize, n w resize, n-resize, Se resize, SW resize, s-resize, w-resize, text, wait, help;
Processing when overflow element content overflows its area; the values are visible (default rendering outside element box), hidden (hidden overflow part), scroll (scroll display);
The processing of overflow-x element content overflowing the left and right areas; the values include visible (the default is displayed outside the element box), hidden (the hidden overflow part), scroll (the scrolling display), auto (the scrolling mechanism is provided if the overflow), no display (the whole box is deleted if the content is not suitable for the box), no content (the whole content is hidden if the content is not suitable for the box);
The processing of overflow-y element content overflowing the upper and lower areas; the values are visible (default rendering outside the element box), hidden (hide overflow part), scroll (scroll display), auto (if overflow, provide scroll mechanism), no display (if content is not suitable for the box, delete the whole box), no content (if content is not suitable for the box, hide the whole content);
The stacking order of Z-index elements: the value is a number, which can be negative, and the higher the number, the more displayed in front;
11. Float
Make the elements move to the left or right, and the elements around them will be rearranged; clear attribute is needed to clear this effect;
Float values are left, right, none
Clear specifies that the left or right side of a paragraph is not allowed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
