웹페이지 제작 기초지식(html) (3) html+css-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

웹페이지 제작 기초지식(html) (3) html+css

零下一度

May 06, 2017 pm 01:40 PM

1.1HTML CS

CSS 선택자

스타일 정의마다 적용 방법이 다르고, 해당 스타일 이름도 다르기 때문에 스타일 이름은 선택자이므로 사용하기 쉬울 것입니다. 응용 프로그램 스타일의 차이를 이해합니다.

1.클래스 선택기:

이름은 점 "."으로 시작하는 문자열입니다. 이 유형의 스타일은 클래스 속성을 통해 사용해야 합니다. 태그. 이 스타일은 태그의 class 속성을 통해 적용되어야 합니다.

예:

.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>

2. 태그 선택기:

클래스가 없는 경우 페이지의 스타일을 정의하는 모든 태그 이름이 html 태그 이름과 일치합니다. 태그 내 선택 선택기 스타일이 적용되면 이 레이블의 내용은 레이블 선택기 스타일에 따라 표시됩니다. 이 스타일은 동일한 이름의 태그가 정의될 때마다 자동으로 적용됩니다.

예:

p{font-color:#6ec;}

페이지의

태그는 #6ec 색상으로 표시됩니다.

ID 선택기:

의 이름은 "#"과 문자열의 조합입니다. 여기서 "#"은 ID 선택기의 기호입니다. 태그는 ID 속성의 값이 "#" 뒤의 문자와 일치하는 경우 이 스타일이 이 태그에 적용됩니다. 이 스타일은 ID 속성 값이 # 뒤의 문자와 동일한 태그에 적용됩니다.

예:

#idname{font-size:26px;}
<p id=”idname”>ID样式</p>

동일한 페이지 문서에 있는 두 개의 태그가 동일한 ID 속성 값을 갖는 것은 권장되지 않으므로 웹 표준을 준수하는 웹 문서에서는 ID 스타일만 해당됩니다. 하나의 태그에 . 이 스타일과 동일한 스타일을 사용하는 태그가 여러 개 있는 경우 ID 선택기 대신 클래스 선택기를 사용하여 스타일을 정의하세요.

3. 레벨 선택기:

(교과서에서는 파생 선택기라고 부르며, 레벨 선택기는 본인 이름입니다)

해당 태그 이 스타일은 자동으로 적용됩니다.

네이밍 방법은 아래 예시를 참고하세요.

이해하기 쉽도록 다음 태그의 중첩을 다음 형식으로 작성합니다.

<p>
<img  / alt="웹페이지 제작 기초지식(html) (3) html+css" >
<span>
a
<strong>
b
</strong>
c
</span>
</p>

이러한 태그는 img 및 span 태그가 p에 포함되어 있습니다. 강한 태그는 스팬 태그에 내장되어 있으며, 스팬 태그, 강한 태그는 p 태그의 하위 태그라고 할 수 있습니다. p 태그의 강력한 태그는 스팬 태그의 하위 태그이고, 그 반대의 경우도 상위 태그 또는 상위 태그입니다. Strong 태그는 p의 하위 태그가 아니라 p 태그의 하위 태그라는 점에 유의하세요. 그런 다음 이 선택기를 설명하기 위해 두 가지 예를 살펴보겠습니다.

예 1:

<p><img  alt="웹페이지 제작 기초지식(html) (3) html+css" ><span>a<strong>b</strong>c</span></p>
p span{font-color:#038;}

이러한 선택기는 p 태그 스타일에 포함된 하위 태그의 범위 태그를 나타냅니다. .

p Strong{font-color:#865;}

이러한 선택자는 p 태그에 포함된 하위 태그 Strong 태그의 스타일을 나타냅니다

pspan Strong {font-color: #921;}

태그 p의 하위 태그 스팬 태그 중 하위 태그 강한 스타일을 나타냅니다.

참고: 모든 하위 수준 태그는 이 방식으로 정의할 수 있습니다. 이 예시에서 보듯이, 문서 내에 p 태그의 하위 태그가 아닌 다른 span 태그가 있는 경우에는 이 스타일이 적용되지 않습니다. 아래도 마찬가지입니다.

예 2:

<p class=”abc”><img  alt="웹페이지 제작 기초지식(html) (3) html+css" ><span>a<strong>b</strong>c</span></p>

는 다음과 같이 정의할 수도 있습니다.

.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}

태그의 하위 태그에 abc 스타일이 적용된 스타일을 나타냅니다.

예 3:

#abc{}
<p id=”abc”><img  alt="웹페이지 제작 기초지식(html) (3) html+css" ><span>a<strong>b</strong>c</span></p>

id 스타일이 정의되고 태그 ID가 이 속성 값을 사용하는 경우 다음과 같이 정의할 수도 있습니다:

#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}

Pseudo class

: 하이퍼링크의 status 의사 속성에 대한 여러 스타일 정의 방법만 도입합니다. 이 스타일은 의사 속성 앞에 있는 태그에 자동으로 적용됩니다.

a:link{}방문하지 않았을 때의 하이퍼링크 스타일.

a:active{}하이퍼링크에서 마우스 왼쪽 버튼을 눌렀지만 놓지 않았을 때의 스타일.

a:hover{}마우스가 하이퍼링크 위로 지나갈 때의 스타일.

a:visited{}방문 후 하이퍼링크의 스타일.

* 선택기:

이 선택기 스타일로 정의된 이름은 모든 태그를 나타내는 와일드카드 "*"입니다. 즉, 모든 태그가 자동으로 이 스타일을 적용합니다.

*{}

스타일 사용 방법

브라우저는 스타일 시트를 읽을 때 스타일 시트에 따라 문서 형식을 지정합니다. 스타일 시트를 삽입하는 방법에는 세 가지가 있습니다.

외부 스타일 시트

외부 스타일 시트는 스타일을 여러 페이지에 적용해야 하는 경우에 적합합니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다.

ead><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

내부 스타일 시트

단일 파일에 특별한 스타일이 필요한 경우 내부 스타일 시트를 사용할 수 있습니다. head 섹션의

<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>

인라인 스타일

개별 요소에 특별한 스타일을 적용해야 하는 경우 인라인 스타일을 사용할 수 있습니다. 인라인 스타일을 사용하는 방법은 해당 태그에 style 속성을 사용하는 것입니다. 스타일 속성에는 모든 CSS 속성이 포함될 수 있습니다. 다음 예에서는 단락의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.

아아아아

【관련 추천】

1. 무료 HTML 온라인 동영상 튜토리얼

2. html 개발 매뉴얼

php.cn 원본 html5 동영상 튜토리얼

위 내용은 웹페이지 제작 기초지식(html) (3) html+css의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

HTML의 다양성 : 응용 및 사용 사례Apr 30, 2025 am 12:03 AM

HTML은 웹 페이지의 골격 일뿐 만 아니라 많은 분야에서 더 널리 사용됩니다. 1. 웹 페이지 개발에서 HTML은 페이지 구조를 정의하고 CSS와 JavaScript를 결합하여 풍부한 인터페이스를 달성합니다. 2. 모바일 애플리케이션 개발에서 HTML5는 오프라인 스토리지 및 지리적 위치 기능을 지원합니다. 3. 이메일 및 뉴스 레터에서 HTML은 이메일의 형식 및 멀티미디어 효과를 향상시킵니다. 4. 게임 개발에서 HTML5의 Canvas API는 2D 및 3D 게임을 만드는 데 사용됩니다.