Zhengchun's CSS notes (2)

1, rounded corners of the practice.

For this round corner, the previous development effort is too much. Also consider the number of HTTP connections, but also consider the amount of code and semantics of CSS and HTML.
There are a number of scenarios that have recently been considered to replace the existing fillet approach, and there may be many outstanding developments. But the general way of writing is as follows.
The advantage is easy to maintain, only one picture. It can also be scaled arbitrarily. The disadvantage is the meaningless HTML code.
—————-CSS ————— –
. c,.c i,.c I i,.c b,.c b b,.c p{
Background-image:url (purple.png)/* Background picture * *
Background-repeat:no-repeat;
}
. c{
width:200px;/* Temporarily Fixed Width * *
Background-position:0 -4px;
}
. C i{
Display:block;
height:4px;
}
. c I i{
margin:0 0 0 4px;
Background-position:right 0;
}
. C b{
Display:block;
height:4px;
Background-position:0 Bottom;
}
. C B b{
margin:0 0 0 4px;
Background-position:right Bottom;
}
. C p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right-4px;
}

————— HTML ————— –

< div class= "C" >
< i>< i></i></i>
< p>
Button Button Button Button button
Press Push Button Button Button Button Button Button button
</p>
< b>< b></b></b>
</div>

2. Global Definition of table

Caption This tag in Firefox will have a 1px gap on the left of the bug, very annoying. The simple way to think of it is only the margin of -1px.

—————-CSS ————— –
table{
Border-collapse:collapse;
}
Table Caption,table td,table th{
BORDER:1PX Solid #a2bbdd/* Border Color * *
Background: #c3d9ff/* Background color * *
}
Table caption{
Text-align:left;
Border-bottom:none;
margin-left:-1px;
————— HTML ————— –< table>
< caption> table Title </caption>
< tr>
< th> title </th>
< th> title </th>
< th> title </th>
< th> title </th>
</tr>
< tr>
< td> content </td>
< td> content </td>
< td> content </td>
< td> content </td>
</tr>
</table>

3, need to face up to the two tags

3.1 Acronym this label is good for explaining nouns, but it's used too little. (I've always wanted to use it, so I wrote it down.)

—————-CSS ————— –
ACRONYM{CURSOR:HELP}
————— HTML ————— –
< acronym title= "Zhengchun is a very peculiar character in Jin Yong's writings. His peculiar in everywhere mercy, lover very much, see a love one, but is not in vain merry thin Fortunately, when he is alone to a lover, he really love this lover, had to say that this person's feelings are particularly rich, no other explanation. "> Text </acronym>

3.2 ins this tag forgot which website was used to show more links in the H2, then looked up the book, and everyone felt a bit defective, a bit controversial.

—————-CSS ————— –

CSS component not yet written ... I owe it to you.

————— HTML ————— –

< h2> title < ins>< a xhref= "http://ued.taobao.com/blog/#" mce_href= "http://ued.taobao.com/blog/#" > more >></a></ins>

Test address for the above code