CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?

青灯夜游

May 18, 2022 pm 05:16 PM

csscss3html

CSS 스타일 시트의 세 가지 구성 요소: 1. 페이지의 어떤 개체에 지정된 스타일이 적용될지 브라우저에 알려주는 데 사용되는 선택기 2. 주로 글꼴 속성을 포함하여 CSS에서 제공하는 설정된 스타일 옵션인 속성 텍스트 속성, 배경 속성, 레이아웃 속성 등 3. 속성 값은 지정된 속성의 유효한 값이며 속성과 속성 값은 ":"으로 구분됩니다.

CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 스타일 시트의 구성

CSS 스타일 시트는 선택기, 속성 및 속성 값의 세 부분으로 구성됩니다. 구문 스타일은 다음과 같습니다.

选择符{属性：属性值;}

구문 설명은 다음과 같습니다.

선택기: 선택기라고도 하며 HTML의 모든 태그는 다양한 CSS 선택기를 통해 제어됩니다.

스타일이 적용될 페이지의 개체를 브라우저에 알려줍니다. 이러한 개체는 특정 태그, 모든 웹 페이지 개체, 지정된 클래스 또는 ID 값 등일 수 있습니다. 브라우저는 이 스타일을 구문 분석할 때 선택기를 기반으로 개체의 표시 효과를 렌더링합니다.
속성: CSS에서 제공하는 설정된 스타일 옵션으로 주로 글꼴 속성, 텍스트 속성, 배경 속성, 레이아웃 속성, 테두리 속성, 목록 항목 속성, 테이블 속성 등이 포함됩니다. 이러한 속성 중 일부는 일부 브라우저에서만 지원되므로 CSS 속성을 사용하면 사용이 더 복잡해집니다.
속성값(value): 지정된 속성의 유효한 값입니다. 속성과 속성값은 ":"으로 구분됩니다. 속성 값이 여러 개인 경우 ";"를 사용하여 구분합니다.

CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?

CSS 선택기

일반적으로 사용되는 CSS 선택기는 태그 선택기, 카테고리 선택기, 포함 선택기, ID 선택기, 클래스 선택기 등입니다. 선택기를 사용하여 다양한 HTML 태그를 제어하여 다양한 효과를 얻을 수 있습니다. 세 가지 기본 선택기에 대해 아래에서 자세히 소개합니다.

1. 태그 선택기

HTML 페이지는 이미지 태그 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/661baa63bb71fd8b3847aa8ec31e5ff1-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?" >, 하이퍼링크 태그 <a></a>, table 태그 <table> 등이 있으며 CSS 태그 선택기는 페이지의 어떤 태그가 어떤 CSS 태그를 사용하는지 선언하는 데 사용됩니다. 예를 들어 a 선택기는 모든 <code>를 선언하는 데 사용됩니다. &lt 페이지에 있습니다. ;a>태그의 스타일입니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/661baa63bb71fd8b3847aa8ec31e5ff1-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?" >、超链接标记<a></a>、表格标记

等，而CSS标记选择器就是声明页面中的哪些标记采用哪些CSS标记，例如a选择器，就是用于声明页面中所有<a></a>标记的样式风格。
 例如：定义a标记选择器，在该标记选择器中定义超链接的字体与颜色。<style>
	a{
		font_size:9px;
		color:#F93;
	}
</style>
2.类别选择器
使用标记选择器非常的快捷，但是会有一定的局限性。如果页面声明标记选择器，那么页面中所有该标记内容都会有相应的变化。加入页面中有3个<h2></h2>标记，如果想让每个<h2></h2> 예: 태그 선택기를 정의하고 태그 선택기에서 하이퍼링크의 글꼴과 색상을 정의합니다. 
<html>
	<style>
	.one{
			font-family:宋体;
			font-size:24px;
			color:red;
		}
	.two{
			font-family:宋体;
			font-size:16px;
			color:red;
		}
	.three{
			font-family:宋体;
			font-size:12px;
			color:red;
		}
	</style>
	</head>
	<body>
		<h2 id="应用选择one">应用选择one</h2><!--定义样式后，页面会自动加载样式-->
		<p>正文内容1</p>
		<h2 id="应用选择器two">应用选择器two</h2>
		<p>正文内容2</p>
		<h2 id="应用选择器three">应用选择器three</h2>
		<p>正文内容3</p>
	</body>
</html>

2. 카테고리 선택기
태그 선택기를 사용하는 것은 매우 빠르지만 특정 제한 사항이 있습니다. 페이지에서 태그 선택기를 선언하면 페이지에 있는 해당 태그의 모든 콘텐츠가 그에 따라 변경됩니다. 조인 페이지에는 세 개의 <h2></h2> 태그가 있습니다. 각 <h2></h2>를 다르게 표시하려면 태그 선택기를 사용할 수 없습니다. 카테고리 선택기를 소개합니다.  유형 선택기의 이름은 직접 정의하며 "."으로 시작합니다. 정의된 속성 및 속성 값도 CSS 사양을 따라야 합니다. 카테고리 선택기의 HTML 태그를 적용하려면 클래스 속성을 사용하여 선언하면 됩니다. 예: 
<html>
	<style>
	#first{
			font-size:18px
		}
	#two{
			font-size:24px
		}
	#three{
			font-size:36px
		}
	</style>
	<body>
		<p id="first">ID选择器1</p>
		<p id="two">ID选择器2</p>
		<p id="three">ID选择器3</p>
	</body>
</html>




3. ID 선택기

 ID 선택기는 HTML 페이지의 ID 속성을 통해 스타일을 선택하고 추가하지만 기본적으로는 카테고리 선택기가 필요합니다. HTML 페이지에는 두 개의 동일한 ID 태그가 포함될 수 없으므로 정의된 ID 선택기는 한 번만 사용할 수 있습니다.  명명된 ID 선택기는 "#" 기호로 시작해야 하며 그 뒤에 HTML 태그의 ID 속성 값이 와야 합니다. 
 예: ID 선택기를 사용하여 페이지의 스타일을 제어합니다. rrreee
확장된 지식: CSS 3의 새로운 기능
🎜🎜🎜모듈 및 모듈식 구조🎜🎜🎜🎜CSS 3에는 전체 구조가 없지만 작업 분업과 협업의 모듈식 구조가 있습니다. 이러한 패턴 구조는 브라우저가 특정 모듈을 완전히 지원하지 않는 상황을 피하기 위해 채택되었습니다. 전체가 여러 모듈로 나누어지면 각 브라우저는 어떤 모듈을 지원할지, 어떤 모듈을 지원하지 않을지 선택할 수 있습니다. 🎜CSS 3에서 일반적으로 사용되는 모듈은 다음 표와 같습니다.

모듈 이름	기능 설명
기본 박스 모델	다양한 박스 관련 모듈 정의
Line	정의 다양한 줄 관련 스타일
Lists	다양한 목록 관련 스타일 정의
Text	다양한 텍스트 관련 스타일 정의
Color	다양한 색상 관련 스타일 정의 스타일
Font	다양한 글꼴 관련 스타일 정의
Background 및 Border	다양한 배경 및 테두리 관련 스타일 정의
Paged Media	다양한 헤더 정의, 바닥글, 페이지 등 페이지 요소 데이터의 스타일 정의
Writing Modes	페이지의 텍스트 데이터 레이아웃 정의


 (동영상 공유 학습: css 동영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

CSS 선택기 마스터 링 : 효율적인 스타일을위한 클래스 대 IDMay 16, 2025 am 12:19 AM

클래스 선택기 및 ID 선택기의 사용은 특정 사용 사례에 따라 다릅니다. 1) 클래스 선택기는 다중 요소, 재사용 가능한 스타일에 적합하며 2) ID 선택기는 고유 한 요소 및 특정 스타일에 적합합니다. 클래스 선택기는 더 유연하며 ID 선택기는 처리하기가 더 빠르지 만 코드 유지 보수에 영향을 줄 수 있습니다.

HTML5 사양 : 주요 목표와 동기 탐색May 16, 2025 am 12:19 AM

TheKeyGoalSandMotivationSBehindhtml5WeretoEnhancesemanticstructure, EverneMultImediasupport, andensureBetTerferfortPerformanceAndCompatibilityAcrossDevices, DrivenBytheneedToaddresshtml4'SlimitationsAndModernWebDemands.1) HTMl5AIMEDTOMPROVETUCETUR

CSS ID 및 클래스 : 간단한 가이드May 16, 2025 am 12:18 AM

idsareUniqueAndusedForsingleElements, whileclassesareuseableforlultipleements.1) useidsforuniqueElementsLikeSpecificheader.2) USECLASSESFORCONSESTENTSTYLINGACROSSMultipleEmentements likeSlikeButtons

HTML5 목표 : 사양의 주요 목표 이해May 16, 2025 am 12:16 AM

html5aimstoenhancewebaccessibility, Interactivity, andefficiency

HTML5를 사용하여 목표를 달성하기가 어렵습니까?May 16, 2025 am 12:06 AM

html5isnotparticular indifficulttousebutreequiresunderstandingStandingStandingStandingStandingStandingStandingStandingStandingStandingStandingStandingS

CSS : 같은 DOM에서 여러 ID를 사용할 수 있습니까?May 14, 2025 am 12:20 AM

아니요, 당신은 uplemultipleidsinthesamedom.1) idsmustbeuniqueperhtmlspecification, andusingduplicatescancauseSconsistentBrowserBehavior.2) useclassesforstylingmultipleelements, attributesectorscendats eftibutes 및 descenderfortrecture

HTML5의 목표 :보다 강력하고 액세스 가능한 웹 생성May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities, MakingItmoredynamic, Interactive, and Accessible.1) itsupportsmultimediaelementslikeand, 2) SemanticlementsImpreveAcessibilityandCodeReardability.3) 특징적인 부대, 응답 Whebappl