> 웹 프론트엔드 > CSS 튜토리얼 > CSS Reset(리셋) 방식 정리_경험치 교환

CSS Reset(리셋) 방식 정리_경험치 교환

PHP中文网
풀어 주다: 2016-05-16 12:04:32
원래의
2009명이 탐색했습니다.

Css Reset이 무엇인가요? 일부 동료는 이를 "css 재설정"이라고 부르고 일부는 "기본 CSS"라고 부르기도 합니다...

전체 내용을 읽고 나면 CSS Reset에 대해 새로운 이해를 가지게 될 것이라고 믿습니다. text
PS:

1

2

3

4

* {

padding: 0;

margin: 0;

}

로그인 후 복사
로그인 후 복사

가장 일반적으로 사용되는 CSS Reset이지만 여기에는 문제가 많습니다.

원본 기사의 첫 번째 부분에서는 CSS와 각 브라우저의 CSS 규칙의 차이점에 대해 많이 설명합니다. "Css Reset"도 "Css Reset"의 올바르고 효과적인 사용을 위해 구성되었습니다. 어느 정도 성능을 향상시킬 수 있습니다.

정리하고 요약해 주신 Perishable에게 진심으로 감사드립니다.

다음은 CSS Reset의 여러 유형에 대한 간략한 소개입니다. 일반적인 의미만 이해가 되실 뿐입니다.

Minimalistic Reset [ Version 1 ]
이 문단도 자주 보셨을 거라 믿습니다.

1

2

3

4

* {

padding: 0;

margin: 0;

}

로그인 후 복사
로그인 후 복사

Minimalistic Reset [ Version 2 ]
border:0 디자인이 좀 불안정하네요

1

2

3

4

5

* {

padding: 0;

margin: 0;

border: 0;

}

로그인 후 복사

Minimalistic Reset [ Version 3 ]
물론이죠. 권장되지 않습니다.

1

2

3

4

5

6

* {

outline: 0;

padding: 0;

margin: 0;

border: 0;

}

로그인 후 복사

Condensed Universal Reset
이것은 작성자가 현재 선호하는 작성 방법입니다.

1

2

3

4

5

6

7

8

9

10

11

* {

vertical-align: baselinebaseline;

font-weight: inherit;

font-family: inherit;

font-style: inherit;

font-size: 100%;

border: 0 none;

outline: 0;

padding: 0;

margin: 0;

}

로그인 후 복사

Poor Man's Reset
사실 이것도 우리가 흔히 사용하는 CSS Reset의 일종입니다. 글꼴 크기를 재설정하고 이미지 링크의 테두리를 처리합니다.
일부 사이트에서도 자주 볼 수 있습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

html, body {

padding: 0;

margin: 0;

}

html {

font-size: 1em;

}

body {

font-size: 100%;

}

a img, :link img, :visited img {

border: 0;

}

로그인 후 복사

Shaun Inman의 전역 재설정
저자는 Shaun이 이러한 유형의 CSS 재설정을 작성하는 데 특정 목적이 있다고 믿습니다.
그리고 이러한 유형의 규칙은 일반적으로 몇 가지 중요한 목표를 가지고 있습니다.
예를 들어 IE, Firefox 등

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,

form, fieldset, input, p, blockquote, table, th, td, embed, object {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset, img, abbr {

border: 0;

}

address, caption, cite, code, dfn, em,

h1, h2, h3, h4, h5, h6, strong, th, var {

font-weight: normal;

font-style: normal;

}

ul {

list-style: none;

}

caption, th {

text-align: left;

}

h1, h2, h3, h4, h5, h6 {

font-size: 1.0em;

}

q:before, q:after {

content: '';

}

a, ins {

text-decoration: none;

}

로그인 후 복사

Yahoo CSS Reset
Yahoo 직원이 작성한 Reset을 개인적으로 권장합니다

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,

fieldset,input,textarea,p,blockquote,th,td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset,img {

border: 0;

}

address,caption,cite,code,dfn,em,strong,th,var {

font-weight: normal;

font-style: normal;

}

ol,ul {

list-style: none;

}

caption,th {

text-align: left;

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

font-size: 100%;

}

q:before,q:after {

content:'';

}

abbr,acronym { border: 0;

}

로그인 후 복사
.

Erik Meyer의 CSS Reset
작가는 Erik Meyer의 코드를 재배치했지만 기능은 동일합니다.
업계에서 가장 많이 사용되는 CSS Reset 세트입니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

html, body, p, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,

del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,

dl, dt, dd, ol, ul, li, fieldset, form, label, legend {

vertical-align: baselinebaseline;

font-family: inherit;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

outline: 0;

padding: 0;

margin: 0;

border: 0;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

background: white;

line-height: 1;

color: black;

}

ol, ul {

list-style: none;

}

/* tables still need cellspacing="0" in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

font-weight: normal;

text-align: left;

}

/* remove possible quote marks (") from <q> & <blockquote> */

blockquote:before, blockquote:after, q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

로그인 후 복사

Condensed Meyer Reset
일반적으로 Erik Meyer의 Css Reset

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,

pre, form, fieldset, input, textarea, p, blockquote, th, td {

padding: 0;

margin: 0;

}

fieldset, img {

border: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

ol, ul {

list-style: none;

}

address, caption, cite, code, dfn, em, strong, th, var {

font-weight: normal;

font-style: normal;

}

caption, th {

text-align: left;

}

h1, h2, h3, h4, h5, h6 {

font-weight: normal;

font-size: 100%;

}

q:before, q:after {

content: &#39;&#39;;

}

abbr, acronym {

border: 0;

}

로그인 후 복사
을 수정하고 개선한 것입니다.
관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿