CSS 스타일 시트 및 다양한 스타일 우선순위 소개
- 王林원래의
- 2020-05-25 17:41:282929검색
스타일 시트를 삽입하는 방법은 다음과 같습니다.
2. 내부 스타일 시트
외부 스타일 시트스타일 시트의 경우 파일 하나를 변경하여 전체 사이트의 모양을 변경할 수 있습니다. 각 페이지는 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 스타일 시트에 연결됩니다. 2cdf5bf648cf2f33323966d7f58a7f3f 태그는 문서의 헤드에 있습니다. 예제는 다음과 같습니다.
<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("/images/back40.gif");}참고: 속성 값과 단위 사이에 공백을 두지 마십시오(예: "margin-left: 20 px"). 올바른 표기는 "margin-"입니다. 왼쪽: 20px" .
(동영상 튜토리얼 추천: css 동영상 튜토리얼)
한 문서에 특별한 스타일이 필요한 경우 내부 스타일 시트를 사용해야 합니다. c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 문서 헤드에 내부 스타일 시트를 정의할 수 있습니다. 예: <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
스타일을 한 번만 적용해야 하는 경우 이 방법을 사용할 수 있습니다. 요소. (주의해서 사용해주세요) 인라인 스타일을 사용하려면 해당 태그 내에서 스타일 속성을 사용해야 합니다. 스타일 속성에는 모든 CSS 속성이 포함될 수 있습니다.
다음은 단락의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.
<p style="color:sienna;margin-left:20px">这是一个段落。</p>다중 스타일
일부 속성이 다른 스타일시트의 동일한 선택기로 정의된 경우 속성 값은 더 많은 항목에서 변경됩니다. 특정 스타일시트가 상속되었습니다. 예를 들어, 외부 스타일 시트에는 h3 선택기에 대한 세 가지 속성이 있습니다:
h3{
color:red;
text-align:left;
font-size:8pt;
}그리고 내부 스타일 시트에는 h3 선택기에 대한 두 가지 속성이 있습니다:
h3{
text-align:right;
font-size:20pt;
}내부 스타일 시트가 있는 이 페이지에 외부 스타일 시트가 있는 경우 동시에 링크하면 h3에서 얻은 스타일은
color:red;text-align:right;font-size:20pt;
입니다. 즉, 색상 속성은 외부 스타일 시트에서 상속되며 텍스트 정렬(text-alignment) 및 글꼴 크기(font-size)는 내부 스타일 시트의 규칙으로 대체됩니다.
다양한 스타일 우선순위스타일 시트를 사용하면 스타일 정보를 여러 방법으로 지정할 수 있습니다. 스타일은 개별 HTML 요소, HTML 페이지의 헤더 요소 또는 외부 CSS 파일에서 지정할 수 있습니다. 동일한 HTML 문서 내에서 여러 외부 스타일시트를 참조할 수도 있습니다. 일반적으로 우선순위는 다음과 같습니다.
인라인 스타일 > (내부 스타일) 내부 스타일 시트 > (외부 스타일) 외부 스타일 시트 > 브라우저 기본 스타일
참고: 외부 스타일이 내부 스타일 뒤에 배치되는 경우 , 외부 스타일이 내부 스타일보다 우선 적용됩니다.추천 튜토리얼: CSS 시작을 위한 기본 튜토리얼
위 내용은 CSS 스타일 시트 및 다양한 스타일 우선순위 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!