html 스타일 태그는 무엇을 의미하나요? 스타일 태그 사용법에 대한 자세한 설명
- 寻∝梦원래의
- 2018-08-22 13:58:3916415검색
이 글에서는 주로 HTML 스타일 태그의 정의와 속성 소개에 대해 설명합니다. 먼저 HTML에서 스타일 태그의 몇 가지 용도와 위치를 이해한 다음, 사용되는 몇 가지 방법과 세부 기술을 살펴보겠습니다.
html 스타일 태그 태그 사용:
c9ccee2e6ea535a969eb3f532ad9fe89 태그는 HTML 문서의 스타일 정보를 정의하는 데 사용됩니다.
스타일에서는 HTML 문서가 브라우저에서 렌더링되는 방식을 지정할 수 있습니다.
type 속성은 필수이며 스타일 요소의 내용을 정의합니다. 유일하게 가능한 값은 "text/css"입니다.
스타일 요소는 헤드 섹션에 있습니다.
HTML c9ccee2e6ea535a969eb3f532ad9fe89 태그 인스턴스:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>필수 속성:
type: text/css: 스타일 시트의 MIME 유형을 지정합니다.
html 스타일 태그 사용 방법에 대한 자세한 설명:
531ac245ce3e4fe3d50054a55f265927 together
예를 들어 태그 10개가 모두 같은 클래스라면 인라인 스타일로 태그 10개를 작성하고 스타일로 하나만 작성하면 됩니다.
이제 모두 구조(html), 스타일(css), 동작(js)을 분리하는 디자인 패턴입니다
<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>스타일 태그는 CSS 스타일 시트에서의 위치에 따라 세 가지 유형으로 구분됩니다. 1 . 인라인 스타일 시트
2. 내부 스타일 시트
3. 자세히 설명하면 다음과 같습니다.
1. 이를 사용하는 태그(Tag)에 작성됩니다. , e388a4556c0f65e1904146cc1a846bee 태그에 사용되는 구문은<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>2입니다. 내부 스타일 시트는 인라인 스타일 시트와 다르며, 이는 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 html 웹 페이지이므로 이 페이지 전체에 유효합니다. 특정 태그에는 작성되지 않기 때문에 작성 시 주의가 필요하며, 해당 태그에 이 스타일 시트를 사용하려면 정의할 때에도 명확하게 작성해야 합니다. 페이지 전체가 혼란스러워집니다. 예를 들면 다음과 같습니다.
<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html>내부 스타일 시트를 정의할 때 앞서 c9ccee2e6ea535a969eb3f532ad9fe89을 선언할 때 이 스타일 시트를 전혀 사용하지 않으려면 먼저 이 스타일 시트를 어떤 태그에 사용하는지 선언해야 함을 알 수 있습니다. 웹 페이지의 태그 이 스타일 시트는 위의 p.mylayout과 같이 선언된 태그 뒤에 자체 정의된 스타일 시트 이름을 추가합니다. 이는 이 스타일 시트가 웹 페이지의 e388a4556c0f65e1904146cc1a846bee 태그에서만 사용될 수 있음을 의미합니다. 이 스타일을 사용하려면 표의 e388a4556c0f65e1904146cc1a846bee 태그에 선언하고 선언 방법은 24b730975a44c462af1ca53cc4950fba
스타일 시트 선택을 사용하면 동일한 HTML 태그를 사용하여 다양한 스타일을 구성할 수 있습니다. 예를 들어 e388a4556c0f65e1904146cc1a846bee 단락에 두 가지 스타일(하나는 가운데 정렬, 다른 하나는 오른쪽 정렬)을 원합니다. 다음 스타일을 작성할 수 있습니다. p.right {text-align:right}
p.center {text-align:center} 여기서 오른쪽과 가운데는 두 개의 스타일 시트입니다. 그러면 이 두 스타일 시트를 참조할 수 있습니다. 샘플 코드는 다음과 같습니다.
<p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p>
HTML 태그를 사용하지 않고 "."와 스타일 시트 이름을 직접 사용할 수도 있습니다. 샘플 코드는 다음과 같습니다.
.center {text-align: center}이 범용 스타일 시트 이름은 태그의 제한이 없으며 다양한 태그에 사용할 수 있습니다. 예:
<h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p>3. 외부 스타일 시트
외부 스타일 시트는 스타일 시트의 내용을 메모장에 별도로 작성하고 작성한 웹 페이지에 접미사 .css를 붙여 파일로 저장하는 것입니다. 다음 코드를 추가하세요(물론 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 사이):
<link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">
예: 먼저 코드를 작성하고 p.css
p.mylayout {font-size:20pt; border-width:1px; color:blue; }로 저장한 다음 호출하세요. 당신이 작성한 웹 페이지에 있습니다. 이 스타일 시트:
<HTML> <head> <link href="p.css所在的相对路径" rel="stylesheet" type="text/css"> </head> <body> <p class="mylayout"> 这个标题使用了Style 。</p> <p>这个标题没有使用Style。</p> </body> </HTML>
그래서 외부 스타일 시트는 많은 웹 페이지에서 호출될 수 있습니다. 이것이 외부 스타일 시트의 장점입니다.
스타일 시트는 연결될 수도 있습니다. 즉, 웹 페이지는 여러 CSS를 사용합니다. 연결 순서는 내장 > 내부 > 외부 > 브라우저 자체
즉, 웹 페이지에 내부 CSS가 있는 경우 외부 CSS에 대한 호출은 덮어쓰여집니다(즉, 외부 CSS는 작동하지 않습니다)
CSS 스타일 시트를 정의할 때 중첩된 설명:
p b {color:blue;}
사용 시:
<p>这段文字在b标签中的为<b>蓝色</b></p>
cursor:hand this 속성은 마우스를 손 모양으로 바꿉니다.
【에디터 관련 기사】
html em 태그의 기능은 무엇인가요? 907fae80ddef53131f3292ee4f81644b 태그와 5a8028ccc7a7e27417bff9f05adf5932 태그의 차이점html5 출력 태그는 무엇을 의미하나요? html5 출력 태그 사용 방법
위 내용은 html 스타일 태그는 무엇을 의미하나요? 스타일 태그 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!