Shulou(Shulou.com)06/03 Report--

This article is about using CSS techniques to share with you. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. A simple way to resize blog images

The code is as follows:

Content img {

Height:auto

Width:500px

}

This is the easiest and most efficient way to resize your blog images. It sets the width of all the pictures in the content to 500 pixels, and the height is adaptive according to the width. I am now using this method to redefine the image size in the content of this blog.

2 、 IE HTML Hack

The code is as follows:

Div#content {width: 580px}

* html body div#content {width: 600px}

Put a * sign before div so that you can customize a special style for IE.

3. CSS Shadow

The code is as follows:

Shadow {

-moz-box-shadow: 3px 3px 5px 6px # ccc

-webkit-box-shadow: 3px 3px 5px 6px # ccc

Box-shadow: 3px 3px 5px 6px # ccc

}

You can apply the above style to block-level elements or any class or tag wrapped by div. You need to set horizontal and vertical offsets, blur radius, and shadow fill colors. You can look at this example in the picture posted in this article.

4. Enlarge the first word of CSS

The code is as follows:

P:first-letter {

Display: block

Float: left

Margin: 5px 5px 0 0

Color: red

Font-size: 1.4em

Background: # ddd

Font-family: Helvetica

}

Defining your initials is easy to enlarge, and you can use the first-letter property of CSS to automatically select the initials of your blog, so you can customize CSS to style your initials, such as larger font size, italics, etc.

5. Flip the image with CSS

The code is as follows:

# content img {

-moz-transform: scaleX (- 1)

-o-transform: scaleX (- 1)

-webkit-transform: scaleX (- 1)

Transform: scaleX (- 1)

Filter: FlipH

-ms-filter: "FlipH"

}

You can flip any picture with the CSS property above

6. Remove the dotted box linked by the dot

The code is as follows:

A {outline: none}

Or

A {outline: 0}

You must have noticed that when you click on a link in some blogs, you will see a bit of a border on the link. You can remove these borders through the short CSS above.

7. Use special fonts in CSS

You can use CSS to load special fonts, all you have to do is upload the font in TTF format to the server, and then import it on CSS using font rules.

8. Element transparency

The code is as follows:

Element {

Filter:alpha (opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

Opacity: 0.5

}

Using transparent attributes, you can make elements on any browser transparent, these attributes can work on all mains, or even IE (PS:IE6? .)

9. Use CSS to display the URL after the link

The code is as follows:

A:after {content: "(" attr (href) ");}

This displays the URL after the link anchor. You can also define it in fonts or other styles.

10. Customize special styles for handheld devices

The code is as follows:

If your blog is unresponsive or you want to have a special style when browsing on your mobile phone, you can customize CSS for the mobile version of your blog.

Thank you for reading! This is the end of this article on "what are the techniques for using CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.