CSS style Sheets

Cascading Style Sheets: CSS cascading style Sheet. V2.1 (3.0 versions Some older systems are not supported)
Controls the appearance of page styles.

One, the style sheet is divided into three categories:
1. Inline style sheet. --placed in the start tag of the element. --only works on the current element.
<input name= "txt" style= "border:0px; border-bottom:1px solid black; "type=" text "/> (solid means solid line)

2. Inline style sheet. --placed in the ...
<style type= "Text/css" >
Input
{
border:0px;
border-bottom:1px solid red;
}
</style>

3. external style sheet. --Put it in a separate. CSS style sheet file. --can be on the entire site.

(1) Definition of an external style sheet

(2) Invocation of an external style sheet

Create a new CSS file to put the style sheet, if you want to call the style sheet in the HTML file, you need to right-click in the HTML file--css style-Attach the style sheet. General Link Connection method

Second, the style sheet selector:
General syntax for inline, external style sheets:
Selector Selector
｛
style = value;
style = value;
style = value;
....
｝

1. Basic:
(1) Tag selector: Use tag name to select the selector.
Input{...}
Div{...}
Span{...}
Td{...}

(2) Category selector: Use class to categorize elements in HTML elements, and then use the value of this class as the selector. With "." Beginning
The name of the. Class {...}

(3) ID Selector: Works on the element for the corresponding ID in HTLM. Start with "#"
#ID的名 {...}
#d1 {font-size:48px;}
#dd {border:5px dotted red;}

2. Compounding:
(1) separated by commas. --side-by-side relations, while working.

Input, #dd,. Yellow,.uu
{
Color:gray;
line-height:28px;

}

(2) separated by a space. --Future relationships.
Div UU
{
Background-color:blue;
}

<input name= "txt" type= "text" class= "UU"/>
<div>

<input name= "txt" type= "text"/>
<input name= "txt" type= "text" class= "UU" value= "******"/>

<span>
<input name= "txt" type= "text" class= "UU" value= "******"/>
</span>
</div>

What is a descendant??? Descendants are descendants, and the subset values contain the next generation.
Note that the:<p> does not have a div.

(3) Class two filter.
Tag Selector. class Selector {...}

Input.uu
{
border:5px double red;
}

Cases:

Contrast: Div. UU is different from Div.uu.

There are spaces in the middle of the representation of descendants, no space is the meaning of the filter.

Three, style properties

1. Background and Prospect

Background-color: #90; background color, style sheet high priority

Background-image:url (path) Set background picture (default)

background-attachment:fixed; The background is fixed and does not scroll with the font

Background-attachment:scroll; Background scrolling with fonts

background-repeat:no-repeat; No-repeat, uneven, repeat, tiled repeat-x, horizontally tiled, repeat-y, tiled vertically

Background-position:center; The background map is centered, and the repeat must be "no-repeat" when setting the background map position

The background-position:right top background is placed in the upper right corner,

background-position:left 100px top 200px; 100 pixels from the left, 200 pixels from the top ( can be set to a negative value )

Font

Font-family: "New song body"; font. Commonly used Microsoft Ya hei, song body

font-size:12px; font size, commonly used pixels 12px.14px (site commonly used 12px and 14px), 18px, you can also use "em", "2.5em" that is: the default font of 2.5 times times, you can also use a percentage

Font-weight:bold; Bold is bold. Normal is OK.

Font-style:italic; Tilt, normal is not inclined

color: #03C; Color

Text-decoration:underline; Underline, Overline is underlined, Line-through is strikethrough, none is remove underline

Text-align:center; Aligns horizontally with the center. Left is aligned to the right. Right is justified

Vertical-align:middle; vertical center alignment, top is the topmost alignment, and bottom is the bottom alignment. Generally set the line height after use, div vertical Center to pull the line up to show

text-indent:28px; Indent in first line

line-height:24px; Line height, typically 1.5 to twice times the font size

2. Borders and Borders

	Border	Margin	Padding
Top
Right
Bottom
Left

Border (table border), style, margin (out-of-table spacing) padding (content and cell spacing)

BORDER:5PX Solid blue;/* Four frame, 5 pixels wide, solid line, blue equivalent to the following 3 lines */

border-width:5px;

Border-style:solid;

Border-color:blue;

Note that the order of the 4 borders is clockwise in the right and bottom left

3. List and block

The width height (top right bottom left) is only useful in the case of absolute coordinates

List-style:none; cancel the serial number

List-style-image:url pictures do serial numbers

List-stylel:circle ordinal change circle, style equivalent to unordered

List-style-position:outside serial number is not displayed outside the content.

List-style-position:inside serial number with content will squeeze to the right.

CSS style Sheets