CSS 스타일

예상되는 CSS 스타일 시트 효과를 브라우저에 표시하려면 브라우저가 CSS를 인식하고 올바르게 호출해야 합니다. 브라우저가 스타일 시트를 읽을 때 텍스트 형식으로 읽어야 합니다. CSS 스타일 시트를 페이지에 삽입하는 방법에는 외부 스타일 시트 연결, 내부 스타일 시트 가져오기, 모양 스타일 시트 가져오기 등 4가지가 있습니다.

1. 외부 스타일 시트에 연결

외부 스타일 시트에 연결하는 것은 스타일 시트를 스타일 시트 파일로 저장하는 것입니다. 그런 다음 페이지에 추가하세요. 이 스타일시트 파일에 연결하려면 이 <link> 태그를 다음과 같이 페이지의 <head>에 배치해야 합니다.

<head>

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

위의 예는 브라우저는 mystyle.css 파일에서 문서 형식으로 정의된 스타일 시트를 읽습니다. rel="stylesheet"는 페이지에서 이 외부 스타일 시트를 사용하는 것을 의미합니다. type="text/css"는 파일 형식이 스타일 시트 텍스트임을 의미합니다. href="mystyle.css"는 파일이 있는 위치입니다. 미디어는 미디어 유형을 선택하는 것입니다. 이러한 미디어에는 스크린, 종이, 음성 합성 장치, 점자 판독 장치 등이 포함됩니다.

외부 스타일시트 파일을 여러 페이지에 적용할 수 있습니다. 이 스타일시트 파일을 변경하면 모든 페이지의 스타일도 이에 따라 변경됩니다. 동일한 스타일의 페이지로 다수의 웹사이트를 만들 때 매우 유용합니다. 중복 작업량을 줄일 뿐만 아니라 향후 수정 및 편집이 용이하고 탐색 시 반복되는 코드 다운로드도 줄어듭니다.

참고

스타일 시트 파일은 텍스트 편집기(예: 메모장)를 사용하여 열고 편집할 수 있습니다. 일반적으로 스타일 시트 파일 확장자는 .css입니다. 콘텐츠는 정의된 스타일 시트이며 HTML 태그를 포함하지 않습니다. mystyle.css 파일의 콘텐츠는 다음과 같습니다.

hr {color: sienna}

p {margin-left: 20px}

body {Background-image: url("images/back40.gif")} /*정의 가로줄의 색상은 흙빛 노란색입니다. 단락 왼쪽 여백은 20픽셀입니다. 페이지의 배경 이미지는 이미지 디렉터리의 back40.gif 파일입니다. 🎜>

2. 내부 스타일 시트

내부 스타일 시트는 <head> 이렇게 정의된 스타일은 페이지에 적용됩니다. 스타일 <style> 태그의 사용법은 다음 예에서 확인할 수 있습니다.

<머리>

…… 이미지: url("images/back40.gif")}
</style>
……
</head>

3. 외부 스타일 시트 가져오기
외부 스타일 시트 가져오기 외부 스타일 시트를 가져오려면 < ;style>을 참조하세요. 가져올 때 @import를 사용하세요. 다음 예를 참조하세요.
<head>

…… <style type="text/css">

</style>
...... .css 스타일시트, 외부 스타일시트 사용 시 주의하세요. 이 방법은 스타일 시트에 연결하는 방법과 매우 유사하지만 외부 스타일 시트를 가져오는 입력 방법이 더 많은 장점이 있습니다. 본질적으로 내부 스타일 시트에 저장되는 것과 동일합니다.

참고: 외부 스타일 시트 가져오기는 다른 내부 스타일 시트보다 먼저 스타일 시트 시작 부분에 있어야 합니다.

4. 인라인 스타일

인라인 스타일 입니다. HTML 태그에 혼합하여 사용하면 특정 요소의 스타일을 별도로 쉽게 정의할 수 있습니다. 인라인 스타일을 사용하는 것은 스타일 매개변수를 HTML 태그에 직접 추가하는 것입니다. 스타일 매개변수의 콘텐츠는 다음 예와 같이 CSS 속성 및 값입니다.
<p style="color: sienna;margin-left: 20px;">
문단입니다
</p> <!--이 문단의 색상은 카키색이며, 왼쪽 여백은 20픽셀입니다. ->
스타일 매개변수 뒤의 따옴표 안의 내용은 스타일 시트의 중괄호 안의 내용과 동일합니다.

참고: 스타일 매개변수는 BASEFONT, PARAM 및 SCRIPT를 제외한 BODY(BODY 자체 포함)의 모든 요소에 적용할 수 있습니다.
여러 스타일시트 오버레이

CSS 스타일 시트에는 계단식 순서가 있습니다. 여기서는 동일한 선택기에서 여러 가지 스타일 시트를 사용하는 경우 이 속성 값이 여러 번 중복됩니다. 스타일 시트 사이에 충돌이 있는 경우 마지막으로 정의된 스타일 시트가 우선합니다. 예를 들어 먼저 h3 선택기의 색상, 텍스트 정렬 및 글꼴 크기 속성을 정의하는 외부 스타일 시트에 연결합니다.
h3
{
color: red;
text-align: left;
font-size: 8pt;
}
/*제목 3의 텍스트 색상은 빨간색입니다. 왼쪽 정렬, 텍스트 크기는 8*/
그런 다음 h3 선택기의 text-align 및 글꼴 크기 속성도 내부 스타일 시트에 정의됩니다.
h3
{
text-align:
글꼴 크기: 20pt; >}
/*제목 3의 텍스트는 오른쪽으로 정렬됩니다. 크기는 20포인트입니다.*/

그러면 이 페이지의 겹쳐진 스타일은 다음과 같습니다.
색상: 빨간색
텍스트 정렬:
글꼴 크기: 20pt; /*텍스트 색상은 빨간색이며 크기는 20pt입니다.*/
글꼴 색상은 다음과 같습니다. 외부 스타일 시트, 그리고 정렬과 글꼴 크기가 모두 정의되면 나중 정의가 내부 스타일 시트보다 우선합니다.

계단식 순서
동일한 HTML 요소에 다른 항목으로 스타일을 적용한 경우 하나보다 정의할 때 어떤 스타일을 사용합니까?
일반적으로 모든 스타일은 다음 규칙에 따라 새로운 가상 스타일 시트에 계단식으로 배열되며 4번이 가장 높은 우선순위를 갖습니다.
1. 브라우저 기본 설정
2. 외부 스타일 시트
3. 내부 스타일 시트(<head> 태그 내부에 위치)
4 . 인라인 스타일(HTML 요소 내부)
따라서 인라인 스타일(HTML 요소 내부)이 가장 높은 우선순위를 갖습니다. 즉, 다음 스타일 선언보다 우선합니다. 태그 선언의 스타일, 외부 스타일 시트 또는 브라우저의 스타일 선언(기본값)

다음 섹션

새로운 파일

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
*{ 
margin:0; 
padding:0; 
} 
body{ 
background-color:gray; 
} 
.clear{ 
clear:both; 
} 
/*head*/ 
#head{ 
background-color:blue; 
height:150px; 
} 
/*container*/ 
#container{ 
background-color:red; 
width:360px; 
height:200px; 
margin:20px auto; 
} 
/*content*/ 
#content{ 
background-color:yellow; 
float:left; 
width:185px; 
height:100%; 
} 
/*side*/ 
#side{ 
background-color:green; 
float:right; 
width:255px; 
height:100%; 
} 
/*foot*/ 
#foot{ 
background-color:white; 
height:150px; 
width:360px; 
margin:20px auto; 
} 
</style>
</head>
<body>
<!-- 头部 --> 
<div id="head"> 
</div> 
<!--END 头部 --> 
<!-- 主容器 --> 
<div id="container"> 
<!-- 左侧主显区 --> 
<div id="content"> 
</div> 
<!-- END 左侧主显区 --> 
<!-- 右侧边栏 --> 
<div id="side"> 
</div> 
<!-- END 右侧边栏 --> 
</div> 
<!-- END 主容器 --> 
<div class="clear"></div> 
<!-- 底部 --> 
<div id="foot"> 
</div> 
<!-- END 底部 --> 
</body>
</html>

제출하다 코드 재설정
자동운전

전체 화면 실행 결과