CSS 스타일은 별도의 파일( .css 유형 파일)로 HTML 문서에 도입되거나 HTML 문서에 직접 작성될 수 있으며 대략 다음 네 가지 방법으로 나눌 수 있습니다.
첫 번째와 두 번째 방법은 모두 CSS 스타일을 현재 HTML 문서에 작성합니다. 세 번째와 네 번째 방법은 모두 CSS 스타일을 외부 파일에 배치한 다음 현재 HTML 문서로 가져옵니다.
인라인 스타일은 CSS 스타일을 코드 줄 내 태그, 일반적으로 태그의 style 속성에 직접 삽입하는 방식으로, 가장 직접적인 방법이기도 합니다. 스타일을 수정하는 것이 가장 불편합니다.
[예시 1] 단락, <h2> 태그, <em> 태그, <strong> 태그, <div> 태그에 CSS 인라인 스타일을 각각 적용합니다.
<!doctype html>
<html>
<머리>
<meta charset="UTF-8">
<title>인라인 스타일</title>
</head>
<본문>
<p style="Background-color: #999900">인라인 요소, 제어 단락-1</p>
<h2 style="Background-color: #FF6633">인라인 요소, h2 제목 요소</h2>
<p style="Background-color: #999900">인라인 요소, 제어 단락-2</p>
<strong style="font-size:30px;">인라인 요소, em보다 강한 것이 더 효과적입니다</strong>
<div style="Background-color:#66CC99; color:#993300; height:30px; line-height:30px;">인라인 요소, div 블록 수준 요소</div>
<em style="font-size:2em;">인라인 요소, em 강조</em>
</body>
</html>페이지 데모 효과는 아래와 같습니다.
위의 예에서 인라인 스타일은 HTML 요소의 스타일 속성에 의해 포함됩니다. 즉, CSS 코드는 style="" 따옴표 안에 배치될 수 있으며 여러 CSS 속성 값은 세미콜론으로 구분됩니다 ; 예를 들어, 예제의 <div> 태그는 다음과 같습니다.
<div style="Background-color:#66CC99; color:#993300; height:30px; line-height:30px;">인라인 요소, div 블록 수준 요소</div>
단락 <p> 태그는 배경색을 갈색(배경색: #999900)으로 설정하고, 제목 <h2> 태그는 배경색을 빨간색(배경색: #FF6633)으로 설정합니다.
<strong> 태그는 글꼴을 30픽셀(font-size:30px;)로 설정하고, <div> 태그는 높이와 줄 높이를 30픽셀로 설정하고 배경색과 색상을 설정합니다( background-color: #66CC99; color : #993300 ; height:30px; line-height:30px;), <em> 태그는 글꼴 크기를 상대 단위(font-size: 2em;)로 설정합니다.
두 단락 <p> 태그의 내용은 다르지만 동일한 배경색 설정을 사용하지만 배경색 background-color: #999900을 설정하기 위해 CSS 인라인 속성을 두 번 추가합니다.
인라인 요소는 작성이 간단하지만 예제를 통해 다음과 같은 결함을 찾을 수 있습니다.
각 태그에는 style 속성을 추가하여 스타일을 지정해야 합니다. 웹 페이지 제작자가 HTML 태그와 스타일을 함께 혼합했던 과거와 달리 이제는 인라인 스타일이 CSS를 통해 작성되고 과거에는 HTML 태그 속성을 사용하여 스타일 효과를 얻었습니다. 방법은 다르지만 결과는 동일합니다. 향후 유지 관리 비용이 많이 듭니다. 즉, 페이지를 수정할 때 웹 사이트의 각 페이지를 하나씩 열어서 하나씩 수정해야 하는데 볼 수 없습니다. CSS의 역할. 너무 많은 인라인 스타일을 추가하면 페이지가 커집니다. 이러한 방식으로 포털을 작성하면 서버 대역폭과 트래픽이 낭비됩니다.인터넷의 일부 웹페이지에서는 소스 파일을 보면 이러한 작성 방식을 볼 수 있습니다. 웹페이지의 일부만 이렇게 작성되어 있지만 상황에 따라 다음과 같이 구분할 필요가 있습니다.
웹 페이지 작성자가 이러한 인라인 스타일을 작성하는 경우, 이전에 작성된 스타일의 충돌을 고려하지 않고도 현재 스타일을 빠르게 변경할 수 있습니다. 웹 페이지에 이러한 상황이 존재하는 것은 해당 스타일이 백그라운드에서 편집기에 의해 생성되기 때문입니다. 편집을 하거나 배경이 완전히 전개되지 않은 경우에는 편집기를 통해 색상, 두께, 배경색, 기울기 및 기타 효과를 직접 변경하는 대신 편집자가 스타일을 선택할 수 있는 옵션 개발이 필요합니다.인라인 스타일은 웹페이지 소스파일의 헤드 즉, <head>와 <head> 사이에 CSS를 작성하고, HTML 태그에서 <style> 태그를 이용하여 둘러싸는 스타일만 가능하다는 것이 특징입니다. 여기서는 인라인 스타일을 여러 번 작성해야 하는 단점을 해결하기 위해 페이지를 사용합니다.
[예시 2] 단락에 인라인 스타일 작성 방법을 설정하여 코드 양을 줄입니다.
<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<title>내장됨</title>
<스타일 유형="텍스트/css">
피{
text-align: 왼쪽; /*텍스트 왼쪽 정렬*/
글꼴 크기: 18px; /*글꼴 크기 18픽셀*/
line-height: 25px; /*라인 높이 25픽셀*/
text-indent: 2em; /*첫 번째 줄을 2개의 텍스트 크기 공백으로 들여쓰기*/
너비: 500px; /*단락 너비 500픽셀*/
margin: 0 auto; /*브라우저 아래 중앙에 위치*/
margin-bottom: 20px; /*단락 하단 여백 20픽셀*/
}
</style>
</head>
<본문>
<p>회사 이름 '바이두(Baidu)'는 송나라 시 '천의 바이두에서 그를 찾는다'에서 따왔다. (바이두컴퍼니의 회의실 이름은 이 시의 낱말카드인 Qingyu Case입니다.) '곰발' 아이콘의 아이디어는 '곰발을 순찰하는 사냥꾼'의 자극에서 나왔는데, 이는 리 박사의 '분석 검색 기술'과 매우 유사하여 바이두의 검색 컨셉을 형성하고 결국 바이두의 아이콘 이미지가 되었다. 이후 검색엔진에는 대부분 소후의 여우, 구글의 개 등 동물 이미지로 표현됐기 때문에 바이두는 자연스럽게 이를 곰이라고 불렀다. Baidu Bear는 Baidu Company의 이미지가 되었습니다. </p>
<p>Baidu의 로고 변경 계획에서 Baidu가 제안한 세 가지 새로운 로고 디자인은 모두 네티즌 투표에 의해 거부되었습니다. 더 많은 네티즌들이 원래 곰 발 로고에 투표했습니다. </p>
<p>로고 변경을 위해 총 3차 투표가 진행되었으며, 2차 투표가 끝날 때까지 새로운 웃는 얼굴 로고가 절대 우위를 점했습니다. 그러나 최종 투표에서 원래의 곰발톱 로고가 네티즌들로부터 가장 많은 표를 얻었고, 이로써 세 가지 새로운 로고 계획이 완전히 거부되었습니다. </p>
</body>
</html>페이지 데모 효과는 아래와 같습니다.
위의 예에서 단락은 다음과 같이 설정됩니다. 텍스트는 왼쪽 정렬, 글꼴 크기는 14, 줄 높이는 25픽셀, 너비는 500픽셀, 아래쪽 여백은 20픽셀, 브라우저는 단락 아래 중앙에 위치합니다. 브라우저에서 첫 번째 줄은 두 개의 텍스트 크기 공백으로 들여쓰기됩니다. 첫 번째 줄 들여쓰기는 상대 단위를 사용합니다. 이 설정의 목적은 글꼴 크기가 변경될 때(예: font-size: 18px; ) 여전히 두 개의 텍스트 크기 공간만큼 들여쓰기될 수 있다는 것입니다.
인라인 스타일은 스타일 수정에 불편함을 줍니다. 예를 들어 앞의 예에서는 두 문단이 동일한 스타일을 사용하지만 인라인 스타일을 사용하면 모든 문단 스타일을 하나로 합칠 수 있습니다.
스타일은 CSS 스타일뿐만 아니라 자바스크립트 스크립트도 정의할 수 있으므로 스타일 사용 시 주의가 필요합니다. style의 유형 값이 text/css 이면 CSS 스타일이 내부적으로 작성되고, style의 유형 값이 text/javascript 이면 JavaScript 스크립트가 내부적으로 작성됩니다.
스타일 태그의 제목 속성
스타일에는 특별한 속성 제목이 있습니다. 제목을 사용하여 다양한 스타일에 대한 제목을 설정할 수 있습니다. 뷰어는 제목에 따라 다른 스타일을 선택하여 브라우저에서 전환하는 효과를 얻을 수 있습니다. Firefox 브라우저는 이 효과를 지원합니다.
[예시 3] Firefox 브라우저에 대해 각각 두 가지 글꼴 크기 스타일을 설정하고 Firefox "보기" 메뉴를 통해 수정합니다.
<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<style type="text/css" title="글꼴 크기 14">
피{
text-align: 왼쪽; /*텍스트 왼쪽 정렬*/
글꼴 크기: 14px; /*글꼴 크기 14픽셀*/
line-height: 25px; /*라인 높이 25픽셀*/
text-indent: 2em; /*첫 번째 줄을 두 개의 텍스트 크기 공백으로 들여쓰기*/
너비: 500px; /*단락 너비 500픽셀*/
margin: 0 auto; /*브라우저 아래 중앙에 위치*/
}
</style>
<style type="text/css" title="글꼴 크기 18">
피{
text-align: 왼쪽; /*텍스트 왼쪽 정렬*/
글꼴 크기: 18px; /*글꼴 크기 18픽셀*/
line-height: 25px; /*라인 높이 25픽셀*/
text-indent: 2em; /*첫 번째 줄을 두 개의 텍스트 크기 공백으로 들여쓰기*/
너비: 500px; /*단락 너비 500픽셀*/
margin: 0 auto; /*브라우저 아래 중앙에 위치*/
color: #6699FF; /*글꼴 색상 변경*/
}
</style>
</head>
<본문>
<p>바이두(Baidu)라는 회사 이름은 송나라의 시 '천의 바이두에서 그를 찾는다'에서 따왔다. (바이두컴퍼니 회의실의 이름은 이 시의 낱말카드인 Qingyu Case입니다.) '곰발' 아이콘의 아이디어는 '곰발을 순찰하는 사냥꾼'의 자극에서 나왔는데, 이는 리 박사의 '분석 검색 기술'과 매우 유사하여 바이두의 검색 컨셉을 형성하고 결국 바이두의 아이콘 이미지가 되었다. </p>
</body>
</html>페이지 데모 효과는 아래 그림과 같습니다.
위의 예에서는 <style type="text/css" title="名称"> 통해 두 가지 글꼴 크기가 정의되어 있으며 Firefox의 "보기" 메뉴 아래 "페이지 스타일" 하위 메뉴에 두 가지 옵션이 있습니다. 크기는 14, 글꼴 크기는 18입니다. 기본적으로 처음 작성된 <style type="text/css" title="名称"> 이 표시됩니다. 페이지 스타일은 메뉴를 통해 변경할 수 있습니다.
링크 방식은 HTML의 <link> 태그를 통해 외부 스타일 시트 파일을 HTML 문서에 연결하는 방식으로, 인터넷상의 웹사이트에서 가장 많이 사용되는 방식이자 가장 실용적인 방식입니다. 이 방법은 HTML 문서와 CSS 파일을 완전히 분리하고, 구조 레이어와 프리젠테이션 레이어를 완전히 분리하며, 웹 페이지 구조의 확장성과 CSS 스타일의 유지 관리성을 향상시킵니다.
[예시 4] HTML 코드에 스타일을 적용하려면 링크 스타일을 사용하면 작성 및 변경이 쉽습니다.
<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<제목></제목>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<본문>
<p>나는 lianjie-2.css 파일에 의해 제어됩니다. 아래층은 어떻습니까? ? </p>
<h3>위층에서 <span>lianjie.css</span> 파일이 화려한 드레스를 주었습니다. </h3>
</body>
</html>페이지 데모 효과는 아래와 같습니다.
위의 예에서는 두 개의 CSS 파일이 링크를 통해 연결되어 있으며 둘 다 유효합니다. 따라서 웹 사이트 제작자는 공통 부분을 CSS 파일에 넣고 현재 페이지 스타일에 대한 새로운 스타일 파일을 작성합니다.
lianjie.css 파일 코드:
h3{
Font-weight: Normal; /*제목의 기본 굵은 효과 취소*/
background-color: #66CC99; /* 배경색 설정*/
height: 50px; /*라벨 높이 설정*/
line-height:50px; /* 라벨의 줄 높이 설정*/
}
기간{
color: #FFOOOO; /* 글꼴 색상*/
글꼴 가중치:bold; /* 굵은 글꼴*/
}lianjie-2.css 파일 코드:
피{
color: #FF3333; /*글꼴 색상 설정*/
글꼴 가중치: 굵은 글꼴*/
border-bottom: 3px dashed #009933; /* 하단 테두리선 설정*/
line-height: 30px; /* 줄 높이 설정*/
}링크된 스타일은 CSS 코드와 HTML 코드를 완전히 분리하여 구조와 스타일의 분리를 달성하고 HTML 코드가 페이지 구조를 구체적으로 구축할 수 있게 하며 미화 작업은 CSS로 완료됩니다.
가져온 CSS 스타일을 연결하면 다음과 같은 이점이 있습니다.
CSS 파일을 다른 HTML 파일에 배치하여 웹사이트의 모든 페이지 스타일을 통합할 수 있습니다. 또한 CSS 코드를 하나의 CSS 파일에 넣으면 CSS 파일이 수정될 때 적용되는 모든 페이지에서 관리가 용이해지고 코드 및 유지 관리 시간이 줄어듭니다. 이 CSS 파일은 서버에서 모든 페이지를 검색한 다음 수정 후 업로드할 필요 없이 모든 HTML 파일이 업데이트됩니다.스타일 가져오기 외부 스타일 시트를 가져오려면 @import 명령을 사용하십시오. 가져온 스타일에는 6가지 쓰기 방법이 있습니다.
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");[예제 5] 스타일시트 lianjie.css와 daoru.css를 가져와서 <body> 태그의 배경색을 작성합니다. 가져온 스타일시트와 <body> 태그 스타일은 반전될 수 없습니다.
<html>
<머리>
<meta charset="utf-8">
<제목></제목>
<스타일 유형="텍스트/css">
@가져오기 URL(lianjie.css);
@import url(daoru.css);
본문 { 배경색: #e4e929 }
</style>
</head>
<본문>
<div>
<p>나는 lianjie-2.css 파일에 의해 제어됩니다. 아래층은 어떻습니까? ? </p>
<h3>재킷에는 <span>lianjie.css</span> 파일이 꽃무늬 드레스를 주었습니다. </h3>
</div>
</body>
</html>페이지 데모 효과는 아래 그림과 같습니다.
위의 예에서는 @import url("lianjie-2.css"); p{text-indent: 3em;} 이어야 하지만 p{text-indent:3em;} @import url("lianjie-2.css"); 그렇지 않으면 가져오기 효과가 유효하지 않습니다. CSS 파일에서 @import도 앞에 배치해야 하며 CSS 스타일은 끝에 추가해야 합니다. 그렇지 않으면 유효하지 않습니다.
lianjie.css 파일 코드는 이전 예와 동일합니다. 즉, 링크 유형입니다.
daoru.css 파일 코드:
@import url("lianjie-2.css");
p { 텍스트 들여쓰기: 3em }이것으로 HTML 임베디드 CSS 스타일의 네 가지 구현 방법에 대한 기사를 마무리합니다. 더 많은 관련 HTML 임베디드 CSS 스타일을 보려면 downcodes.com의 이전 기사를 검색하거나 다음 관련 기사를 계속해서 읽어보시기 바랍니다. .downcodes.com을 지원하세요!