CSS 7.30

1. Referring to the inline element, we will think that the property of a display is display:inline; This property can fix the famous IE double floating boundary (float time margin) problem

2. In general, you can apply text-indent to all block-level elements, but you cannot apply the attribute to inline elements, and you cannot apply the Text-indent property on substitution elements such as images. However, if there is an image in the first row of a block-level element (such as a paragraph), it moves with the rest of the text on the line.

Tip: If you want to "indent" the first line of an element in a row, you can create this effect with the left padding or margin.

3.

H2.stricken {Text-decoration:line-through;} h2 {Text-decoration:underline overline;}

For a given rule, all H2 elements with class stricken have only one line-through decoration, without underscores and underscores, because text-decoration values are replaced instead of accumulated.

4. Links

Four states of the link:

• A:link-Generic, inaccessible links
• A:visited-The user has visited the link
• A:hover-the mouse pointer is over the link
• A:active-the moment the link is clicked

When setting styles for different states of a link, follow these order rules:

• A:hover must be located after A:link and a:visited
• A:active must be located after a:hover

<!DOCTYPE HTML><HTML><Head><style>A.one:link{Color:#ff0000;}a.one:visited{Color:#0000ff;}A.one:hover{Color:#ffcc00;}A.two:link{Color:#ff0000;}a.two:visited{Color:#0000ff;}A.two:hover{font-size:150%;}A.three:link{Color:#ff0000;}a.three:visited{Color:#0000ff;}A.three:hover{background:#66ff66;}A.four:link{Color:#ff0000;}a.four:visited{Color:#0000ff;}A.four:hover{font-family:' Microsoft Ya Black ';}A.five:link{Color:#ff0000;text-decoration:None;}a.five:visited{Color:#0000ff;text-decoration:None;}A.five:hover{text-decoration:Underline;}</style></Head><Body><P>Please move the mouse pointer over the links below to see their style changes.</P><P><b><aclass= "One"href= "/index.html"Target= "_blank">This link changes color</a></b></P><P><b><aclass= "both"href= "/index.html"Target= "_blank">This link changes the font size</a></b></P><P><b><aclass= "three"href= "/index.html"Target= "_blank">This link changes the background color</a></b></P><P><b><aclass= "Four"href= "/index.html"Target= "_blank">This link changes the font</a></b></P><P><b><aclass= "Five"href= "/index.html"Target= "_blank">This link changes the decoration of the text</a></b></P></Body></HTML>

Example Two

<!DOCTYPE HTML><HTML><Head><style>a:link,a:visited{Display:Block;Font-weight:Bold;font-size:14px;font-family:Verdana, Arial, Helvetica, Sans-serif;Color:#FFFFFF;Background-color:#98bf21;width:120px;text-align:Center;padding:4px;text-decoration:None;}a:hover,a:active{Background-color:#7A991A;}</style></Head><Body><ahref= "/index.html"Target= "_blank">W3school</a></Body></HTML>

CSS 7.30