CSS(Cascading Style Sheets) 또는 Cascading Style Sheets마크업 언어로 작성된 웹 문서의 모양을 설명하는 데 사용됩니다. CSS는 변경되는 스타일 규칙을 설정합니다. 모습웹 페이지에 배치된 요소는 문서의 색상, 글꼴, 크기, 테두리, 배경 및 위치와 같은 세부 정보를 미세 조정합니다.

CSS를 속성 값으로 마크업 요소에 직접 인라인할 수 있습니다. 스타일... 이 속성은 모든 HTML 요소에 사용할 수 있습니다. 와 함께 CSS를 사용하여주어진 HTML 요소에 대해 여러 스타일 속성을 지정할 수 있습니다. 각 속성에는 콜론(:)으로 구분된 이름과 값이 있습니다. 선언된 각 속성은 세미콜론(;)으로 구분됩니다.

이것이 요소를 찾는 방법입니다.

CSS 스타일을 추가하는 방법

CSS 표준은 웹 페이지에 스타일 시트를 적용하기 위한 세 가지 옵션을 제공합니다.

• 외부 스타일 시트 - 별도의 .css 파일에 스타일 시트 규칙을 정의한 다음 태그를 사용하여 이 파일을 HTML 문서에 포함
• 내부 스타일 시트 - 태그를 사용하여 스타일 시트 규칙 정의

  예: 내부 스타일 시트

  • 직접 해봐"

  표제

  첫 번째 텍스트

  두 번째 텍스트

  세 번째 텍스트

  표제

  첫 번째 텍스트

  두 번째 텍스트

  세 번째 텍스트

  
  
  

  V 이 예 CSS를 사용하여 요소의 배경색을 설정합니다. : 배경색: 연녹색, 제목의 색상 및 글꼴 유형

  : 파란색; font-family: verdana단락의 글꼴 크기, 색상 및 중앙 정렬

  : 글꼴 크기: 20px; 색상: 빨간색; 텍스트 정렬: 가운데.

  인라인 스타일

  HTML 페이지의 단일 요소를 형식화해야 하는 경우 이미 특수화된 스타일 속성을 사용하여 여는 태그 내부에 스타일 설명을 직접 배치할 수 있습니다. 예를 들어:

  절

  이러한 스타일을 인라인 또는 인라인 스타일이라고 합니다. 요소의 여는 태그 내부에 직접 정의된 규칙은 외부 CSS 파일에 정의된 규칙과 요소에 정의된 규칙을 재정의합니다.

  표제

  첫 번째 텍스트

  두 번째 텍스트

  세 번째 텍스트

  
  
  

  작업

  • 가운데 정렬 텍스트

    인라인 단락 스타일을 사용하여 텍스트를 중앙에 배치합니다.

  CSS는 Cascading Style Sheets의 약자로 Cascading Style Sheets를 의미합니다. 웹 페이지를 장식하는 데 사용됩니다. HTML에 콘텐츠(브라우저에 표시되는 내용)가 포함된 경우 CSS는 콘텐츠의 모양(브라우저에 표시되는 방식)을 결정합니다. CSS의 장점은 하나의 스타일을 사용하여 페이지 또는 전체 사이트의 모든 동일한 유형 요소를 한 번에(모든 링크, 단락, 목록을 한 번에) 디자인할 수 있다는 것입니다. CSS 스타일을 사용하면 특정 요소가 어떻게 보일지(예: 그림)를 한 번 정의하면 모든 문서에서 한 번에 모양이 변경됩니다. 사이트 전체의 텍스트 서식을 변경하려면 CSS 코드를 한 번만 변경하면 됩니다.

  기본 CSS 요소

  HTML이 태그, 속성 및 값으로 구성되는 것처럼 CSS도 자체 요소로 구성됩니다. CSS 구성의 본질은 다음과 같이 설명할 수 있습니다. "스타일을 지정할 페이지 요소를 지정하고 스타일을 지정하는 방법을 나타냅니다." 다음은 구성 CSS 구성 요소입니다.

  • 선택자... 페이지에서 디자인을 적용할 요소를 브라우저에 알려주는 식별자입니다. 덕분에 브라우저는 스타일이 예를 들어 목록이나 테이블을 장식하기 위한 것임을 "이해"합니다.
  • 스타일 선언 블록... 선택자 뒤에 작성되고 중괄호로 묶입니다. 요소의 스타일(디자인)을 설정합니다. 스타일 선언 블록은 두 부분으로 구성됩니다.
  • 재산... HTML 속성의 유사체. 변경할 특정 스타일 속성을 결정합니다.
  • 의미... 콜론으로 구분된 속성으로 설정되며 속성이 정확히 어떻게 변경될지 결정합니다.

  스타일 선언 블록에는 여러 속성과 값이 있을 수 있으며, 이 경우 세미콜론으로 구분하여 나열됩니다.

  선택기 유형

  선택기가 정의하는 페이지 요소의 속성에 따라 다양한 유형의 선택기가 있습니다.

  • 만능인... 다른 규칙이 설정되지 않은 모든 페이지 요소에 대한 규칙을 설정합니다.
    코드 * (글꼴 크기: 14px;)문서의 모든 요소에 대해 글꼴 크기를 14픽셀로 설정하며 다른 선택기를 사용하여 다른 규칙이 지정되지 않습니다.
  • 테가. 이 유형의 선택기는 특정 HTML 태그의 내용에 대한 형식 지정 규칙을 지정합니다. 선택자의 이름은 설명자의 이름과 동일하며 꺾쇠괄호 없이만 작성됩니다. 피, h1, 울.
    예를 들어 코드 h2 (색상: 빨강;)모든 두 번째 수준 제목, 즉 태그의 내용에 대해 텍스트 색상을 녹색으로 설정합니다.
    .
  • 속성... 이 선택기 그룹을 사용하여 특정 속성이 할당된 모든 태그의 콘텐츠 스타일을 정의할 수 있습니다. 속성의 이름뿐만 아니라 속성에 할당된 값과 이를 포함하는 태그의 이름을 지정하여 선택기를 보다 정확하게 지정할 수 있습니다. 이것은 디자인을 개인화하는 데 사용할 수 있습니다.
  • 등급... 같은 유형의 태그 콘텐츠를 다른 방식으로 스타일 지정해야 하는 경우를 위한 일종의 선택기입니다. 예를 들어 사이트 하단의 링크를 빨간색으로 만들고 다른 모든 링크는 그대로 파란색으로 유지하려고 합니다. 사이트 요소에 클래스 규칙을 적용하려면 속성에 클래스 이름을 지정해야 합니다. 등급해당 태그.

  클래스를 사용한다고 가정 단계개별 요소는 15픽셀의 왼쪽 여백을 설정해야 합니다.

  CSS 코드는 다음과 같을 것입니다.

  단계(왼쪽 여백: 15px;)

  요소를 규칙에 바인딩할 HTML 코드는 다음과 같습니다.

  들여쓰기된 텍스트

  • ID... 속성과 함께 사용 ID HTML 태그이며 단일 요소에 속성을 설정해야 할 때 사용됩니다. 마침표가 앞에 오는 클래스 선택기와 달리 해시를 통해 작성됩니다.

  #exclusive (색상: 주황색;)

  • 문맥... HTML에서 일부 태그는 다른 태그 내부에 있는 경우가 많으며 컨텍스트 선택기는 이러한 경우에 대한 규칙을 정의하는 데 도움이 됩니다. 예를 들어, 이를 사용하여 번호 매기기 목록 안의 항목 서식을 지정하거나 단락 안의 기울임꼴 텍스트를 지정할 수 있습니다.

  Pi (fint-family: Century;)

  나머지 선택기 그룹은 나열된 유형의 조합과 하위 요소가 상위 요소의 속성을 취할 때 상속 원칙을 기반으로 합니다.

  선택자를 결합하고 그룹화하는 것은 많은 상황에서 유용합니다. 예를 들어, 클래스 규칙을 정의하려면 단계링크의 경우에만 점으로 구분된 두 선택자를 지정해야 합니다(먼저 태그, 다음으로 클래스).

  A.step(왼쪽 여백: 15px;)

  CSS를 HTML 페이지에 어떻게 연결합니까?

  웹 사이트 구축 도구가 서로 상호 작용하도록 하는 방법에는 여러 가지가 있습니다. 스타일은 추가 방법에 따라 다음과 같이 분류됩니다.

  인라인 스타일

  속성을 사용하여 HTML 태그 내부의 문서에 직접 설정됩니다. 스타일... 가장 높은 우선 순위를 갖습니다. 즉, 동일한 요소에 대해 다른 디자인이 지정되면 태그 내부에 작성된 규칙이 우선 적용됩니다. 인라인 스타일의 선택기는 필요하지 않습니다. 스타일과 태그 사이의 관계가 명확하기 때문입니다. 태그 디자인이 그 안에 설정되어 있습니다.

  다음 코드는 태그 안에 있는 텍스트의 글꼴 크기와 색상을 설정합니다.

  내부 스타일 텍스트.

  전역 스타일

  태그로 정의 …

  관련 스타일

  그들의 도움으로 전체 사이트를 단일 스타일로 쉽게 디자인 할 수 있기 때문에 가장 편리합니다. 연결된 스타일은 모든 CSS 스타일이 확장자가 있는 별도의 파일에 있다고 가정합니다. .css.

  이 접근 방식은 페이지 레이아웃 규칙을 콘텐츠와 분리하고, CSS 코드를 HTML 파일에 간섭하지 않고 쉽게 변경할 수 있으며, 코드 분리 원칙이 특히 대규모 프로젝트에서 매우 중요하다는 점에서도 편리합니다.

  CSS 파일의 규칙을 HTML 페이지와 연결하려면 태그를 사용하세요. 컨테이너에 추가됨 및 해당 속성.

  다음은 파일의 규칙을 연결하는 라인입니다. mystyle.css HTML 페이지:

  rel = "스타일시트"태그가 스타일시트 파일을 참조하도록 지정합니다. href = "mysyle.css"주소를 설정합니다. 주소 지정 규칙은 일반 링크와 동일합니다. 경로는 절대, 상대 등이 될 수 있습니다.

  가져온 스타일

  명령 사용 @수입 CSS 파일의 스타일을 현재 테이블에 추가할 수 있습니다. 예를 들어, 전역 스타일을 사용하여 지정된 개별 문서 레이아웃을 개별 파일의 범용 규칙으로 보완하려는 경우 필요할 수 있습니다. 이 메서드는 인라인 스타일과 함께 사용할 수 없습니다.

  아래 코드는 파일 테이블을 문서로 가져옵니다. 아무.css, 편집 중인 HTML 문서가 있는 폴더에 있습니다.

  @import url(any.css);

  명령은 여는 태그 아래 줄에 작성됩니다.

  CSS(캐스케이딩 스타일 시트)- 스타일(예: 글꼴 및 색상)을 구조화된 문서(예: HTML 문서 및 XML 응용 프로그램)에 첨부할 수 있는 스타일 시트 언어입니다. 일반적으로 CSS 스타일은 웹 페이지 요소의 스타일을 만들고 수정하는 데 사용되며 사용자 인터페이스 HTML 및 XHTML로 작성되었지만 XML, SVG 및 XUL을 포함한 모든 종류의 XML 문서에도 적용할 수 있습니다. CSS는 문서의 프리젠테이션 스타일을 문서의 내용과 분리하여 웹 페이지를 만들고 사이트를 유지 관리하기 쉽게 만듭니다.

  CSS는 미디어별 스타일 시트를 유지하므로 작성자는 문서의 표현을 다음과 같이 조정할 수 있습니다. 비주얼 브라우저, 보청기, 프린터, 점자 장치, 휴대용 장치 등

  캐스케이딩 스타일 시트는 속성과 해당 속성에 허용되는 값을 사용하여 요소의 서식을 지정하는 규칙을 설명합니다. 각 요소에 대해 제한된 속성 집합을 사용할 수 있으며 나머지 속성은 영향을 주지 않습니다.

  스타일 선언은 두 부분으로 구성됩니다. 선택자그리고 광고... HTML에서 요소 이름은 대소문자를 구분하지 않으므로 "h1"은 "H1"과 동일하게 작동합니다. 선언은 속성 이름(예: 색상)과 속성 값(회색)의 두 부분으로 구성됩니다. 선택기는 브라우저에 형식을 지정할 요소를 알려주고 선언 블록(중괄호 안의 코드)은 형식 지정 명령(속성 및 해당 값)을 나열합니다.

  쌀. 1. 선언의 구조

  위의 예는 HTML 문서를 렌더링하는 데 필요한 몇 가지 속성에만 영향을 주려고 하지만 그 자체로 스타일 시트로 간주됩니다. 다른 스타일 시트와 결합할 때(CSS의 기본 기능 중 하나는 스타일 시트가 결합된다는 것입니다) 규칙은 문서의 최종 표현을 결정합니다.

  캐스케이딩 스타일 시트의 유형 및 특성

  1. 스타일 시트의 종류

  1.1. 외부 스타일 시트

  외부 스타일 시트대표하다 텍스트 파일 CSS 스타일 요소 세트를 포함하는 css 확장자. 파일은 HTML 페이지와 마찬가지로 코드 편집기에서 생성됩니다. 파일은 HTML 마크업 없이 스타일만 포함할 수 있습니다. 외부 스타일 시트는 태그를 사용하여 웹 페이지에 연결됩니다. 섹션 내부에 위치 ... 이러한 스타일은 사이트의 모든 페이지에서 작동합니다.

  여러 개의 태그를 순서대로 추가하여 각 웹 페이지에 여러 스타일 시트를 첨부할 수 있습니다. 미디어 태그 속성에서 이 스타일 시트의 목적을 지정함으로써. rel = "stylesheet"는 링크 유형(스타일 시트 링크)을 나타냅니다.

  type = "text / css" 속성은 HTML5 표준에서 선택 사항이며 생략할 수 있습니다. 속성이 없으면 기본값은 type = "text / css"입니다.

  1.2. 내부 스타일

  내부 스타일섹션에 포함 HTML 문서이며 태그 내부에 정의됩니다.... 내부 스타일은 외부 스타일보다 우선하지만 인라인 스타일(style 속성을 사용하여 지정됨)보다 열등합니다.

  ...
  
  

  1.3. 인라인 스타일

  우리가 쓸 때 인라인 스타일, 우리는 style 속성을 사용하여 요소 태그 내에서 직접 HTML 파일에 CSS 코드를 작성합니다.

  이 텍스트에 주의하십시오.

  이러한 스타일은 지정된 요소에만 영향을 줍니다.

  1.4. @가져오기 규칙

  @가져오기 규칙외부 스타일 시트를 로드할 수 있습니다. @import 지시문이 작동하려면 다른 모든 규칙보다 먼저 스타일시트(외부 또는 내부)에 나타나야 합니다.

  @import 규칙은 웹 글꼴을 포함하는 데에도 사용됩니다.

  @import URL(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,키릴 자모);

  2. 선택자의 종류

  선택기웹 페이지의 구조를 나타냅니다. 웹 페이지의 서식 요소에 대한 규칙을 만드는 데 사용됩니다. 선택자는 요소, 해당 클래스 및 식별자, 의사 클래스 및 의사 요소가 될 수 있습니다.

  2.1. 범용 선택기

  모든 HTML 요소와 일치합니다. 예를 들어 *(여백: 0;)는 모든 사이트 요소의 여백을 0으로 만듭니다. 또한 선택기는 의사 클래스 또는 의사 요소와 함께 사용할 수 있습니다. *: after(CSS 스타일), *: checked(CSS 스타일).

  2.2. 요소 선택기

  요소 선택기를 사용하면 모든 요소의 형식을 지정할 수 있습니다. 이 유형의사이트의 모든 페이지에 있습니다. 예를 들어, h1(font-family: Lobster, cursive;)은 모든 h1 제목에 대한 일반 서식 스타일을 설정합니다.

  2.3. 클래스 선택자

  클래스 선택기를 사용하면 페이지의 다른 위치 또는 사이트의 다른 페이지에 있는 동일한 클래스 이름을 가진 하나 이상의 요소에 대한 스타일을 설정할 수 있습니다. 예를 들어, 헤드라인 클래스로 헤드라인을 생성하려면 헤드라인 값이 있는 클래스 속성을 여는 태그에 추가합니다.

  지정된 클래스의 스타일을 설정합니다. 클래스로 만든 스타일은 반드시 이 유형이 아닌 다른 요소에 적용할 수 있습니다.

  .headline(텍스트 변환: 대문자, 색상: 하늘색;)

  요소에 여러 클래스 속성이 있는 경우 해당 값은 공백으로 연결됩니다.

  개인용 컴퓨터 사용 지침

  2.4. 식별자 선택기

  id 선택기를 사용하면 형식을 지정할 수 있습니다. 하나특정 항목. id 값은 고유해야 하며 한 페이지에 한 번만 나타날 수 있으며 최소한 하나의 문자를 포함해야 합니다. 값은 공백을 포함할 수 없습니다.

  id가 취할 수 있는 형식에 대한 다른 제한은 없습니다. 특히 식별자는 숫자로만 가능하고, 숫자로 시작하고, 밑줄로 시작하고, 구두점으로만 가능합니다.

  요소의 고유 ID는 프래그먼트 ID를 사용하여 문서의 특정 부분을 참조하는 방법, 스크립팅에서 요소를 대상으로 하는 방법, CSS에서 특정 요소의 스타일을 지정하는 방법 등 다양한 용도로 사용할 수 있습니다. .

  #sidebar (너비: 300px; float: 왼쪽;)

  2.5. 하위 선택자

  하위 선택자는 컨테이너 요소 내의 요소에 스타일을 적용합니다. 예를 들어, ul li(text-transform: uppercase;)는 모든 ul 요소의 자손인 모든 li 요소를 선택합니다.

  특정 요소의 하위 항목에 서식을 지정하려면 해당 요소에 대한 스타일 클래스를 설정해야 합니다.

  p.first a (색상: 녹색;) - 이 스타일은 첫 번째 클래스가 있는 단락의 자손인 모든 링크에 적용됩니다.

  p .first a (color: green;) - 공백을 추가하면 요소의 자식인 클래스 태그 .first 내부에 있는 링크의 스타일이 지정됩니다.

  먼저 a (색상: 녹색;) - 이 스타일은 .first 클래스로 지정된 다른 요소 내부에 있는 모든 링크에 적용됩니다.

  2.6. 자식 선택자

  자식 요소는 포함하는 요소의 직계 자손입니다. 하나의 요소에는 여러 개의 자식이 있을 수 있으며 각 요소에는 하나의 부모만 있을 수 있습니다. 자식 선택기를 사용하면 자식 요소가 부모 요소 바로 뒤에 있고 그 사이에 다른 요소가 없는 경우, 즉 자식이 더 이상 어떤 것에도 중첩되지 않는 경우에만 스타일을 적용할 수 있습니다.
  예를 들어, p> strong은 p 요소의 자식인 모든 강력한 요소를 선택합니다.

  2.7. 자매 선택자

  공통 부모를 가진 요소 간에 자매 관계가 발생합니다. 형제 선택기를 사용하면 형제 그룹에서 항목을 선택할 수 있습니다.

  h1 + p - 태그 바로 다음에 오는 모든 첫 번째 단락을 선택합니다.

  나머지 단락에 영향을 미치지 않고;

  h1 ~ p - h1 제목과 그 바로 뒤에 있는 형제인 모든 단락을 선택합니다.

  2.8. 속성 선택기

  속성 선택자는 속성 이름 또는 속성 값을 기반으로 요소를 선택합니다.

  [속성] - 지정된 속성을 포함하는 모든 요소 - alt 속성이 설정된 모든 요소.

  selector [속성] - 지정된 속성을 포함하는 이 유형의 요소, img - alt 속성이 설정된 이미지만.

  selector [attribute = "value"] - 특정 값을 갖는 지정된 속성을 포함하는 이 유형의 요소, img - 이름에 꽃이라는 단어가 포함된 모든 그림.

  선택기 [속성 ~ = "값"] - 이 값을 부분적으로 포함하는 요소, 예를 들어 공백으로 구분된 요소에 대해 여러 클래스가 지정된 경우 p - 클래스 이름에 기능이 포함된 단락.

  선택기 [속성 | = "값"] - 속성 값 목록이 지정된 단어로 시작하는 요소, p - 클래스 이름이 기능이거나 기능으로 시작하는 단락;

  selector [attribute ^ = "value"] - 속성 값이 지정된 값으로 시작하는 요소, a - http로 시작하는 모든 링크: //;

  선택기 [속성 $ = "값"] - 속성 값이 지정된 값으로 끝나는 요소, img - png 형식의 모든 그림.

  선택기 [속성 * = "값"] - 속성 값이 지정된 단어를 포함하는 요소, - 이름에 책이 포함된 모든 링크.

  2.9. 의사 클래스 선택기

  의사 클래스는 실제로 HTML 태그에 첨부되지 않은 클래스입니다. 이벤트가 트리거되거나 특정 규칙을 따를 때 CSS 규칙을 요소에 적용할 수 있습니다. 의사 클래스는 다음 속성을 사용하여 요소를 특성화합니다.

  : hover - 마우스 커서가 가리키고 있는 모든 요소.

  : focus - 키보드를 사용하여 탐색되었거나 마우스를 사용하여 활성화된 대화형 요소입니다.

  : 활성 - 사용자가 활성화한 요소.

  : 유효한 - 지정된 데이터 유형을 준수하는지 브라우저에서 내용이 확인된 양식 필드.

  : 유효하지 않음 - 컨텐츠가 지정된 데이터 유형과 일치하지 않는 양식 필드.

  : 활성화됨 - 모든 활성 양식 필드

  : 비활성화됨 - 비활성화된 양식 필드, 즉 비활성 상태입니다.

  : 범위 내 - 값이 지정된 범위에 있는 양식 필드.

  : 범위를 벗어남 - 값이 지정된 범위에 포함되지 않은 양식 필드.

  : lang() - 지정된 언어로 된 텍스트가 있는 요소.

  : not (selector) - 지정된 선택자를 포함하지 않는 요소 - 양식 필드의 클래스, 식별자, 이름 또는 유형 -: not ();

  : target - 문서에서 참조되는 # 기호가 있는 요소.

  : 선택됨 - 선택된(사용자가 선택한) 양식 요소.

  2.10. 구조적 의사 클래스 선택기

  구조적 의사 클래스는 괄호 안에 지정된 매개변수에 따라 자식을 선택합니다.

  : n번째 자식(홀수) - 홀수 자식;

  : n번째-자식(짝수) - 짝수-자식;

  : n번째 자식(3n) - 자식 중 세 번째 요소마다;

  : nth-child(3n + 2) - 두 번째 자식(+2)으로 시작하는 모든 세 번째 요소를 선택합니다.

  : nth-child (n + 2) - 두 번째부터 모든 요소를 ​​선택합니다.

  : nth-child (3) - 세 번째 자식을 선택합니다.

  : nth-last-child() - 자식 목록에서 지정된 위치의 요소를 선택합니다. nth-child()와 유사하지만 마지막부터 반대 방향으로 시작합니다.

  : first-child - 태그의 첫 번째 자식만 스타일을 지정할 수 있습니다.

  : last-child - 태그의 마지막 자식 형식을 지정할 수 있습니다.

  : only-child - 유일한 자식인 요소를 선택합니다.

  : 비어 있음 - 자식이 없는 요소를 선택합니다.

  : root - 문서의 루트인 요소인 html 요소를 선택합니다.

  2.11. 구조적 유형 의사 클래스 선택자

  특정 유형의 하위 태그를 나타냅니다.

  : nth-of-type() - nth-child()와 유사하게 요소를 선택하지만 요소 유형만 고려합니다.

  : first-of-type - 주어진 유형의 첫 번째 자식을 선택합니다.

  : last-of-type - 주어진 유형의 마지막 요소를 선택합니다.

  : nth-last-of-type() - 끝에서 시작하여 지정된 위치에 따라 요소 목록에서 지정된 유형의 요소를 선택합니다.

  : only-of-type - 부모 요소의 자식 중 지정된 형식의 유일한 요소를 선택합니다.

  2.12. 의사 요소 선택기

  의사 요소는 content 속성을 사용하여 생성된 콘텐츠를 추가하는 데 사용됩니다.

  : 첫 글자 - 각 단락의 첫 글자를 선택하고 블록 요소에만 적용됩니다.

  : first-line - 요소 텍스트의 첫 번째 줄을 선택하고 블록 요소에만 적용됩니다.

  : before - 요소 앞에 생성된 콘텐츠를 삽입합니다.

  : after - 요소 뒤에 생성된 콘텐츠를 추가합니다.

  3. 선택자의 조합

  서식을 위한 요소를 보다 정확하게 선택하려면 선택기 조합을 사용할 수 있습니다.

  img: nth-of-type (even) - 모든 짝수 그림을 선택합니다. 대체 텍스트에는 css라는 단어가 포함되어 있습니다.

  4. 선택자의 그룹화

  같은 스타일을 동시에 여러 요소에 적용할 수 있습니다. 이렇게 하려면 선언 왼쪽에 필요한 선택자를 쉼표로 구분하여 나열합니다.

  H1, h2, p, span(색상: 토마토, 배경: 흰색;)

  5. 상속과 캐스케이드

  상속과 계단식 배열은 밀접하게 관련된 CSS의 두 가지 기본 개념입니다. 상속은 요소가 부모(이를 포함하는 요소)로부터 속성을 상속함을 의미합니다. 계단식 배열은 문서에 다양한 종류의 스타일 시트가 적용되는 방식과 충돌하는 규칙이 서로를 무시하는 방식으로 나타납니다.

  5.1. 계승

  계승특정 속성이 조상에서 자손으로 전달되는 메커니즘입니다. CSS 사양은 색상, 글꼴, 문자 간격, 줄 높이, 목록 스타일, 텍스트 정렬, 텍스트 들여쓰기, 텍스트 변환, 가시성, 흰색과 같은 페이지의 텍스트 콘텐츠와 관련된 속성의 상속을 제공합니다. -공백 및 단어 간격. 이것은 웹 페이지의 모든 요소에 대해 글꼴 크기와 글꼴 패밀리를 설정할 필요가 없기 때문에 많은 경우에 편리합니다.

  블록 서식 속성은 상속되지 않습니다. 배경, 테두리, 표시, 부동 및 지우기, 높이 및 너비, 여백, 최소 최대 높이 및 너비, 윤곽선, 오버플로, 패딩, 위치, 텍스트 장식, 수직 정렬 및 Z-색인이 있습니다.

  강제 상속

  상속 키워드를 사용하면 요소가 상위 요소에서 속성 값을 상속하도록 강제할 수 있습니다. 이는 기본적으로 상속되지 않는 속성에도 적용됩니다.

  CSS 스타일 설정 및 작동 방식

  1) 스타일은 부모 요소에서 상속될 수 있습니다(상속된 속성 또는 상속 값 사용).

  2) 아래의 스타일 시트에 있는 스타일은 위의 표에 있는 스타일보다 우선합니다.

  3) 하나의 요소는 다른 소스에서 스타일을 지정할 수 있습니다. 브라우저 개발자 모드에서 어떤 스타일이 적용되고 있는지 확인할 수 있습니다. 이렇게 하려면 요소 위에서 마우스 오른쪽 버튼을 클릭하고 "코드 보기"(또는 이와 유사한 것)를 선택해야 합니다. 오른쪽 열에는 이 요소에 대해 설정되었거나 상위 요소에서 상속된 모든 속성과 해당 속성이 지정된 스타일 파일 및 코드 줄의 서수가 나열됩니다.

  
  쌀. 2. 개발자 모드 구글 브라우저크롬

  4) 스타일을 정의할 때 요소 선택자, 요소 의사 클래스, 클래스 또는 요소 식별자와 같은 선택자의 모든 조합을 사용할 수 있습니다.

  div (테두리: 1px solid #eee;) #wrap (너비: 500px;) .box (float: left;) .clear (clear: 둘 다;)

  5.2. 종속

  계단식동일한 요소에 다른 CSS 규칙이 적용될 때 최종 결과를 제어하는 ​​메커니즘입니다. 속성이 적용되는 순서를 결정하는 세 가지 기준이 있습니다!

  중요한 규칙

  규칙 가중치는 속성 값 바로 뒤에 추가되는!중요 키워드를 사용하여 설정할 수 있습니다(예: span(font-weight: bold! Important;)). 규칙은 선언 끝, 닫는 괄호 앞에 공백 없이 배치해야 합니다. 그러한 발표는 다른 규칙보다 우선합니다. 이 규칙을 사용하면 속성 값을 무시하고 스타일이 있는 파일에 직접 액세스할 수 없는 경우 요소 그룹의 요소에 대해 새 값을 설정할 수 있습니다.

  특성

  각 규칙에 대해 브라우저는 다음을 계산합니다. 선택자 특이성요소에 충돌하는 속성 선언이 있는 경우 가장 구체적인 규칙이 고려됩니다. 특이도 값은 0, 0, 0, 0의 네 부분으로 구성됩니다. 선택자의 특이성은 다음과 같이 결정됩니다.

  id의 경우 0, 1, 0, 0을 추가하십시오.
  클래스에 0, 0, 1, 0이 추가됩니다.
  각 요소 및 의사 요소에 대해 0, 0, 0, 1이 추가됩니다.
  요소에 직접 추가된 인라인 스타일의 경우 - 1, 0, 0, 0;
  유니버설 선택자는 특이성이 없습니다.

  H1 (색상: 하늘색;) / * 특이도 0, 0, 0, 1 * / em (색상: 은색;) / * 특이도 0, 0, 0, 1 * / h1 em (색상: 금색;) / * 특이도: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # 메인 p.about (색상: 파란색;) / * 특이도: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / .sidebar (색상: 회색;) / * 특이도 0, 0, 1, 0 * / #sidebar (색상: 주황색;) / * 특이도 0, 1, 0, 0 * / li # 사이드바 (색상: 아쿠아;) / * 특이도: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /

  결과적으로 이러한 규칙은 특정 요소가 더 큰 요소에 적용됩니다. 예를 들어, 항목에 값이 0, 0, 0, 2 및 0, 1, 0, 1인 두 가지 특이성이 있는 경우 두 번째 규칙이 우선합니다.

  첨부된 테이블의 순서

  여러 개의 외부 스타일 시트를 만들어 하나의 웹 페이지에 연결할 수 있습니다. 다른 테이블에 한 요소에 대해 서로 다른 속성 값이 포함되어 있으면 아래 목록의 스타일 시트에 있는 규칙이 요소에 적용됩니다.

  CSS = 스타일 및 색상

  텍스트 조작

  색상, 상자

  CSS로 HTML 스타일 지정

  CSS계단식 스타일 시트를 나타냅니다.

  CSS는 다음과 같이 설명합니다. HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방식엑스.

  CSS 많은 작업을 절약... 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.

  CSS는 세 가지 방법으로 HTML 요소에 추가할 수 있습니다.

  • 내장- HTML 요소에 Style 속성 사용
  • 내부의-을 통해
    
    

    제목입니다

    
    

    이것은 단락입니다.

    
    
    
    

    외부 CSS

    외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

    외부 스타일 시트를 사용하면 하나의 파일을 수정하여 전체 웹사이트의 모양을 변경할 수 있습니다!

    외부 스타일 시트를 사용하려면 섹션에 링크를 추가하십시오. HTML 페이지:

    예시

    
    
    
    
    
    

    제목입니다

    
    

    이것은 단락입니다.

    
    
    
    

    외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있습니다. 파일은 HTML 코드를 포함하지 않아야 하며 확장자로 저장해야 합니다. CSS.

    "styles.css"는 다음과 같습니다.

    몸 (
    배경색: powderblue;
    }
    h1(
    파란색;
    }
    피 (
    색상: 빨간색;
    }

    CSS 글꼴

    CSS color 속성은 사용할 텍스트의 색상을 결정합니다.

    font-family CSS 속성은 사용할 글꼴을 지정합니다.

    CSS font-size 속성은 사용할 텍스트의 크기를 결정합니다.

    예시

    
    
    
    
    
    

    제목입니다

    
    

    이것은 단락입니다.

    
    
    
    

    CSS 테두리

    CSS 테두리 속성은 HTML 요소 주위의 테두리를 정의합니다.

    예시

    피 (
    }
    

    CSS 패딩

    CSS 패딩 속성은 텍스트와 테두리 사이의 패딩(공백)을 정의합니다.

    예시

    피 (
    테두리: 1px 솔리드 파우더블루;
    패딩: 30px;
    }

    4가지 설정 방법이 있습니다 CSS태그 스타일 HTML.

    1) 인라인 스타일.

    2) 도입스타일

    3) 수입스타일.

    4) 파일의 스타일.

    그리고 이 기사에서 우리는 네 가지 방법에 대해 알아볼 것입니다.

    우선 첫 번째 방법은 인라인 스타일... 이 스타일은 태그 자체에 직접 지정됩니다. 예를 들어:

    텍스트

    이 경우 " 텍스트"크기가 될 것입니다. 150% 그리고 정렬 센터... 이것은 예입니다 인라인 스타일.

    두 번째 방법은 임베디드 CSS 스타일, 즉, 문서의 헤드에 설정된 스타일, 태그에서 ... 예를 들면 다음과 같습니다.

    
    
    

    여기서 다음과 같은 일이 발생합니다. 태그 내부의 모든 요소에 대해

    다음이 수행됩니다. 색상은 빨간색이 되고 위쪽 여백은 100픽셀이 됩니다.

    세 번째 할당 방법 CSS 스타일링- 그것 가져온 스타일... 그들은 또한 같다 임베디드문서의 헤드에 설정되어 있지만 이미 파일에 있습니다. 다음은 예입니다.

    
    
    

    여기에서 파일의 스타일이 전체 페이지에 적용됩니다. my.css".

    그리고 마지막 모습 CSS 스타일파일의 스타일입니다. 이 방법가장 일반적이며 태그를 통해 스타일 파일을 포함하는 것으로 구성됩니다. 문서의 머리 부분에. 예를 들면 다음과 같습니다.

    
    
    

    이 방법은 이전 방법과 매우 유사하지만 여기서는 태그를 사용하지 않습니다.