Style sheet (css:cascading style Sheets) Brief tutorial [next]

css| Tutorial | style sheet

Seven CSS1 Property

3. 1 Font Properties

Type, font style, font size, font effect, and so on. Common properties are:

①font-family: Font, cursive, fantasy, comic Sans Ms.

②font-size: Font physical size or relative size, physical size includes: Xx-small, X-small, small, medium, large, X-large, Xx-large, respectively corresponding to the 1~7 font.

③font-style: Italic, Normal, italic, oblique (=italic).

④font-weight: Text weight, normal, bold, bolder, lighter.

⑤font-variant: Small caps, normal, small-caps (small capital letters).

<!--[if!supportemptyparas]--> <!--[endif]-->

<!--[Endif]-->3. 2 Text Property

Text decoration, text indentation, word spacing, letter spacing, line spacing, horizontal and vertical alignment of text, and control of blank size. Common properties are:

①text-transform: Word case, none, capitalize, uppercase, lowercase.

②text-decoration: Special effects, none, Line-through, overline, underline.

③word-spacing: Word spacing, normal, inches (in), cm (cm), point (PT), Pica (PC), EM (EM), pixel (px).

④letter-spacing: letter spacing.

⑤vertical-align: Vertical positioning of text or images, baseline (default), Sub, super, top, text-top, middle, bottom, text-bottom.

⑥text-align: Text horizontal alignment, left, right, center, justify.

⑦text-indent: Indents the first line of the paragraph element.

⑧line-height: The height of the current row, so that the line is set to empty out the same distance.

⑨white-space: Controls how spaces within an element are handled, normal (default), pre (without compressed spaces), nowrap (even if the text line exceeds the width of the element's content)

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 3 Color properties and Background properties

①color: Text color

②background-color: Background color

③background-image: Background image that is displayed below the background image to provide an opaque background than the ④background-repeat: determines how the background image is arranged when it is less than the element's canvas space hour.

Repeat: Default, tile in horizontal and vertical two directions;

Repeat-x: Tile in horizontal direction only;

Repeat-y: Tile only in vertical direction;

No-repeat: Uneven shop.

⑤background-attachment:

Scroll: Default, the image and text scrolling together;

Fixed: The image does not move, the watermark effect.

⑥background-position: The position of the background image in the element canvas space, specifying the horizontal and vertical spacing of the upper-left corner of the image relative to the canvas. Absolute distances (pixels), percentages, or special keywords can be used.

Horizontal direction Keywords: Left, center, right

Vertical-Orientation Keywords: top, center, bottom

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: The Background-image attribute is used.

B{background-image:url (donut-tile.gif); background-color:white;}

P{background-image:url (picture.gif); background-position:20% 40%;}

Body{background-image:url (picture.gif); Background-position:center Center;

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4 Box Properties

Block-level elements such as <p> elements can be considered as a rectangular container on the screen. You can control the three aspects of these containers by using style properties. The box properties you can control are as follows:

①margin property: Determines the distance between the edge of the box of the element and the edge of the adjacent element.

②border property: Determines the visual characteristics of the border surrounding an element's edges.

③padding property: Determines the distance between its edge and its actual content within an element.

④height,width and Positioning properties: Determines the size and position of the box that is generated by the element.

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 1 Margin Properties

Setting rules for the one-sided distance:

①margin-top: Top margin

②margin-right: Right margin

③margin-bottom: Bottom Margin

④margin-left: Left Margin

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: The setting of the one-sided distance.

body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}

p {margin-bottom:20mm;}

div.fun {margin-left:1.5cm; margin-right:1.5cm;}

<!--[if!supportemptyparas]--> <!--[endif]-->

You can also use the margin property to set the margin for four edges at a single interval.

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: Rules for setting margins by margin property.

① if only a single value is specified, the value is applied to 4 "blanks."

such as: p{margin:1.5cm;}

② if four values are specified, they apply clockwise to the various blanks (top, right, bottom, and left).

The last distance is followed by a semicolon, separated by a space.

such as: p{margin:10px 5px 15px 5px;}

③ if only two or three values are specified in the rule, the missing side value will be determined by its opposite side.

such as: p{margin:10px 5px;}

The top and bottom blanks are set to 10 pixels, and the blank to the right and left is 5 pixels.

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 2 Border Properties

The border is between the white space (margin) and the gap (padding).

(i) Border-style property

①none: No Border

②dotted: Point Border

③dashed: Dotted border

④solid: Solid Line border

⑤double: Double Border

⑥groove: Etched Border

⑦ridge: Highlight Border

⑧inset: Recessed Border

⑨outset: Raised border

You can also set the border type of each side individually by Border-top-style,border-right-style,border-bottom-style,border-left-style. When you use Border-style to set up four sides, the rules are similar to margin.

<!--[if!supportemptyparas]--> <!--[endif]-->

(ii) Border-width properties

Border-width, Border-top-width, Border-right-width, Border-bottom-width, border-left-width can set the thickness of the border separately. Typical values are: thin, medium, thick, and of course other length values are desirable.

(iii) Border-color properties

Border-color, Border-top-color, Border-right-color, Border-bottom-color, Border-left-color can set the color of the border respectively.

<!--[if!supportemptyparas]--> <!--[endif]-->

Border-style, Border-width, Border-color can be applied together to border, Border-top, Border-right, Border-bottom, Border-left to achieve a quick set of related border properties. When three properties are set together, it is best to give values in the order of Border-style, Border-width, and Border-color.

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: Border the set of properties of a combination.

#RainbowBox

{

Background-color:yellow;

Border-top:solid 20px Red;

Border-right:double 10px Blue;

Border-bottom:solid 20px Green;

Border-left:dashed 10px Orange;

}

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 3 Padding Properties

The whitespace between the element's border and its actual content can be controlled by the Padding property. The 4 gaps (padding) of an element can be set by Padding-top, Padding-right, Padding-bottom, and Padding-left. As with white space (margin) and borders (border), you can use the Padding property of a shorthand character to set the gap of four edges at once.

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: a comprehensive application involving margin, border and padding.

<style type = "Text/css" >

<!--

#one

{

Background:yellow;

border-style:double;

Border-width:medium;

padding-left:1cm;

padding-right:0.5cm;

}

#two

{

Background:yellow;

border-style:double;

Border-width:medium;

padding-top:1cm;

padding-bottom:1cm;

}

#three

{

Background:yellow;

border-style:double;

Border-width:medium;

padding:1cm 1cm;

margin:0.5cm 4cm;

}

-->

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 4 Width, Height property

Example: Synthesis.

P

{

width:300px;

height:400px;

padding:10px;

Border:solid 5px;

Background-color:yellow;

Color:black;

}

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 5 Float, clear properties

The Float property affects how the element is aligned horizontally, similar to the Align property of most HTML elements. It causes the elements it contains to "flow" to the left or right, when we call this element "flow" element. The clear property positions the flow element vertically, deciding whether to continue or clear the current flow, similar to the Clean property of the HTML element BR, with left, right, both, none (default).

<!--[if!supportemptyparas]--> <!--[endif]-->

3. 4. 6 Display Properties

The CSS model defines three types of display elements: block-level elements, inline elements, and lists. The Display property allows one of the displayed types of an element to be one of the following four values: Block,inline,list-item and none.

①none: Elements will not be displayed and will not occupy the canvas space, which is different from setting the Visibility property.

②block: block-level elements.

③inline: inline element.

④list-item: List Element

<!--[if!supportemptyparas]--> <!--[endif]-->

Example: The Display property is used.

① "Close" a paragraph so that it does not appear:

P.remove{display:none;}

② transforms a block-level element (such as a paragraph) into an inline element so that it can be displayed without wrapping!

P{display:inline;}

③ converts an inline element into a block-level element, which adds a carriage return (newline)!

Em{display:block;}

④ forces an element to appear to some extent as a list:

B{display:list-item;}

7. 6 Using style sheet positioning

1. Three classical values for the Position property

Elements of the ①position:absolute:position property to absolute become a container in which other elements can be contained.

If this element is repositioned, all elements defined within it will be moved along with it.

②position:fixed: Similar to absolute positioning, but does not allow objects to move on the screen. You can use this property to make the image

Produces a watermark effect.

③position:relative: When you need to position an object relative to its current position in the document, you can use the

This value.

Example: relative positioning of the application.

<p style= "Background-color:orange;" >this is a test of <span style= "Position:relative;top:10px;left:20px;background-color:yellow;" >relative Positioning.</span>this is only a test.</p>

2. Left, right property

You can use left and right to locate an object, which is not always for the top left-hand corner of the screen, but for the element's parent element (container).

3. Z-index Property

Allows multiple elements to overlap, with the number of large elements placed on the small number of elements, the smallest ordinal number 0.

4. Visibility property

Determines whether an element is visible, but is not immediately visible, and still occupies the canvas space. Values are: Hidden, visible, inherit.

5. Overflow property

Determines the processing method when the content of an element is allocated in a large space. Values can have hidden, scroll.