Front-end development CSS3 technology experience sharing

Recently, I have summarized some knowledge of the front-end to facilitate my own review in the future, and also share it with everyone, hoping that everyone will avoid detours. This article mainly summarizes the relevant knowledge in CSS3. Friends in need can refer to it. I hope it will be useful to you.

1. Set font (compatible with all browsers)

@font-face {
font-family: 'iconfont';
src: url("fonts/iconfont/iconfont.eot");
src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont/iconfont.ttf") format("truetype"), 
url("fonts/iconfont/iconfont.woff") format("woff"),
 url("fonts/iconfont/iconfont.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
@font-face { font-family : name ; src : url( url ) ; sRules }

Description:

name: Font name

url: Use absolute or relative addresses to specify OpenType fonts

sRules: Style sheet definitions

Set the fonts embedded in HTML documents.

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

2. div[class^="test"]

Set the background color of all div elements whose class attribute value starts with "test" within the div:

div[class^="test"]
{
background:#ffff00;
}

3. [class*="abc"]

The value of class contains elements of "abc".

div[class*="abc"]

represents only the style with class=abc in the div

4. Specify the background style of the last p tag

p:last-child{ background:#ff0000;}

5. Display When the device resolution is minimum 768 and maximum 979, abc (CSS3) is displayed

@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}

ie6-ie9 supports

<style>
@media screen and (min-width: 1201px) {
.y-row {
width: 1200px;
border:1px solid #333; height:300px;
min-width: 1200px; } }
@media screen and (max-width: 1200px) {
.y-row {
width: 900px;
border:1px solid #333; height:300px;
min-width: 900px; } }
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

6, div > span (not supported by IE6)

div > span{font 12px}

The son span style within the div tag is font 12px, and the grandson span within the div does not work and has priority

7. Font shadow

.blue { background:#01dbff; text-shadow:2px 2px 2px #09a5ef; }

Shadow font left distance bottom distance shadow distance Range shadow color

Font background font shadow

8, box shadow

-moz-border-radius:0px 5px 5px 0px; -webkit- border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow: 0px 0px 1px #fff inset;

-moz represents the private properties of the firefox browser

-ms represents the private properties of the IE browser

-webkit represents the private properties of chrome and safari

-o represents opera Apple browser

Settings

border-radius:0px 5px 5px 0px; means the upper right and lower right rounded corners of the border are 5px

box-shadow:0px 0px 1px #fff inset; means the border spacing is 0 to the left, 0 to the top and 1px. The shadow range is white.

With inset, it means the shadow inside the box. Without inset, it means the shadow outside the box.

Note: box-shadow:0px 0px 1px #fff

When the first value is 0, it means that the shadow of the left and right borders is 1px range

The first value is a positive integer, which means the left Border shadow

The first value is a negative integer representing the shadow of the right border

Similarly

The second value is 0 representing the shadow of the upper and lower borders

The two positive integers represent the distance of the 1px shadow from the upper border.

The first value is a negative integer and represents the bottom border shadow setting.

border-radius rounded corners

9, :first-letter

p:first-letter{font-size:20px}

means that the size of the first word in the p tag is 20px

10. div:first-line { color:red;font-size:16px; }

means the first line of text in the DIV is red and the font is 16px

11, p a:first-child { color: green }

represents the first a hyperlink in the p box, the font color is green

12, p :before { content: "I am here" }

represents adding a piece of content before the p tag object: "I am here"

13. table:after { content : END OF TABLE }

means displaying the content "END OF TABLE" after the table object.

14. Single colon and double colon

Pseudo element consists of double colon and pseudo element name. The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. However, pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as :first-line, :first-letter, :before, :after, etc.

Now you can fully answer the question in the title. For the pseudo-elements that existed before CSS2, such as :before, the single colon and the double colon::before have the same effect.

So, if your website only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colon writing method for pseudo elements. If it has to be compatible with IE browser, it is better to use CSS2 single colon writing method. Safety.

15. .uploader input[type=file]{}

means that the class is uploader and the input label attribute in the box is set to type=file.

The above is the detailed content of Front-end development CSS3 technology experience sharing. For more information, please follow other related articles on the PHP Chinese website!