Html-css to improve __html

relative address and absolute address

? Relative address (path): "./" means the current file in the directory, such as: "./pic.jpg" represents the current directory of the pic.jpg picture, this use can be omitted
Relative address (path): ".. /"represents the previous directory in the directory where the current file resides, such as:". /images/pic.jpg "represents a picture of the pic.jpg in the Images folder in the previous directory under the current directory. Absolute Address

Absolute address (PATH): For example: IMG src= "C:\course5\03day\images\001.jpg" alt= "picture"/absolute address in the overall file migration will be due to the disk and the top-level directory changes and can not find the file, the relative address does not have this problem. To introduce or link to an external file on a Web page, you need to define the address of the file, commonly introduced or linked to external files including the following:

<!--introduce external picture   -->


<!--link to another page   -->
< A href= "002.html" > Link to a Web page 2</a>

<!--outside a CSS file   -->
<link rel= "stylesheet" type= "text/" CSS "href=" Css/main.css "/>

<!--outside the chain a JS file   -->
<script type=" Text/javascript "src=" js/ Jquery.js "></script>

HTML tags improve

Unordered lists are generally used in the layout of the news title list and the article title list, which contains semantics, the tag structure is as follows:

<ul>
    <li> list title one </li>
    <li> list title two </li>
    <li> list title three </li>
</ul>

The content of the list is generally linked, click on the link to the news or the specific content of the article, so the specific structure is generally like this:

<ul>
    <li><a href= "#" > list title one </a></li>
    <li><a href= "#" > List heading two </ a></li>
    <li><a href= "#" > List title three </a></li>
</ul>

CSS Common selector

1, ID Selector
By selecting an element by ID name, the ID name of the element cannot be duplicated, so a style setting item can only correspond to the previous element of the page, cannot be reused, and the ID name is generally used by the program, so it is not recommended to use the ID as the selector.

#box {color:red} ...
<p id= "box" > This is a paragraph label </p>   <!--corresponding to one of the above styles, other elements are not allowed to apply this style-->
<p> This is the second paragraph label </p> <!--cannot apply the above styles, each label can only have a unique ID name-->
<p> This is the third paragraph label </p> <!--cannot apply the above style, each label can only have a unique ID name  -->

2. Group Selector
Multiple selectors, if you have the same style settings, you can use the group selector.

. box1,.box2,.box3{width:100px;height:100px}. box1{background:red}. Box2{background:pink}.
box2{ Background:gold}

<div class= "Box1" >....</div>
<div class= "Box2" >....</div>
<div class= "Box3" >....</div>

3, pseudo class and pseudo element selector
The commonly used pseudo class selector has hover, which indicates the state of the mouse hovering over the element, the pseudo element selector has before and after, they can insert the content in the element through the style.

. box1:hover{color:red}
. Box2:before{content: ' Beginning text ';
Box3:after{content: ' End-of-line text ';}


<div class= "Box1" >....</div>
<div class= "Box2" >....</div>
<div class= "Box3" >....</div>

CSS Properties Improve

Text common style properties two:
Text-align to set the horizontal alignment of text, such as Text-align:center to center text horizontally
Text-indent to set the first line of text indent, such as: text-indent:24px; Set the first line of text indent 24px
Font-style sets whether the font is italic, such as: Font-style: ' normal '; Set not italic, Font-style: ' Italic '; set text italic
Font at the same time set several properties of the text, write the order of compatibility issues, it is recommended to write in the following order: font: Whether bold font size/line high font; such as: Font:normal 12px/36px ' Microsoft Ya Black ';
Other common style properties:
List-style set the dot in the unordered table, and generally set it to "none", such as: List-style:none
CSS element Overflow
When the dimensions of a child element exceed the size of the parent element, you need to set the way that the parent element displays the overflow child elements, set by the overflow property.

Overflow settings:
1, visible default value. Content is not trimmed and is rendered outside the element box.
2, hidden content will be trimmed, and the rest of the content is not visible, this property also clears the floating, clear margin-top collapse function.
3, scroll content will be trimmed, but the browser will display scroll bar to see the rest of the content.
4. Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.