CSS 스타일 초기화에 대한 자세한 논의

이번에는 CSS 스타일 초기화에 대해 자세히 설명하겠습니다. CSS 스타일 초기화 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

웹 사이트를 작성할 때 많은 태그에는 P 태그의 여백, a 태그의 밑줄 등과 같은 기본 스타일이 있기 때문에 일반적으로 후속 작성에 문제가 발생하지 않도록 이러한 기본 스타일을 제거합니다. 변함없이 유지됩니다.

1. 기본 내부 및 외부 여백이 있는 라벨

일부 사람들은 *{margin:0;padding:0;}을 사용하여 문제를 해결하고 직접 내부 및 외부 여백을 지웁니다. 프로젝트가 커지면, 이렇게 글을 쓰면 웹사이트의 성능이 크게 소모되고 웹사이트의 로딩 속도가 느려질 것입니다.

따라서 어떤 태그에 기본적으로 내부 및 외부 여백이 있는지 이해한 다음 사용법에 따라 스타일을 초기화해야 합니다.

------ ----- ------------------- ----- -------------일반적으로 사용되는 태그---- ----- ------------------- ----- ------------------- ----- --

1. body 태그: 기본 여백:8px;

2. dl 태그, p 태그: 기본 margin-top:1em;

   margin-bottom:1em;

3. dd 태그 :기본 margin-left:40px;

4. ul, ol 태그: 기본 margin-top:1em;margin-bottom:1em;padding-left:40px;

5. h1 tag~h6 태그: 기본 여백-상단: 0.67em;

6. 양식 라벨: 기본 여백-상단: 0em;

7. fieldset 라벨: 기본 여백-왼쪽: 2px; margin-right :2px;padding:0.35em 0.75em 0.625em;

8. 범례 태그: 기본 padding-left:2px;

   padding-right:2px;

9. 입력 태그: 기본 패딩:1px 0px

10. textarea 태그: 기본 패딩: 2px;

11. 버튼 태그: 기본 패딩: 1px 6px;

hr 태그: 0.5 em; margin-bottom :0.5em;
pre 태그: 기본 여백: 1em 0px 1em;

13. body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{
        margin:0;
        padding:0;
    }
    <!--以上标签为最常用的，其余若需要则再额外添加-->

2 웹사이트 글꼴 스타일

일반적으로 웹사이트 전체를 작성합니다. 본문 태그 글꼴 스타일에서 로컬 텍스트 스타일을 별도로 수정해야 합니다

body,button,input,textarea,select{
    font:12px/1.5 'Microsoft YaHei','arial','tahoma';
    color:#666;
}
<!--
    
    一般设置字体大小12px，字体行高为1.5倍行距，字体样式为‘微软雅黑’或者‘宋体’
    字体颜色由网站风格决定
-->

3. 테이블 레이블 여백을 제거하고 함께 병합합니다

table {
    border-collapse:collapse;
    border-spacing:0;
}
<!--
    默认:border-collapse:separate;//设置单元格边框是否合并
           border-spacing:2px;//相邻单元格边框间的距离
-->

4.

i,em{
  font-style:normal;  
}
<!--
    默认是斜体（italic）
-->
b,strong{
  font-weight:normal;  
}
<!--
    默认是粗体（bold）
-->

5. 목록 태그 앞의 식별자를 제거합니다

ul,ol{
  list-style:none;  
}
<!--
    默认是：initial(默认值)
-->

6. a 태그의 밑줄을 제거하고 글꼴 스타일을 통일합니다

a{
  text-decoration:none;
  color:inherit;    
}
<!--
    text-decoration:默认是underline(下划线)
    color:默认是-webkit-link;颜色值为#00e;
-->

7. Img 태그

img{
  border:none;
  verticla-align:middle;    
}
<!--
    border:ie默认有边框
    verticla-align:默认是baseline（基线）
-->

지침 : 위는 가장 일반적으로 사용되는 태그입니다. 다른 태그의 스타일 초기화도 적절하게 추가됩니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Jest가 React 네이티브 구성 요소를 테스트하는 단계는 무엇입니까?

javascript의 암시적 호출에 대한 자세한 설명

React 구성 요소 참조를 사용하는 방법

위 내용은 CSS 스타일 초기화에 대한 자세한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!