9 Practical CSS properties that Web front-end developers must know

As a front-end Web developer for CSS properties of familiarity is not to be avoided, but also a lot of the necessary, the following article to organize as a developer you must know 9 CSS properties, very practical so there is demand you can refer to the HA, I hope to help you

 

1. Fillet effect

Today's web design is constantly following up on the latest development technologies, using HTML5 to develop diverse web applications. One of the advantages of HTML5 is that the elements that must be implemented with pictures can now be implemented in code. "Border-radius" is an important attribute for implementing this feature, which can be used to directly define the rounded corners of HTML elements and is supported by all modern browsers.

CSS Code

Copy Code code as follows:


border-radius:10px; /* CSS3 Property */


-moz-border-radius:10px; * * Firefox/


-webkit-border-radius:10px; /* Chrome/safari * *


-khtml-border-radius:10px; /* Linux browsers */

To fully understand IE browser support for CSS3 properties, please read this article.

2. Shadow effect

Shadow effects can be easily achieved by CSS3 's Box-shadow properties. This property is supported by all major browsers, with the Safari browser supporting the prefix-webkit-box-shadow attribute.

CSS Code

Copy Code code as follows:


#myDiv {


-moz-box-shadow:20px 10px 7px #ccc;


-webkit-box-shadow:20px 10px 7px #ccc;


box-shadow:20px 10px 7px #ccc;


}

You can also use JavaScript to implement shadow effects, as follows:

CSS Code

Copy Code code as follows:


object.style.boxshadow= "20px 10px 7px #ccc"

3. @media Properties

The media property is used to set the style of the same style sheet under different screens, and you can specify the media or media to which this style is applied in the property value.

CSS Code

Copy Code code as follows:


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


/* page display style on width 480px screen * * *


}

Developers can also use the @media print property to specify the style of the print preview:

CSS Code

Copy Code code as follows:


@media Print


{


p.content {color: #ccc}


}

4. Gradient Fill

CSS3 's gradient (gradient) attribute gives the developer another amazing experience. Gradient has not been supported by all browsers, so you cannot rely entirely on gradient to set the layout.

CSS Code

Copy Code code as follows:


Background:-webkit-gradient (linear, left top, left bottom, from (Darkgray), to (#7A7A7A));

5. Background size

Background size is one of the most important attributes in CSS3 and has been supported by many browsers. The Background Size property is used to set the size of the background image. The size of the previous background image is not adjustable in style, and now a line of code using the background Size property enables the user to achieve a background image effect.

CSS Code

Copy Code code as follows:


Div


{background:url (bg.jpg);


background-size:800px 600px;


background-repeat:no-repeat;


}

6 @font Face

The @font face property in CSS3 has greatly improved the reference font file, which is primarily used to embed custom Web fonts into Web pages. Previously, because of font licensing issues, designers can only use a specific font. First customize the name of the font:

CSS Code

Copy Code code as follows:


@font-face


{


Font-family:mysmashingfont;


src:url (' Blitz.ttf ')


, url (' Blitz.eot '); /* IE9 * *


}

You can then use the Mysmashingfont font family anywhere:

CSS Code

Copy Code code as follows:


Div


{


Font-family:mysmashingfont;


}

7. Clearfix Properties

If the designer thinks Overflow:hidden can't handle the float well, then Clearfix provides a better way to handle the floating solution.

CSS Code

Copy Code code as follows:


. clearfix {


Display:inline-block;


}

CSS Code

Copy Code code as follows:


. clearfix:after {


content: ".";


Display:block;


Clear:both;


Visibility:hidden;


line-height:0;


height:0;


}

8. margin:0 Auto

The Margin:0 Auto property is the underlying property of the CSS. Although CSS syntax does not define a statement centered on a block element, the designer can still use the Auto margin option to implement this feature. This property can center an element as needed. But note that the designer needs to set the width of the div to achieve.

CSS Code

Copy Code code as follows:


. mydiv {


margin:0 Auto;


width:600px;


}

9. Overflow:hidden

Overflow:hidden This CSS property, in addition to hiding the overflow function, also has the function of clearing the float.

CSS Code

Copy Code code as follows:


Div


{


Overflow:hidden;


}