HTML CSS

CSS(Cascading Style Sheets)는 HTML 요소 태그의 스타일을 렌더링하는 데 사용됩니다. 예를 들어 앞서 배운 내용은 <body>에 배경색을 추가하는 것입니다. <p> 태그의 텍스트 색상을 변경하는 작업은 모두 CSS로 수행됩니다.

CSS 사용 방법

CSS는 HTML 4에서 시작되었으며 HTML 요소의 더 나은 렌더링을 위해 도입되었습니다.

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

인라인 스타일 - HTML 요소에서 "style" 속성을 사용합니다.
내부 스타일 sheet - CSS를 포함하려면 HTML 문서의 <head> 영역에 <style> 요소를 사용하세요
- 사용 외부 CSS 파일

CSS 파일은 .css로 끝나는 파일을 참조합니다. html

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

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

인라인 스타일

인라인 스타일은 HTML 태그 내부의 style 속성을 사용하여 직접 정의됩니다. 아래 예제도 참조하세요

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p style="color: red; margin-left: 20px">
    我是内联样式
</p>
</body>
</html>

<p> 태그의 텍스트를 검정색으로 바꾼 다음 텍스트를 왼쪽으로 20px 이동합니다. px는 픽셀을 나타냅니다.

코드 실행 결과:

내부 스타일 시트

두 개의 <P> 태그를 빨간색으로 설정하는 등 단일 파일에 특수 스타일이 필요한 경우 인라인 스타일로 정의된 경우 두 개의 <P> 태그에 CSS 스타일을 작성해야 합니다. 5,10<P> 태그, 많이 귀찮은가요? 내부 스타일 시트를 사용해야 하나요? 다음과 같이 <head> 섹션의 <style> 태그를 통해 내부 스타일 시트를 정의할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
    <style type="text/css">
        p{color: red}
    </style>
</head>
<body>
<p>
    我的颜色是在 head 标签里面定义的
</p>
<p>
    我的颜色是在 head 标签里面定义的
</p>
<p>
    我的颜色是在 head 标签里面定义的
</p>
</body>
</html>

코드 실행 결과:

외부 스타일 시트

외부 스타일 시트는 여러 페이지에 스타일을 적용해야 하는 경우에 적합합니다.

외부 스타일 시트는 <link> 태그를 사용하여 외부 CSS 파일을 소개합니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다.

예를 들어 <body>의 배경색을 노란색으로, <h1> 제목을 빨간색으로, <p> ; 파란색으로 변하면 CSS 파일은 다음과 같습니다.

body{background-color:yellow;}
p{color: blue;}
h1{color: red;}

HTML 파일에 CSS 파일을 삽입하려면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
    <link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
<h1>外部样式表</h1>
<p>
    我的颜色是用外部样式表定义的
</p>
<p>
    我的颜色是用外部样式表定义的
</p>
</body>
</html>

프로그램 실행 결과:

HTML 样式标签

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

<🎜> 标签<🎜><🎜>

<🎜><🎜>描述<🎜><🎜>

<style>

정정文本样式

<link>

정확히 보기

예

앞서 배운 <a> 링크 태그에는 밑줄을 없애기 위해 CSS 스타일을 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a>
</body>
</html>

프로그램 실행 결과:

CSS 튜토리얼을 방문하여 스타일 지정에 대해 자세히 알아보세요.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p style="color: red; margin-left: 20px"> 我是内联样式 </p> </body> </html>

제출하다 코드 재설정

자동운전