CSS(캐스케이딩 스타일 시트) 표시되는 HTML 요소를 설명합니다. 스크린, 종이 또는 다른 미디어 . 시간이 많이 절약됩니다. 한 번에 여러 웹 페이지의 레이아웃을 제어합니다. 그것은 글꼴 크기, 글꼴 모음, 색상, 배경색 페이지에서.

이를 통해 우리는 다음을 추가할 수 있습니다. 효과 또는 애니메이션 웹사이트로. 우리는 사용 CSS 표시하다 애니메이션 좋다 버튼, 효과, 로더 또는 스피너 , 그리고 또한 애니메이션 배경 .

사용하지 않고 CSS , 웹사이트가 매력적으로 보이지 않을 것입니다. 있다 삼 종류 CSS 이는 아래와 같습니다:

• 인라인 CSS
• 내부/임베디드 CSS
• 외부 CSS

1. 내부 CSS

내부 CSS에는 태그를 지정하세요. 섹션 HTML 문서. 이 CSS 스타일은 단일 페이지의 스타일을 지정하는 효과적인 방법입니다. 여러 웹페이지에 CSS 스타일을 사용하려면 스타일 각 웹페이지에서.

다음 단계를 사용하여 내부 CSS를 사용할 수 있습니다.

1. 먼저, HTML 페이지를 찾아

2. 뒤에 다음 코드를 입력하세요.

3. 규칙 새 줄에 CSS가 있습니다.

예:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. 스타일 태그를 닫습니다.

내부 CSS를 추가한 후 전체 HTML 파일은 다음과 같습니다.

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

선택자를 사용할 수도 있습니다. (클래스 및 ID) 스타일 시트에서.

예:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

내부 CSS의 장점

내부 CSSHTML 페이지에 코드를 추가하면 여러 파일을 업로드할 수 없습니다.

내부 CSS의 단점:

• 에 코드 추가 HTML 문서는 페이지 크기 그리고 로딩 시간 웹페이지의

2. 외부 CSS

외부 CSS에서는 웹페이지를 외부 페이지에 연결합니다. .css 파일. 그것은에 의해 생성됩니다 텍스트 에디터 . CSS는 웹사이트 스타일을 지정하는 더 효율적인 방법입니다. 편집하여 .css 파일을 사용하면 전체 사이트를 한 번에 변경할 수 있습니다.

외부 CSS를 사용하려면 아래 단계를 따르세요.

1. 새로 만들기 .css 파일로 텍스트 에디터 , 그리고 추가 계단식 스타일 시트 규칙도.

예를 들어:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. 외부에 대한 참조 추가 .css 바로 뒤에 파일을 태그를 지정하세요. 섹션 HTML 시트 :

외부 CSS의 장점:

• 우리 파일은 구조가 더 깔끔하고 크기도 더 작습니다.
• 우리는 같은 것을 사용합니다 .css 외부 CSS의 여러 웹페이지에 대한 파일입니다.

외부 CSS의 단점:

• 외부 CSS가 로드되기 전에는 페이지를 올바르게 전달할 수 없습니다.
• 외부 CSS에서 많은 CSS 파일을 업로드하면 웹 사이트의 다운로드 시간이 늘어날 수 있습니다.

3. 인라인 CSS

인라인 CSS는 특정 스타일을 지정하는 데 사용됩니다. HTML 요소. 을 추가하다 스타일 선택기를 사용하지 않고 각 HTML 태그에 속성을 지정합니다. 웹사이트만 사용하면 웹사이트 관리가 어려울 수 있습니다. 인라인 CSS . 그러나 인라인 CSS HTML에서는 어떤 상황에서는 유용합니다. 우리는 다음 항목에 액세스하지 않았습니다. CSS 파일 또는 요소에 스타일을 적용합니다.

다음 예에서는 인라인 CSS를 사용했습니다.

사전순