> 개발 도구 > dreamweaver > dw에서 html로 CSS 파일을 연결하는 방법

dw에서 html로 CSS 파일을 연결하는 방법

藏色散人
풀어 주다: 2023-01-13 00:40:52
원래의
15212명이 탐색했습니다.

dw가 css 파일을 html로 연결하는 방법: 먼저 dw 소프트웨어에서 사이트를 만들고 사이트에 새 CSS 폴더와 html 파일을 만든 다음 오른쪽 상단에 있는 [CSS 디자이너]를 클릭하고 css 폴더를 선택합니다. 추가를 [링크]로 설정하고 [확인] 버튼을 클릭하세요.

dw에서 html로 CSS 파일을 연결하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, dreamweaverCC 2020&&html5&&css3 버전, Dell G3 컴퓨터.

추천: "dreamweaver tutorial", "css video tutorial"

dw는 HTML에서 CSS 파일을 어떻게 링크합니까?

1. 먼저 소프트웨어에서 사이트를 만들고 사이트에 새 CSS 폴더와 html 파일을 만듭니다. (사이트 생성 방법을 보려면 아래를 클릭하여 경험을 인용할 수 있습니다.)

dw에서 html로 CSS 파일을 연결하는 방법

2. 오른쪽 상단의 [CSS 디자이너]를 클릭한 후, 아래의 [+ 기호]를 클릭한 후, [새로 만들기]를 선택합니다. CSS 파일].

dw에서 html로 CSS 파일을 연결하는 방법

3. 생성창에서 [찾아보기] 버튼을 클릭하세요.

dw에서 html로 CSS 파일을 연결하는 방법

4. 그런 다음 사이트에 생성된 CSS라는 이름의 폴더를 선택한 다음 생성하려는 CSS 이름(영문이어야 함)을 입력하고 [저장]을 클릭합니다.

dw에서 html로 CSS 파일을 연결하는 방법

5. 그런 다음 추가를 [링크]로 설정하고 [확인] 버튼을 클릭하세요.

dw에서 html로 CSS 파일을 연결하는 방법

6. 추가가 완료되면 오른쪽 사이트의 CSS 폴더에 새로 생성된 CSS 스타일 시트 파일을 확인할 수 있습니다.

dw에서 html로 CSS 파일을 연결하는 방법

7. 왼쪽의 [head] 태그에는 CSS 파일에 연결되는 추가 코드 줄이 있습니다. 연결된 스타일 시트는 상단 탭 태그에서도 볼 수 있습니다.

dw에서 html로 CSS 파일을 연결하는 방법

8. 다음으로 CSS 스타일 시트가 성공적으로 연결되었는지 확인하기 위해 간단한 웹 페이지를 작성합니다. HTML 웹 페이지 편집 페이지를 열고 [body] 태그에 div를 입력합니다. 아래와 같이

dw에서 html로 CSS 파일을 연결하는 방법

9. 상단 탭 태그에 방금 생성한 CSS 스타일 시트를 선택하고, 스타일 시트에 스타일을 작성하고, 이름을 [aaa]로 지정하고, 스타일 시트를 저장합니다. [단축키 Ctrl+S] .

dw에서 html로 CSS 파일을 연결하는 방법

10 그런 다음 html 편집 페이지로 돌아가서 div 태그에 클래스를 입력하고 방금 작성한 스타일 이름 [aaa]를 입력한 후 웹페이지를 저장합니다[단축키 Ctrl+S].

dw에서 html로 CSS 파일을 연결하는 방법

11. 상단의 디자인 버튼을 클릭하시면 실시간 효과를 보실 수 있습니다.

dw에서 html로 CSS 파일을 연결하는 방법

12 단축키 F12를 눌러 브라우저에서 직접 열어 실제 효과를 확인할 수도 있습니다. 이는 CSS를 html에 연결하는 데 문제가 없음을 증명합니다.

dw에서 html로 CSS 파일을 연결하는 방법

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 dw에서 html로 CSS 파일을 연결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿