CSS의 기본 구문

기본 구문 규칙

CSS 규칙은 두 가지 주요 부분, 즉 선택기와 하나 이상의 선언으로 구성됩니다.

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

선택기는 일반적으로 스타일을 변경하는 데 필요한 HTML 요소입니다. 각 선언은 속성과 값으로 구성됩니다. 각 속성에는 값이 있습니다. 속성과 값은 콜론으로 구분됩니다.

selector {property: value

예:

h1{
   color:red;
   font-size:14px;
}

속성이 2개 이상인 경우 세미콜론을 사용하여 구분하세요. 이 코드 줄은 h1 요소 내부의 텍스트 색상을 빨간색으로 정의하고 글꼴 크기를 14픽셀로 설정합니다.

아래 다이어그램은 위 코드의 구조를 보여줍니다.

QQ截图20161011103552.png

참고: 값이 1단어보다 큰 경우 따옴표를 추가해야 합니다.

p{font-family:"sans serif"}

예:

편집 영역을 마우스 오른쪽 버튼으로 클릭하여 index.html과 MyCss.css라는 두 개의 파일을 생성합니다.

두 파일에 대해 다음 코드를 입력하세요. 각각 (괄호는 코드 완성을 지원합니다) : index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引外部资源 MyCss.css-->
        <link rel="stylesheet" href="MyCss.css" type="text/css">
    </head>
    <body>
        <h1>
            PHP中文网
        </h1>
    </body>
</html>

MyCss.css

h1{
    color: red;font-size: 50px;
}

h1 요소 내의 텍스트 색상은 빨간색으로 정의되고 글꼴 크기는 50픽셀로 설정됩니다.

Ctrl+s로 두 파일을 저장하고 index.html을 클릭하여 실행 효과를 확인하세요.

QQ截图20161203142306.png

지속적인 학습

새로운 파일

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title>  <link rel="stylesheet" href="MyCss.css" type="text/css"> </head> <body> <h1> PHP中文网 </h1> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear