CSS tips: 10 very good CSS tips

Here, the clever use of CSS skills, you can not modify the HTML to get a good blog or template appearance. I've collected some very useful CSS tricks to make us more cool when designing blogs.
When designing templates and blog themes, I often "constantly scrutinize and try CSS (Hit and Trial css), I only see which color scheme and which CSS attributes combine to make the elements of the page more perfect." That's right. The reason for this is to "constantly scrutinize and try CSS" because I try to do everything I can before I get a satisfactory result. Using these different CSS properties, the most I use is the list of these.
Since I started blogging, I have been exposed to CSS, I love design also love CSS. Blogs Let me learn php,css even HTML. Here I've collected 10 great CSS tips that you can use on your blog or on your personal site. It can help you organize your blog elements well and make them look pretty cool. Let's start with our content and hope you'll like it.
1, simple way to adjust the size of the blog picture

1	. Content img {

2	Height:auto;

3	width:500px;

4

}

This is the easiest way to rearrange the size of your blog picture. It sets the width of all the pictures in the content to 500 pixels, and the height is adaptive to the width. This is the way I've redefined the size of the image in this blog content.
2, IE HTML Hack

1	div#content {width:580px}

2	* HTML body div#content {width:600px}

Precede the div with a * number so you can customize the special style for IE.
3, CSS Shadow

1	. Shadow {

2	-MOZ-BOX-SHADOW:3PX 3px 5px 6PX #ccc;

3	-WEBKIT-BOX-SHADOW:3PX 3px 5px 6PX #ccc;

4	BOX-SHADOW:3PX 3px 5px 6PX #ccc;

5

}

You can apply the above style for block-level elements or for any class or tag that is wrapped by a div. You need to set the horizontal and vertical offsets, the blur radius, and the shadow fill color. You can take a look at this example in the picture posted in this article.
4, CSS first word amplification

1	P:first-letter {

2	Display:block;

3	Float:left;

4	margin:5px 5px 0 0;

5	color:red;

6	Font-size:1.4em;

7	Background: #ddd;

8	Font-family:helvetica;

9

}

Defining your first word amplification is easy, using CSS First-letter attributes to automatically select the first letter of the blog, so you can customize the CSS to design the first letter style, like a larger font size, italic, and so on.
5. Flip the image with CSS

1	#content img {

2	-moz-transform:scalex (-1);

3	-o-transform:scalex (-1);

4	-webkit-transform:scalex (-1);

5	Transform:scalex (-1);

6	Filter:fliph;

7	-ms-filter: "Fliph";

8

}

With the CSS properties above you can flip any picture
6, remove the point link point box

1	a {Outline:none}

Or

1	a {outline:0}

You must have noticed that when you click on a link in some blogs, you will see a somewhat-shaped border on the link. You can remove these borders by using a small section of CSS above.
7. Use special fonts in CSS
You can use CSS to load special fonts, all you have to do is upload the TTF format font to the server, and then use the font rules to import it on the CSS.
8. Transparent element

1	. element {

2	Filter:alpha (OPACITY=50);

3	-moz-opacity:0.5;

4	-khtml-opacity:0.5;

5	opacity:0.5;

6

}

With transparent properties, you can make the elements of any browser transparent, and these properties can work on all the main players, even IE (PS:IE6). ... ）
9, using CSS to display the URL after the link

1	A:after{content: "(" attr (HREF) ")";}

This will display the URL after the link anchor point. You can also define it with a font or other style.
10. Customized special style for handheld devices

1	<link type= "Text/css" rel= "stylesheet" href= "Handheldstyle.css" media= "Handheld" >

If your blog is not responding or you want to have a special style when browsing with your mobile phone, you can customize the CSS for your blog's mobile version.
This article links http://www.cxybl.com/html/wyzz/CSS/20130706/38926.html