HTML에 CSS를 추가하는 방법
- (*-*)浩원래의
- 2019-05-28 15:47:118956검색
HTML에 CSS를 추가하는 방법에는 인라인, 포함, 링크 및 가져오기의 네 가지 주요 방법이 있습니다.
1. 인라인 스타일
인라인 스타일은 태그의 스타일 속성에 CSS 스타일을 설정하는 것입니다. 이 방법은 CSS의 장점을 반영하지 않으므로 권장되지 않습니다.
<div style = "width:100px;height:100px;>我是行内样式</div>
2. Embedded
Embedded는 웹페이지의
태그 쌍에 CSS 스타일을 작성하는 것입니다. 형식은 다음과 같습니다.<head> <style type="text/css"> ...此处写CSS样式 </style> </head>
단점은 웹페이지가 많은 웹사이트의 경우 웹페이지마다 임베딩을 사용하고 스타일을 수정하는 것이 매우 번거롭다는 점입니다. 단일 웹페이지에는 삽입 사용을 고려할 수 있습니다.
3 가져오기 방법은
독립적인 .css 파일을 HTML 파일에 도입합니다.
<style type="text/css"> @import"mystyle.css"; //此处要注意.css文件的路径 </style>
가져오기 방법은 전체 웹 페이지 뒤에 CSS 파일을 로드합니다. 웹 페이지가 상대적으로 크면 스타일이 지정되지 않은 페이지가 잠시 나타납니다. 그러면 웹 페이지의 스타일이 나타납니다. 이는 수입품의 본질적인 결함입니다.
4. 링크 유형
도 HTML 파일에 .css 파일을 도입하지만, 링크 유형은 HTML 규칙을 사용하여 외부 CSS 파일을 도입한다는 점에서 가져오기 유형과 다릅니다. 외부 스타일 시트 파일을 도입하기 위한 구문은 다음과 같습니다.
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
링크 유형과 가져오기 유형을 사용할 때의 차이점은 웹 본문을 로드하기 전에 CSS 파일을 로드한다는 점입니다. 페이지 파일이므로 표시되는 웹 페이지는 처음부터 스타일 효과가 적용됩니다. 스타일이 지정되지 않은 웹 페이지를 먼저 표시한 다음 가져오기 유형과 같이 스타일이 지정된 웹 페이지를 표시하지 않습니다. 이것이 링크 유형의 장점입니다.
요약: 일반적으로 웹사이트를 만들 때 스타일은 대부분 여러 스타일 시트 파일로 작성되기 때문에 먼저 링크를 사용하여 일반 CSS 파일을 소개한 다음 가져오기를 사용하여 이 CSS 파일에 소개합니다. 기타 CSS 파일. 그러나 JavaScript를 통해 CSS 파일을 동적으로 도입하는 경우에는 연결만 사용할 수 있습니다.
위 내용은 HTML에 CSS를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!