지역 사회 배우다 도구 라이브러리 여가
찾다
한국어

CSS 생성

CSS Creation

스타일 시트를 읽으면 브라우저는 이에 따라 HTML 문서의 형식을 지정합니다.

스타일 시트를 삽입하는 방법

스타일 시트를 삽입하는 방법에는 세 가지가 있습니다.

  • 외부 스타일 시트

  • 내부 스타일 시트

  • 인라인 스타일

외부 스타일 시트

스타일을 여러 페이지에 적용해야 하는 경우 외부 스타일 시트가 이상적입니다. 외부 스타일 시트를 사용하면 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다. 각 페이지는 태그를 사용하여 스타일시트에 연결됩니다. 문서의 머리 부분에 있는 태그:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

브라우저는 mystyle.css 파일에서 스타일 선언을 읽고 그에 따라 문서 형식을 지정합니다.

외부 스타일 시트는 모든 텍스트 편집기에서 편집할 수 있습니다. 파일에는 html 태그가 포함될 수 없습니다. 스타일 시트는 .css 확장자로 저장해야 합니다. 다음은 스타일 시트 파일의 예입니다.

hr {color:sienna;}
p {margin-left:20px;}
body {Background-image:url("../style/images/back40. gif ");}

lamp.gif속성값과 단위 사이에 공백을 두지 마세요. "margin-left: 20px" 대신 "margin-left: 20px"를 사용하면 IE 6에서만 작동하고 Mozilla/Firefox 또는 Netscape에서는 작동하지 않습니다.

내부 스타일 시트

단일 문서에 특별한 스타일이 필요한 경우 내부 스타일 시트를 사용해야 합니다. 다음과 같이 <style> 태그를 사용하여 문서 헤드에 내부 스타일 시트를 정의할 수 있습니다. hr {color:sienna;}
p {margin-left:20px;}

body {Background-image:url("../style/images/back40.gif");}




<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}

body {Background-image:url("../style /images/back40.gif");}
</style>
</head>

인라인 스타일

인라인 스타일은 프레젠테이션과 콘텐츠의 혼합으로 인해 손실됩니다. 이로 인해 많은 장점이 제거됩니다. 스타일 시트. 예를 들어 스타일을 요소에 한 번만 적용해야 하는 경우에는 이 접근 방식을 주의해서 사용하세요.

인라인 스타일을 사용하려면 해당 태그 내에서 스타일 속성을 사용해야 합니다. 스타일 속성에는 모든 CSS 속성이 포함될 수 있습니다. 이 예에서는 단락의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.

<p style="color:sienna;margin-left:20px">이것은 단락입니다</p>

우선 순위 수준

동일한 HTML 요소의 스타일이 외부 스타일 시트에 설정된 경우 내부 스타일 시트(태그 내부에 위치),

인라인 스타일(HTML 요소 내부)에 인라인 스타일이 적용됩니다. 효과 스타일(HTML 요소 내부) 따라서 우선순위는

    • 인라인 스타일(HTML 요소 내부)이 가장 높고

    • 다음에 내부 스타일 시트( 태그)

마지막으로 외부 스타일시트


🎜🎜🎜
지속적인 학습
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {color: #e22c5e } </style> </head> <body> <p STYLE="color: #1c10b4">css的优先级</p> </body> </html>
제출하다코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492836회 재생