HTML <스타일> 태그
예시
<style> 요소를 사용하여 HTML 문서에 간단한 스타일 시트 적용:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
태그는 문서 의 <style>스타일 정보(CSS)를 정의하는 데 사용됩니다.
요소 내에서 <style>HTML 요소가 브라우저에서 렌더링되는 방식을 지정합니다.
팁 및 참고 사항
참고: 브라우저가 스타일 시트를 읽을 때 스타일 시트의 정보에 따라 HTML 문서의 서식을 지정합니다. 다른 스타일 시트의 동일한 선택기(요소)에 대해 일부 속성이 정의된 경우 마지막으로 읽은 스타일 시트의 값이 사용됩니다(아래 예 참조)!
팁: 외부 스타일 시트에 링크하려면 <link> 태그를 사용하십시오.
팁: 스타일 시트에 대해 자세히 알아보려면 CSS 자습서 를 읽으십시오 .
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
속성
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
전역 속성
<style>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<style>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
동일한 요소에 대한 여러 스타일:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
관련 페이지
HTML 튜토리얼: HTML CSS
CSS 튜토리얼: CSS 튜토리얼
HTML DOM 참조: 스타일 개체
기본 CSS 설정
대부분의 브라우저는 <style>다음 기본값으로 요소를 표시합니다.
style {
display: none;
}