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

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

WBOY
풀어 주다: 2016-05-16 16:39:56
원래의
1261명이 탐색했습니다.

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