HTML 스타일

HTML의 스타일 태그를 소개하는 섹션입니다

먼저 코드를 살펴보겠습니다

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body style="background-color:black;">
 
 <h1 style="color: white">标题的颜色</h1>
 
 <p style="color:red">
     我是标签的颜色</p>
 </body>
 </html>

위 코드는 웹 페이지의 배경색을 다음과 같이 변경한다는 의미입니다. 검은색과 제목의 텍스트 색상이 흰색으로 변하고 문단의 텍스트가 빨간색으로 변하는 것을 볼 수 있습니다

코드 실행 결과:

보시면 됩니다 위 코드에서는 <body>, <h1> 또는 <p> 태그에 관계없이 모두 스타일 속성이 HTML 요소의 스타일을 변경하는 데 사용된다는 것을 알고 있습니다.

HTML 스타일 속성

스타일 속성의 역할 : 모든 HTML 요소의 스타일을 변경하는 일반적인 방법을 제공합니다.

스타일은 HTML 4에서 도입되었으며 HTML 요소의 스타일을 변경하는 데 선호되는 새로운 방법입니다. HTML 스타일을 사용하면 스타일 속성을 사용하여 HTML 요소에 직접 스타일을 추가하거나 별도의 스타일 시트(CSS 파일)에서 정의하여 간접적으로 스타일을 추가할 수 있습니다.

CSS 튜토리얼에서 스타일과 CSS에 대한 모든 것을 배울 수 있습니다.

HTML 튜토리얼에서는 스타일 속성을 사용하여 HTML 스타일에 대해 가르쳐 드리겠습니다.

더 이상 사용되지 않는 태그 및 속성

HTML 4에서는 여러 태그와 속성이 더 이상 사용되지 않습니다. 더 이상 사용되지 않는다는 것은 이러한 태그와 속성이 HTML 및 XHTML의 향후 버전에서 지원되지 않음을 의미합니다.

여기서의 메시지는 분명합니다. 더 이상 사용되지 않는 태그와 속성을 사용하지 마십시오!

다음 태그와 속성은 피해야 합니다.

标签	属性
<center>	定义居中的内容。
<font> 和 <basefont>	定义 HTML 字体。
<s> 和 <strike>	定义删除线文本
<u>	定义下划线文本

属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

위 태그 및 속성의 경우: 대신 스타일을 사용하세요!

HTML 스타일 예 - 배경색

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

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body style="background-color:yellow">
 
 </body>
 </html>

style 속성은 "이전" bgcolor 속성을 사용하지 않습니다.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body bgcolor="yellow">
 </body>
 </html>

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

글꼴 계열, 색상 및 글꼴 크기 속성은 중국어 텍스트의 글꼴 계열, 색상 및 글꼴 크기:

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 
 <h1 style="font-family:verdana">标题</h1>
 <p style="font-family:arial;color:red;font-size:20px;">段落</p>
 
 </body>
 </html>

style 속성은 더 이상 사용할 수 없는 이전 <font> 태그를 사용하지 않습니다.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 
 <h1><font face="verdana">标题</font></h1>
 <p><font size="5" face="arial" color="red">段落</font></p>
 
 </body>
 </html>

HTML 스타일 예 - 텍스트 정렬

text-align 속성은 요소에서 텍스트의 가로 정렬을 지정합니다.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 <h1 style="text-align:center">标题</h1>
 <p>学HTML PHP 就到www.php.cn</p>
 </body>
 </html>

스타일 속성은 더 이상 사용되지 않습니다. 이전 "align" 속성.

아아아아

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body style="background-color:black;"> <h1 style="color: white">标题的颜色</h1> <p style="color:red"> 我是标签的颜色</p> </body> </html>

제출하다 코드 재설정

자동운전