재단 CSS 참조
재단 기본값
재단은 브라우저의 기본 글꼴 크기 (사용 font-size:100% ). 대부분의 데스크탑 브라우저 장치에 대한 디폴트 폰트 크기 16px이다. 모바일 장치의 브라우저를 들어, 기본 글꼴 크기는 12 픽셀입니다. 기본 글꼴은 "Helvetica Neue" 에, 줄 높이 기본값 1.5 .
이러한 설정에 적용되는 <body> 요소 내에 요소입니다.
또한, <p> 외부 요소와 거리 (마진 - 하단)의 하단은 1.6 1.25rem, 라인 높이입니다.
본문
다음 HTML 요소, 재단은 브라우저의 기본 스타일을 사용하지 않습니다 렌더링 별도의 스타일을 설정합니다. 클릭 온라인 인스턴스를 볼 수 있습니다 "시도".
| 요소 | 기술 | 온라인 예 |
|---|---|---|
| <H1> - <H6> | H1 - h6 사용 제목 | 시험 |
| <A> | 라이트 블루 링크, 링크에 마우스를 이동 밑줄한다 | 시험 |
| <작은> | 라이트 그레이 텍스트 자막 | 시험 |
| <인용구> | 인용 모듈 | 시험 |
| <STRONG> | 굵은 텍스트 | 시험 |
| <엠> | 기울임 꼴 | 시험 |
| <약어 기능> | 메시지가 표시됩니다 마우스를 위로 이동 요소가 밑줄 텍스트를 곳곳에 나타납니다 사용, 단어의 약어를 지정 | 시험 |
| <KBD> | 키보드 입력 명령을 수신 : CTRL + P | 시험 |
| <HR> | 수평 | 시험 |
| <코드> | 파편 | 시험 |
| <UL> | 정렬되지 않은 목록 | 시험 |
| <안녕> | 정렬 된 목록 | 시험 |
| <DL> | 설명 목록 | 시험 |
텍스트 정렬
텍스트의 정렬을 수정하는 CSS 클래스를 사용하여 :
| 범주 | 기술 | 예 |
|---|---|---|
| 는 .text 왼쪽 | 왼쪽 정렬 텍스트 | 시험 |
| 는 .text 오른쪽 | 오른쪽 맞춤 텍스트 | 시험 |
| 는 .text 센터 | 센터 | 시험 |
| 는 .text-정당화 | 정당 | 시험 |
다양한 화면 크기에 맞 춥니 다
다양한 화면 크기의 텍스트 정렬을 수정하는 CSS 클래스를 사용하여 :
| 범주 | 기술 | 예 |
|---|---|---|
| 좌회전 | ||
| .small 텍스트 왼쪽 | 왼쪽 모든 화면 크기 | 시험 |
| .small 전용 텍스트 왼쪽 | 작은 화면 왼쪽 (폭 40em 이하) | 시험 |
| .medium 텍스트 왼쪽 | 폭은 화면 크기 40.0625em 좌측보다 클 | 시험 |
| .medium 전용 텍스트 왼쪽 | 40.0625em 폭은 화면 크기 64em 왼쪽 정렬 | 시험 |
| .large 텍스트 왼쪽 | 폭은 화면 크기 64.0625em 좌측보다 클 | 시험 |
| .large 전용 텍스트 왼쪽 | 64.0625em 폭은 화면 크기 90em 왼쪽 정렬 | 시험 |
| .xlarge 텍스트 왼쪽 | 폭은 화면 크기 90.0625em 좌측보다 클 | 시험 |
| .xlarge 전용 텍스트 왼쪽 | 90.0625em 폭은 화면 크기 120em 왼쪽 정렬 | 시험 |
| .xxlarge 텍스트 왼쪽 | 폭은 화면 크기 120em 좌측보다 클 | 시험 |
| 오른쪽 정렬 | ||
| .small 텍스트 오른쪽 | 화면의 모든 치수는 오른쪽 정렬 | 시험 |
| .small 전용 텍스트 오른쪽 | 작은 화면 오른쪽 정렬 (40em 이하 폭) | 시험 |
| .medium 텍스트 오른쪽 | 화면 오른쪽 정렬 40.0625em의 크기보다 큰 폭 | 시험 |
| .medium 전용 텍스트 오른쪽 | 40.0625em 폭은 오른쪽 화면 크기 64em 정렬 | 시험 |
| .large 텍스트 오른쪽 | 화면 오른쪽 정렬 64.0625em의 크기보다 큰 폭 | 시험 |
| .large 전용 텍스트 오른쪽 | 64.0625em 폭은 오른쪽 화면 크기 90em 정렬 | 시험 |
| .xlarge 텍스트 오른쪽 | 화면 오른쪽 정렬 90.0625em의 크기보다 큰 폭 | 시험 |
| .xlarge 전용 텍스트 오른쪽 | 90.0625em 폭은 오른쪽 화면 크기 120em 정렬 | 시험 |
| .xxlarge 텍스트 오른쪽 | 화면 오른쪽 정렬 120em의 크기보다 큰 폭 | 시험 |
| 정렬 | ||
| .small 텍스트 센터 | 모든 화면 크기에 맞 춥니 다 | 시험 |
| .small 전용 텍스트 센터 | 중심 스크린의 작은 크기 (40em 미만 폭) | 시험 |
| .medium 텍스트 센터 | 화면 중심 40.0625em의 크기보다 큰 폭 | 시험 |
| .medium 전용 텍스트 센터 | 64em 화면 크기에 40.0625em 폭이 중심 | 시험 |
| .large 텍스트 센터 | 화면 중심 64.0625em의 크기보다 큰 폭 | 시험 |
| .large 전용 텍스트 센터 | 90em 화면 크기에 64.0625em 폭이 중심 | 시험 |
| .xlarge 텍스트 센터 | 화면 중심 90.0625em의 크기보다 큰 폭 | 시험 |
| .xlarge 전용 텍스트 센터 | 화면 크기를 120em하는 폭 90.0625em을 중심으로 | 시험 |
| .xxlarge 텍스트 센터 | 화면 중심 120em의 크기보다 큰 폭 | 시험 |
| 정당 | ||
| .small 텍스트는-정당화 | 모든 화면 크기는 정당화 | 시험 |
| .small 전용 텍스트가-정당화 | 스크린의 작은 크기를 정당화 (40em 미만 폭) | 시험 |
| .medium - 텍스트 정당화 | 폭 정당화 40.0625em 화면의 크기보다 큰 | 시험 |
| .medium 전용 텍스트-정당화 | 64em 크기 40.0625em 화면 가로 양단 정렬 | 시험 |
| .large - 텍스트 정당화 | 폭 정당화 64.0625em 화면의 크기보다 큰 | 시험 |
| .large 전용 텍스트-정당화 | 90em 크기 64.0625em 화면 가로 양단 정렬 | 시험 |
| .xlarge - 텍스트 정당화 | 폭 정당화 90.0625em 화면의 크기보다 큰 | 시험 |
| .xlarge 전용 텍스트-정당화 | 120em 화면 크기 90.0625em의 폭의 양단부를 정렬 | 시험 |
| .xxlarge - 텍스트 정당화 | 폭 정당화 120em 화면의 크기보다 큰 | 시험 |
다른
| 범주 | 기술 | 예 |
|---|---|---|
| .left | 왼쪽 부동 요소 | 시험 |
| 됐지 | 요소를 마우스 오른쪽 단추로 부동 | 시험 |
| .clearfix | 지우기 플로트는 - 부모 요소 부동 요소에 추가해야합니다 | |
| .hide | 숨겨진 요소합니다 (CSS display: none ) | 시험 |
| .list - 인라인 | 같은 행에 배치 된 모든 요소 | 시험 |
| .lead | 하자 <P> 요소는 더 눈에 띄는 | 시험 |
| .subheader | <H6> 요소 - 밝은 색의 <H1> 설정 | 시험 |