집 > 기사 > 웹 프론트엔드 > CSS 기본 구문을 소개하는 3가지 방법

CSS 기본 구문을 소개하는 3가지 방법

php中世界最好的语言원래의: 2018-02-28 10:16:501576검색

이번에는 기본 CSS 구문3가지 CSS 소개와, 3가지 CSS 기본 구문을 소개할 때 주의사항은 무엇인지 살펴보겠습니다.

CSS는 웹 디자인의 획기적인 것으로 간주될 수 있으며 웹 인터페이스 레이아웃 문제를 해결합니다. HTML 태그는 주로 웹 페이지의 콘텐츠(콘텐츠)를 정의하는 반면 CSS는 이러한 웹 페이지의 콘텐츠가 표시되는 방식(레이아웃)을 결정한다고 말할 수 있습니다.

웹 초기에는 HTML이 매우 제한된 언어였습니다. 이 언어는 단지 간결하고 작은 마크업 메커니즘에 불과했습니다.

모자이크 웹 브라우저의 등장으로 웹사이트가 곳곳에 나타나기 시작했습니다. 페이지 모양을 변경해야 할 필요성이 증가하여 240cb830ca84ebaabbd07850110b414d 및 3d49bde0e0b2e042578ad34140b6c48e

몇 년이 지난 지금 대부분의 웹 사이트 마크업은 거의 전적으로 표와 글꼴 요소로 구성되어 있으며 표현하려는 내용에 실제 의미를 전달할 수 없어 문서의 유용성이 떨어지고 유지 관리가 어려워집니다.

그래서 1995년에 W3C는 혼합된 구조와 스타일 문제를 해결하기 위해 CSS 초안을 발표했습니다.

1996년 W3C는 공식적으로 CSS1을 출시했습니다.

1998년 CSS2가 출시되었습니다.

2001년 CSS3부터 CSS 언어는 여러 개의 독립적인 모듈로 나누어져 있습니다. 각 모듈은 독립적으로 등급이 매겨져 있으며 일부 기능만 포함하고 있습니다.

2011년부터 CSS4 디자인 시작

1. CSS 스타일시트 소개

1. Embedded style sheet

Embedded style sheet는 태그(tag)로 작성됩니다. 인라인 스타일은 해당 스타일이 위치한 태그에만 유효합니다. (스타일이 여러 개인 경우 인라인이 다른 스타일을 덮어쓰고 적용됩니다.)

예:

<p style="font-size:20pt; color:red"></p>

이 스타일 정의e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3안의 텍스트는 20pt 글꼴이고 글꼴 색상은 빨간색입니다.

2. 내부 스타일 시트

내부 스타일 시트는 HTML의 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1에 작성됩니다. 내부 스타일 시트는 해당 스타일 시트가 위치한 웹 페이지에만 유효합니다.

내부 스타일 시트는 다음과 같이 작성된 스타일 태그를 사용해야 합니다.

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

3. 외부 스타일 시트

여러 웹 페이지에서 동일한 스타일(스타일)을 사용해야 하는 경우 외부 스타일 시트를 사용하세요. 외부 스타일 시트는 CSS 파일에 스타일을 작성한 다음 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 페이지에 도입하고 스타일을 적용해야 하는 각 페이지에 파일을 도입해야 합니다.

예:

<HTML><HEAD>
   <link href="../css/a.css " rel ="stylesheet" type="text/css "></HEAD><BODY>…</BODY>
 </HTML>

1. 2cdf5bf648cf2f33323966d7f58a7f3f 태그 위치는 일반적으로 93f0f5c25f18dab9d176bd4f6de5d30e

2. CSS 스타일 파일의 이름은 main.css와 같이 의미 있는 영문자로 명명됩니다.

3.href=""는 CSS를 소개하는 경로입니다.

4. rel="stylesheet" type="text/css"는 수정할 수 없는 고정된 작성 방법입니다.

우선순위를 기억하세요: 인라인 > 내장 > 외부

또한 CSS에 comment 문이 있습니다. 이를 표시하려면 /*comment 문*/을 사용하세요(Html -Comment 문-->에서

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!