HTML CSS


HTML 스타일 - CSS

CSS(Cascading Style Sheets) HTML 요소 태그를 렌더링하는 데 사용되는 스타일입니다.

스타일과 색상

텍스트 조작
색상, 상자
등...

해 보세요

해 보세요 - 예제

이 예제는 <head>에 추가를 사용하는 방법을 보여줍니다. ; 스타일 정보의 일부는 HTML 형식을 지정합니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

이 예는 스타일 속성을 사용하여 밑줄 없이 링크를 만드는 방법을 보여줍니다.
style 속성을 사용하여 밑줄 없이 링크를 만드는 방법입니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

외부 스타일 시트에 연결
이 예에서는 태그를 외부 스타일 시트에 연결하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

CSS 사용 방법

CSS는 HTML 4에서 시작되었으며 HTML 요소를 더 잘 렌더링하기 위해 도입되었습니다.

CSS는 다음과 같은 방법으로 HTML에 추가할 수 있습니다. 매체:

  • 인라인 스타일 - HTML 요소의 "style" 속성 사용

  • 내부 스타일 시트 - <head> ; HTML 문서의 영역은 <style> 요소 를 사용하여 CSS

  • 외부 참조 - 외부 CSS 파일 사용

가장 좋은 방법은 CSS 파일을 외부에서 참조하는 것입니다.

이 사이트의 HTML 튜토리얼에서는 인라인 CSS 스타일을 사용하여 예제를 소개합니다. 이는 예제도 단순화하기 위한 것입니다. 온라인에서 코드를 더 쉽게 편집하고 온라인에서 예제를 실행할 수 있습니다.

이 사이트의 CSS 튜토리얼 CSS 튜토리얼을 통해 더 많은 CSS 지식을 배울 수 있습니다.

인라인 스타일

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

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

더 많은 스타일을 알아보려면 CSS 튜토리얼

HTML 스타일 예 - 배경을 참조하세요. color

Background-color 속성은 요소의 배경색을 정의합니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

초기 background-color 속성(Background-color)은 bgcolor 속성을 사용하여 정의됩니다.

HTML 스타일 예 - 글꼴, 글꼴 색상, 글꼴 크기

font-family(글꼴), 색상(color) 및 글꼴 크기(글꼴 크기)를 사용할 수 있습니다. 속성 글꼴 스타일을 정의하려면:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>

Run Instance»

"Run Instance" 버튼을 클릭하여 온라인 인스턴스 보기

이제 <를 사용하는 대신 글꼴 모음(글꼴), 색상(색상) 및 글꼴 크기(글꼴 크기) 속성을 사용하여 텍스트 스타일을 정의하는 것이 일반적입니다. ;글꼴>

HTML 스타일 예 - 텍스트 정렬

text-align(텍스트 정렬) 속성을 사용하여 텍스트의 가로 및 세로 정렬을 지정합니다.

예 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

텍스트 정렬 속성 text-align은 이전 태그 <center>를 대체합니다.

내부 스타일 시트

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

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

외부 스타일 시트

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

안돼요

HTML 스타일 태그

标签描述
<style>定义文本样式
<link>定义资源引用地址

사용되지 않는 태그 및 속성

HTML 4에서는 원래 HTML 요소 스타일 정의를 지원했던 태그와 속성이 더 이상 사용되지 않습니다. 이러한 태그는 새 버전의 HTML 태그를 지원하지 않습니다.

권장되지 않는 태그는 다음과 같습니다: <font>, <center>, <strike>

권장되지 않는 속성은 다음과 같습니다. 색상과 배경색.