CSS 튜토리얼(2) 기본 구문

1. 기본 구문

CSS의 정의는 선택자(selector), 속성(properties), 속성 값(value)의 세 부분으로 구성됩니다.
기본 형식은 다음과 같습니다.
selector {property: value}
(selector {property: value})
선택기는 다양한 형식이 될 수 있으며 일반적으로 원하는 HTML 태그입니다. 예를 들어 BODY, P, TABLE...과 같은 스타일을 정의하려면 이 방법을 통해 해당 속성과 값을 콜론으로 구분해야 합니다.
body {color: black }
선택기 본문은 페이지의 주요 부분을 나타내고, 색상은 텍스트 색상을 제어하는 ​​속성이며, 검정색은 색상 값을 나타내며, 이 예제의 효과는 페이지의 텍스트를 검은색으로 만드는 것입니다.

속성 값이 여러 단어로 구성된 경우 값을 따옴표로 묶어야 합니다. 예를 들어 글꼴 이름은 여러 단어의 조합인 경우가 많습니다.
p {font- family: "sans serif"}
(단락 글꼴을 sans serif로 정의)

선택기에 여러 속성을 지정해야 하는 경우 세미콜론을 사용하여 모든 속성과 값을 구분합니다.
p {text-align: center ; color: red}
(문단은 중앙에 정렬되어 있고, 문단 안의 텍스트는 빨간색입니다.)

정의한 스타일 시트를 읽기 쉽게 하기 위해, 별도의 줄 쓰기 형식을 사용할 수 있습니다:
p
{
text-align: center;
color: black;
font-family: arial
}
(The 문단은 중앙에 배치하고, 문단 안의 텍스트는 검은색, 글꼴은 arial)

2. 선택자 그룹

동일한 속성과 값을 가진 선택자를 조합하여 사용할 수 있습니다. 스타일의 반복 정의를 줄일 수 있는 쉼표로 선택기를 작성하고 구분합니다.
h1, h2 , h3, h4, h5, h6 { color: green }
(이 그룹에는 모든 제목 요소와 텍스트가 포함됩니다. 각 제목 요소의 녹색)
p, table{ 글꼴 크기: 9pt }
(문단과 표의 텍스트 크기는 9입니다.)
효과는 다음과 완전히 동일합니다:
p { 글꼴 크기: 9pt }
table { 글꼴 크기: 9pt }

3. 클래스 선택기

클래스 선택기를 사용하면 동일한 요소를 분류하고 다른 스타일을 정의할 수 있습니다. 클래스 선택기를 정의하려면 사용자 정의 클래스 이름 앞에 마침표를 추가하세요. 두 개의 다른 단락(하나는 오른쪽에 정렬되고 다른 하나는 가운데에 정렬)을 원하는 경우 먼저 두 개의 클래스를 정의할 수 있습니다:
p.right {text-align: right}
p.center {text- align: center}
그런 다음 HTML 태그에 정의한 클래스 매개변수를 추가하면 됩니다.

이 단락은 오른쪽에 정렬됩니다

이 단락은 가운데 정렬됩니다.

참고: 클래스 이름은 영어 단어 또는 다음으로 시작하는 조합일 수 있습니다. 영어와 숫자, 일반적으로 그 기능과 효과에 따라 간략하게 명명됩니다.

클래스 선택기를 사용하는 또 다른 방법은 선택기에서 HTML 태그 이름을 생략하여 여러 다른 요소를 동일한 스타일로 정의할 수 있도록 하는 것입니다:
.center {text-align: center}
(.center 클래스 선택기를 텍스트 중앙에 정의)
이러한 클래스는 모든 요소에 적용될 수 있습니다. 다음으로, h1 요소(제목 1)와 p 요소(단락)를 모두 "center" 클래스로 분류합니다. 그러면 두 요소의 스타일이 ".center" 클래스 선택기를 따르게 됩니다.

이 제목은 중앙에 배치되어 있습니다

이 문단도 중앙에 배치되어 있습니다
참고: HTML 태그를 생략하는 이 클래스 선택기는 가장 일반적으로 사용되는 CSS 방법입니다. 이 방법을 사용하면 사전 정의된 클래스 스타일을 모든 요소에 쉽게 적용할 수 있습니다.

4. ID 선택기

HTML 페이지에서 ID 매개변수는 단일 요소를 지정하고 ID 선택기는 이 단일 요소에 대해 별도의 스타일을 정의하는 데 사용됩니다.
ID 선택기의 적용은 클래스 선택기의 적용과 유사합니다. 단지 CLASS를 ID로 바꾸면 됩니다. 위 예의 클래스를 ID로 바꿉니다:

이 단락을 오른쪽으로 정렬

ID 선택자는 이전에 정의되어야 합니다. ID 이름에 "#" 기호를 추가합니다. 클래스 선택기와 마찬가지로 ID 선택기의 속성을 정의하는 방법에는 두 가지가 있습니다. 다음 예에서 ID 속성은 id="intro"인 모든 요소와 일치합니다.
#intro
{
font-size:110%;
font-weight:bold;
color: #0000ff;
배경색:투명
}
(글꼴 크기는 기본 크기의 110%, 굵게, 파란색, 배경색은 투명)
다음 예에서 ID는 속성은 ="intro"의 ID 단락 요소와만 일치합니다:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
배경색:투명
}
참고: ID 선택기는 특정 요소의 스타일을 개별적으로 정의할 수 있으며 일반적으로 특별한 상황에서만 사용됩니다.

5. 포함 선택기

는 특정 요소 포함 관계에 대한 스타일 시트를 정의하는 데 사용할 수 있습니다. 요소 1에는 요소 2가 포함됩니다. 이 방법은 요소 1 내의 요소 2에 대해서만 정의됩니다. , 개별 요소 1 또는 요소 2에 대한 정의가 없습니다. 예:
table a
{
font-size: 12px
}
표의 링크는 스타일을 변경하고 텍스트는 크기는 12픽셀이고 표 외부의 링크 텍스트는 기본 크기로 유지됩니다.

6. 스타일 시트의 계단식 성격

계단식은 상속입니다. 스타일 시트의 상속 규칙은 외부 요소 스타일이 유지되고 이 요소에 포함된 다른 요소에 의해 상속된다는 것입니다. 실제로 요소 내에 중첩된 모든 요소는 외부 요소에서 지정한 속성 값을 상속하며, 달리 변경하지 않는 한 중첩된 스타일의 여러 레이어를 함께 쌓는 경우도 있습니다. 예를 들어 p 태그에 P 태그를 중첩합니다.
p { color:font-size:9pt}
......

이 단락의 텍스트는 빨간색 9포인트 글꼴입니다.

(P 요소의 콘텐츠는 p에서 정의한 속성을 상속합니다.)
참고 : 내부 선택자가 주변 선택자의 값을 상속받지 않는 경우도 있지만 이론적으로는 이것이 특별합니다. 예를 들어, 상위 경계 속성 값은 상속되지 않습니다. 직관적으로 단락은 문서 BODY와 동일한 상위 경계 값을 갖지 않습니다.

또한 스타일 시트 상속에 충돌이 발생하면 마지막으로 정의된 스타일이 항상 우선합니다. 위의 예에서 P의 색상이 정의된 경우:
p { color: red; 글꼴 크기:9pt}
p {color: blue}
……

< ;p>
이 문단의 텍스트는 파란색 글꼴 크기 9입니다

문단의 텍스트 크기는 글꼴 크기임을 알 수 있습니다 9는 p 속성을 상속받았으며, color 속성은 마지막 정의를 기반으로 합니다.

다른 선택자가 동일한 요소를 정의하는 경우 서로 다른 선택자 간의 우선순위를 고려해야 합니다. ID 선택자, 클래스 선택자, HTML 태그 선택자 ID 선택자는 요소에 마지막에 추가되므로 우선순위가 가장 높고 그 다음이 클래스 선택자입니다. 이 세 가지 관계를 초월하려면 !important를 사용하여 스타일 시트의 우선순위를 높일 수 있습니다. 예:
p { color: #FF0000!important }
.blue { color: #0000FF }
#id1 { color: #FFFF00}
이 세 가지 스타일을 페이지의 단락에 동시에 추가하면 !important가 선언한 HTML 태그 선택기 스타일에 따라 최종적으로 빨간색 텍스트가 됩니다. !important가 제거되면 우선순위가 가장 높은 ID 선택기가 노란색 텍스트로 표시됩니다.

7. 주석

CSS에 주석을 삽입하여 코드의 의미를 설명할 수 있습니다. 주석은 나중에 코드를 편집하거나 변경할 때 코드의 의미를 이해하는 데 도움이 됩니다. . 브라우저에는 설명이 표시되지 않습니다. CSS 주석은 다음과 같이 "/*"로 시작하고 "*/"로 끝납니다.
/* 단락 스타일 시트 정의*/
p
{
text-align: center; 텍스트 배열*/
color: black; /* 텍스트는 검정색*/
font-family: arial /* 글꼴은 arial */

위 내용은 CSS 튜토리얼(2) 기본 구문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!