CSS에 스타일을 도입하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에 스타일을 도입하는 방법은 무엇입니까?

清浅

Nov 17, 2018 pm 04:26 PM

CSS 스타일

이 글은 CSS 스타일 시트를 소개하는 방법과 그 사이의 장단점을 공유할 것이며, 참고할만한 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

스타일 시트는 세 가지 방법으로 CSS에 도입될 수 있습니다.

(1) 인라인 스타일

(2) 내장 스타일

(3) 외부 스타일

각 CSS 스타일에는 다음의 장점과 단점이 있습니다.

인라인 스타일

특징: (1) 인라인 스타일은 코드의 HTML 요소에 배치됩니다.

(2) 인라인 스타일을 사용할 때 스타일은 선택한 요소에만 영향을 미칩니다.

(3) 인라인 스타일에는 선택기가 없습니다.

예:

<div style="width:100px;height:100px;border:1px solid #ccc"><div>

이 CSS 인라인 스타일은 이 div의 너비와 높이만 변경할 수 있으며 페이지의 div 또는 속성 스타일은 변경되지 않습니다. . 이는 인라인 스타일의 한계 중 하나입니다. 이는 특정 요소만 변경하므로 모범 사례가 아니며 인라인 스타일도 매우 구체적입니다. 이로 인해 다른 비인라인 스타일로 재정의하기가 어렵고 실제로 웹 페이지에서는 인라인 스타일을 거의 사용하지 않습니다.

임베디드 스타일

특징: (1) 스타일 태그

(2) 작성된 스타일은 해당 스타일을 사용하는 웹페이지에만 사용됩니다.

(3) 포함된 스타일은 "내부 스타일"이라고도 합니다.

예

<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

포함된 스타일은 문서의 헤드에 포함된 스타일입니다. 포함된 스타일은 해당 스타일이 포함된 페이지의 마크업에만 영향을 미칩니다. 다시 말하지만, 이 접근 방식은 CSS의 장점 중 하나를 무효화합니다. 모든 페이지에는 스타일이 있으므로 링크 색상을 빨간색에서 녹색으로 변경하는 등 사이트 전체를 변경하려면 모든 페이지에서 포함된 스타일 시트를 사용하므로 모든 페이지에서 이 변경을 수행해야 합니다. 이는 인라인 스타일보다 낫지만 많은 경우 여전히 문제가 있습니다.

외부 스타일 시트

특징: (1) 별도의 문서에 작성하여 다양한 웹 문서에 첨부

using use using . Action

Example

<link href=“demo.css”rel=“stylesheet”type=“text/css>
在demo文件下写css样式

요즘 대부분의 웹사이트는 외부 스타일 시트를 사용합니다. 별도의 문서에 작성된 후 다양한 웹 문서에 추가되는 스타일입니다. 외부 스타일 시트는 연결된 모든 파일에 영향을 미칩니다. 즉, 20페이지 웹사이트가 있고 각 페이지가 동일한 스타일 시트를 사용하는 경우 변경이 필요할 때 스타일 시트를 간단히 편집하여 해당 페이지를 완료할 수 있습니다. 사이트 관리가 더 쉬워졌습니다. 외부 스타일 시트의 단점은 이러한 외부 파일을 얻고 로드하려면 페이지가 필요하다는 것입니다. 모든 페이지가 CSS 테이블의 모든 스타일을 사용하는 것은 아니므로 많은 페이지가 실제로 필요한 것보다 훨씬 더 큰 CSS 페이지를 로드합니다.

요약: 위 내용은 이 글의 CSS 스타일 시트에 대한 소개입니다. 이 글을 통해 모든 사람이 CSS 스타일을 이해할 수 있기를 바랍니다.

위 내용은 CSS에 스타일을 도입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

CSS Flexbox vs Grid : 포괄적 인 검토May 12, 2025 am 12:01 AM

Flexbox 또는 그리드 선택은 레이아웃 요구 사항에 따라 다릅니다. 1) Flexbox는 탐색 표시 줄과 같은 1 차원 레이아웃에 적합합니다. 2) 그리드는 매거진 레이아웃과 같은 2 차원 레이아웃에 적합합니다. 두 사람은 프로젝트에 사용하여 레이아웃 효과를 향상시킬 수 있습니다.

CSS 파일 포함 방법 : 방법 및 모범 사례May 11, 2025 am 12:02 AM

CSS 파일을 포함시키는 가장 좋은 방법은 태그를 사용하여 HTML 부분에 외부 CSS 파일을 소개하는 것입니다. 1. 태그를 사용하여 외부 CSS 파일을 소개합니다. 2. 작은 조정의 경우 인라인 CSS를 사용할 수 있지만주의해서 사용해야합니다. 3. 대규모 프로젝트는 SASS와 같은 CSS 전 처리기를 사용하여 @Import를 통해 다른 CSS 파일을 가져올 수 있습니다. 4. 성능의 경우 CSS 파일을 병합하고 CDN을 사용해야하고 CSSNANO와 같은 도구를 사용하여 압축해야합니다.

Flexbox vs Grid : 둘 다 배워야합니까?May 10, 2025 am 12:01 AM

예, YoushouldLearnbothflexBoxAndgrid.1) FlexBoxisIdealforone-Dimensional, FlexiblelayoutSlikenavigationMenus.2) GridexCelsIntwo-Dimensional, ComplexDesignsSuchasmagazinElayouts.3) 결합 된 BothenSlayoutFlexibility 및 HeartingFortructur

궤도 역학 (또는 CSS 키 프레임 애니메이션을 최적화하는 방법)May 09, 2025 am 09:57 AM

자신의 코드를 리팩터링하는 것은 어떤 모습입니까? John Rhea는 자신이 쓴 오래된 CSS 애니메이션을 선택하고 최적화하는 사고 과정을 살펴 봅니다.

CSS 애니메이션 : 만들기가 어렵습니까?May 09, 2025 am 12:03 AM

cssanimationsarenherinly에 hardbutreepracticenderstandingofcsspropertiesandtimingflestions.1) startsimpleants withsimpleatslikeScalingabuttononHoverusingKeyframes.2) useAsingfuctionslikecubic-bezierfornateffects, 그러한 분위기, 3)

@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

메모장++7.3.1

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

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.