简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

CSS를 도입하는 세 가지 방법은 무엇입니까?

青灯夜游
풀어 주다： 2022-09-21 17:28:38
원래의
22285명이 탐색했습니다.

CSS를 소개하는 세 가지 방법: 1. 인라인 소개, 스타일 속성을 사용하여 특정 HTML 태그에 CSS 코드를 삽입합니다. 구문은 "...입니다. name> ;"; 2. 포함된 가져오기, 문서 헤드 부분의 스타일 태그 쌍에 CSS 코드 넣기, 구문은 ""; 3. 외부 가져오기, CSS 코드 넣기 외부 CSS 파일에 추가하려면 링크 태그나 "@import" 규칙을 사용하여 HTML 문서에 추가하세요.

CSS를 도입하는 세 가지 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS: 캐스케이딩 스타일 시트는 HTML이나 XML과 같은 문서의 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹 페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립팅 언어와 협력하여 웹 페이지의 다양한 요소의 형식을 동적으로 지정할 수 있습니다. CSS는 웹 페이지의 요소 위치 레이아웃을 픽셀 수준으로 정밀하게 제어할 수 있으며 거의 ​​모든 글꼴을 지원합니다.

CSS의 기본 구문:

CSS 규칙은 두 가지 주요 부분, 즉 선택기와 하나 이상의 명령문으로 구성됩니다. 변경해야 하는 HTML 요소, 각 선언은 속성과 값으로 구성됩니다.

CSS를 도입하는 세 가지 방법은 무엇입니까?

1. 선택기(Selector)

선택기는 HTML 요소의 ID, 클래스 속성 또는 요소 이름 자체 및 스타일을 정의할 HTML 요소를 지정하는 데 사용되는 일부 특수 기호로 구성됩니다. , 선택기 p는 페이지의 모든

태그에 대한 스타일을 정의하는 것을 의미합니다.

2. 선언

이러한 선언은 브라우저에 지정된 개체를 렌더링하는 방법을 알려줍니다. 선택자. 모든 선언은 선택자 바로 뒤에 있는 중괄호 { } 안에 배치됩니다.

문은 속성과 속성 값이라는 두 부분을 포함해야 하며, 문 끝을 표시하기 위해 세미콜론을 사용해야 합니다. 스타일의 마지막 문에서는 세미콜론을 생략할 수 있습니다.

  • 속성: HTML 요소에 설정하려는 스타일 이름입니다. 색상(color), 테두리(border), 글꼴(font) 등 일련의 키워드로 구성됩니다. CSS는 많은 속성을 제공합니다. W3C 공식 웹사이트 보기를 사용할 수 있습니다.

  • 값: 숫자 값과 단위 또는 키워드로 구성되며 특정 속성의 표시 효과를 제어하는 ​​데 사용됩니다. 빨간색 또는 #F1F1F1 등이어야 합니다.

콜론: 속성과 값을 구분하는 데 필요합니다. 각 속성과 값의 조합은 동일한 명령문의 끝에 세미콜론이 필요합니다. 선택기 중괄호 { }로 묶어야 합니다.

CSS에서 소개하는 세 가지 형식

1. 인라인 스타일 시트(인라인 소개)

단일 HTML 요소 태그에 스타일 속성을 직접 추가하여 HTML 태그의 표현 스타일을 제어할 수 있습니다.

CSS를 도입하는 이러한 방식은 분산되고 유연하며 편리하지만 무결성과 계획이 부족하여 나중에 수정하고 유지 관리하는 데 도움이 되지 않습니다. 웹 사이트의 스타일을 수정해야 할 때 동일한 수정에 여러 장소가 포함될 수 있습니다. 그 결과 유지관리 비용이 높아집니다. STYLE 속성을 사용한 스타일 효과는 가장 강력하며 다른 소개 방법의 동일한 스타일 효과를 덮어씁니다. 

<!DOCTYPE html>
<html>
    <head>
    </head>  
    <body>
        <h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
        <p style="color: blue;">https://www.php.cn/</p>
    </body>
</html>
로그인 후 복사

CSS를 도입하는 세 가지 방법은 무엇입니까?

인라인(인라인 스타일)은 HTML 태그에 CSS 스타일을 쉽게 부여할 수 있지만 단점도 매우 뚜렷하므로 너무 많이 사용하는 것은 권장되지 않습니다.

  • 인라인 스타일을 정의하려면 각 HTML 태그에 스타일 속성을 정의해야 하는데 이는 매우 불편합니다.

  • 인라인 스타일에서 큰따옴표나 작은따옴표를 사용할 때는 특히 주의하세요. HTML 태그의 속성은 일반적으로 큰따옴표를 사용하기 때문입니다.

  • 인라인 스타일에 정의된 스타일은 다른 곳에서는 재사용할 수 없습니다.

  • 인라인 스타일은 나중에 유지되기 때문에 매우 불편합니다. 웹사이트는 일반적으로 여러 페이지로 구성되며 페이지 스타일을 수정할 때 페이지를 하나씩 수정해야 합니다.

  • 인라인 스타일을 너무 많이 추가하면 HTML 문서의 크기가 커집니다.

2. 내부 스타일 시트(소개 삽입)

페이지<style>...</style> 태그에 스타일 코드를 작성합니다.

<style>
 bdoy{font-size:14px;}
</style>
로그인 후 복사

<style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的...部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				background-color: linen;
			}

			h1 {
				color: maroon;
				margin-left: 40px;
			}
		</style>
	</head>
	<body>
		<h1>PHP中文网</h1>
		<p>https://www.php.cn/</p>
	</body>
</html>
로그인 후 복사

CSS를 도입하는 세 가지 방법은 무엇입니까?

因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。

3、外部样式表（外部引入）

在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。

1）、使用link

链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的标记区。

语法：

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
로그인 후 복사

2）、使用@import

导入式是通过@import在