15-07-26 html--style basic concepts, selectors, style properties

15-07-26 html--style basic concepts, selectors, style properties

Style sheet:

CSS (cascading style Sheets, cascading style sheets)

Function: Beautify HTML page, page layout.

Classification:

Inline, written in the label inside Style= "" Inside the style, the advantage is the control precision, reusability is poor. Embedded, embedded in the head of the Web page, reusable high external, style written in another file, if you want to use directly attached.

Priority: inline > Inline > External

Selector:

* On behalf of all the elements of the General page will need to write this style, remove some of the label's own boundaries, auto stands for the center

<style type= "Text/css" >

*  // format works on all tags {    margin:0px auto;      

</style>

Tag Selector: Select the element with the name of the tag. Such as:

<style type="text/css" >div  // format works with div tags {style;}</style>  

ID selector: Select the element with the ID name of the tag, preceded by the name of the ID with # such as:

<style type="text/css" >#d  // format for id= "D" tag function {style;}</style> 

Class selector: Select the element with the class name, preceded by the class name. Such as:

<style type="text/css" >. A  // format to class= "a" tag function {style;}</style> 

Combo selector:

Side-by-side relations: separated by commas, representing juxtaposition. Descendant relationship: separated by a space, preceded by a space, is the parent element behind it. Filter relationships: separated by dots.

Style:

1. Foreground and background

Foreground: Refers to text font: whether the italic font size is bold or not;

font-family: Modify font font-size: Font size font-style: Font style, italic tilt font-weight: Font weight, bold bold

Color: Font Color text-decoration: Text decoration, none can go underline text-indent: First line Indent

Background: background-color: Background color background-image: Background image background-repeat: Tiling method background-position: Position of background image Background-attachment: Fixed mode of background image

Alignment text-align: Horizontal Alignment Center Center vertical-align: Vertical alignment middle center top bottom Bottom line-height: Row height

2. Borders and Borders

Border: border: Width style color; border-width:1px; Border-style:solid; Border-color: #F00;

Margins: margin: top right lower left; Margin-top: Top margin margin-right: Right margin margin-bottom: Bottom margin margin-left: Left margin

padding: padding: upper right lower left; Padding-top: Inner top margin padding-right: Inside right margin padding-bottom: Inside bottom margin padding-left: inside left margin

3. List and square width: width height: height

List-style: Position type picture; List-style-type: List-marked style, none Remove List-style-image: List picture list-style-position: Location of list style

15-07-26 html--style basic concepts, selectors, style properties