세 가지 유형의 CSS 오버레이 스타일: 1. 인라인 스타일, HTML 태그의 스타일 속성에 스타일 코드 작성 2. 인라인 스타일, "" 페이지에 스타일 코드 작성; style>" 태그 쌍; 3. 외부 스타일, 별도의 ".css" 파일에 스타일 코드를 작성합니다. </p></blockquote> <p><img src="https://img.php.cn/upload/article/202112/09/2021120916130419320.jpg" alt="CSS는 오버레이 스타일을 세 가지 유형으로 나눕니다." ></p> <p>이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터. </p> <p>웹 페이지 요소의 스타일을 풍부하게 하고 웹 페이지의 내용과 스타일을 분리하기 위해 CSS는 Cascading Style Sheets의 약자로 계단식 스타일 시트를 의미합니다. CSS를 사용하면 HTML로 스타일을 표현하는 대부분의 태그가 더 이상 필요하지 않습니다. HTML은 문서의 구조와 내용만 담당하고 표현은 완전히 CSS에 맡기므로 HTML 문서가 더욱 간결해집니다. </p> <p>CSS는 주로 웹 페이지의 스타일을 디자인하고 웹 페이지를 아름답게 만드는 데 사용됩니다. 웹 페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 함께 웹 페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다. </p> <p>CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기와 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다. </p> <p><strong>CSS 스타일에는 크게 인라인 스타일(인라인 스타일), 내부 스타일(인라인 스타일), 외부 스타일(외부 스타일)의 세 가지 유형이 있습니다. </strong></p> <p><strong>1. 인라인 스타일: </strong></p> <p> 스타일 속성에서 태그 내부에 작성된 스타일입니다. </p> <p>예: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记></pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>2. 내부 스타일(임베디드 스타일): </strong></p><p> HTML 페이지 내부에 작성되며, head 태그에 저장되고, 스타일은 style 태그에 작성됩니다. </p><p>예: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><style> 选择器 {属性名：属性值；属性名：属性值；......} 로그인 후 복사3. 외부 스타일(외부 스타일): 외부 스타일은 확장자가 .css인 하나 이상의 외부 스타일 시트 파일에 모든 스타일을 넣는 것입니다. CSS 스타일 시트 문서는 외부 스타일 시트를 나타냅니다. 외부 스타일 시트를 브라우저에서 인식하고 구문 분석하려면 먼저 웹 문서로 가져와야 합니다. 외부 스타일 시트 파일은 두 가지 방법으로 HTML 문서로 가져올 수 있습니다. 1) 태그를 사용하여 가져오기 태그를 사용하여 외부 스타일 시트 파일을 가져옵니다. 로그인 후 복사각 속성에 대한 설명: href 속성은 외부 스타일 시트의 주소를 설정합니다. 스타일시트 파일에서는 상대 주소 또는 절대 주소를 사용할 수 있습니다. rel 속성은 관련 문서를 정의하며, 여기서는 관련 스타일 시트를 의미합니다. type 속성은 스타일 요소와 마찬가지로 CSS 텍스트 파일을 나타냅니다. 2) @import 키워드를 사용하여 가져오기 태그에 @import 키워드를 사용하여 외부 스타일 시트 파일을 가져옵니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><style type="text/css"> @import url("css文件路径"); 로그인 후 복사@import 키워드 다음에 url() 함수를 사용합니다. 외부 스타일 시트 파일의 특정 주소를 포함합니다. (학습 영상 공유: css 영상 튜토리얼)
