CSS3 다중 열
CSS3 텍스트 콘텐츠는 신문 다중 열 레이아웃, 다음의 예와 같이 설계 할 수있다 :
이 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! 이 튜토리얼 (www.w3big.com) 가장 완벽한 프로그래밍 기술을 기반으로 튜토리얼은 HTML, CSS, 자바 스크립트, 파이썬, 자바, 루비, C, PHP, MySQL은, 다른 프로그래밍 언어의 기초를 소개합니다. 그러나 사이트는 또한 예로서, 당신은 더 나은 프로그래밍을 배울 수있는 온라인 예제를 제공합니다.
브라우저 지원
표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.
바로 수 -webkit- 브라우저 또는 -moz- 지정된 접두사 후.
| 재산 | |||||
|---|---|---|---|---|---|
| 열 수 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| 열 간격 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| 열 규칙 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| 열 규칙 컬러 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| 열 규칙 스타일 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| 열 규칙 폭 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| 열 폭 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
CSS3 다중 열 특성
이 장에서는 우리는 CSS3의 더 약간의 열 특성을 배울 것입니다 :
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3는 여러 열을 만드는 방법
column-count 특성 열 수가 분할해야 지정한다.
텍스트에서 다음 예 <DIV> 요소는 세 가지로 구분된다 :
열과 열 사이 CSS3 다중 열 간격
column-gap 속성은 열과 열 사이의 간격을 지정합니다.
다음의 예는 열 사이의 간격을 지정하며, 컬럼은 40 픽셀이다 :
예
-webkit-열 간격 : 40px; / * 크롬, 사파리, 오페라 * /
-moz-열 간격 : 40px; / * 파이어 폭스 * /
열 간격 : 40px;
}
»시도
CSS3 열 테두리
column-rule-style 속성은 열 사이의 경계 스타일의 열을 지정합니다 :
예
-webkit-열 규칙 스타일 : 고체 / * 크롬, 사파리, 오페라 * /
-moz-열 규칙 스타일 : 고체 / * 파이어 폭스 * /
열 규칙 스타일 : 고체;
}
»시도
column-rule-width 특성은 두 경계의 두께를 지정
예
-webkit-열 규칙 폭 : 1 픽셀 / * 크롬, 사파리, 오페라 * /
-moz-열 규칙 폭 : 1 픽셀 / * 파이어 폭스 * /
열 규칙 폭 : 1 픽셀;
}
»시도
column-rule-color 속성은 두 가지의 경계의 색상을 지정
예
-webkit-열 규칙 색상 : 연한 파랑 / * 크롬, 사파리, 오페라 * /
-moz-열 규칙 색상 : 연한 파랑 / * 파이어 폭스 * /
열 규칙 색상 : 연한 파랑;
}
»시도
column-rule 속성은 모든 열 규칙 - * 속성에 대한 축약 형이다.
다음 예는 테두리 두께, 색상 및 스타일에 대한 직접 열을 설정합니다 :
예
-webkit-열 규칙 : 1 픽셀 고체 연한 파랑 / * 크롬, 사파리, 오페라 * /
-moz-열 규칙 : 1 픽셀 고체 연한 파랑 / * 파이어 폭스 * /
열 규칙 : 1 픽셀 고체 연한 파랑;
}
»시도
얼마나 많은 지정된 요소에서 열
다음 예는 모든 컬럼에 걸쳐 <H2> 요소를 지정합니다 :
컬럼의 폭을 지정합니다
column-width 속성 컬럼의 폭을 지정한다.
CSS3 다중 열 특성
다음 표는 CSS3 다중 컬럼의 모든 속성을 나열합니다 :
| 재산 | 기술 |
|---|---|
| 열 수 | 요소를 지정된 열 수는 구분되어야한다. |
| 열 채우기 | 열을 채우는 방법을 지정합니다 |
| 열 간격 | 열과 열 사이의 간격을 지정 |
| 열 규칙 | 모든 열 규칙 - * 약식 속성 |
| 열 규칙 컬러 | 둘 사이의 경계의 색상을 지정합니다 |
| 열 규칙 스타일 | 둘 사이에 테두리의 스타일을 지정 |
| 열 규칙 폭 | 둘 사이의 테두리의 두께를 지정합니다 |
| 열 스팬 | 요소를 건너 얼마나 많은 열 지정 |
| 열 폭 | 컬럼의 폭을 지정합니다 |
| 열 | 설정 열 폭과 열 수 속기 |