CSS는 무엇을 의미합니까?

css는 Cascading Style Sheets의 약자로, 정식 영어 이름은 "Cascading Style Sheets"입니다. HTML이나 XML과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어로 웹 페이지를 정적으로 수정할 수 있을 뿐만 아니라 동적으로 조정할 수도 있습니다. 다양한 스크립팅 언어로 웹 페이지의 다양한 요소를 포맷합니다.

이 문서의 운영 환경: windows7 시스템, css3 버전, Dell G3 컴퓨터.

Cascading Style Sheets(영어 전체 이름: Cascading Style Sheets)는 HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다.

CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다.

언어 기능

CSS는 HTML 마크업 언어에 대한 스타일 설명을 제공하여 요소가 표시되는 방식을 정의합니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다.

일반적으로 CSS에는 다음과 같은 기능이 있습니다.

• 풍부한 스타일 정의

CSS는 풍부한 문서 스타일 모양을 제공할 뿐만 아니라 텍스트 및 배경 속성을 설정하는 기능도 제공합니다. , 요소뿐만 아니라 테두리와 다른 요소 사이의 거리, 요소 테두리와 요소 콘텐츠 사이의 거리를 통해 텍스트의 대문자, 장식 및 기타 페이지 효과를 마음대로 변경할 수 있습니다.

• 사용 및 수정이 쉽습니다.

CSS는 HTML 요소의 스타일 속성에서 스타일을 정의할 수 있으며, HTML 문서의 헤더 부분에서도 정의할 수 있습니다. 또는 특수 항목에서 스타일을 선언할 수도 있습니다. CSS 파일, HTML 페이지 참조용. 즉, CSS 스타일 시트는 모든 스타일 선언을 통합된 방식으로 저장하고 관리할 수 있습니다.

또한 동일한 스타일의 요소를 동일한 스타일을 사용하여 분류하고 정의할 수 있으며, 동일한 이름을 가진 모든 HTML 태그에 특정 스타일을 적용하거나 특정 페이지 요소에 CSS 스타일을 할당할 수도 있습니다. 스타일을 수정하려면 스타일 목록에서 해당 스타일 설명을 찾아서 수정하기만 하면 됩니다.

• 다중 페이지 애플리케이션

CSS 스타일 시트는 별도의 CSS 파일에 저장할 수 있으므로 여러 페이지에서 동일한 CSS 스타일 시트를 사용할 수 있습니다. 이론적으로 CSS 스타일 시트는 어떤 페이지 파일에도 속하지 않으며 모든 페이지 파일에서 참조될 수 있습니다. 이러한 방식으로 여러 페이지의 스타일을 통합할 수 있습니다.

• Cascading

간단히 말하면, 계단식은 요소에 동일한 스타일을 여러 번 설정하는 것이며 마지막 속성 값 세트를 사용합니다. 예를 들어, 사이트의 여러 페이지에 동일한 CSS 스타일 시트 세트를 사용하고 일부 페이지의 일부 요소에 다른 스타일을 사용하려는 경우 이러한 스타일에 대해 별도의 스타일 시트를 정의하고 이를 적용할 수 있습니다. 페이지. 나중에 정의된 이러한 스타일은 이전 스타일 설정을 재정의하며 브라우저에 표시되는 내용은 마지막으로 설정된 스타일 효과가 됩니다.

• 페이지 압축

페이지 효과를 정의하기 위해 HTML을 사용하는 웹사이트에서는 다양한 사양의 텍스트 스타일을 형성하기 위해 많은 수의 반복되는 표와 글꼴 요소가 필요한 경우가 많습니다. HTML 태그가 생성됩니다. 그러면 페이지 파일의 크기가 늘어납니다. CSS 스타일 시트에 스타일 선언을 별도로 넣으면 페이지 크기를 크게 줄일 수 있으므로 페이지 로딩에 소요되는 시간도 크게 줄어듭니다. 또한 CSS 스타일 시트를 재사용하면 페이지 크기가 훨씬 줄어들고 다운로드 시간도 단축됩니다.

【추천 학습: css 비디오 튜토리얼】

언어 기본

속성 및 속성 값

속성

속성의 이름은 법적 식별자이며 CSS 구문에 있습니다. 키워드 . 속성은 형식 지정의 측면을 지정합니다. 예를 들어, color는 텍스트의 색상 속성이고 text-indent는 단락의 들여쓰기를 지정합니다.

속성 사용법을 익히려면 6가지 측면을 이해해야 합니다. 구체적인 설명은 다음과 같습니다.

①이 속성의 법적 값입니다. 분명히 단락 들여쓰기 속성 text-indent에는 길이를 나타내는 값과 배경 패턴을 나타내는 값만 할당될 수 있습니다. 이미지 속성은 이미지의 위치 링크를 나타내는 값을 취해야 하며, 배경 패턴이 없음을 나타내려면 none이라는 키워드를 사용해야 합니다.

②이 속성의 기본값(초기값)입니다. 이 속성이 스타일 시트에 지정되지 않고 해당 속성이 상위 요소에서 상속될 수 없는 경우 브라우저는 해당 속성이 기본값을 사용한다고 가정합니다.

③이 속성이 적용되는 요소(적용 대상)입니다. 일부 속성은 특정 개별 요소에만 적용됩니다. 예를 들어 공백 속성은 블록 수준 요소에만 적용됩니다. 공백 속성은 Normal, pre 및 nowrap의 세 가지 값을 가질 수 있습니다. 보통으로 설정하면 브라우저는 연속된 공백 문자를 무시하고 하나의 공백 문자만 표시합니다. pre를 사용하면 연속된 공백 문자가 유지됩니다. nowrap을 수행할 때 연속된 공백 문자는 무시되고 줄 바꿈이 자동으로 수행되지 않습니다.

4이 속성의 값이 다음 레벨에 상속되는지 여부.

⑤ 이 속성이 백분율 값을 가질 수 있는 경우 백분율 값은 어떻게 해석되나요? 즉, 백분율 값에 대한 기준은 무엇입니까? 예를 들어 여백 속성은 여백이 저장된 요소를 기준으로 한 컨테이너의 너비인 백분율 값을 사용할 수 있습니다.

⑥이 속성이 속한 미디어 그룹입니다.

속성값

①정수와 실수

이것은 일반적인 의미의 정수, 실수와 크게 다르지 않습니다. CSS에서는 부동소수점만 사용할 수 있으며 과학적 표기법은 다른 프로그래밍 언어처럼 실수를 나타내는 데 사용할 수 없습니다. 즉, 1.2E3은 CSS에서 불법입니다. 다음은 몇 가지 올바른 예입니다. 정수: 128, -313, 실수: 12.20, 1415, -12.03.

②길이 수량

길이 수량은 정수 또는 실수에 해당 길이 단위를 더한 값으로 구성됩니다. 길이 수량은 종종 요소를 배치하는 데 사용됩니다. 위치결정은 절대위치결정과 상대위치결정으로 나누어지므로 길이 단위도 상대길이 단위와 절대길이 단위로 나누어진다.

상대 길이 단위는 다음과 같습니다. em - 현재 글꼴의 높이(font.size 속성 값) ex - 현재 글꼴의 소문자 x 높이 Dx - 1픽셀의 길이 실제 길이는 모니터에 의해 결정됩니다. 설정에 따라 결정됩니다.

또 다른 주목할 점은 하위 요소가 상위 요소의 상대 길이 값을 상속하지 않고 실제 계산된 값만 상속한다는 것입니다.

3백분율

백분율은 숫자에 퍼센트 기호를 더한 값입니다. 분명히 백분율은 항상 상대적이므로 상대 길이와 마찬가지로 백분율은 하위 요소에 상속되지 않습니다. [10]

Selector

Type Selector

CSS에서 선택자의 유형은 요소 유형의 이름입니다. 이 선택기(유형 선택기라고 함)를 사용하면 이 요소 유형의 모든 인스턴스에 선언을 적용할 수 있습니다. 예를 들어, 다음 단순 규칙의 선택자는 H1이므로 이 규칙은 문서의 모든 H1 요소에 적용됩니다.

H1 {color:red}

단순 속성 선택기

CLASS 속성

CLASS 속성을 사용하면 요소 그룹을 선택할 수 있습니다. CLASS 속성에 동일한 값을 가진 요소가 있는 경우 선언이 적용됩니다. BODY 내의 모든 요소에는 CLASS 속성이 있습니다. 기본적으로 CLASS 속성을 사용하여 요소를 분류하고 스타일 시트에 규칙을 만들어 CLASS 속성 값을 참조하면 브라우저가 해당 속성을 해당 요소 그룹에 자동으로 적용합니다.

클래스 선택자는 식별자(마침표)로 시작하며, 이는 어떤 유형의 선택자가 뒤따르는지 나타내는 데 사용됩니다. 클래스 선택기의 경우 많은 프로그래밍 언어에서 "클래스"라는 용어와 연관되어 있기 때문에 기간이 선택되었습니다. 식별자는 영어로 번역하면 "클래스 이름을 가진 요소"를 의미합니다.

ID 속성

ID 속성의 작동은 CLASS 속성과 유사하지만 한 가지 중요한 차이점이 있습니다. ID 속성의 값은 문서 전체에서 고유해야 합니다. 이를 통해 ID 속성을 사용하여 개별 요소에 대한 스타일 규칙을 설정할 수 있습니다. ID 속성을 포함하는 선택기를 ID 선택기라고 합니다.

ID 선택자의 식별자는 해시 기호(#)라는 점에 유의하세요. 식별자는 다음에 오는 것이 ID 값임을 브라우저에 상기시키는 데 사용됩니다.

STYLE 속성

CLASS 및 ID 속성 값을 선택기에서 사용할 수 있지만 STYLE 속성은 실제로 전체 선택기 메커니즘을 대체할 수 있습니다. ID와 CLASS가 가지고 있는 선택기에서 참조할 수 있는 값만 갖는 것이 아니라 STYLE 속성의 값은 실제로 하나 이상의 CSS 선언입니다.

일반적으로 CSS를 사용하면 디자이너는 문서 상단의 STYLE 요소 내에 있는(또는 외부에 링크된) 스타일 시트에 모든 스타일 규칙을 넣습니다. 그러나 STYLE 속성을 사용하면 스타일 시트를 우회하고 선언을 문서의 여는 태그에 직접 배치할 수 있습니다.

결합된 선택기 유형

유형 선택기, ID 선택기 및 클래스 선택기를 서로 다른 선택기 유형으로 결합하여 더 복잡한 선택기를 형성할 수 있습니다. 선택기를 결합하면 특정 표현을 제공하려는 요소를 더욱 정확하게 지정할 수 있습니다. 예를 들어 유형 선택기와 클래스 선택기를 결합하려면 요소는 두 가지 요구 사항을 충족해야 합니다. 즉, 스타일 규칙이 적용될 수 있도록 올바른 유형과 올바른 클래스여야 합니다.

외부 정보: 의사 클래스 및 의사 요소

CSS1에서 스타일은 일반적으로 HTML 소스 코드에 나타나는 태그와 속성을 기반으로 했습니다. 이 접근 방식은 많은 디자인 상황에서 완벽하게 적합하지만 디자이너가 달성하고자 하는 몇 가지 일반적인 디자인 효과를 달성하지 못합니다.

의사 클래스 및 의사 요소를 디자인하면 이러한 효과 중 일부를 얻을 수 있습니다. 이 두 메커니즘은 CSS의 표현 기능을 확장합니다. CSS1에서는 링크 액세스 여부, 액세스 시기, 사용자가 문서와 상호 작용하는 방식 등의 상황에 따라 문서의 링크 스타일을 변경하는 데 의사 클래스가 사용되었습니다. 의사 요소의 도움으로 요소의 첫 글자와 첫 번째 줄의 스타일을 변경하거나 소스 문서에 나타나지 않는 요소를 추가할 수 있습니다.

HTML에는 의사 클래스나 의사 요소가 모두 존재하지 않습니다. 즉, HTML 코드에 표시되지 않습니다. 두 메커니즘 모두 향후 CSS 버전에서 더욱 확장되어 더 많은 효과를 얻을 수 있도록 신중하게 설계되었습니다.

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