1. CSS 기본 소개
Cascading Style Sheet(캐스케이딩 스타일 시트)는 "CSS"라고도 하며, 일반적으로 "스타일 시트(Style Sheet)"라고도 하며 웹 스타일을 지정하는 데 사용됩니다. 페이지를 디자인했습니다. 예를 들어 링크 단어를 클릭하지 않을 때 파란색으로 표시하고 마우스를 그 위로 이동하면 빨간색으로 바뀌고 밑줄이 표시되도록 하려면 이것이 스타일입니다. 스타일 시트를 설정하면 HTML의 각 마크 표시 속성을 균일하게 제어할 수 있습니다. 계단식 스타일 시트를 사용하면 사람들이 웹 페이지의 모양을 보다 효과적으로 제어할 수 있습니다. 캐스케이딩 스타일 시트를 사용하면 웹 페이지 요소의 위치와 모양을 정확하게 지정하고 특수 효과를 생성하는 기능을 확장할 수 있습니다.
CSS는 English Cascading Style Sheets(Cascading Style Sheets)의 약자로 HTML이나 XML 등의 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS의 최신 버전은 웹 페이지 성능과 콘텐츠를 완전히 분리할 수 있는 스타일 디자인 언어인 CSS3입니다. 전통적인 HTML의 성능과 비교하여 CSS는 웹 페이지에서 개체의 위치와 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있으며 예비 작업을 수행할 수 있습니다. 디자인은 현재 텍스트 디스플레이를 기반으로 하는 가장 표현력이 뛰어난 디자인 언어입니다. CSS는 다양한 사용자의 이해 능력에 따라 작성 방법을 단순화하거나 최적화하여 모든 유형의 사람들이 쉽게 읽을 수 있도록 만듭니다.
2. CSS 사용 방법
사이트 페이지에서 스타일 시트를 사용하는 방법에는 세 가지가 있습니다.
인라인 스타일 - HTML 요소에 사용됨" 스타일"
내부 스타일 시트 - CSS를 포함하려면 HTML 문서의 <head> 영역에 <style> 요소를 사용하세요. 🎜>
외부 참조 - 외부 CSS 파일 사용
각 방법에는 장단점이 있습니다.
전체 또는 일부에 동일한 스타일을 일관되게 적용하려는 경우 사이트의 페이지에서
외부 참조 스타일시트
를 사용할 수 있습니다. 하나 이상의 외부 스타일 시트에서 스타일을 정의하고 이를 모든 웹 페이지에 연결하면 모든 웹 페이지에서 일관된 모양이 보장됩니다. 스타일을 변경하기로 결정한 경우 외부 스타일 시트에서 한 번만 수정하면 되며 변경 사항은 스타일 시트에 연결된 모든 페이지에 반영됩니다. 일반적으로 외부 스타일 시트는 뉴스 릴리스 시스템의 일반적인 스타일 Common.css와 같이 파일 확장자로 .css를 갖습니다. 그런 다음 다음과 같이 이 스타일이 필요한 페이지에 링크합니다.
<link href="/css/Common.css" rel="stylesheet" type="text/css"/ > ;
현재 웹페이지의 스타일을 정의하려는 경우 내부 스타일 시트를 사용할 수 있습니다. 내부 스타일 시트는 웹페이지의 <HEAD> 태그 내에 "삽입"되는 계단식 스타일 시트입니다. 내장된 스타일 시트의 스타일은 동일한 웹 페이지에서만 사용할 수 있습니다. 예:
<style type="text/css">
<!-- /* HTML 주석에 선언된 스타일을 포함하면 이전 브라우저가 스타일을 인식하지 못하는 문제를 해결할 수 있습니다.*/ -->
body {Background:grey ;}
</style>
인라인 스타일을 사용하여 웹 페이지 요소에 계단식 스타일 시트 속성을 적용합니다. 예:
<pstyle="@importurl('style3.css');">CSS 문서</p>
<!-- 스타일 속성에서 @import를 사용할 수 없습니다. -->
웹 페이지가 외부 스타일 시트에 링크된 경우 웹 페이지용으로 생성된 인라인 또는 내부 스타일은 외부 스타일의 지정된 속성을 확장하거나 재정의합니다. 스타일 시트.
웹 페이지에서 외부 스타일 시트의 스타일을 사용하려면 서식 메뉴의 스타일 시트 링크 명령을 사용하여 웹 페이지를 스타일 시트에 연결하세요. 하나 이상의 스타일 시트를 웹 페이지 보기 모드의 현재 웹 페이지, 폴더 목록에서 선택한 웹 페이지 또는 사이트의 모든 웹 페이지에 연결할 수 있습니다.
스타일 상자에는 제목 1과 같은 표준 HTML 태그와 웹 페이지에 연결된 내장 스타일 시트 또는 외부 스타일 시트에 포함된 클래스 또는 ID 선택기가 나열됩니다. 웹 페이지 요소에 스타일을 적용하려면 스타일을 선택하고 스타일 상자에서 스타일 또는 선택기를 클릭합니다.
Microsoft FrontPage 2000에서는 특정 서식 기능이 인라인 스타일로 자동 적용됩니다. 예: 서식 메뉴의 테두리 및 그림자 명령을 사용하여 일반 단락 주위에 상자를 적용하면 FrontPage는 서식 정보를 단락 표시의 인라인 스타일 속성으로 기록합니다(예: <pstyle=" border-style) : 단단함">). 그러나 일부 속성을 적용하려면 CSS를 사용해야 하고 다른 속성을 적용하려면 HTML을 사용해야 합니다. CSS를 사용하여 인라인 스타일만 적용하려는 경우 스타일 버튼(웹 요소의 속성 대화 상자에 있음)을 사용하여 클래스 또는 ID 선택기 또는 인라인 스타일을 적용할 수 있습니다.
예제 1
Background-color 속성은 요소의 배경색을 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body style="background-color: green;">
<h2 style="background-color: red;">标题</h2>
<p style="background-color: blue;">内容</p>
</body>
</html>
예제 2
font-family(글꼴), 색상(색상) 및 글꼴 크기(글꼴 크기) ) 속성을 사용하세요. 글꼴 스타일을 정의하려면:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="font-family:verdana;">文字的标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p>
</body>
</html>
예 3
text-align(텍스트 정렬) 속성을 사용하여 가로 및 세로 텍스트를 지정합니다. 정렬:
아아아아
다음 섹션
