집 > 기사 > 웹 프론트엔드 > CSS 스타일에는 어떤 유형이 있나요? CSS 스타일 시트의 세 가지 방법 요약(코드 포함)

CSS 스타일에는 어떤 유형이 있나요? CSS 스타일 시트의 세 가지 방법 요약(코드 포함)

不言원래의: 2018-08-02 16:52:098692검색

CSS 스타일에는 어떤 유형이 있나요? Css 스타일 코드 삽입 형식은 기본적으로 인라인, 임베디드, 외부 세 가지 유형으로 나눌 수 있습니다. 이 세 가지 스타일의 우선순위는 인라인 > 임베디드 > 외부 스타일입니다. 구체적인 내용과 코드를 살펴보겠습니다. 세 가지 CSS 스타일 유형 중 하나입니다.

참고: 포함 > 외부 스타일에는 전제 조건이 있습니다. 포함된 CSS 스타일의 위치는 외부 스타일 뒤에 있어야 합니다. 예를 들어, 올바른 코드 편집기에서 f87a5964fcebb93d98ebca11ba9d357b 코드는 080b747a20f9163200dd0a7d304ba388...531ac245ce3e4fe3d50054a55f265927 ; 코드(실제로는 개발 중에도 작성되었습니다). 관심 있는 친구들은 시도해 보고 순서를 바꿔서 우선 순위가 바뀌는지 확인할 수 있습니다.

사실 일반적으로 근접성의 원칙입니다(설정되는 요소에 가까울수록 우선순위가 높습니다).

그러나 위에 요약된 우선순위에는 전제가 있습니다. 인라인, 임베디드 및 외부 스타일 시트의 CSS 스타일은 동일한 가중치를 갖습니다.

1. CSS 인라인 스타일 시트

css 스타일 시트는 다음 코드와 같이 CSS 코드를 기존 HTML 태그에 직접 작성하는 것입니다.

<p style="color:red">这里文字是红色。</p>

요소의 시작 태그에 주의해서 작성하세요. 다음과 같이 작성 방법이 잘못되었습니다:

<p>这里文字是红色。</p style="color:red">

그리고 CSS 스타일 코드는 큰따옴표로 작성해야 합니다. CSS 스타일 코드 설정이 여러 개인 경우 세미콜론으로 구분하여 함께 작성할 수 있습니다. 다음 코드:

<p style="color:red；font-size:12px">这里文字是红色。</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

2. CSS 임베디드 스타일 시트

임베디드 CSS 스타일은 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927에 CSS 스타일 코드를 작성할 수 있음을 의미합니다. 사이에 태그를 지정합니다. 예를 들어 다음 코드는 세 개의 45a2772a6b6107b401db3c9b82c049c2 태그에 있는 텍스트를 빨간색으로 설정합니다.

<style type="text/css">
span{
color:red;
}
</style>

포함된 CSS 스타일은 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 사이에 작성되어야 하며 일반적으로 포함된 CSS 스타일은 사이에 작성됩니다. 6e1923a7d88cbd751c12ae2df00695e7b3af494b3953a37f347e991532e0b3e6. 오른쪽 편집기의 코드와 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</html>

3.css 외부 스타일 시트

외부 CSS 스타일(외부 스타일이라고도 함)은 CSS 코드를 별도의 외부 파일에 작성하는 것입니다. 이 CSS 스타일 파일은 ".css로 끝납니다. "는 확장자입니다. 다음 코드에 표시된 대로 93f0f5c25f18dab9d176bd4f6de5d30e(c9ccee2e6ea535a969eb3f532ad9fe89 태그가 아님) 내의 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 CSS 스타일 파일을 HTML 파일에 연결합니다. <code>.css”为扩展名，在93f0f5c25f18dab9d176bd4f6de5d30e内（不是在c9ccee2e6ea535a969eb3f532ad9fe89标签内）使用2cdf5bf648cf2f33323966d7f58a7f3f标签将css样式文件链接到HTML文件内，如下面代码：

bfd7070c6914dc1f0b7b088cfc0e92b4

&lt ;link href="<p>base.css</p>" rel="stylesheet" type="text/css" />

참고:

1 CSS 스타일 파일 이름은 의미 있는 영어로 지정되었습니다. main.css와 같은 문자입니다.

2. rel="stylesheet" type="text/css"는 고정된 작성 방식이므로 수정할 수 없습니다.

3. 2cdf5bf648cf2f33323966d7f58a7f3f 태그 위치는 일반적으로 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에 작성됩니다.

index.html

<!DOCTYPE HTML>
<html>
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

style.css

span{
   color:red;
   font-size:20px;
}

CSS 스타일에는 어떤 유형이 있나요? CSS 스타일 시트의 세 가지 방법 요약(코드 포함)

관련 기사