HTML 스타일
먼저 예를 들어보겠습니다:
<html>
<body style="background-color:PowderBlue;">
<h1>改变颜色</h1>
<p style="font-family:verdana;color:red">
字体颜色变红色</p>
<p style="font-family:times;color:green">
字体颜色变绿色</p>
<p style="font-size:30px">字体高度变为30px</p>
</body>
</html>
HTML 스타일 속성
스타일 속성의 역할:
모든 HTML 요소의 스타일을 변경하는 일반적인 방법을 제공합니다.
스타일은 HTML 4에서 도입되었으며 HTML 요소의 스타일을 변경하는 데 선호되는 새로운 방법입니다. HTML 스타일을 사용하면 스타일 속성을 사용하여 HTML 요소에 직접 스타일을 추가하거나 별도의 스타일 시트(CSS 파일)에서 정의하여 간접적으로 스타일을 추가할 수 있습니다.
CSS 튜토리얼에서 스타일과 CSS에 대한 모든 것을 배울 수 있습니다.
HTML 튜토리얼에서는 스타일 속성을 사용하여 HTML 스타일에 대해 설명합니다.
CSS 사용법
CSS는 HTML 요소를 더 잘 렌더링하기 위해 HTML 4에서 시작되었습니다.
CSS는 다음과 같은 방법으로 HTML에 추가할 수 있습니다.
인라인 스타일 - HTML 요소의 "style" 속성 사용
내부 스타일 시트 - <head> HTML 문서의 영역은 <style> 요소를 사용하여 CSS를 포함합니다
외부 참조 - 외부 CSS 파일 사용
가장 좋은 방법은 CSS 파일을 외부에서 참조하는 것입니다.
이 사이트의 HTML 튜토리얼에서는 인라인 CSS 스타일을 사용하여 예제를 소개합니다. 이는 예제를 단순화하고 온라인에서 코드를 더 쉽게 편집하고 예제를 실행할 수 있도록 하기 위한 것입니다.
이 사이트의 CSS 튜토리얼 CSS 튜토리얼을 통해 더 많은 CSS 지식을 배울 수 있습니다.
인라인 스타일
인라인 스타일 개별 요소에 특별한 스타일을 적용해야 할 때 사용됩니다. 인라인 스타일을 사용하는 방법은 해당 태그에 style 속성을 사용하는 것입니다. 스타일 속성에는 모든 CSS 속성이 포함될 수 있습니다. 다음 예에서는 단락의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.
<p style="color:blue;margin-left:20px;">문단입니다.</p>
HTML 스타일 예 - 배경색
Background-color 속성은 요소의 배경색을 정의합니다:
<!DOCTYPE html>
<html>
<body style="background-color:pink;">
<h2 style="background-color:red;">好好学习</h2>
<p style="background-color:green;">天天向上</p>
</body>
</html>
HTML 스타일 예 - 글꼴, 글꼴 색상, 글꼴 크기
font-family(font ), 색상을 사용할 수 있습니다. (색상) 및 글꼴 크기(글꼴 크기) 속성을 사용하여 글꼴 스타일을 정의합니다.
인스턴스
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
이제 일반적으로 글꼴 계열(글꼴), 색상(색상) 및 <font> 태그를 사용하는 대신 텍스트 스타일을 정의하는 글꼴 크기(글꼴 크기) 속성입니다.
HTML 스타일 예 - 텍스트 정렬
text-align(텍스트 정렬) 속성을 사용하여 텍스트의 가로 및 세로 정렬을 지정합니다.
예
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
텍스트 정렬 속성 text-align은 이전 태그 <center>를 대체합니다.
내부 스타일 시트
단일 파일에 특별한 스타일이 필요한 경우 내부 스타일 시트를 사용할 수 있습니다. <head> 섹션의 <style> 태그를 통해 내부 스타일 시트를 정의할 수 있습니다.
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>외부 스타일 시트
외부 스타일 시트는 스타일을 여러 페이지에 적용해야 할 때 이상적입니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다.
아아아아
다음 섹션