CSS 솔리드는 무엇을 의미합니까?
- anonymity원래의
- 2019-05-28 11:06:0319714검색
Border(그림 테두리)는 CSS의 속성으로 범위를 결정할 수 있는 HTML 태그(예: TD, DIV 등)에 테두리를 그릴 수 있습니다. , 관심있는 친구들은
에 대해 배울 수 있습니다. 웹 페이지를 만든 사람들은 먼저 "테두리"에 대해 알아 보겠습니다. . CSS의 속성으로 범위를 결정할 수 있는 HTML 태그(예: TD, DIV 등)에 테두리 선의 유형, 너비 및 색상을 정의할 수 있습니다. 기능을 사용하면 몇 가지 특수 효과를 만들 수 있습니다.
style="border:thin solid red"
"테두리" 뒤의 세 매개변수의 의미는 다음과 같습니다. 경계선의 너비는 다음과 같습니다. 경계선: 실선(실선); 경계선 색상: 빨간색(빨간색).
테두리선의 너비에는 얇은(가는 선), 중간(중간 굵은 선), 두꺼운(굵은 선)의 세 가지 표준 값이 있습니다.
1, 텍스트에 테두리 추가
위의 예에서는 테두리선의 색상과 두께가 가변적임을 설명하기 위해 텍스트에 다양한 테두리가 추가되었습니다.
첫 번째 테두리의 CSS 코드는 다음과 같습니다. style="border:thin solid red"
"테두리" 뒤의 세 매개변수의 의미는 다음과 같습니다. 너비는 얇음(가는 선), 테두리 선 유형: 실선(실선), 테두리 선 색상: 빨간색(빨간색)
테두리선의 너비에는 얇은(가는 선), 중간(중간 굵은 선), 두꺼운(굵은 선)의 세 가지 표준 값이 있으며,
또한 1pt, 5px, 2cm 등과 같은 너비를 사용자 정의할 수도 있습니다.
경계선의 종류에는 없음(경계선 없음), 점선(점으로 구성된 점선), 점선(짧은 선으로 구성된 점선), 실선(실선), double(이중선, 이중선의 폭과 그 사이의 빈 부분의 폭을 더한 값이 border-width로 정의된 폭과 동일함), 홈(3D 홈형 테두리), 릿지(3D 능선형 테두리), inset(3D 내부 삽입 테두리, 더 어두운 색상), outset(3D 삽입 테두리, 밝은 색상),
참고: 시스템이 이러한 테두리의 속성 값을 지원하지 않는 경우 " dotted", "dashed", "double", "groove", "ridge", "inset" 및 "outset"은 모두 "solid"로 대체됩니다.
테두리선 색상: #00ffcc와 같은 16진수 색상 코드를 사용할 수 있습니다.
위에서 볼 수 있듯이 텍스트에 테두리를 추가하는 것은 실제로 매우 간단합니다. 위의 예를 설명하지 않아도 다음 테두리 설정을 이해할 수 있습니다! 텍스트에 테두리를 추가하려면 CSS를
태그에 추가하면 됩니다. 여러 텍스트에 테두리를 추가하려면 먼저 해당 텍스트 조각을 DIV 태그로 묶으세요. 그런 다음
태그에 CSS를 추가합니다. 텍스트 줄에 여러 가지 다른 테두리를 추가하려면 테이블에 텍스트를 배치한 다음 CSS를
2. 탐색 메뉴에 구분선 추가
위 예의 작은 흰색 선은 물론 이미지로도 가능하지만 여기서는 CSS를 사용합니다. " "테두리"의 확장 속성은 테두리의 한쪽만 그리므로 코드가 훨씬 줄어듭니다. 테두리의 한 면은 위 예의 테두리의 네 면과 유사합니다. 테두리의 네 면 속성은 다음과 같습니다.
테두리 선 이름: border-top(top) 경계선), border-right(오른쪽 경계선), border-bottom(하단 경계선) 및 border-left(왼쪽 경계선) 각 경계선의 유형, 너비 및 색상은 "boder" 속성과 동일합니다. . 예를 들어, 이 예에서는 각 셀의 왼쪽 테두리 선을 흰색 선으로 정의하고 선 너비를 "1px"의 실선으로 정의하려고 합니다. CSS 코드는 다음과 같습니다. style="border-left. : 1px 솔리드 #ffffff".
경계선을 개별적으로 정의할 때 특정 값이 지정되지 않으면 기본 초기값이 사용됩니다. 코드를 작성하지 않고도 Dreamweaver에서 CSS를 정의하는 것은 매우 편리합니다. 일반적으로 사용되는 경계선을 한 번 정의하고 필요할 때마다 외부 CSS 파일에 넣어두면 매우 편리합니다.
3. 테두리에 다양한 너비와 색상의 테두리 선을 사용하세요.
이 예제의 효과는 물론 위 예제의 방법을 사용하여 얻을 수 있지만, 코드가 너무 많으면 다른 병합 방법을 사용하여 네 모서리의 속성 값을 함께 분류할 수 있습니다. 예를 들어 이 예의 코드는 다음과 같습니다.
style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。
As you 위에서 볼 수 있듯이 테두리 선의 유형, 너비 및 색상이 함께 정의됩니다. 여기서 몇 가지 사항에 유의하세요.
1. 네 개의 테두리 선의 위치 순서는 다음과 같습니다. 경계선, 오른쪽 경계선, 아래쪽 경계선, 왼쪽 경계선
2. 이 예에서는 경계선 유형으로 실선 유형 하나만 선택했습니다. 각각 다른 유형으로 정의됩니다.
三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。
Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。
例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一列固定宽度——</title>
<style type="text/css">
<!--
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
}
-->
</style>
</head>
<body>
<div id="layout">hfhfg</div>
</body>
</html>위 내용은 CSS 솔리드는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!