CSS 소개

CSS 학습을 시작하기 전에 다음과 같은 전제 지식이 있는지 확인해야 합니다.

HTML / XHTML

HTML을 배우려면 및 XHTML , PHP 중국어 홈페이지(php.cn) 홈페이지를 통해 관련 튜토리얼을 찾을 수 있습니다

CSS를 배우려면 CSS가 무엇인지 알아야 겠죠?

CSS는 Cascading Style Sheets를 의미합니다
스타일은 HTML 요소를 표시하는 방법을 정의합니다
스타일은 대개 스타일 시트에 저장됩니다
HTML 4.0에 스타일을 추가하는 것은 내용과 표현의 분리 문제를 해결하기 위한 것입니다
외부 스타일 시트는 작업 효율성을 크게 향상시킬 수 있습니다
외부 스타일 시트는 일반적으로 CSS 파일에 저장됩니다
여러 스타일 정의를 하나로 계단식으로 배열할 수 있습니다.

스타일은 큰 문제를 해결합니다

HTML 태그는 원래 그림과 같이 문서 콘텐츠를 정의하기 위해 설계되었습니다. 다음 예에서는

제목입니다

문단입니다.

스타일 시트는 HTML 3.2의 글꼴 태그 및 색상 속성과 마찬가지로 HTML 요소가 표시되는 방식을 정의합니다. 스타일은 일반적으로 외부 .css 파일에 저장됩니다. 외부 스타일 시트를 사용하면 간단한 CSS 문서를 편집하여 사이트에 있는 모든 페이지의 레이아웃과 모양을 동시에 변경할 수 있습니다.

이 문제를 해결하기 위해 비영리 표준화 연합체인 월드와이드웹컨소시엄(W3C)은 HTML 표준화 임무를 맡아 HTML 4.0 이외의 스타일을 만들어냈습니다.

현재 브라우저는 모두 CSS를 지원합니다.

CSS 스타일 시트는 작업 효율성을 크게 향상시킵니다.

스타일 테이블은 CSS를 지원하는 방법을 정의합니다. HTML 요소가 표시됩니다.

스타일 시트는 HTML 3.2 글꼴 태그 및 색상 속성과 마찬가지로 HTML 요소가 표시되는 방식을 정의합니다. 스타일은 일반적으로 외부 .css 파일에 저장됩니다. 외부 스타일시트를 사용하면 간단한 CSS 문서를 편집하여 사이트에 있는 모든 페이지의 레이아웃과 모양을 동시에 변경할 수 있습니다.

CSS 예제

HTML 문서는 다양한 스타일을 표시할 수 있습니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
    <style>
        h1{color: #00a0e9}
        p{background-color: #8de943
        }
        p.ex {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>
<body>
<h1>标题</h1>
<p>一个没有指定边距大小的段落。</p>
<p class="ex">一个2厘米上边距的段落。</p>
</body>
</html>

프로그램을 실행해서 사용해 보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {color:#00ff00;} p{color: #ffd4f0 } .ex {color:rgb(0,0,255);} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p> <p class="ex">这段文字是蓝色的</p> </body> </html>

제출하다 코드 재설정

자동운전