>웹 프론트엔드 >HTML 튜토리얼 >HTML 태그의 기본 스타일 배열_HTML/Xhtml_웹페이지 제작

HTML 태그의 기본 스타일 배열_HTML/Xhtml_웹페이지 제작

WBOY
WBOY원래의
2016-05-16 16:39:561256검색

html, 주소, blockquote, 본문, dd, div, dl, dt, 필드 세트, 양식, 프레임, 프레임 세트, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, 센터, dir, hr, menu, pre { display: block }/*위 목록 요소는 기본적으로 블록 형태로 표시되며, 표시되지 않는 요소는 인라인 요소로 표시됩니다. 이 목록은 HTML4 버전용이며, 일부 요소는 향후 폐기될 예정입니다. XHTML1*/
li { display: list-item }/*기본값은 목록으로 표시하는 것입니다*/
head { display: none }/*기본값은 표시하지 않는 것입니다*/
table { display: table }/*기본값은 테이블에 표시됩니다*/
tr { display: table-row }/*기본값은 테이블 행 표시입니다*/
thead { display: table-header-group } /*기본값은 테이블 헤더 그룹 표시입니다*/
tbody { display: table-row-group }/*기본값은 테이블 행의 그룹 표시입니다*/
tfoot { display: table-footer-group } /*기본값은 테이블 하단의 그룹 표시입니다*/
col { display: table-column }/* 기본값은 테이블 열 표시입니다*/
colgroup { display: table-column-group } /*기본값은 테이블 열 그룹 표시입니다*/

td, th { display: table-cell }/*셀의 기본 표시*/

caption { display: table-caption } /*테이블 제목 표시의 기본값*/

th {font-weight:bolder; text-align: center }/ *기본값은 테이블 제목을 굵게 가운데 정렬하여 표시하는 것입니다*/
caption { text-align: center }/*기본값은 테이블 제목을 가운데 정렬하여 표시하는 것입니다*/
body { margin: 8px; line-height : 1.12 }
h1 {font-size: 2em; 여백: .67em 0 }
h2 { 글꼴 크기: 1.5em; 여백: .75em 0 }
h3 { 글꼴 크기: 1.17em; 여백: .83em 0 }
h4 , blockquote, ul, fieldset, form, ol, dl, dir, menu { 여백: 1.12em 0 }
h5 { 글꼴 크기: .83em; 여백: 1.5 em 0 }
h6 { 글꼴 크기: .75em; 여백: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { 글꼴 무게: 굵게 }
blockquote { margin-left: 40px; }
i, cite, em,var, address { 글꼴 스타일: italic }
pre, tt, code, kbd, samp { 글꼴 계열: monospace }
pre { 공백: pre }
버튼, 텍스트 영역, 입력, 개체, 선택 { 디스플레이:인라인 블록; }
big { 글꼴 크기: 1.17em }
small, sub , sup { 글꼴 크기: .83em }
sub { 수직 정렬: sub }/*기본적으로 아래 첨자를 표시할 하위 요소 정의*/
sup { 수직 정렬: super }/*기본적으로 표시할 하위 요소 정의 위 첨자 표시 */
table { border-spacing: 2px; }
thead, tbody, tfoot { Vertical-align: middle }/* 테이블 머리글, 본문 테이블 및 테이블 바닥 요소가 기본적으로 수직 정렬되도록 정의합니다* /
td , th { 수직 정렬: 상속 }/*기본적으로 수직으로 정렬되고 기본적으로 상속되도록 셀과 열 제목을 정의합니다*/
s, Strike, del { text-designation: line-through }/* 이러한 요소 정의 기본적으로 취소선으로 표시됩니다*/

hr { border: 1px inset }/* 기본적으로 구분선을 1px 너비의 3D 오목 가장자리 효과로 정의합니다*/

ol, ul , dir , menu, dd { margin-left: 40px }

ol { 목록 스타일 유형: 십진수 }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-designation: underline }
br:before { content: ""A" }/*줄바꿈 요소의 의사 객체 콘텐츠 스타일 정의*/
:before, : after { white-space: pre-line }/*의사 객체 공백 문자의 기본 스타일 정의*/
center { text-align: center }
abbr, acronym {font- 변형: 작은 대문자; 문자 간격: 0.1em }
:link, :visited { 텍스트 장식: 밑줄 }
:focus { 개요: 얇은 점선 반전 }
/* 양방향 설정 시작(do 변경하지 않음) */
BDO[DIR="ltr"] { 방향: ltr; unicode-bidi: bidi-override }/*속성이 DIR=인 경우 BDO 요소의 기본 텍스트 읽기 및 쓰기 표시 순서를 정의합니다. "ltr"*/
BDO[ DIR="rtl"] { 방향: rtl; unicode-bidi: bidi-override }/*속성이 DIR=인 경우 BDO 요소의 기본 텍스트 읽기 및 쓰기 표시 순서를 정의합니다. "rtl"*/
*[DIR= "ltr"] { 방향: ltr; unicode-bidi: embed }/*속성이 DIR="ltr"인 경우 요소의 기본 텍스트 읽기 및 쓰기 표시 순서를 정의합니다. */
*[DIR="rtl"] { 방향: rtl; unicode-bidi: embed }/*속성이 DIR="rtl"인 경우 요소의 기본 텍스트 읽기 및 쓰기 표시 순서를 정의합니다.*/

@media print { /*제목 및 목록 기본 인쇄 스타일 정의*/
h1 { page-break-before: Always }
h1, h2, h3, h4, h5, h6 { 페이지 -break-after: 회피 }
ul, ol, dl { page-break-before: 회피 }
}

브라우저 기본 스타일

1 . 페이지 여백
IE 기본값은 10px, 전달됨 본문의 여백 속성 설정
FF 기본값은 8px, 본문의 패딩 속성 설정
페이지 여백을 지우려면 이 두 속성을 지워야 합니다. 값 ​​​​

코드 복사
코드는 다음과 같습니다.

body {
여백:0;
패딩:0
}

2. 단락 간격
IE의 기본값은 19px이며, p의 margin-top 속성으로 설정됩니다.
FF의 기본값은 1.12em, p의 margin-bottom 속성으로 설정됩니다.
p의 기본값은 블록 표시입니다. , 단락 간격을 지우려면 일반적으로

코드 복사
코드는 다음과 같습니다.

p {
margin-top:0;
margin-bottom:0
}

3. 제목 스타일
h1~h6 굵게 표시: 글꼴 두께:bold;.
기본 사이즈는 위 표를 참고하세요
이렇게도 써있어요

코드 복사
코드는 다음과 같습니다.

h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size :대형;}
h4 {글꼴 크기:중간;}
h5 {글꼴 크기:소형;}
h6 {글꼴 크기:x-소형;}

큰 브라우저 기본 글꼴 크기는 16px로, 기본적으로 h1~h6 요소는 블록 표시 글꼴로 굵게 표시됩니다.
제목 스타일을 지우려면 일반적으로

을 설정하면 됩니다.
코드 복사
코드는 다음과 같습니다.

hx {
font-weight:normal; 🎜>font-size:value;
}

4. 목록 스타일
IE의 기본값은 40px이며, ul 및 ol의 여백 속성으로 설정됩니다.
FF의 기본값은 40px입니다. ul 및 ol
dl의 패딩 속성으로 설정되어 들여쓰기가 없지만 내부 설명 요소 dd는 기본적으로 40px 들여쓰기되지만 이름 요소 dt는 들여쓰기되지 않습니다.
목록 스타일을 지우려면 일반적으로


코드 복사코드는 다음과 같습니다.
ul, ol, dd {
list-style-type:none;/*목록 스타일 문자 지우기*/
margin-left:0;/*IE 왼쪽 들여쓰기 지우기*/
padding- left:0;/*IE가 아닌 왼쪽 들여쓰기 지우기*/
}

5. 요소는 중앙에 배치됩니다.
IE에서는 기본적으로 text-align:center; >FF 기본값은 margin -left:auto;margin-right:auto;

6. 하이퍼링크 스타일
스타일은 기본적으로 밑줄이 그어져 있으며, 방문한 하이퍼링크는 보라색으로 변합니다. 링크 스타일을 지우십시오. 일반적으로



코드 복사 코드는 다음과 같습니다.
a {
text-꾸밈:없음;
color:#colorname;
}


7 마우스 스타일
IE는 기본적으로 커서:손입니다. >FF의 기본값은 커서:포인터 ;입니다. 이 설명은 IE에서도 유효합니다.

8 이미지 링크 스타일
IE는 보라색 2px 테두리선을 기본값으로 합니다
FF는 파란색 2px 테두리선을 기본값으로 합니다
이미지 링크 스타일을 지우려면 일반적으로
img {
border:0;}을 설정할 수 있습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.