이 튜토리얼에서는 Notepad++ 편집기를 사용하여 HTML 및 CSS 파일을 생성합니다. 이는 사용자를 위한 것입니다. 마이크로소프트 윈도우 모든 예제가 그 안에서 실행됩니다.

Mac이 있는 경우 다음과 같이 대괄호 편집기에서 예제를 실행할 수 있습니다. 메모장++완전 무료입니다. 편집자의 경우 괄호, 그러면 사용자에게도 적합합니다. 마이크로소프트 윈도우, 나중에 더 가까운 것을 선택할 수 있습니다.

내부 스타일 시트 만들기

첫 번째 내부 스타일 시트를 만드는 예를 살펴보겠습니다.

1단계: 텍스트 편집기 열기

WIN + R 버튼을 동시에 누르면(시작 - 실행과 유사) 대화 상자가 열립니다. "달리다" Enter를 누르고 Enter를 누르십시오 (프로그램이 열립니다 ) 또는 프로그램을 실행하십시오. 그녀의 바로가기를 통해.

기본 프로그램 창이 열립니다.

2단계: 문서 구조 만들기

다음 HTML 코드를 복사하거나 편집기에 붙여넣습니다.

</span>내부 스타일 시트

이 튜토리얼의 코드 예제에서는 연한 녹색으로 강조 표시된 추가 설명을 제공할 것입니다. HTML은 특수 태그를 사용하여 코드에 주석을 생성합니다., 해당 요소 내부의 텍스트는 브라우저에 표시되지 않습니다. CSS 코드에서 주석을 추가하려면 다음 구조에 주석 텍스트를 배치해야 합니다. /* 주석 텍스트 */. 내장 스타일 내부와 외부 스타일 모두에서 CSS 코드에 주석을 달 수 있습니다( 별도의 파일).

3단계: 인라인 스타일 추가

다음 단계는 페이지에 기본 제공 스타일을 추가하는 것입니다. 첫 번째 수준 제목의 경우 텍스트 색상은 빨간색(색상: 빨간색)이고 단락의 경우 파란색(색상: 파란색)입니다. 또한 첫 번째 수준 제목의 경우 텍스트를 가운데에 정렬합니다(text-align: center). 각 항목을 확인하세요. CSS 속성그 의미는 콜론으로 구분되었으며 각 선언 끝에는 세미콜론이 있었습니다.

</span>내부 스타일 시트

자기 개발에 참여하는 것이 좋습니다.

한 달 안에 CSS를 배울 수 있습니다.

4단계: 브라우저에서 HTML 페이지 보기

브라우저에서 예제를 열고 예제 결과가 이미지와 일치하는지 확인하세요.

외부 스타일 시트 연결

이제 스타일 시트를 포함하고 이를 HTML 문서에 연결하는 별도의 파일을 생성하겠습니다.

  1. Notepad++에서 빈 파일을 새로 만들고 page.css로 저장합니다. 캐스케이드 스타일 시트 *.css) HTML 문서를 만든 동일한 폴더에 있습니다.
  2. 이전 예의 CSS 코드(태그의 내용)를 이동합니다.

    안녕, 세계!

    이 예에서는 헤더 스타일을 변경하는 방법을 보여줍니다.

    .

    웹페이지에서는 이제 이 태그를 지정하기만 하면 스타일이 자동으로 추가됩니다.

    내부 스타일

    인라인 스타일은 기본적으로 웹페이지에 사용되는 단일 태그의 확장입니다. style 속성은 스타일을 정의하는 데 사용되며 해당 값은 스타일 시트 언어를 사용하여 지정됩니다(예 3).

    예 3: 내부 스타일 사용

    스타일

    안녕, 세계!

    여러 요소를 변경하면 문제가 발생하므로 단일 태그에는 내부 스타일을 사용하거나 전혀 사용하지 않는 것이 좋습니다. 내용과 디자인이 분리된 경우 내부 스타일은 구조 문서의 이데올로기와 일치하지 않습니다. 설명된 모든 방법 CSS를 사용하여

    독립적으로 사용하거나 서로 조합하여 사용할 수 있습니다. 이 경우 해당 계층 구조를 기억할 필요가 있습니다.

    예 3: 내부 스타일 사용

    안녕, 세계!

    안녕, 세계!

    내부 스타일이 항상 먼저 적용된 다음 전역 스타일 시트가 적용되고 마지막으로 관련 스타일 시트가 적용됩니다. 예제 4에서는 문서에 스타일 시트를 추가하기 위해 두 가지 방법을 사용합니다.

    예 4. 다양한 스타일의 연결 방법 조합위의 예에서 첫 번째 제목은 36px 빨간색으로 설정되고 다음 제목은 녹색과 다른 글꼴로 설정됩니다.

    CSS "Cascading Style Sheets"(영어, Cascading Style Sheets에서 유래)를 나타냅니다. CSS는 웹페이지에 특정 요소를 표시하는 데 사용되는 매개변수 집합입니다. 이러한 매개변수는 별도의 파일에 지정하거나 페이지의 HTML 코드에 직접 작성할 수 있습니다. 예를 들어, 당사 웹페이지에는 기사 제목, 단락, 인용문, 각주, 사진, 비디오, 링크 등의 요소가 있을 수 있습니다. 크기, 색상, 프레임 두께 등 특정 표시 스타일을 설정할 수 있습니다.웹사이트 작업 시 스타일 설정이 포함된 코드를 삽입하기보다는 스타일이 포함된 별도의 파일을 사용하는 것이 좋습니다. 개별 페이지. 이렇게 하면 시간이 크게 단축됩니다. 스타일 시트의 위치를 ​​알면 언제든지 특정 스타일을 빠르게 찾아 편집할 수 있습니다. 스타일 파일의 확장자는 다음과 같습니다. .css.

    , 그 이름은 일반적으로

    스타일.css CSS 연결제출하는 방법에는 여러 가지가 있습니다. 웹사이트를 만들 때 가장 자주 사용되는 두 가지 방법에 대해 이야기하겠습니다.

    1. 연결.이 방법은 사이트의 모든 페이지에 대한 스타일을 하나의 파일로 설정해야 할 때 사용됩니다. 이 방법웹사이트를 만들 때 자주 사용됩니다. 스타일 시트를 연결하려면 다음 명령을 사용하십시오. , 태그 본문에 배치되어야 합니다. .

    처음 두 속성은 사이트가 CSS를 사용한다는 것을 브라우저에 알리고 스타일시트 파일의 주소가 표시됩니다.

    2. 문서 태그에 삽입.이 방법을 사용하면 특정 페이지 요소의 스타일이 HTML 코드에서 직접 설정됩니다. 예를 들어:

    여기서는 그에 따라 컨테이너의 스타일을 지정했습니다.

    그리고 . 이러한 스타일은 해당 스타일에만 적용됩니다.

    스타일 시트의 예를 들어보겠습니다. 파일을 생성하세요. .css스타일을 작성하십시오.

    body (font-family: Arial, Verdana, Sans-serif; /* 글꼴 모음 */font-size: 12pt; /* 본문 글꼴 크기(포인트) */ background-color: #f0f0f0; /* 웹 페이지 배경 색상 * / color: #000000; /* 본문 텍스트 색상 */ ) h1 ( color: #a52a2a; /* 헤더 색상 */ 글꼴 크기: 24pt; /* 글꼴 크기(포인트) */ 글꼴 패밀리: Georgia, Times, serif ; /* 글꼴 계열 */font-weight: /* 일반 텍스트 스타일 */ )

    여기서는 페이지 본문의 스타일을 설정했습니다. 그리고 제목 때문에

    . 웹사이트의 다른 페이지 요소에 대해 특정 스타일을 설정할 수도 있습니다.

    이제 스타일 시트를 사이트에 연결해 보겠습니다.

    CSS를 사이트에 연결하기

    안녕하세요 월드!

    이것은 CSS 스타일이 포함된 첫 번째 페이지입니다.

    그래서 우리는 그것을 알아 냈습니다 CSS란 무엇인가,무엇을 위해 이 기술사용하면서 스타일을 사이트에 연결하는 방법을 배웠습니다. 이번 강의는 캐스케이딩 스타일 시트(Cascading Style Sheet)에 대한 일종의 소개입니다. 다른 강의에서는 CSS 기술에 대해 더 자세히 이야기하겠습니다.

    기능과 목적에 따라 웹 페이지에 스타일을 추가하는 방법에는 여러 가지가 있습니다. 다음에 더 자세히 살펴보겠습니다.

    외부 스타일 시트

    스타일은 CSS 확장자를 가진 별도의 파일에 있습니다. 요소는 HTML 문서를 CSS 파일과 연결하는 데 사용됩니다. . 안쪽에 위치하고 있어요 , 예 1에 표시된 대로.

    예제 1. 외부 스타일 연결

    예 3: 내부 스타일 사용

    표제

    rel 속성의 값 스타일시트는 항상 존재하며 변경되지 않습니다. href 값은 CSS 파일의 경로입니다. 경로는 상대 또는 절대로 지정할 수 있습니다. 이 방법으로 다른 사이트에 있는 스타일 시트를 연결할 수 있습니다. 위 예에서는 Google Fonts 웹사이트의 키릴 문자 Lobster를 연결합니다.

    style.css 파일의 내용은 예제 2에 나와 있습니다.

    예 2: style.css 파일의 내용

    H1(글꼴 계열: "Lobster", 필기체, 색상: 녹색; )

    이 예에서 볼 수 있듯이 스타일 파일은 정상입니다. 텍스트 파일 CSS 구문만 포함합니다. 결과적으로 HTML 문서에는 스타일이 있는 파일에 대한 포인터만 포함되어 있으므로 코드와 사이트 디자인의 분리 원칙이 완전히 구현됩니다. 따라서 외부 스타일 시트를 사용하는 것은 사이트에 스타일을 추가하는 가장 다양하고 편리한 방법입니다. 이를 통해 독립적인 편집이 가능합니다. HTML 파일그리고 CSS.

    내부 스타일 시트

    스타일은 HTML 문서 자체의 요소 내부에 작성됩니다.

    표제

    이 예에서는 요소 스타일이 다음으로 설정되었습니다.

    , 이는 특정 웹 페이지 전체에서 사용될 수 있습니다(그림 1). 안전하게 결합할 수 있으니 참고하세요. ~와 함께

    제목 1

    제목 2

    이 예에서 첫 번째 제목은 스타일 속성을 사용하여 빨간색과 크기 36픽셀로 설정되고, 두 번째 제목은 요소를 사용하여 녹색으로 설정됩니다.

    제목 1

    제목 2

    이 예에서는 키릴 문자 Lobster를 연결하기 위해 Google Fonts 웹사이트에서 스타일 파일을 가져오는 방법을 보여줍니다.