HTML and CSS languages

HTML is hypertext language

1. Basic label

The value range of

<p> paragraph labels, wrapped content is wrapped, and there is a line between the contents of the top and bottom div tags can not contain div tags

<b> <strong> Bold Label

<strike> add a middle line to the text

<em> text into italic

<sup> and <sub> Upper and lower corner labels

<br> line break

<div><span> Line Wrapping Labels

2. Graphic label

SRC: The path of the picture to display

ALT: The picture does not load successfully prompt

Title: Message when hovering the mouse

Width: The width of the picture

Height: The height of the picture (two properties of the width height is only scaled with one auto-equal ratio.) ）

3. Hyperlink tag (anchor tag)

<a></a>

The properties are:

HREF: The resource path format to link is as follows: href= ' http://www.baidu.com '

Traget:_blank; Open a hyperlink in a new window, frame name: Open the connected content in the specified frame

Name: Define a label for a page

4. List Label:

<ul> unordered list <ul>

<ol> Sequential Table <ol>

<d1> Define list </d1><dt> list headings </dt><dd> list items </dd>

5. Table Label

<table></table>

The properties are:

Border: Table border

cellpadding: Inner margin

cellspacing: Inner margin

Width: pixels
<tr>:table row

<th> Title

<td> Tabular Data

6. Form Label

<from></from>

The label of the form contains a lot of other labels

For example <input type= ' > has a lot of tags

Submit (Submit) as text (text)

CSS, cascading style sheets, to control the performance of Web page data, can be the performance of the Web page and data content separation,

Introduction of CSS

Inline, set the style property of a single label with little or no recommended use

Embedded

The CSS style is set in the

Import type

Import CSS file, import a standalone CSS file into HTML file, not much

Connection type

Use link href= ' mystyle.css ' This is the same as the import idea, but when he loads the page, it is time to judge the CSS style, not to show the original HTML page, in the loading CSS style, the user experience is good, recommended to use

CSS Selector

1, what is the selector

The selector indicates the object of the style we defined in {}, which is the elements of the Style action page

2, selector classification?

* Universal element selector to match any element

E tag Selector that matches all of the label elements used by E

. info and E.info class selectors that match all elements of the CALSS attribute that contain info

Combo Selector

Multi-element selector: matches multiple elements simultaneously, separating elements with commas. Div,p

Background element element selector: Matches all C elements that are descendants of the A element, with a space separating a B between A and C

child element selector; match all child elements of a element B A>b

Property Selector

E[att]: Matches all e elements that have the ATT attribute, regardless of his value

E[att=all] matches all ATT attributes that are equal to the Val element

E[att~=all] matches all ATT attributes with multiple space-delimited values, where one value equals ' val ' element

E[att|=val] matches all ATT attributes with multiple hyphens separated values, where a value of one Val begins with the e element

P:before inserts content before the contents of each <p> element.

P:after Insert content after each <p> element's content

Pseudo-Class selector (designed to control the display of links)

A:link effect when not clicked

A:hover Mouse Placement page, create visual effects

a:visited (visited link status) is used to read articles and to clearly determine which links have been visited

A:active (the state of the mouse that is pressed on the link) is used to show the state of the link activation when the mouse is pressed

1. Color Properties

2. Font properties

3, Background properties (if the body is added to the Background property, to add a height and a width to the body)

4. Text Properties

font-size:10px Automatic Size

Text-align:center: Horizontal arrangement

Line-height height of 200px text line High text height plus text up and down white space 50%; Based on the size of the font this setting is the same as the model of the class, the text will run to the middle

5. Border Properties

6. List Properties

7. Display Properties

Dispay:none for hidden tags

Inline converts block-level labels to inline labels

Block converts inline tags to block-level labels

Position:fixed indicates that the element has floated and is pinned to a certain location on the page. The most powerful, no one can control him.
Z-index: Indicates the priority of the number of layers, the larger the display is about the outer
The Position:relative element box offsets a distance, and his original space retains relative positioning.
The Position:absolute element box floats from the document flow and then moves a position that is relative to the parent label. To use with relative
If the parent tag is not relatve, it is the same as fix.
There are a lot of ways to float, not necessarily float, personal feeling flexible use of relative and absolute effect will be better
To have the concept of layering and boxes
Overflow:auto: Scroll bar up and down
Overflow:hidden Hidden
Overflow:scroll; Scroll bar around the top and bottom
Overflow:inherit; Keep going down.
Overflow:hidden; Hide
Transparent Transparent Color
Background:rgba (0,0,0,.4) transparent color opacity:0.6; Transparency 60%
Display:inline Convert to inline label all height, width style invalidation, margin also invalid
Display:inline-block inline tag, but there is also a bit of block level label
Block equals assignment for margin-top, allowing to continue up.

. A1:hover indicates that the contents of the A1 tag have changed when the mouse is moved to the A1 label
. a1:hover. A2 means that when the mouse moves to A1, A2 is a child of A1, and then the contents are released.

Top distance can also write percent

HTML and CSS languages