표 테두리에 대한 CSS 구문
- PHPz원래의
- 2016-05-16 12:11:452065검색
Dreamweaver가 표를 만드는 데 탁월한 작업을 수행했다는 것을 알고 있지만 특정 효과를 얻으려면 CSS와 결합해야 하는 경우가 많습니다. 먼저 표 테두리에 대한 CSS 구문을 정리한 다음 방법을 소개하겠습니다. CSS를 사용하여 테이블의 테두리를 아름답게 만듭니다.
테이블 테두리의 CSS 구문
구체적인 내용에는 위쪽 테두리 너비, 오른쪽 테두리 너비, 아래쪽 테두리 너비, 왼쪽 테두리 너비, 테두리 너비, 테두리 색상, 테두리 스타일, 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 오른쪽 테두리, 테두리, 너비, 높이, 관련 라벨 등
1. 상단 테두리 너비
구문: border-top-width:
허용되는 값: 얇음 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
위쪽 테두리 너비 속성이 사용됩니다. 너비를 지정합니다. 요소의 상단 테두리. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 상단 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
2. 오른쪽 테두리 너비
구문: border-right-width:
허용되는 값: 얇음 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과 호환: 아니요
오른쪽 테두리 너비 속성은 지정에 사용됩니다. 요소의 오른쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 오른쪽 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
3. 하단 테두리 너비
구문: border-bottom-width:
허용되는 값: 얇음 | 중간 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
아래쪽 테두리 너비 속성이 사용됩니다. 요소의 아래쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 하단 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
4. 왼쪽 테두리 너비
구문: border-left-width:
허용되는 값: 얇음 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과 호환: 아니요
왼쪽 테두리 너비 속성은 지정에 사용됩니다. 요소의 왼쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 왼쪽 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
5. 테두리 너비
구문: border-width:
허용되는 값: [ 얇음 | 중간 | 길이> ]{1,4}
초기값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
테두리 너비 속성이 설정됩니다. 값이 키워드 또는 길이인 1~4개의 값을 갖는 요소의 경계입니다. 음수 길이는 허용되지 않습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 이 속성은 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성의 약어입니다. 약식 테두리 속성을 사용할 수도 있습니다.
6. 테두리 색상
구문: border-color:
허용되는 값:
초기값: 색상 속성의 값
적용 대상: 모든 객체
하위 호환성: 아니요
테두리 색상 속성은 색상 속성의 값을 설정합니다. 요소 테두리 색상입니다. 1~4개의 키워드를 사용할 수 있습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 약식 테두리 속성을 사용할 수도 있습니다.
7. 테두리 스타일
구문: border-style:
허용되는 값: [ 없음 | 점선 | 이중 | 홈 | 삽입 | 시작 ]{1,4}
초기 값: 없음
적용 대상: 모든 개체
하위 호환성: 아니요
테두리 스타일 속성은 요소의 테두리 스타일을 설정하는 데 사용됩니다. 이 속성은 보이는 테두리를 지정하는 데 사용해야 합니다. 1~4개의 키워드를 사용할 수 있습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 약식 테두리 속성을 사용할 수도 있습니다.
없음: 스타일 없음
점선: 점선
실선: 이중선
홈: 홈이 있는 선; ;
능선: 능선
삽입: 오목
시작: 볼록.
구문: border-top:
허용되는 값: <상단 테두리 너비< ;테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
top 속성은 요소 테두리의 너비, 스타일 및 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
9. 오른쪽 테두리 구문: border-right:
허용되는 값:
초기 값: 정의되지 않음
적용 대상: 모든 개체
하위 호환성: 아니요
오른쪽 border 속성은 요소 오른쪽 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
10. 하단 테두리 구문: border-bottom:
허용되는 값: <하단 테두리 너비> ;테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
하단 속성은 요소 하단 테두리의 너비, 스타일 및 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
11. 왼쪽 테두리 구문: border-left:
허용되는 값:
초기 값: 정의되지 않음
적용 대상: 모든 개체
하위 호환성: 아니요
왼쪽 border 속성은 요소 왼쪽 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
12. 테두리 구문:
허용되는 값: <테두리 스타일> ||
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
테두리 속성은 요소 테두리의 너비, 스타일 및 색상.
테두리 선언의 예는 다음과 같습니다.
H2 { border: 홈 3em }
A:link { border: solid blue } A:visited { border: 얇은 점선 #800080 }
A:active { border: Thick double red }
border 속성은 네 가지 종류의 테두리만 설정할 수 있으며 테두리 세트의 너비와 스타일만 제공할 수 있습니다. 요소의 네 가지 테두리에 서로 다른 값을 제공하려면 웹 페이지 작성자는 위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 테두리 색상, 테두리 너비, 테두리 스타일과 같은 하나 이상의 속성을 사용해야 합니다. 위쪽 테두리 너비, 오른쪽 테두리 너비, 아래쪽 테두리 너비 또는 왼쪽 테두리 너비입니다.
너비:
허용되는 값:
14. 높이
구문: 높이:
15. 관련 태그
table: 테이블 라벨, 전체 테이블 스타일 정의가 table에 배치되어야 합니다.
td: 셀 라벨, 셀 스타일 정의가 td에 배치되어야 합니다.