CSS 솔리드는 무엇을 의미합니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 솔리드는 무엇을 의미합니까?

anonymity

May 28, 2019 am 11:06 AM

css

Border(그림 테두리)는 CSS의 속성으로 범위를 결정할 수 있는 HTML 태그(예: TD, DIV 등)에 테두리를 그릴 수 있습니다. , 관심있는 친구들은

에 대해 배울 수 있습니다. 웹 페이지를 만든 사람들은 먼저 "테두리"에 대해 알아 보겠습니다. . CSS의 속성으로 범위를 결정할 수 있는 HTML 태그(예: TD, DIV 등)에 테두리 선의 유형, 너비 및 색상을 정의할 수 있습니다. 기능을 사용하면 몇 가지 특수 효과를 만들 수 있습니다.

CSS 솔리드는 무엇을 의미합니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7690

자바 튜토리얼

1639

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.