CSS 스타일 생성에 대한 자세한 설명
- 零下一度원래의
- 2017-05-15 13:12:291824검색
스타일 시트를 읽으면 브라우저는 이에 따라 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("/images/back40.gif");}속성 값과 단위 사이에 공백을 두지 마십시오. "margin-left: 20px" 대신 "margin-left: 20px"를 사용하면 IE 6에서만 작동하고 Mozilla/Firefox 또는 Netscape에서는 작동하지 않습니다.
내부 스타일 시트
단일 문서에 특별한 스타일이 필요한 경우 내부 스타일 시트를 사용해야 합니다. 다음과 같이 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 내부 스타일 시트를 정의할 수 있습니다.
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>인라인 스타일
프레젠테이션과 콘텐츠가 함께 혼합되므로 인라인 스타일이 많이 사용됩니다. 스타일시트의 장점이 사라집니다. 예를 들어 스타일을 요소에 한 번만 적용해야 하는 경우에는 이 접근 방식을 주의해서 사용하세요.
인라인 스타일을 사용하려면 해당 태그 내에 style 속성을 사용해야 합니다. 스타일 속성에는 모든 CSS 속성이 포함될 수 있습니다. 이 예에서는 단락의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.
<p style="color:sienna;margin-left:20px">This is a paragraph.</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;
입니다. 즉, 색상 속성은 외부 스타일 시트에서 상속됩니다. 텍스트 정렬 및 글꼴 크기는 외부 스타일 시트에서 상속됩니다. (글꼴 크기)는 내부 스타일 시트의 규칙으로 대체됩니다.
여러 스타일이 하나의
스타일 시트에 계단식으로 표시됩니다. 스타일 시트를 사용하면 스타일 정보를 여러 방법으로 지정할 수 있습니다. 스타일은 개별 HTML 요소, HTML 페이지의 헤더 요소 또는 외부 CSS 파일에서 지정할 수 있습니다. 동일한 HTML 문서 내에서 여러 외부 스타일시트를 참조할 수도 있습니다.
계단식 순서
동일한 HTML 요소가 둘 이상의 스타일로 정의된 경우 어떤 스타일이 사용됩니까?
일반적으로 모든 스타일은 다음 규칙에 따라 새로운 가상 스타일 시트에 계단식으로 배열되며 4번이 가장 높은 우선순위를 갖습니다.
브라우저 기본값
외부 스타일 시트
내부 스타일 시트(93f0f5c25f18dab9d176bd4f6de5d30e 태그 내부에 위치)
인라인 스타일(요소 내부의 HTML) )
따라서 인라인 스타일(HTML 요소 내부)이 가장 높은 우선순위를 가집니다. 즉, 태그, 외부 스타일 시트의 스타일 선언 또는 브라우저 스타일 선언(기본값)의 스타일 선언보다 우선순위가 높습니다.
팁: 외부 파일의 스타일을 사용하고 93f0f5c25f18dab9d176bd4f6de5d30e에서 스타일을 정의하면 내부 스타일 시트가 외부 파일의 스타일을 대체합니다. [관련 추천]
1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드
3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼
위 내용은 CSS 스타일 생성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!