10 Prerequisites for CSS Skills Summary

CSS is the foundation of Web designers, and the knowledge of CSS enables them to design more beautiful and chic web pages. Using CSS techniques to manipulate CSS skillfully is a fascinating thing for designers. There are a lot of interesting things in the deep Sea World of CSS, you just need to find the best for you. Of course we can't remember all the rules and grammar of CSS all at once, but we should remember those very useful CSS techniques for future development. Today we've prepared 10 of the most useful CSS tips for web designers, and if you want to design a unique Web page you have to pay attention. This blog was written in collaboration with an online printing company, "Business card Printing", which provides high-quality printing services.

1. @font-face

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

CSS code copy content to clipboard

@font-face {

Font-family:blackout;

Src:url ("Assests/blackout.ttf") format ("TrueType");

}

2. Clearfix

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

CSS code copy content to clipboard

. clearfix:after {

Content: ".";

Display:block;

Clear:both;

Visibility:hidden;

line-height:0;

height:0;

}

3. @media

@media can set up your current response site's media, which can help you adjust the width of the site based on the user's display.

CSS code copy content to clipboard

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

}

4. Transform:rotate (30DEG);

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

CSS code copy content to clipboard

. title {

Transform:rotate (40DEG);

}

5. Background-size

This rule helps you adapt to the full screen background in your Web site. This is not like the previous CSS version must write very cumbersome code.

CSS code copy content to 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 in bringing you from the general level to the advanced level. Use the property selector to control the submitted version of an INPUT element or to add an icon to an outer chain is that good?

CSS code copy content to clipboard

Input[type= "Text"] {

width:250px;

}

7. margin:0 Auto;

It is strange that there are no specific criteria for making block-level elements centered. This method enables block-level elements to be centered within the parent element.

CSS code copy content to clipboard

#container {

margin:0 Auto;

}

8. a {outline:none;}

When browsing your site, click on a link to a huge dotted box across the entire page which will seriously affect the user's mood. This "a {outline:none;}" The statement will remove this, but for ease of use sex forget to give you the link also add: Focus state.

CSS code copy content to clipboard

a {outline:none;}

9. Overflow:hidden

This is the best way to remove elements that have not yet been loaded into your CSS. Use it to make the site respond faster.

CSS code copy content to clipboard

. container {

Overflow:hidden;

}

Color:rgba ();

PNG images are popular and widely used in web design because of its transparency, but now you can use the same approach to achieve transparency. It uses red, green, and blue channels and sets its opacity value to be transparent, like 0.5 corresponding to%50 opacity.

CSS code copy content to clipboard

. btn {

Color:rgba (0,0,0,0.5);

}