CSS 실용 튜토리얼(1)

CSS(Cascading Stylesheets)는 웹 페이지를 만드는 새로운 기술로, 이제 대부분의 브라우저에서 지원되며 웹 디자인에 필수적인 도구 중 하나가 되었습니다. CSS를 사용하면 웹 페이지의 형식 코드를 단순화하고, 다운로드 및 표시 속도를 높이고, 업로드해야 하는 코드의 양을 줄이고, 반복 작업의 작업량을 크게 줄일 수 있습니다. 특히 수백 개의 웹페이지가 있는 사이트를 접할 때 CSS는 신이 우리에게 준 선물과도 같습니다! ^_^

머리말

CSS(Cascading Stylesheets)는 이제 대부분의 브라우저에서 지원되며 웹 디자인에 없어서는 안될 부분이 되었습니다. 몇 가지 도구.

W3C(The World Wide Web Consortium)는 동적 HTML(Dynamic HTML)을 세 부분으로 나누어 구현합니다: 스크립팅 언어(javaScript, Vbscript 등 포함), 동적 효과를 지원하는 브라우저(Internet Explorer, Netscape 포함) 네비게이터 등) 및 CSS 스타일 시트.

1. 캐스케이딩 스타일시트의 특징

과거 웹페이지의 역동성이 부족했던 점은 말할 것도 없고, 웹 콘텐츠 레이아웃에도 많은 어려움이 있었습니다. 정보를 표시하는 아이디어와 창의성을 자신의 스타일에 맞게 웹 페이지를 만드는 것은 어렵습니다. HTML 언어의 본질을 마스터한 사람이라도 이 정보의 레이아웃을 마스터하려면 많은 테스트를 통과해야 합니다. 그 과정은 매우 길고 고통스럽습니다. 인터넷을 발전시키고 더 많은 사람들이 가능한 한 빨리 이 다채로운 세계에 들어갈 수 있도록 하기 위해 새로운 HTML 보조 도구가 곧 등장할 예정입니다.

스타일 시트는 이러한 요구에 따라 탄생했습니다. 가장 먼저 해야 할 일은 웹 디자이너가 배우처럼 텍스트와 그림을 쉽게 제어하고 그에 따라 잘 수행할 수 있도록 웹 페이지에 요소를 정확하게 배치하는 것입니다. 웹 사이트 무대의 스크립트에.

둘째, 웹페이지의 콘텐츠 구조와 형식 제어를 분리합니다. 시청자가 보고 싶어하는 것은 웹 페이지의 콘텐츠 구조이며, 시청자가 이 정보를 더 잘 볼 수 있도록 하려면 형식 제어를 사용하여 도움을 주어야 합니다. 예전에는 웹페이지에서 둘을 엇갈리게 분포시켜서 보기와 수정이 매우 불편했습니다. 이제 둘을 분리하면 웹디자이너들이 훨씬 편해집니다. 콘텐츠 구조와 형식 제어가 분리되어 웹페이지는 콘텐츠만으로 구성될 수 있으며, 모든 웹페이지의 형식 제어는 특정 CSS 스타일 시트 파일로 지정됩니다. 이는 두 가지 측면에서 이점이 있습니다.

첫째, 웹페이지의 형식 코드를 단순화하고 외부 스타일 시트가 브라우저에 의해 캐시에 저장되므로 다운로드 및 표시 속도가 빨라집니다. 업로드해야 하는 코드의 양이 줄어듭니다(반복된 서식은 한 번만 저장되기 때문입니다).

둘째, 웹사이트 형식을 저장하는 CSS 스타일시트 파일을 수정하는 것만으로도 전체 사이트의 스타일과 특성이 바뀔 수 있는데, 이는 페이지 수가 많은 사이트를 수정할 때 특히 유용합니다. 웹페이지를 하나씩 수정하는 일을 방지하고 반복 작업의 작업량을 크게 줄여줍니다. 수백 개의 웹페이지가 있는 사이트를 접할 때 CSS는 신이 우리에게 주신 선물과도 같습니다! ^_^

2. 캐스케이딩 스타일 시트를 추가하는 방법

웹 페이지에 스타일 시트를 추가하는 방법에는 네 가지가 있습니다.

1． 가장 간단한 방법은 HTML 식별자(태그)에 직접 추가하는 것입니다.

웹 페이지 콘텐츠< /tag>

예:

CSS 예시

코드 설명:

는 파란색으로 표시됩니다. "글꼴 크기는 10pt입니다. 사용이 간단하고 표시가 직관적이지만 이러한 추가는 "콘텐츠 구조와 형식 제어가 별도로 저장됩니다"라는 스타일 시트의 장점을 충분히 활용할 수 없기 때문에 일반적으로 사용되지 않습니다.

2． HTML 헤더 정보 식별자에 추가됨:

스타일 시트의 특정 내용

-->





type="text/css"는 스타일 시트가 MIME 유형을 사용함을 나타냅니다. 이는 CSS를 지원하지 않는 브라우저가 CSS 코드를 필터링하고 브라우저 앞에 소스 코드에 설정한 스타일 시트가 직접 표시되는 것을 방지하는 데 도움이 됩니다. 그러나 위의 상황이 발생하지 않도록 하려면 스타일 시트에 ""라는 주석 식별자를 추가해야 합니다.

3． 링크 스타일 시트

도 HTML 헤더 정보 식별자 에 추가됩니다:







*.css는 별도로 저장되는 스타일 시트 파일입니다.