Shulou(Shulou.com)06/03 Report--

This article is to share with you about the use of HTML and css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. The structure of HTML web pages

My first web page

2. The grammar of HTML

3. The difference between post and get

Get is to get data from the server, and post is to transfer data to the server.

The amount of data transmitted by get is small and can not be more than 2kb. It is generally considered that there is no limit to the amount of data transmitted by post.

The security of get is lower than that of post, but the execution efficiency is better than that of post and method.

4. Css (cascading) style sheet

Syntax: selector {attribute: attribute value; attribute: attribute value}

5. Classification of style sheets

External style sheet

External stylesheets are ideal when styles need to be applied to many pages. Using external stylesheets, you can change the appearance of the entire site by changing a file.

Internal style sheet

When a single file requires a special style, you can use an internal style sheet. You can define internal stylesheets through tags in the head section.

Body {background-color: red}

P {margin-left: 20px}

Inline style

Inline styles can be used when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

This is a paragraph

6. Selector

The class selector selects according to the class name

In front of it with "." To mark, such as:

.demoDiv {

Color:#FF0000

}

In HTML, an element can define an attribute of a class.

Such as:

The font color in this area is red.

At the same time, we can define another element:

The font color of this paragraph is red

Finally, browsing through the browser, we can find that this style is applied to all the elements whose class is demoDiv. Includes the div element and p element in the page.

In the above example, we define class for both elements, but if there are many elements that apply this element, you have to define elements one by one, which will result in too much code duplication on the page, which is called "multiclass disease".

We can define it like this.

The font color in this area is red.

At the same time, we can define another element:

The font color of this paragraph is red

In this way, we just define a class and apply the style to all the elements at the same time.

Collapse tag selector

A complete HTML page is made up of many different tags, while the tag selector determines which tags

Use the appropriate CSS style, (you may be from a different location in the environment, but in any case, you always

Is to wear the same suit, this dress is defined for you in advance by the tag selector, no matter where you go.

For example, the declaration of the p tag style in the style.css file is as follows:

P {

Font-size:12px

Background:#900

Color:090

}

Copy the code and all p tags on the page have a background of # 900 (red), a text size of 12px, and a color of # 090 (green).

In later maintenance, if you want to change the background color of the p tag throughout the site, you only need to modify it

The background attribute is fine, it's that easy!

Collapse ID selector

It is unique to select an element according to its ID.

It is marked with a "#" sign, which can be defined in the style:

# demoDiv {

Color:#FF0000

}

This represents the setting of the element where id is demoDiv and its font color is red.

We define an element on the page and define its ID as demoDiv, such as:

The font color in this area is red.

Browsing with the browser, we can see that because the color in the area has changed to red.

Define another area

There is no color defined in this area.

Browsing with the browser, as expected, there is no style applied to the area, so the font color in the area is still the default color black.

Collapse descendant selector

The descendant selector, also known as the inclusion selector, is used to select the descendants of a specific element or group of elements. The descendant selector is represented by two commonly used selectors with a space in the middle. The front common selector selects the parent element, and the later common selector selects the child element, and the style will eventually be applied to the child element.

Such as:

.father.child {

Color:#0000CC

}

Black

blue

It's also blue

Here we define all elements whose class attribute is father and the class attribute below is child and the color is blue. The descendant selector is a very useful selector, using the descendant selector to locate elements more accurately.

Folding sub-selector

Note the difference between this child selector and the descendant selector. The sub-selector refers only to its direct descendant, or you can understand it as the first descendant acting on the child element. The descendant selector acts on all descendant elements. The descendant selector selects through spaces, while the sub-selector selects through ">". Let's take a look at the following code:

Example Source Code

CSS:

# links a {color:red;}

# links > a {color:blue;}

HTML:

Div+CSS tutorial >

CSS layout instance

CSS2.0 tutorial

We will see that the first link element, "Div+CSS tutorial", is displayed in blue, while the other two elements are displayed in red. Of course, maybe your browser doesn't support such CSS selectors. We also emphasized the incompatible status quo at the beginning.

The difference between the child selector (>) and the descendant selector (space): both represent the "ancestor-descendant" relationship, but > must be "father > son", and the space can be not only "father and son". It can also be "father" and "great grandfather son".

Collapse pseudo-class selector

Sometimes it is necessary to apply the style of an element with conditions other than the document, such as mouse hover, and so on. At this point, we need to use pseudo-classes. The following is the pseudo-class definition for the link application.

A:link {

Color:#999999

}

A:visited {

Color:#FFFF00

}

A:hover {

Color:#006600

}

/ IE is not supported. You can see the effect by browsing with Firefox.

Input:focus {

Background:# E0F1F5

}

Link indicates the style of the link when it is not clicked. Visited indicates the style when the link has been accessed. Hover represents the style when the mouse hovers over the link.

Pseudo-classes can be applied not only to link tags, but also to some form elements, but the application of form elements is not supported by IE, so generally pseudo-classes are only applied to the style of links.

Folding universal selector

The universal selector is represented by *. For example:

* {

Font-size: 12px

}

Indicates that all elements have a font size of 12px; at the same time, universal selectors can also be combined with descendant selectors.

For example:

P * {

……

}

Indicates that this style is applied to all elements that descend from all p elements. But the combination with the descendant selector is prone to situations where the browser cannot be parsed, such as this:

All the text is defined in red

All the subtags in this paragraph will be defined as blue

All the subtags in this paragraph will be defined as blue

All the subtags in this paragraph will be defined as blue

All the subtags in this paragraph will be defined as blue

In this example, there is a p tag nested inside the p tag, and the style may produce a result that is different from the expected result.

Collapse group selector

When several elements have the same style attributes, you can call a declaration together, with elements separated by commas. Such as:

P, td, li {

Line-height:20px

Color:#c00

}

# main p, # sider span {

Color:#000

Line-height:26px

}

.www _ 52css_com,#main p span {

Color:#f60

}

.text1 h2,#sider h4,.art_title h3 {

Font-weight:100

}

The use of group selector will greatly simplify the CSS code, will have multiple elements with the same attributes, merge groups to select, define the same CSS attributes, which greatly improve the coding efficiency, but also reduce the volume of CSS files.

Fold sibling selector

In addition to the child selector and descendant selector above, we may also want to find one of the two brothers, such as a heading H2 element followed by two paragraph p elements, we want to locate the first paragraph p element and apply a style to it. We can use the neighbor sibling selector. Look at the following code:

Example Source Code CSS

H2 + p {color:blue}

HTML

A very professional CSS site

Div+CSS tutorials introduce a lot of knowledge about CSS page layout.

In the CSS layout example, there are many cases related to CSS layout.

We will see the first paragraph, "the Div+CSS tutorial introduces a lot about the layout of CSS pages." The text color will be blue. The second paragraph is not affected by this CSS style.

The difference between + and ~: similar to the above one, both represent brotherly relationship, but + must be "eldest brother + second brother", ~ can also be "eldest brother ~ third brother", "second brother ~ fourth sister"

Collapse property Selector

You can define a css by determining whether an attribute of the html tag exists

For example:

Abbr [title] {

Color:#FF0000

}

Indicates whether the abbr tag has a title attribute, and if so, applies this style.

Css can also be defined by judging the value of an attribute of a html tag

For example:

P [title = 'app'] {color:#FF0000

}

Thank you for reading! This is the end of this article on "what is the use of HTML and css". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.