| Float | Input style sheet | Cpoyright | |
| Clear | Benefits of Div + CSS | My blog | |
| Margin | Selector of style rules | Send me an email | |
| Padding | The tutorial is not complete yet... | Lamp training expert |
Div itself has the container nature, which can nest any HTML code. However, <p> </P> labels cannot be nested. <div>
However, even if <p> </P> is nested with <div>, the browser will not report an error. In addition, you can use CSS to change the page skin.
Apply a style to the screen or projector <style media = "screen, projection"> P {color: Red} </style>
As a Web page, it is recommended that the page length be no more than three screens. If there is a lot of content, you can make it into a tab.
HTML code is not executed in <style>, so it is used to annotate HTML code <! --> Does not work in <style>
When writing a style, it is usually added in <style>! --... // -->. For example, <style> <! -- P {color: Red} // --> </style>
If the browser does not support styles, the content is displayed. If yes, <! --... // --> Does not work.
Input style table [CSS styles include: inline style table, embedded style table, external style table, and input style table]
Use the @ import statement in CSS to input the external style table file to the <style> label or CSS file.
Demo.css content: div {color: yellow; font-size: 4 cm ;}
Test.css content: P {color: green; font-size: 3 cm ;}@ import url(demo.css );
<HTML>
<! --
<Head> <LINK rel = "stylesheet" type = "text/CSS" href = "test.css"/> <Head> <style> @ import url(test.css); </style> <Head> <style> <! -- @ Import url(test.css); // --> </style> <Head> <style> P {color: green; font-size: 3 cm ;}@ import url(demo.css); </style> -->
<Body>
<P> aaaaaaaaaaa </P>
<Div> bbbbbbbb </div>
</Body>
</Html>
Selector of style rules
HTML selector: Write the HTML Tag directly before {}. The CSS effect defined in {} only applies to the HTML Tag. For example, P {color: Red} only applies to <p> </P>
Class selector: for example, P. one {color: Red} and P. two {color: Gray}, <P class = "one"> AAA </P> and <P class = "two"> BBB </P>
Another example is. one {color: Red} and. two {color: Gray}, <P class = "one"> AAA </P> and <H2 class = "one"> BB <H2>
Id selector: Example # One {color: Red} and # Two {color: Gray }, <p id = "one"> AAA </P> and <p id = "two"> BBB </P>
Each HTML tag has an ID attribute, but all the ID attributes on the same page cannot be repeated.
If there is only one HTML tag on the page that uses this style, it is defined as ID. If multiple labels are used
Association selector: for example, center P em {color: Red}. When this CSS is applied, the <center> tag must contain the <p> tag, the <p> label must contain the <em> label.
Therefore, these three application methods are invalid, that is, <p> <em> BBB </em> </P>, <p> AAA </P> <em> BBB </em>, <em> <p> AAA </P> </em>
Only <center> <p> <em> BBB </em> </P> </center> can the CSS effect be effectively displayed.
Another example is. one. two em {color: Red }, <center class = "one"> <P class = "two"> <em> BBB </em> </P> </center>
Another example is # One. two em {color: Red }, <center id = "one"> <P class = "two"> <em> BBB </em> </P> </center>
Combination selector: for example, p, Div, H2 ,. one, # Two {color: Red}. This CSS style can be used for <p>, <div>, <H2>, and the class and ID attributes of each tag.
<P> aaaaaa </P> <div> BBB </div> <em class = "one"> CCCC </em> <B id = "two"> dddddddd </B> valid
The Association selector is separated by spaces, and the combination selector is separated by commas.
Pseudo element selector: defines the various states of the same HTML element and the content contained in it.
For example, the <A> label is used as a link. It has various statuses. It is a state when you move the mouse over it. After you click the mouse, it is a state.
Not all tags have pseudo elements. For example, <A> tags have pseudo elements, and <p> tags also have. <P> the first line of text or letter of a paragraph
The CSS effects of the pseudo elements corresponding to the same tag must be defined one by one. The <A> tag is used as an example below.
Normal status A: link {font-size: 1 cm; color: Red}, the status of the cursor moving to the link a: hover {font-size: 5 cm; color: Green}
Accessed status A: visited {font-size: 2 cm; color: yellow}, application time <a href = "http://www.lampuser.com"> lamp </a>
You can also use the pseudo elements of <A> with the class, such as A. One: link {font-size: 1 cm; color: Red}
Use <a class = "one" href = "http://www.lampuser.com"> lamp </a> .. Therefore, these six selectors can be used flexibly.
Benefits of Div + CSS
DIV is the content of a webpage, and CSS is the webpage style. Its advantages are as follows:
① Easy Revision
② Improve ease of use
③ The table layout is not flexible enough
④ Separating performance and content
⑤ Better control the page layout
⑥ Clear structure, easy to search by search engines
The search engine bypasses CSS and directly retrieves the desired content from the page. Search engines only care about content, not about page styles
If the <Table> layout is used in a large amount on the page, the search engine will spend a lot of time to get the desired information, and <Table> also occupies the bandwidth.
In addition, when the search engine crawls to the page, it first looks for
Margin: Label attribute of the outer margin
Example. bianjv {margin-bottom: 1 cm; margin-top: 2 cm; margin-left: 3 cm; margin-Right: 4 cm }, <P class = "bianjv"> AAA </P>
It is equivalent to. bianjv {margin: 1 cm 2 cm 3 cm 4 cm ;}. In addition, automatic layout is also available, such as. bianjv {margin: auto 0px} Or. bianjv {margin-left: auto }.
You can also use the margin comprehensive settings such as. bianjv {margin: 1 cm 2 cm 3 cm;}. It will automatically match the margin-bottom and margin-top and margin-left attributes.
Padding: Label attribute of the padding
Example: TD {padding-left: 1 cm; padding-Right: 2 cm; padding-top: 3 cm; padding-bottom: 4 cm ;}
Apply <Table border = "1"> <tr> <TD> aaaaaaaa </TD> </tr> </table>, <TD> AAA </TD> automatically applies the CSS effect.
Float: Specifies the alignment of a text or image or area relative to another area. The value is none, left, or right.
Example: one {float: Right;}. <P class = "one"> AAA </P>
Clear: whether the element is subject to floating conditions. The value is none, left, right, or both.
Example: one {float: Right; clear: Left;}. <B> AAA </B> <B class = "one"> BBB </B>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
