차이점: 내부 연결은 스타일 속성을 사용하여 HTML 태그에 CSS 스타일을 작성하는 것을 의미하며, 외부 연결은 확장자가 ".css"인 파일에 별도로 CSS 스타일을 작성하고 참조를 위해 링크 태그를 사용하는 것을 의미합니다. 스타일 태그를 사용하여 참조하며 CSS 스타일은 ""에 별도로 작성됩니다.
【추천 튜토리얼: CSS 비디오 튜토리얼】
HTML에서 CSS를 참조하는 방법에는 내부 링크, 외부 링크, 임베디드의 세 가지가 있습니다.
기능적으로 말하면, 이 세 가지가 구현하는 기능은 동일하며 모두 콘텐츠의 조판 및 수정을 달성할 수 있습니다. 그러나 사용법에 있어서는 사용방법이 다릅니다. 아래에서 하나씩 구분해 보겠습니다.
(1) 내부 링크 소개
내부 링크 CSS 스타일시트는 기존에 CSS 코드를 직접 작성하는 것입니다. HTML 태그의 구체적인 사용 방법은 다음과 같습니다.
<div style="color:red;">设置文字的颜色为红色</div>
참고: 스타일의 내용은 요소의 시작 태그에 작성되며, CSS 스타일 코드는 CSS 스타일이 여러 개인 경우 큰따옴표로 작성해야 합니다. 코드 설정은 세미콜론으로 구분하여 함께 작성할 수 있습니다. 여러 CSS 스타일을 함께 작성한 효과는 다음과 같습니다.
<div style="color:red;font-size:14px;">>设置字体颜色为红色,并且字体大小为14px</div>
(2) 임베디드 소개
임베디드 스타일 시트와 내부 링크의 차이점은 여러 개의 동일한 요소의 스타일을 동시에 수정하는 것이 매우 편리하다는 것입니다. 예를 들어 특정 태그의 콘텐츠 글꼴을 빨간색, 굵은 글꼴로 조정하고 글꼴 크기를 14px로 조정하려는 경우
내부 링크 방법을 사용하는 경우 이를 추가해야 합니다. 각 태그 스타일을 추가한 후의 코드는 아래 그림과 같습니다.
위에서 볼 수 있듯이 내부 연결은 많은 중복 코드를 생성하지만 임베디드 버전을 사용하는 것은 비교적 간단합니다. 아래 그림과 같이 :
위 그림에서 볼 수 있듯이 임베디드의 경우 스팬 태그만 수정하면 스팬 태그의 모든 콘텐츠 스타일이 그에 따라 수정됩니다.
(3) 외부 소개
외부 CSS 스타일은 CSS 코드를 별도의 외부 파일에 작성하는 것입니다. 이 CSS 스타일 파일은 확장자가 ".css"이며 일반적으로