웹페이지 제작 기초지식(html) (3) html+css
- 零下一度원래의
- 2017-05-06 13:40:191275검색
1.1HTML CS
CSS 선택자
스타일 정의마다 적용 방법이 다르고, 해당 스타일 이름도 다르기 때문에 스타일 이름은 선택자이므로 사용하기 쉬울 것입니다. 응용 프로그램 스타일의 차이를 이해합니다.
1.클래스 선택기:
이름은 점 "."으로 시작하는 문자열입니다. 이 유형의 스타일은 클래스 속성을 통해 사용해야 합니다. 태그. 이 스타일은 태그의 class 속성을 통해 적용되어야 합니다.
예:
.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>2. 태그 선택기:
클래스가 없는 경우 페이지의 스타일을 정의하는 모든 태그 이름이 html 태그 이름과 일치합니다. 태그 내 선택 선택기 스타일이 적용되면 이 레이블의 내용은 레이블 선택기 스타일에 따라 표시됩니다. 이 스타일은 동일한 이름의 태그가 정의될 때마다 자동으로 적용됩니다.
예:
p{font-color:#6ec;}페이지의 e388a4556c0f65e1904146cc1a846bee 태그는 #6ec 색상으로 표시됩니다.
의 이름은 "#"과 문자열의 조합입니다. 여기서 "#"은 ID 선택기의 기호입니다. 태그는 ID 속성의 값이 "#" 뒤의 문자와 일치하는 경우 이 스타일이 이 태그에 적용됩니다. 이 스타일은 ID 속성 값이 # 뒤의 문자와 동일한 태그에 적용됩니다.
예:
#idname{font-size:26px;}
<p id=”idname”>ID样式</p>동일한 페이지 문서에 있는 두 개의 태그가 동일한 ID 속성 값을 갖는 것은 권장되지 않으므로 웹 표준을 준수하는 웹 문서에서는 ID 스타일만 해당됩니다. 하나의 태그에 . 이 스타일과 동일한 스타일을 사용하는 태그가 여러 개 있는 경우 ID 선택기 대신 클래스 선택기를 사용하여 스타일을 정의하세요.
3. 레벨 선택기:
(교과서에서는 파생 선택기라고 부르며, 레벨 선택기는 본인 이름입니다)
해당 태그 이 스타일은 자동으로 적용됩니다.
네이밍 방법은 아래 예시를 참고하세요.
이해하기 쉽도록 다음 태그의 중첩을 다음 형식으로 작성합니다.
<p> <img /> <span> a <strong> b </strong> c </span> </p>
이러한 태그는 img 및 span 태그가 p에 포함되어 있습니다. 강한 태그는 스팬 태그에 내장되어 있으며, 스팬 태그, 강한 태그는 p 태그의 하위 태그라고 할 수 있습니다. p 태그의 강력한 태그는 스팬 태그의 하위 태그이고, 그 반대의 경우도 상위 태그 또는 상위 태그입니다. Strong 태그는 p의 하위 태그가 아니라 p 태그의 하위 태그라는 점에 유의하세요. 그런 다음 이 선택기를 설명하기 위해 두 가지 예를 살펴보겠습니다.
예 1:
<p><img><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><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><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{}방문 후 하이퍼링크의 스타일.
* 선택기:
이 선택기 스타일로 정의된 이름은 모든 태그를 나타내는 와일드카드 "*"입니다. 즉, 모든 태그가 자동으로 이 스타일을 적용합니다.
*{}
스타일 사용 방법
브라우저는 스타일 시트를 읽을 때 스타일 시트에 따라 문서 형식을 지정합니다. 스타일 시트를 삽입하는 방법에는 세 가지가 있습니다.
외부 스타일 시트
외부 스타일 시트는 스타일을 여러 페이지에 적용해야 하는 경우에 적합합니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다.
bcfaa908c922f37cad32543b45ec611f 태그를 통해 내부 스타일 시트를 정의할 수 있습니다.
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>인라인 스타일
개별 요소에 특별한 스타일을 적용해야 하는 경우 인라인 스타일을 사용할 수 있습니다. 인라인 스타일을 사용하는 방법은 해당 태그에 style 속성을 사용하는 것입니다. 스타일 속성에는 모든 CSS 속성이 포함될 수 있습니다. 다음 예에서는 단락의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.
아아아아【관련 추천】
2. html 개발 매뉴얼
위 내용은 웹페이지 제작 기초지식(html) (3) html+css의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!