최고의 재단 CSS 참조 튜토리얼 2024년, 이 튜토리얼에서는 재단 기본값,본문,텍스트 정렬,다양한 화면 크기에 맞 춥니 다,다른,를 배울 수 있습니다.
재단은 브라우저의 기본 글꼴 크기 (사용 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> 설정 | 시험 |