웹 프론트엔드 CSS 튜토리얼 CSS 스타일 시트 사용에 대해 자세히 논의합니다: link/embed_CSS/HTML

CSS 스타일 시트 사용에 대해 자세히 논의합니다: link/embed_CSS/HTML

May 16, 2016 pm 12:11 PM

Ajie의 w3cn에서 그는 이렇게 말했습니다.

인용된 내용
과거에는 주로 두 가지 방식으로 스타일시트를 사용했습니다.
페이지 인라인 방식: 즉, 페이지 코드의 헤드 영역에 스타일시트를 직접 작성하는 것입니다. 이와 유사합니다:

외부 호출 방법 : 스타일시트를 별도의 .css 파일로 작성한 후 페이지의 헤드 영역에 다음과 유사한 코드로 호출합니다.

웹에 부합하는 디자인으로 표준에서는 외부 호출 방법을 사용하며 이점은 자명합니다. 페이지를 수정하지 않고 .css 파일만 수정하면 페이지 스타일을 변경할 수 있습니다. 모든 페이지가 동일한 스타일 시트 파일을 호출하는 경우 하나의 스타일 시트 파일을 변경하면 모든 파일의 스타일이 변경될 수 있습니다.

Ajie가 사용을 적극 권장하는 것을 볼 수 있습니다. Ajie의 말에 덧붙이자면 를 사용하면 스타일 시트를 수정하는 것이 편리할 뿐만 아니라 사용자의 검색 속도도 빨라진다는 장점이 있습니다. 사용자가 스타일 시트에 연결된 페이지를 처음 열면 스타일 시트가 자동으로 로컬 캐시에 다운로드됩니다. 사용자가 다른 페이지를 열 때 이 페이지도 동일한 스타일 시트에 링크되어 있으면 캐시에서 관련 파일을 읽어 탐색 속도를 높입니다.

하지만 이런 상황도 겪었습니다. 네트워크가 원활하지 않을 때 페이지를 연 후 링크된 스타일 시트가 성공적으로 로드되지 않는 경우가 있습니다. 이러한 상황의 결과는 페이지 텍스트의 색상, 크기 및 기타 스타일을 표시할 수 없을 뿐만 아니라 전체 페이지의 레이아웃이 엉망이 될 수 있다는 것입니다.

예를 들어 제가 Macromedia.com을 열었을 때 bt 바에 사람이 많아서 회사 네트워크가 원활하지 않았던 적이 있습니다. . . 결과 페이지는 스타일시트 없이 나타나며, 익숙한 레이아웃도 더 이상 보이지 않습니다. 마치 휴대폰에서 웹사이트를 탐색하는 것처럼 모든 콘텐츠가 위에서 아래로 정렬됩니다. 모든 콘텐츠를 계속 볼 수는 있지만 이 새로운 레이아웃에 익숙해지는 데 시간이 좀 걸리고 탐색할 때 매끄럽지 못한 느낌이 들었습니다.

Kingsoft Online 홈페이지를 만들 때(이전 버전은 더 이상 보이지 않음) 페이지의 영역에 모든 스타일을 삽입했습니다. 홈페이지는 웹사이트에서 가장 많이 방문하는 페이지이므로 높은 신뢰성이 보장되어야 합니다. 또한, 홈페이지 스타일 시트만 삽입하고 다른 페이지는 여전히 <링크>를 사용하므로 스타일 수정 시 작업량이 크게 늘어나지 않습니다.

주말에 amaoagou 홈페이지 작업을 하면서 스타일을 추가로 계획했습니다. #head, #left 등 레이아웃 관련 스타일을 페이지 내부에 삽입하고 다른 스타일은 링크했습니다.

요약하자면:

* 방법 1: 홈페이지가 완전히 삽입되고, 다른 페이지도 링크됩니다. 장점: 네트워크 상태가 좋지 않은 경우에도 홈페이지가 올바르게 표시될 수 있습니다. 단점: 스타일 수정 시 외부 스타일시트와 홈페이지에 내장된 스타일시트를 수정해야 한다.
* 방법 2: 레이아웃을 담당하는 스타일을 다른 스타일과 별도로 작성합니다. 홈페이지에는 레이아웃 스타일이 포함되어 있으며 다른 스타일에 대한 링크가 있습니다. 다른 페이지에서는 두 스타일 세트에 대한 링크를 사용합니다. 장점: 스타일을 수정할 때 첫 번째 방법보다 작업량이 적습니다. 네트워크 상태가 좋지 않은 경우 홈페이지의 외관을 완전히 보장할 수는 없지만 최소한 레이아웃이 지저분하지는 않습니다.
* 회사 제품에 대한 소소한 주제 등 제작된 페이지가 기준에 미치지 못하는 경우, 리더는 온라인에서 화제의 속도를 보장하기 위해 테이블과 함께 제작하도록 요구합니다. 모든 페이지에 사용되는 스타일: 링크. 이 한 페이지에서만 사용되지만 여러 번 사용될 스타일의 경우: 를 포함하세요. 이 페이지에서 한 번만 사용되는 스타일의 경우: 를 삽입하거나 style="..."을 직접 작성하세요.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례 스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례 Mar 08, 2025 am 09:45 AM

이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성 Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성 Mar 07, 2025 am 11:33 AM

이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

WordPress 블록 및 요소에 상자 그림자를 추가합니다 WordPress 블록 및 요소에 상자 그림자를 추가합니다 Mar 09, 2025 pm 12:53 PM

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

GraphQL 캐싱 작업 GraphQL 캐싱 작업 Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

첫 번째 맞춤형 전환을 만듭니다 첫 번째 맞춤형 전환을 만듭니다 Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

쇼, 말하지 마십시오 쇼, 말하지 마십시오 Mar 16, 2025 am 11:49 AM

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스 고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스 Mar 10, 2025 am 11:37 AM

이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.

NPM 명령은 무엇입니까? NPM 명령은 무엇입니까? Mar 15, 2025 am 11:36 AM

NPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.

See all articles