CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?
- 青灯夜游원래의
- 2022-05-18 17:16:305735검색
CSS 스타일 시트의 세 가지 구성 요소: 1. 페이지의 어떤 개체에 지정된 스타일이 적용될지 브라우저에 알려주는 데 사용되는 선택기 2. 주로 글꼴 속성을 포함하여 CSS에서 제공하는 설정된 스타일 옵션인 속성 텍스트 속성, 배경 속성, 레이아웃 속성 등 3. 속성 값은 지정된 속성의 유효한 값이며 속성과 속성 값은 ":"으로 구분됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS 스타일 시트의 구성
CSS 스타일 시트는 선택기, 속성 및 속성 값의 세 부분으로 구성됩니다. 구문 스타일은 다음과 같습니다.
选择符{属性：属性值;}
구문 설명은 다음과 같습니다.
-
선택기: 선택기라고도 하며 HTML의 모든 태그는 다양한 CSS 선택기를 통해 제어됩니다.
스타일이 적용될 페이지의 개체를 브라우저에 알려줍니다. 이러한 개체는 특정 태그, 모든 웹 페이지 개체, 지정된 클래스 또는 ID 값 등일 수 있습니다. 브라우저는 이 스타일을 구문 분석할 때 선택기를 기반으로 개체의 표시 효과를 렌더링합니다.
속성: CSS에서 제공하는 설정된 스타일 옵션으로 주로 글꼴 속성, 텍스트 속성, 배경 속성, 레이아웃 속성, 테두리 속성, 목록 항목 속성, 테이블 속성 등이 포함됩니다. 이러한 속성 중 일부는 일부 브라우저에서만 지원되므로 CSS 속성을 사용하면 사용이 더 복잡해집니다.
속성값(value): 지정된 속성의 유효한 값입니다. 속성과 속성값은 ":"으로 구분됩니다. 속성 값이 여러 개인 경우 ";"를 사용하여 구분합니다.
CSS 선택기
일반적으로 사용되는 CSS 선택기는 태그 선택기, 카테고리 선택기, 포함 선택기, ID 선택기, 클래스 선택기 등입니다. 선택기를 사용하여 다양한 HTML 태그를 제어하여 다양한 효과를 얻을 수 있습니다. 세 가지 기본 선택기에 대해 아래에서 자세히 소개합니다.
1. 태그 선택기
HTML 페이지는 이미지 태그 2.类别选择器 使用标记选择器非常的快捷，但是会有一定的局限性。如果页面声明标记选择器，那么页面中所有该标记内容都会有相应的变化。加入页面中有3个 태그 선택기를 사용하는 것은 매우 빠르지만 특정 제한 사항이 있습니다. 페이지에서 태그 선택기를 선언하면 페이지에 있는 해당 태그의 모든 콘텐츠가 그에 따라 변경됩니다. 조인 페이지에는 세 개의 3. ID 선택기 rrreee CSS 3에서 일반적으로 사용되는 모듈은 다음 표와 같습니다. (동영상 공유 학습: css 동영상 튜토리얼, 웹 프론트엔드)<img alt="CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?" >, 하이퍼링크 태그 <a></a>, table 태그 <table> 등이 있으며 CSS 태그 선택기는 페이지의 어떤 태그가 어떤 CSS 태그를 사용하는지 선언하는 데 사용됩니다. 예를 들어 a 선택기는 모든 <code>를 선언하는 데 사용됩니다. < 페이지에 있습니다. ;a>태그의 스타일입니다. <img alt="CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?" >、超链接标记<a></a>、表格标记等，而CSS标记选择器就是声明页面中的哪些标记采用哪些CSS标记，例如a选择器，就是用于声明页面中所有
<a></a>标记的样式风格。
例如：定义a标记选择器，在该标记选择器中定义超链接的字体与颜色。<style>
a{
font_size:9px;
color:#F93;
}
</style><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 class="one">应用选择one</h2><!--定义样式后，页面会自动加载样式-->
<p>正文内容1</p>
<h2 class="two">应用选择器two</h2>
<p>正文内容2</p>
<h2 class="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>
ID 선택기는 HTML 페이지의 ID 속성을 통해 스타일을 선택하고 추가하지만 기본적으로는 카테고리 선택기가 필요합니다. HTML 페이지에는 두 개의 동일한 ID 태그가 포함될 수 없으므로 정의된 ID 선택기는 한 번만 사용할 수 있습니다. 명명된 ID 선택기는 "#" 기호로 시작해야 하며 그 뒤에 HTML 태그의 ID 속성 값이 와야 합니다.
예: ID 선택기를 사용하여 페이지의 스타일을 제어합니다.
모듈 이름
기능 설명
기본 박스 모델
다양한 박스 관련 모듈 정의
Line
정의 다양한 줄 관련 스타일
Lists
다양한 목록 관련 스타일 정의
Text
다양한 텍스트 관련 스타일 정의
Color
다양한 색상 관련 스타일 정의 스타일
Font
다양한 글꼴 관련 스타일 정의
Background 및 Border
다양한 배경 및 테두리 관련 스타일 정의
Paged Media
다양한 헤더 정의, 바닥글, 페이지 등 페이지 요소 데이터의 스타일 정의
Writing Modes
페이지의 텍스트 데이터 레이아웃 정의
위 내용은 CSS 스타일 시트는 어떤 세 부분으로 구성됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!