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

This article mainly explains "what are the CSS skills". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what CSS skills are there.

1. @ font-face

A good way to use fonts from other servers. Obviously, if you can't find the font you need on the hosting server, you can use this method to introduce the font you need in the style.

CSS Code copies content to the clipboard

@ font-face {

Font-family: Blackout

Src: url ("assests/blackout.ttf") format ("truetype")

}

2. .clearfix

If you can't clear element floats, this is one way to clear floats. You can use this method alone for any HTML element.

CSS Code copies content to the clipboard

.clearfix: after {

Content: ".

Display: block

Clear: both

Visibility: hidden

Line-height: 0

Height: 0

}

3. @ media

@ media can set the medium of your current response site, which can help you adjust the width of the site according to the user's monitor.

CSS Code copies content to the clipboard

@ media screen and (max-width: 960px) {

}

4. Transform: rotate (30deg)

Combine these transformation attributes with CSS transition effects to create interesting dynamic effects.

CSS Code copies content to the clipboard

.title {

Transform: rotate (40deg)

}

5. Background-size

This rule helps you adapt to a full-screen background on your site. It's not like previous versions of CSS had to write cumbersome code.

CSS Code copies content to the clipboard

Body {

Background: url (image.jpg) no-repeat

Background-size: 100%

}

6. Input [type= "text"]

This input [type= "text"] selector and other advanced selectors are very helpful to take you from the average level to the advanced level. Isn't it nice to use the attribute selector to control the submitted version of the input element or to add an icon to an outer chain?

CSS Code copies content to the clipboard

Input [type= "text"] {

Width: 250px

}

7. Margin: 0 auto

Oddly enough, there are no specific criteria to center block-level elements. This method centers the block-level element in the parent element.

CSS Code copies content to the clipboard

# container {

Margin: 0 auto

}

8. A {outline: none;}

When browsing your site, click on a link with a huge dotted frame across the entire page, which will seriously affect the user's mood. The "a {outline: none;}" statement will remove this, but forgot to add: focus status to your link for ease of use.

CSS Code copies content to the clipboard

A {outline: none;}

9. Overflow: hidden

This is the best way to clear element floats that have not been loaded into your CSS. Use it to make the site more responsive.

CSS Code copies content to the clipboard

.container {

Overflow: hidden

}

10. Color: rgba ()

PNG images are popular and widely used in web design because of their transparency, but now you can use the following method to achieve transparency as well. It uses red, green and blue channels and sets their opacity values to achieve transparency, such as 0.5 corresponding to 50% opacity.

CSS Code copies content to the clipboard

.btn {

Color: rgba (0. 0. 0. 5)

}

Thank you for your reading, the above is the content of "what are the CSS skills". After the study of this article, I believe you have a deeper understanding of what CSS skills you have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.