CSS에 스타일을 도입하는 방법은 무엇입니까?
- 清浅원래의
- 2018-11-17 16:26:396367검색
이 글은 CSS 스타일 시트를 소개하는 방법과 그 사이의 장단점을 공유할 것이며, 참고할만한 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
스타일 시트는 세 가지 방법으로 CSS에 도입될 수 있습니다.
(1) 인라인 스타일
(2) 내장 스타일
(3) 외부 스타일
각 CSS 스타일에는 다음의 장점과 단점이 있습니다.
인라인 스타일
특징: (1) 인라인 스타일은 코드의 HTML 요소에 배치됩니다.
(2) 인라인 스타일을 사용할 때 스타일은 선택한 요소에만 영향을 미칩니다.
(3) 인라인 스타일에는 선택기가 없습니다.
예:
<div style="width:100px;height:100px;border:1px solid #ccc"><div>
이 CSS 인라인 스타일은 이 div의 너비와 높이만 변경할 수 있으며 페이지의 div 또는 속성 스타일은 변경되지 않습니다. . 이는 인라인 스타일의 한계 중 하나입니다. 이는 특정 요소만 변경하므로 모범 사례가 아니며 인라인 스타일도 매우 구체적입니다. 이로 인해 다른 비인라인 스타일로 재정의하기가 어렵고 실제로 웹 페이지에서는 인라인 스타일을 거의 사용하지 않습니다.
임베디드 스타일
특징: (1) 스타일 태그 080b747a20f9163200dd0a7d304ba388에 의해 작성된 웹페이지의 헤드 부분에 배치됩니다.
(2) 작성된 스타일은 해당 스타일을 사용하는 웹페이지에만 사용됩니다.
(3) 포함된 스타일은 "내부 스타일"이라고도 합니다.
예
<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>포함된 스타일은 문서의 헤드에 포함된 스타일입니다. 포함된 스타일은 해당 스타일이 포함된 페이지의 마크업에만 영향을 미칩니다. 다시 말하지만, 이 접근 방식은 CSS의 장점 중 하나를 무효화합니다. 모든 페이지에는 스타일이 있으므로 링크 색상을 빨간색에서 녹색으로 변경하는 등 사이트 전체를 변경하려면 모든 페이지에서 포함된 스타일 시트를 사용하므로 모든 페이지에서 이 변경을 수행해야 합니다. 이는 인라인 스타일보다 낫지만 많은 경우 여전히 문제가 있습니다.
외부 스타일 시트
특징: (1) 별도의 문서에 작성하여 다양한 웹 문서에 첨부
using use using . Action
Example
<link href=“demo.css”rel=“stylesheet”type=“text/css> 在demo文件下写css样式
요즘 대부분의 웹사이트는 외부 스타일 시트를 사용합니다. 별도의 문서에 작성된 후 다양한 웹 문서에 추가되는 스타일입니다. 외부 스타일 시트는 연결된 모든 파일에 영향을 미칩니다. 즉, 20페이지 웹사이트가 있고 각 페이지가 동일한 스타일 시트를 사용하는 경우 변경이 필요할 때 스타일 시트를 간단히 편집하여 해당 페이지를 완료할 수 있습니다. 사이트 관리가 더 쉬워졌습니다. 외부 스타일 시트의 단점은 이러한 외부 파일을 얻고 로드하려면 페이지가 필요하다는 것입니다. 모든 페이지가 CSS 테이블의 모든 스타일을 사용하는 것은 아니므로 많은 페이지가 실제로 필요한 것보다 훨씬 더 큰 CSS 페이지를 로드합니다.
요약: 위 내용은 이 글의 CSS 스타일 시트에 대한 소개입니다. 이 글을 통해 모든 사람이 CSS 스타일을 이해할 수 있기를 바랍니다.
위 내용은 CSS에 스타일을 도입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!