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 파일입니다. 🎜>
내부 스타일 시트는 <head> 이렇게 정의된 스타일은 페이지에 적용됩니다. 스타일 <style> 태그의 사용법은 다음 예에서 확인할 수 있습니다.
<머리>…… 이미지: url("images/back40.gif")} 외부 스타일 시트 가져오기 외부 스타일 시트를 가져오려면 < ;style>을 참조하세요. 가져올 때 @import를 사용하세요. 다음 예를 참조하세요. <head> @import “mystyle.css” 기타 스타일 시트 선언 4. 인라인 스타일 인라인 스타일 입니다. HTML 태그에 혼합하여 사용하면 특정 요소의 스타일을 별도로 쉽게 정의할 수 있습니다. 인라인 스타일을 사용하는 것은 스타일 매개변수를 HTML 태그에 직접 추가하는 것입니다. 스타일 매개변수의 콘텐츠는 다음 예와 같이 CSS 속성 및 값입니다. <p style="color: sienna;margin-left: 20px;"> </p> <!--이 문단의 색상은 카키색이며, 왼쪽 여백은 20픽셀입니다. -> 여러 스타일시트 오버레이 CSS 스타일 시트에는 계단식 순서가 있습니다. 여기서는 동일한 선택기에서 여러 가지 스타일 시트를 사용하는 경우 이 속성 값이 여러 번 중복됩니다. 스타일 시트 사이에 충돌이 있는 경우 마지막으로 정의된 스타일 시트가 우선합니다. 예를 들어 먼저 h3 선택기의 색상, 텍스트 정렬 및 글꼴 크기 속성을 정의하는 외부 스타일 시트에 연결합니다. h3 { 그런 다음 h3 선택기의 text-align 및 글꼴 크기 속성도 내부 스타일 시트에 정의됩니다. h3 { 그러면 이 페이지의 겹쳐진 스타일은 다음과 같습니다. 색상: 빨간색 텍스트 정렬: 글꼴 크기: 20pt; /*텍스트 색상은 빨간색이며 크기는 20pt입니다.*/ 글꼴 색상은 다음과 같습니다. 외부 스타일 시트, 그리고 정렬과 글꼴 크기가 모두 정의되면 나중 정의가 내부 스타일 시트보다 우선합니다. 계단식 순서
</style>
……
</head>
…… <style type="text/css">
-->
</style>
...... .css 스타일시트, 외부 스타일시트 사용 시 주의하세요. 이 방법은 스타일 시트에 연결하는 방법과 매우 유사하지만 외부 스타일 시트를 가져오는 입력 방법이 더 많은 장점이 있습니다. 본질적으로 내부 스타일 시트에 저장되는 것과 동일합니다.
참고: 외부 스타일 시트 가져오기는 다른 내부 스타일 시트보다 먼저 스타일 시트 시작 부분에 있어야 합니다.
참고: 스타일 매개변수는 BASEFONT, PARAM 및 SCRIPT를 제외한 BODY(BODY 자체 포함)의 모든 요소에 적용할 수 있습니다.
color: red;
text-align: left;
font-size: 8pt;
}
/*제목 3의 텍스트 색상은 빨간색입니다. 왼쪽 정렬, 텍스트 크기는 8*/
text-align:
글꼴 크기: 20pt; >}
/*제목 3의 텍스트는 오른쪽으로 정렬됩니다. 크기는 20포인트입니다.*/
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 