이 튜토리얼에서는 Notepad++ 편집기를 사용하여 HTML 및 CSS 파일을 생성합니다. 이는 사용자를 위한 것입니다. 마이크로소프트 윈도우 모든 예제가 그 안에서 실행됩니다.
Mac이 있는 경우 다음과 같이 대괄호 편집기에서 예제를 실행할 수 있습니다. 메모장++완전 무료입니다. 편집자의 경우 괄호, 그러면 사용자에게도 적합합니다. 마이크로소프트 윈도우, 나중에 더 가까운 것을 선택할 수 있습니다.
내부 스타일 시트 만들기
첫 번째 내부 스타일 시트를 만드는 예를 살펴보겠습니다.
1단계: 텍스트 편집기 열기
WIN + R 버튼을 동시에 누르면(시작 - 실행과 유사) 대화 상자가 열립니다. "달리다" Enter를 누르고 Enter를 누르십시오 (프로그램이 열립니다 ) 또는 프로그램을 실행하십시오. 그녀의 바로가기를 통해.
기본 프로그램 창이 열립니다.
2단계: 문서 구조 만들기
다음 HTML 코드를 복사하거나 편집기에 붙여넣습니다.
이 튜토리얼의 코드 예제에서는 연한 녹색으로 강조 표시된 추가 설명을 제공할 것입니다. HTML은 특수 태그를 사용하여 코드에 주석을 생성합니다., 해당 요소 내부의 텍스트는 브라우저에 표시되지 않습니다. CSS 코드에서 주석을 추가하려면 다음 구조에 주석 텍스트를 배치해야 합니다. /* 주석 텍스트 */. 내장 스타일 내부와 외부 스타일 모두에서 CSS 코드에 주석을 달 수 있습니다( 별도의 파일).
3단계: 인라인 스타일 추가
다음 단계는 페이지에 기본 제공 스타일을 추가하는 것입니다. 첫 번째 수준 제목의 경우 텍스트 색상은 빨간색(색상: 빨간색)이고 단락의 경우 파란색(색상: 파란색)입니다. 또한 첫 번째 수준 제목의 경우 텍스트를 가운데에 정렬합니다(text-align: center). 각 항목을 확인하세요. CSS 속성그 의미는 콜론으로 구분되었으며 각 선언 끝에는 세미콜론이 있었습니다.
자기 개발에 참여하는 것이 좋습니다.
한 달 안에 CSS를 배울 수 있습니다.
4단계: 브라우저에서 HTML 페이지 보기
브라우저에서 예제를 열고 예제 결과가 이미지와 일치하는지 확인하세요.
외부 스타일 시트 연결
이제 스타일 시트를 포함하고 이를 HTML 문서에 연결하는 별도의 파일을 생성하겠습니다.
- Notepad++에서 빈 파일을 새로 만들고 page.css로 저장합니다. 캐스케이드 스타일 시트 *.css) HTML 문서를 만든 동일한 폴더에 있습니다.
- 이전 예의 CSS 코드(태그의 내용)를 이동합니다.
안녕, 세계!