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.