DIV CSS basic training_html/css_WEB-ITnose

Common tags Basic tags

Create an HTML document

Set the document title and other features that are not included in the web page Displayed information

Set the title of the document    

Create a paragraph

Line break Insert a carriage return and line feed

Create a hypertext link

Table tag

Create a table

Each row in the table

Table Each cell in a row

Set the table header: usually bold and centered text

Form label

< ;/form> Create a form

action="..."The URL of the server that receives the data

method="..."HTTP method (get, post). Among them, get is deprecated

Create a drop-down menu

Create a text box area, the number of columns sets the width, and the number of rows sets the height

Create a check box , text behind the label

Create a radio button, text behind the logo

Create a single-line text input area, size is set to the width of the string

Create submission (submit ) button

Create a reset button

Create a button    

< ;LABEL>

First name:

Last name:

User:

Password:

I like bicycles:

I like cars:

Male:

Female:

Volvo

Saab

Fiat

Audi< ;/option>

Height:

Weight:

Name:

Email:

Content:

Common style font attributes: ( font)

Size font-size: x-large; (extra large) xx-small; (very small) Generally not used in Chinese, just use numerical values, units: PX, PD
line-height : normal; (normal) Unit: PX, PD, EM
Thickness font-weight: bold; (bold) lighter; (fine) normal; (normal)
Modification text-decoration: underline; (underline ) overline;(overline) line-through;(strikethrough) blink;(blink)

Block attribute: (Block)

pair Liu text- align: justify; (align both ends) left; (align left) right; (align right) center; (center)
indent text-indent: value px;
vertical alignment vertical-align: baseline;( baseline) sub; (subscript) super; (subscript) top; text-top; middle; bottom; text-bottom;

white-space: pre; (reserved) nowrap; (no line wrapping)
Display display: block; (block) inline; (embedded) list-item; (list item) run-in; (append part) compact; (compact) marker; (marker) table; inline-table; table -raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(table title)

Box attributes: (Box)
width:; height:; float:; clear:both; margin:; padding:; Order: top right, bottom left

Padding: 10px 9px 8px 7px; padding:10px 5px; padding-left:10px;

Border attributes: (Border)
border-style: dotted;(dotted line) dashed;(dashed line) solid; double; (double line) groove; (groove line) ridge; (ridge) inset; (dent) outset;
border-width:; border width
border-color:#;
abbreviation Method border: 10px solid #fff;

Style inheritance

Defining css in the parent tag, defining css in the child tag follows the style that the child does not have, and inherits the parent's Styles, if any, of child tags, will override the style of the parent tag;

Some attributes cannot be inherited;

border attributes, Padding, Margin ), background and border properties cannot be inherited.

Style follows the principle of proximity

Style classification

Do not use inline styles, do not use inline styles unless absolutely necessary

Box model inline elements and block-level elements

Characteristics of block (block) elements:

①Always starts on a new line;

②Height, line height, margins and padding can all be controlled;

③The default width is 100% of its container , unless a width is set.

④ It can accommodate inline elements and other block elements

Characteristics of the

inline element:

① and other elements are on the same line;

② height, line height and outer and inner margins cannot be changed;

③The width is the width of its text or picture and cannot be changed

④Inline elements can only accommodate text or other inline elements

For example: < ;span> And the unique ID

2. The first-level function module independently uses a CSS style sheet

3. Common attributes are called from the public style sheet through classes

4. As few as possible Use background images

5. Use less non-W3C standard tags or styles