CSS 코드를 HTML에 넣을 위치-프런트엔드 Q&A-php.cn

CSS 코드를 HTML에 넣을 위치

青灯夜游

풀어 주다： 2023-01-06 11:14:51

원래의

6218명이 탐색했습니다.

HTML에서 CSS 코드는 스타일 속성을 직접 사용하고 이를 html 태그에 넣을 수 있습니다. 구문은 "content"입니다. 또는 스타일 태그를 사용하여 HTML 문서의 head 태그에 CSS 코드를 중앙에서 작성합니다.

CSS 코드를 HTML에 넣을 위치

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

html에서 css 코드의 배치 위치

1. style 속성을 직접 활용하여 html 태그에 넣어주세요

기본 구문 형식은 다음과 같습니다.

<标签名 style="属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...."> 内容</标签名>

로그인 후 복사

구문은, 스타일은 태그의 속성입니다. 실제로 위의 모든 HTML 태그에는 인라인 스타일을 설정하는 데 사용되는 스타일 속성이 있습니다. 속성 및 값의 작성 사양은 CSS 스타일 규칙과 동일합니다. 인라인 스타일은 해당 태그가 위치한 태그와 그 안에 중첩된 하위 태그에만 영향을 미칩니다.

각 HTML 태그의 스타일을 별도로 지정해야 하고 인라인 CSS만 사용하면 웹사이트 관리가 매우 어려울 수 있으므로 인라인 CSS는 사용하지 않는 것이 좋습니다. 그러나 특정 상황에서는 유용할 수 있습니다. 예를 들어 CSS 파일에 액세스할 수 없거나 단일 요소에만 스타일을 적용해야 하는 상황이 있습니다. 인라인 CSS가 포함된 HTML 페이지의 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

로그인 후 복사

2. 스타일 태그를 사용하여 HTML 문서의 head 태그에 CSS 코드를 작성합니다.

기본 구문 형식은 다음과 같습니다.

<head>
<style type="text/CSS">
    选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;....}
</style>
</head>

로그인 후 복사

구문에서 스타일 태그는 일반적으로 head 태그의 title 태그 뒤에 위치하며 HTML 문서의 어느 곳에나 위치할 수도 있습니다.

type="text/CSS" HTML5에서는 생략이 가능하고, 글은 좀 더 표준에 맞춰서 작성하거나 생략할 수 있는 곳입니다.

예:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

로그인 후 복사

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS 코드를 HTML에 넣을 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!