CSS 스타일을 재설정하는 방법은 무엇입니까? 웹 페이지의 8가지 CSS 기본 스타일 재설정 코드 요약

이 글의 내용은 CSS 스타일을 재설정하는 방법을 소개하고, 일반적으로 사용되는 CSS 기본 스타일 재설정 코드를 요약하여 공유합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

웹 디자인 및 개발에서 가장 골치 아픈 일은 페이지를 주요 브라우저와 호환되게 만드는 것, 더 정확하게 말하면 "기본" CSS 스타일 시트와 호환되게 만드는 것입니다. 그런 다음 이러한 CSS 기본 스타일 시트를 "삭제"하는 것이 주요 문제가 되었으며 CSS 기본 스타일 시트 재설정이라는 용어도 있습니다. 다양한 브라우저에서 페이지가 일관되게 표시되도록 하려면 CSS 기본 스타일을 지우고 재설정해야 합니다.

아래에서는 참조용으로 일반적으로 사용되는 CSS 기본 스타일 재설정 코드를 공유하겠습니다.

1. 모든 브라우저의 CSS 초기화 태그의 여백 및 패딩 값(내부 및 외부 여백)

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}

2. CSS 재설정 페이지 요소 스타일

body {background:#fff}   /* 重置body 页面背景为白色 */
body,th,td,input,select,textarea,button {  /* 重置页面文字属性 */
      font-size:12px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666;
}

/** css重置样式标签的样式 **/
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}  /* 将斜体扶正*/
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

3.

dl,ul,ol,menu,li {list-style:none}   /* 重置类表前导符号为onne,menu在HTML5中有效 */

4. CSS 재설정 텍스트 서식 요소 스타일(마우스 효과)

/** 重置链接a标签 **/

a {color:#666;text-decoration:none}  /* 重置链接a标签样式*/
a:active, a:hover {text-decoration:none}   /* 重置链接a标签的鼠标滑动效果 */

/* 取消a标签点击后的虚线框 */
a {outline: none;}  
a:active {star:expression(this.onFocus=this.blur());}

/** 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 **/
/* 
::selection {color: #fff;background-color: #4C6E78;}    
::-moz-selection {color: #fff;background-color: #4C6E78;} 
*/

5. CSS 재설정 양식 요소 스타일

legend { color: #000; } /* for ie6 */
fieldset,img {border:0 none}  /* 重置fieldset（表单分组）、图片的边框为0*/
button, input, select, textarea { 
     font-size: 100%; /* 使得表单元素在ie下能继承字体大小， */
     vertical-align:middle;  /* 重置表单控件垂直居中*/
} 
/* 注：optgroup 无法扶正 */

/* 重置表单button按钮效果 */
button {border:0 none;background-color:transparent;cursor:pointer} 

img{vertical-align:top}  /* 图片在当前行内的垂直位置 */

6. CSS 재설정 테이블 요소 스타일

caption {display:none;}    /* 重置表格标题为隐藏 */
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}    /* 重置table属性 */

7

/*清除浮动*/
.clear{clear: both;}
 
/*清除浮动--推荐使用*/
.clearfix:before,.clearfix:after{content: '';display: table;}
.clearfix:after{clear: both;}

8, CSS 재설정 중첩 참조

blockquote, q {quotes: none}   /* 重置嵌套引用的引号类型 */
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}  /* 重置嵌套引用*/

요약: 위 내용은 이 글에 요약된 기본 스타일을 재설정하기 위해 일반적으로 사용되는 CSS의 모든 코드입니다. 이해를 깊게 하기 위해 직접 시도해 볼 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

CSS 기본 동영상 튜토리얼

, HTML 동영상 튜토리얼 , bootstrap 동영상 튜토리얼 을 방문하세요.

위 내용은 CSS 스타일을 재설정하는 방법은 무엇입니까? 웹 페이지의 8가지 CSS 기본 스타일 재설정 코드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!