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 파일
이 사이트의 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> | 정확히 보기 |
예
앞서 배운 <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 튜토리얼을 방문하여 스타일 지정에 대해 자세히 알아보세요.
