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

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

Cascading Style Sheets는 속성을 사용하여 요소의 서식을 지정하는 규칙을 설명하고 허용된 값이러한 속성. 각 요소에 대해 제한된 속성 집합을 사용할 수 있으며 다른 속성은 영향을 미치지 않습니다.

스타일 선언은 두 부분으로 구성됩니다. 선택자그리고 광고. 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;)는 모든 사이트 요소의 여백을 재설정합니다. 선택기는 의사 클래스 또는 의사 요소와 함께 사용할 수도 있습니다. *:after (CSS 스타일) , *:checked (CSS 스타일) .

2.2. 요소 선택기

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

2.3. 클래스 선택자

클래스 선택기를 사용하면 동일한 클래스 이름을 가진 하나 이상의 요소에 스타일을 지정할 수 있습니다. 다른 장소들페이지 또는 다른 페이지대지. 예를 들어 헤드라인 클래스로 제목을 만들려면 다음을 추가해야 합니다. 클래스 속성여는 태그의 헤드라인 값 포함

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

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

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

개인용 컴퓨터 사용 지침

2.4. 아이디 선택자

ID 선택기로 포맷 가능 하나특정 요소. id 값은 고유해야 하며 한 페이지에서 한 번만 발생할 수 있으며 적어도 하나의 문자를 포함해야 합니다. 값은 공백을 포함할 수 없습니다.

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

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

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

2.5. 하위 선택자

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

특정 요소의 자식 형식을 지정하려면 해당 요소에 스타일 클래스를 지정해야 합니다.

p.first a (색상: 녹색;) - 주어진 스타일클래스가 있는 단락의 자손인 모든 링크에 먼저 적용됩니다.

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

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

2.6. 자식 선택자

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

2.7. 자매 선택자

형제 관계는 공통 상위 요소가 있는 요소 간에 발생합니다. 형제 요소 선택기를 사용하면 형제 요소 그룹에서 요소를 선택할 수 있습니다.

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

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

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

2.8. 속성 선택기

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

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

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

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

selector[attribute~="value"] - 주어진 값을 부분적으로 포함하는 요소, 예를 들어 요소에 공백으로 구분된 여러 클래스가 있는 경우 p - 클래스 이름에 기능이 포함된 단락 ;

selector[attribute|="value"] - 속성 값 목록이 지정된 단어로 시작하는 요소, p - 클래스 이름이 feature 또는 feature로 시작하는 단락 ;

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

selector[attribute$="value"] - 속성 값이 지정된 값으로 끝나는 요소 img - png 형식의 모든 이미지.

selector[attribute*="value"] - 속성 값이 지정된 단어를 포함하는 요소, a - 이름에 book 가 포함된 모든 링크.

2.9. 의사 클래스 선택기

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

:hover - 마우스 커서로 가리킨 모든 요소.

:focus - 키보드로 이동했거나 마우스로 활성화된 대화형 요소.

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

:valid - 지정된 데이터 유형을 준수하기 위해 브라우저에서 콘텐츠가 검증된 양식 필드.

:invalid - 내용이 지정된 데이터 유형과 일치하지 않는 양식 필드.

:enabled - 모든 활성 양식 필드

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

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

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

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

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

:target은 문서에서 참조되는 # 요소입니다.

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

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

구조적 의사 클래스 선택 자식 요소괄호 안에 주어진 매개변수에 따라:

:nth-child(odd) - 홀수 자식 요소;

:nth-child(even) - 짝수 자식 요소;

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

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

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

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

:nth-last-child() - 자식 요소 목록에서 다음이 포함된 요소를 선택합니다. 지정된 위치, :nth-child() 와 유사하지만 마지막 것에서 거꾸로입니다.

:first-child - 태그의 맨 처음 자식 요소에만 스타일을 지정할 수 있습니다.

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

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

:empty - 자식이 없는 요소를 선택합니다.

: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-letter - 각 단락의 첫 글자를 선택하고 블록 요소에만 적용됩니다.

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

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

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

3. 선택자의 조합

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

img:nth-of-type(even) - 대체 텍스트에 css 단어가 포함된 모든 짝수 이미지를 선택합니다.

4. 선택자 그룹화

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

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

5. 상속과 캐스케이드

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

5.1. 계승

계승특정 속성이 조상에서 자손으로 전달되는 메커니즘입니다. CSS 사양은 color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform ,visibility 와 같은 페이지의 텍스트 내용과 관련된 속성의 상속을 제공합니다. 공백 및 단어 간격. 대부분의 경우 웹 페이지의 모든 요소에 대해 글꼴 크기와 글꼴 모음을 설정할 필요가 없기 때문에 이 방법이 편리합니다.

블록 서식 속성은 상속되지 않습니다. 이들은 background , border , display , float 및 clear , height 와 width , margin , min-max-height 와 -width , outline , overflow , padding , position , text-decoration , vertical-align 및 z-index 입니다.

강제 상속

사용하여 예어상속은 요소가 부모 요소의 모든 속성 값을 상속하도록 강제할 수 있습니다. 이것은 기본적으로 상속되지 않는 속성에 대해서도 작동합니다.

CSS 스타일 설정 및 작동 방식

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

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

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


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

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

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

5.2. 종속

계단식동일한 요소에 다른 CSS 규칙이 적용되는 상황에서 최종 결과를 제어하는 ​​메커니즘입니다. 속성이 적용되는 순서를 결정하는 세 가지 기준이 있습니다. !중요 규칙, 특수성 및 스타일 시트가 포함되는 순서입니다.

규칙! 중요

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

특성

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

0, 1, 0, 0이 id에 추가됩니다.
클래스 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#main p.about (color: blue;) /*specificity: 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#sidebar (색상: 아쿠아;) /*특이도: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

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

연결된 테이블의 순서

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

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 지정하는 데 사용하는 코드입니다. CSS 기초 시작하는 데 필요한 사항을 이해하는 데 도움이 됩니다. 우리는 다음과 같은 질문에 답할 것입니다. 내 텍스트를 검은색 또는 빨간색으로 만드는 방법은 무엇입니까? 화면의 특정 위치에 콘텐츠를 표시하는 방법은 무엇입니까? 내 웹 페이지를 장식하는 방법 배경 이미지그리고 꽃?

그래서 CSS는 무엇입니까?

HTML과 마찬가지로 CSS는 실제로 프로그래밍 언어가 아닙니다. 마크업 언어가 아니라 스타일 시트 언어.즉, HTML 문서의 요소에 선택적으로 스타일을 적용할 수 있습니다. 예를 들어 선택하려면 모두 HTML 페이지의 단락 요소를 만들고 그 안의 텍스트를 검은색에서 빨간색으로 변경하려면 다음 CSS를 작성해야 합니다.

P (색상: 레드; )

다음 세 가지를 삽입해 보겠습니다. CSS 문자열안에 새로운 파일당신의 텍스트 에디터그런 다음 파일을 스타일 폴더에 style.css로 저장합니다.

그러나 여전히 HTML 문서에 CSS를 적용해야 합니다. 그렇지 않으면 CSS 스타일이 브라우저가 HTML 문서를 렌더링하는 방식에 영향을 주지 않습니다. (우리 프로젝트를 팔로우하지 않은 경우 파일 및 HTML 기본 작업을 읽고 먼저 해야 할 작업을 찾으십시오.)

  1. index.html 파일을 열고 헤더의 어딘가에 다음 줄을 붙여넣습니다. 그리고태그:
  2. index.html을 저장하고 브라우저에 로드합니다. 다음과 같이 표시되어야 합니다.

단락 텍스트가 이제 빨간색이면 축하합니다! 첫 번째 성공적인 CSS를 작성했습니다!

CSS 규칙 집합의 구조

위의 CSS를 조금 더 자세히 살펴보겠습니다.

전체 구조를 호출 규칙의 집합(그러나 종종 짧게 "규칙"). 개별 부품의 이름도 확인하십시오.

선택기 규칙 집합의 시작 부분에 있는 HTML 요소의 이름입니다. 스타일을 적용할 요소(이 경우 p 요소)를 선택합니다. 다른 요소의 스타일을 지정하려면 선택기를 변경하기만 하면 됩니다. 선언 색상과 같은 단일 규칙: 빨간색; 다음 중 무엇을 나타냅니다 속성스타일을 지정하려는 요소. 속성 특정 HTML 요소의 스타일을 지정하는 방법(이 경우 색상은 텍스트 단락을 정의하는 요소의 속성입니다.">

). CSS에서는 규칙에 영향을 줄 속성을 선택합니다. 속성 값 속성 오른쪽에는 콜론 다음이 있습니다. 재산 가치, 집합 중 하나를 선택 가능한 값이 속성의 경우(빨간색 외에도 많은 색상 값이 있습니다).

구문의 중요한 부분을 확인하십시오.

  • 각 규칙 집합(선택기 제외)은 중괄호(())로 묶어야 합니다.
  • 각 선언에 콜론(:)을 사용하여 해당 값과 속성을 구분해야 합니다.
  • 각 규칙 집합에서 세미콜론(;)을 사용하여 각 선언을 다음 선언과 구분해야 합니다.

따라서 한 번에 여러 속성 값을 변경하려면 다음과 같이 세미콜론으로 구분하여 작성하면 됩니다.

P(색상: 빨간색; 너비: 500px; 테두리: 1px 단색 검정색; )

여러 항목 선택

다른 유형의 여러 요소를 선택하고 모든 요소에 동일한 규칙 집합을 적용할 수도 있습니다. 여러 선택기를 쉼표로 구분하여 추가합니다. 예를 들어:

P,li,h1 (색상: 빨강; )

다양한 유형의 선택기

많이있다 다양한 방식선택자. 위에서 우리는 단지 고려했습니다 요소 선택자, 특정 유형의 모든 요소를 ​​선택합니다. HTML 문서. 그러나 우리는 선택을 더 구체적으로 할 수 있습니다. 다음은 보다 일반적인 유형의 선택기입니다.

선택기 이름 무엇을 선택 예시
요소 선택기(태그 또는 유형 선택기라고도 함) 지정된 유형의 모든 HTML 요소입니다. 피
선택하다

아이디 선택자 지정된 ID가 있는 페이지의 요소입니다(한 HTML 페이지에는 ID가 있는 요소가 하나만 있을 수 있음). #내아이디
선택하다

또는

클래스 선택자 지정된 클래스가 있는 페이지의 요소입니다(페이지에서 클래스의 여러 인스턴스를 선언할 수 있음). .내 수업
선택하다

그리고

속성 선택기 지정된 속성이 있는 페이지의 요소입니다. 이미지
선택하다 하지만
의사 클래스 선택기 지정된 요소(들)이지만 호버와 같은 특정 상태가 발생하는 경우에만 해당됩니다. a: 호버
선택하다 , 그러나 마우스 포인터가 링크 위에 있을 때만 가능합니다.

글꼴 및 텍스트

이제 몇 가지 CSS 기본 사항을 다루었으므로 style.css 파일에 몇 가지 규칙과 정보를 추가하여 예제를 보기 좋게 만들어 보겠습니다. 먼저 글꼴과 텍스트를 좀 더 보기 좋게 만들어 보겠습니다.

  1. 우선, 돌아가서 어딘가에 이미 저장 한 것을 찾으십시오. 요소 추가 index.html 헤더 내부 어딘가(다시 말하지만, 태그 사이 그리고). 다음과 같이 보일 것입니다.
  2. 다음으로 style.css 파일에서 기존 규칙을 삭제합니다. 이했다 좋은 시험, 하지만 빨간색 텍스트는 실제로 잘 보이지 않습니다.
  3. 에 다음 줄을 추가하십시오. 올바른 장소, 자리 표시자 문자열을 Google Fonts에서 가져온 실제 글꼴 계열 문자열로 바꿉니다. (font-family는 단순히 텍스트에 사용하려는 글꼴을 의미합니다). 이 규칙은 전체 페이지에 대한 전역 기본 글꼴과 글꼴 크기를 설정합니다. 는 전체 페이지의 부모이며 그 안의 모든 요소는 동일한 글꼴 크기 및 글꼴 패밀리를 상속합니다. / font -family: 자리 표시자: Google 글꼴의 글꼴 이름이어야 함)

    메모: /*와 */ 사이의 CSS 문서의 모든 것은 CSS 주석 , 브라우저는 코드를 실행할 때 무시합니다. 이것은 당신이하고있는 일에 대한 유용한 메모를 작성할 수있는 곳입니다.

  4. 이제 HTML 본문(

    , 그리고 텍스트의 단락을 정의합니다.">

    ). 또한 제목 텍스트를 중앙에 배치하고 문서 본문에 줄 높이와 문자 간격을 설정하여 문서를 좀 더 읽기 쉽게 만들 것입니다. h1 ( font-size: 60px; text-align: center; ) p, li (글꼴 크기: 16px; 줄 높이: 2; 글자 간격: 1px; )

원하는 대로 px 값을 조정할 수 있지만 일반적으로 디자인은 다음과 같아야 합니다.

블록, 블록 및 기타 블록

CSS 작성에 대해 알 수 있는 한 가지는 크기, 색상, 위치 등을 사용자 정의하는 블록에 대한 내용이 많다는 것입니다. 페이지의 대부분의 HTML 요소는 서로의 위에 쌓인 블록으로 생각할 수 있습니다.

당연히 CSS 레이아웃은 기본적으로 상자 모델. 페이지의 공간을 차지하는 각 블록에는 다음과 같은 속성이 있습니다.

  • padding , 내용 주위에만 공백(예: 텍스트 단락 주위)
  • border , 패딩 옆에 있는 실선
  • margin , 요소 외부 주변의 공간

이 섹션에서는 다음도 사용합니다.

  • 너비(요소 너비)
  • background-color , 콘텐츠 및 패딩 요소 뒤의 색상
  • color , 요소 내용의 색상(보통 텍스트)
  • text-shadow: 요소 내부의 텍스트에 그림자를 설정합니다.
  • display: 요소의 표시 모드를 설정합니다(지금은 그것에 대해 걱정하지 마십시오).

이제 시작하여 페이지에 더 많은 CSS를 추가해 보겠습니다! 페이지 하단에 이러한 새로운 규칙을 계속 추가하고 어떻게 작동하는지 확인하기 위해 값을 변경하는 실험을 두려워하지 마십시오.

페이지 색상 변경

html ( 배경색 : #00539F; )

이 규칙은 전체 페이지의 배경색을 설정합니다. 상단의 색상 코드를 인 색상으로 변경합니다.

몸 다루기

본문( 너비: 600px; 여백: 0 자동; 배경색: #FF9500; 패딩: 0 20px 20px 20px; 테두리: 5px 단색 검정; )

지금을 위해 요소. 여기에는 꽤 많은 선언이 있으므로 하나씩 살펴보겠습니다.

  • 너비: 600px - 몸체가 항상 600픽셀 너비가 되도록 합니다.
  • 여백: 0 자동; - margin, padding 등의 속성값을 2개 설정하면 요소의 첫 번째 값이 상단에 영향을 줍니다. 그리고아래쪽(이 경우 0으로 설정), 왼쪽의 두 번째 값 그리고오른쪽(여기서 auto는 사용 가능한 공간을 왼쪽과 오른쪽에 수평으로 균등하게 나누는 특수 값입니다). 설명된 대로 1개, 3개 또는 4개의 값을 사용할 수도 있습니다.
  • 배경색: #FF9500; - 이전과 마찬가지로 요소의 배경색을 설정합니다. 나는 몸에 붉은 오렌지를 사용했고 )에 진한 파란색을 사용했습니다. 다른 모든 요소는 이 요소의 자식이어야 합니다."> 요소이지만 자유롭게 실험해 보세요.
  • 패딩: 0 20px 20px 20px; - 콘텐츠 주위에 공간을 제공하기 위해 4개의 패딩 값이 설정되었습니다. 이번에는 본문 상단에 패딩을 설정하지 않고 왼쪽, 하단 및 오른쪽에 20px를 설정합니다. 값은 위, 오른쪽, 아래, 왼쪽 순으로 설정됩니다.
  • 테두리: 5px 단색 검정; - 단순히 몸의 모든 면에 5px 너비의 검은색 단색 테두리를 설정합니다.

홈페이지 헤더 위치 지정 및 스타일 지정

h1 ( 여백: 0; 패딩: 20px 0; 색상: #00539F; 텍스트 그림자: 3px 3px 1px 검정; )

상체에 끔찍한 파열이 있음을 눈치 챘을 것입니다. 이것은 브라우저가 일부 기본 스타일요소에 대한

(다른 사람들과 비교) CSS를 전혀 적용하지 않았더라도! 이것은 나쁜 생각처럼 들릴 수 있지만, 우리는 스타일이 없는 웹 페이지가 기본적인 가독성을 갖기를 원합니다. 간격을 없애기 위해 margin: 0을 설정하여 기본 스타일을 재정의합니다. .

그런 다음 헤더의 상단 및 하단 패딩을 20px로 설정하고 헤더 텍스트를 html 배경색과 동일한 색상으로 만들었습니다.

여기서 우리는 그림자를 적용하는 text-shadow 라는 다소 흥미로운 속성을 사용했습니다. 텍스트 내용요소. 다음과 같은 네 가지 의미가 있습니다.

  • 첫 번째 픽셀 값은 다음을 지정합니다. 수평 오프셋텍스트 그림자 - 가로질러 이동하는 거리: 음수 값은 왼쪽으로 이동해야 합니다.
  • 두 번째 픽셀 값은 다음을 지정합니다. 수직 오프셋텍스트 그림자 - 아래로 이동하는 거리, 이 예에서 음수 값은 위로 이동해야 합니다.
  • 세 번째 픽셀 값은 다음을 지정합니다. 흐림 반경그림자 - 값이 클수록 그림자가 흐려집니다.
  • 네 번째 값은 그림자의 기본 색상을 지정합니다.

다시 말하지만, 당신이 무엇을 생각해낼 수 있는지 알아보기 위해 다양한 값으로 실험해 보십시오.

마지막 업데이트: 2016년 4월 21일

포함된 요소의 수에 관계없이 모든 html 문서는 스타일을 사용하지 않으면 본질적으로 "죽은" 것입니다. 스타일 또는 그 이상은 CSS 스타일 시트(Cascading Style Sheets) 또는 단순히 CSS가 문서의 표현, 모양을 정의합니다. HTML5의 컨텍스트에서 스타일을 적용하는 방법을 간단히 살펴보겠습니다.

CSS의 스타일은 웹 브라우저에 요소의 형식을 지정하는 방법을 알려주는 규칙입니다. 서식 지정에는 요소의 배경색 설정, 글꼴 색상 및 유형 설정 등이 포함될 수 있습니다.

스타일 정의는 두 부분으로 구성됩니다. 요소를 가리키는 선택기 및 스타일 선언 블록- 형식 지정 규칙을 설정하는 명령 집합입니다. 예를 들어:

Div( 배경색:빨간색; 너비: 100px; 높이: 60px; )

이 경우 선택자는 div 입니다. 이 선택기는 이 스타일이 모든 div 요소에 적용되도록 지정합니다.

중괄호 안의 선택자가 오면 스타일 선언 블록. 명령은 요소의 형식을 지정하는 방법을 나타내는 여는 중괄호와 닫는 중괄호 사이에 정의됩니다.

각 명령은 속성과 값으로 구성됩니다. 따라서 다음 식에서:

배경색:빨간색;

background-color는 속성을 나타내고 빨간색은 값을 나타냅니다. 속성은 특정 스타일을 정의합니다. 많은 CSS 속성이 있습니다. 예를 들어 background-color는 배경색을 지정합니다. 콜론 다음에 해당 속성의 값이 옵니다. 예를 들어 위의 명령은 background-color 속성을 red 로 설정합니다. 즉, 요소의 배경색은 "빨간색", 즉 빨간색으로 설정됩니다.

각 명령 뒤에는 해당 명령을 다른 명령과 구분하는 세미콜론이 옵니다.

이러한 스타일의 집합을 종종 스타일 시트 또는 CSS(Cascading Style Sheets 또는 cascading 스타일 시트)라고 합니다. 존재하다 다양한 방법스타일 정의.

스타일 속성

첫 번째 방법은 style 속성을 사용하여 요소에 직접 스타일을 포함하는 것입니다.

스타일

스타일

여기에 정의된 두 가지 요소인 h2 제목과 div 블록이 있습니다. 제목에는 color 속성을 사용하여 정의된 파란색 텍스트 색상이 있습니다. div 블록에는 너비(너비), 높이(높이) 및 배경색 속성(배경색)이 있습니다.

두 번째 방법은 html 문서에서 style 요소를 사용하는 것입니다. 이 요소는 브라우저에 내부 데이터가 CSS 코드, html이 아닌:

스타일

스타일

이 경우의 결과는 이전의 경우와 정확히 동일합니다.

종종 style 요소는 head 요소 내에 정의되지만 HTML 문서의 다른 부분에서도 사용될 수 있습니다. 스타일 요소에는 스타일 세트가 포함됩니다. 각 스타일에는 먼저 선택기가 있고 그 다음에는 이전 예제에서 사용된 동일한 CSS 속성 정의와 해당 값이 중괄호로 표시됩니다.

두 번째 방법은 HTML 코드스타일 요소에 스타일을 넣어 더 깔끔합니다. 그러나 외부 파일에 스타일을 저장하는 세 번째 방법도 있습니다.

와 같은 폴더에 생성하자 HTML 페이지우리가 이름을 바꿀 텍스트 파일 스타일.css다음 내용을 정의하십시오.

H2( 색상:파란색; ) div( 너비: 100px; 높이: 100px; 배경색: 빨간색; )

이는 style 요소 내부에 있던 것과 동일한 스타일입니다. 또한 html 페이지의 코드를 변경합니다.

스타일

스타일

더 이상 스타일 요소는 없지만 위에서 생성한 styles.css 파일을 포함하는 링크 요소가 있습니다.

따라서 외부 파일에 스타일을 정의하여 html 코드를 더 깔끔하게 만들고 페이지의 구조를 스타일과 분리합니다. 이러한 방식으로 정의하면 스타일이 요소 내부 또는 스타일 요소에 정의된 경우보다 수정하기가 훨씬 쉽고 HTML5에서 선호하는 방식입니다.

외부 파일에서 스타일을 사용하면 캐싱 메커니즘을 사용하여 웹 서버의 로드를 줄일 수 있습니다. 웹 브라우저는 css 파일을 캐시하고 다음에 웹 페이지에 액세스할 때 캐시에서 원하는 css 파일을 검색할 수 있기 때문입니다.

또한 이러한 모든 접근 방식이 결합되어 하나의 요소에 대해 일부 CSS 속성은 요소 자체 내부에 정의되고 다른 CSS 속성은 스타일 요소 내부에 정의되며 나머지는 외부 포함 파일에 정의될 수도 있습니다. 예를 들어:

그리고 파일에서 스타일.css다음 스타일이 정의됩니다.

Div(폭:50px; 높이:50px; 배경색:빨간색; )

이 경우 div 요소에는 세 위치에 정의된 너비 속성이 있습니다. 이의. 마지막에 요소에 어떤 값이 적용됩니까? 다음과 같은 우선 순위 시스템이 있습니다.

    요소에 인라인 스타일이 정의되어 있으면 우선 순위가 가장 높습니다. 즉, 위의 예에서 총 너비는 120픽셀이 됩니다.

    우선 순위가 가장 낮은 스타일은 외부 파일에 정의된 스타일입니다.

html 속성과 CSS 스타일

많은 HTML 요소속성을 사용하여 표시 스타일을 설정할 수 있습니다. 예를 들어, 여러 요소에서 너비 및 높이 속성을 사용하여 요소의 너비와 높이를 각각 설정할 수 있습니다. 그러나 이 접근 방식은 피해야 하며 인라인 속성 대신 CSS 스타일을 사용해야 합니다. HTML 마크업은 html 문서의 구조만 제공해야 하며 전체 모양, 스타일은 CSS 스타일에 의해 결정되어야 한다는 점을 명확히 이해하는 것이 중요합니다.

CSS 코드 유효성 검사

CSS 스타일을 작성하는 과정에서 이러한 방식으로 스타일을 정의하는 것이 올바른지, 올바른지 여부에 대한 질문이 발생할 수 있습니다. 이 경우 CSS 유효성 검사기를 사용할 수 있습니다.

기술 CSS그들은 사이트의 디자인을 만들기 때문에 주로 디자이너에 의해 사용됩니다. 그러나 웹마스터가 CSS알 필요는 없습니다. 섹션에 대한 설명에서 최소한 한 가지 예를 떠올리는 것으로 충분합니다. 사이트의 이식성 외에도 스타일 시트를 사용하면 다양한 클래식 디자인 솔루션(예: 드롭다운 메뉴)을 만들 수 있습니다. 와 함께 동적 생성을 허용합니다. HTML 페이지 (DHTML), 그 아름다움과 편리함은 때때로 놀랍습니다.

물론 그런 것들을 만들기 위해서는 CSS 기초. 그리고이 사이트 카테고리는 가능한 한 빠르고 효율적으로 수행하는 데 도움이됩니다.

전체 과정 HTML, CSS 및 웹사이트 레이아웃:

CSS의 기본에 대한 기사를 읽은 후에는 다음을 배우게 됩니다.

1) 구문 CSS.

2) 방법 및 업무 우선순위 CSS 스타일.

3) 선택기 유형 CSS.

4) CSS브라우저 해킹.

5) 작성 규칙 CSS.

6) 툴팁 작성 방법 CSS.

7) 다음을 통해 첫 글자의 모양을 변경하는 방법 CSS.

8) 커서 종류를 설정하는 방법 CSS.

9) 로 마우스를 가져갈 때 커서 모양을 변경하는 방법 CSS.

10) 하위 메뉴를 만드는 방법 CSS.

11) 자산 대체에 대해 최소 너비안에 IE6.

12) 유효기간에 대하여 CSS.

13) 방문한 링크의 색상을 설정하는 방법.

14) 단락 들여쓰기를 사용하여 설정하는 방법 CSS.

15) 둥근 모서리를 통해 만드는 방법 CSS.

16) 목록 마커 대신 이미지를 넣는 방법 CSS.

17) 배경을 그림으로 만드는 방법.

18) 배경을 어둡게 하는 방법 CSS.

19) 자식 선택자는 무엇입니까? CSS.

20) 어떤 측정 단위를 사용할 수 있습니까? CSS.

21) 정전 팝업창을 만드는 방법.

22) 애니메이션 배경을 만드는 방법.

23) 아름다운 텍스트 필드를 만드는 방법.

24) 이미지 위에 마우스 커서를 올려놓았을 때 이미지를 변경하는 방법입니다.

25) 의사 요소는 무엇입니까? CSS.

26) 무엇입니까 CSS 스프라이트.

27) 바닥글(지하실)을 통해 바닥으로 누르는 방법 CSS.

28) 크기 조정을 방지하는 방법 텍스트 영역~을 통해 CSS.

29) 삼각형을 그리는 방법 CSS.

30) 이벤트 처리 방법 딸깍 하는 소리~을 통해 CSS.

31) 다음을 통해 커서를 설정하는 방법 CSS.

32) 가로 드롭다운 메뉴를 만드는 방법 CSS.

33) 사이트에서 비표준 글꼴을 사용하는 방법.

34) 라디오 버튼의 배경을 변경하는 방법 CSS.

35) 사용할 수 있습니까? CSS3.

36) 그림자를 만드는 방법 CSS.

37) 속성 설정 방법 셀 패딩그리고 셀 간격에 CSS.

38) 방법 100% 높이의 div.

39) 호환성 정보 Z-인덱스그리고 플레이어 유튜브.

40) 사용하는 것이 왜 나쁜가 -모즈, -ms, -웹킷및 기타 속성.

41) 사용해야합니까? CSS 재설정.

42) 목록 마커를 세로로 정렬하는 방법.

43) 인쇄 가능한 버전을 만드는 방법.

44) 브라우저 간 투명도를 설정하는 방법 CSS.

45) 무엇입니까 클리어픽스.

46) 부분적으로 취소하는 방법 뜨다.

47) 같은 열 높이로 2열 레이아웃을 만드는 방법.

48) 적응형 레이아웃이란?

49) 미디어 쿼리란? CSS.

50) 무엇입니까 더 적은.

51) 방법 CSS 컬 코너 효과.

52) 방법 반응형 "고정" 사이트 바닥글.

53) 사용방법 구글 폰트 API.

54) 서비스 이용방법 라이브툴.

55) 텍스트 선택을 활성화 또는 비활성화하는 방법에 CSS.

56) 속성을 사용하여 요소의 모양을 기본값으로 변경하는 방법 모습안에 CSS.

57) 왜 필요한가요? 페이지 나누기 내부 속성안에 CSS.

58) 어떻게 중앙 정렬 가변 너비 상자에 CSS.

59) 방법 순수한 CSS 삼각형.

60) 서비스 CSS 삼각형 생성.

61) 바닥글을 페이지 하단으로 푸는 방법(포지셔닝).

62) 바닥글을 페이지 하단으로 푸는 방법(테이블 방식).

63) 학습 사스. 설치 및 설정.

64) 페이지에서 요소를 숨기는 방법에 CSS.

65) 학습 사스. 기초.

66) 사용시기 재설정.css그리고 normalize.css.

67) 이미지 서비스강력한 API.

68) 방법 CSS 줌 효과.

69) 코알라- 빠른 컴파일 새스파일.

70) 추가 방법 CSS 사진 필터.

71) 학습 사스. 믹신.

72) 학습 사스. 수학 연산.

73) 애니메이션 Sass의 메뉴 아이콘.

74) 학습 사스. 기능.

75) 무엇입니까 PostCSS.

76) 설치 및 구성 방법 PostCSS.

77) 하는 방법 CSS에서 평가하는 능력.

78) 학습 사스. 코드 작성 스타일.

79) 학습 사스. 상위 선택기 확장.

80) 10 유용한 SASS 믹스인.

81) 하는 방법 CSS를 사용한 스타워즈 스타일 소개.

82) 부트스트랩 4. 소개.

83) 부트스트랩 4. 설치.

84) 부트스트랩 4. 재부팅

85) 부트스트랩 4. 컨테이너 및 요점.

86) 부트스트랩 4. 그리드 시스템.

87) 부트스트랩 4. 그리드 플렉스 속성.

88) 어떤 5가지 혁신이 나타날 것인가? CSS4.

89) 부트스트랩 4. 점보트론이란?

90) 부트스트랩 4. 유틸리티 및 타이포그래피.

91) 부트스트랩 4. 카드 구성 요소입니다.

92) 차이점 수업그리고 ID태그 예 div.

93) 나쁜 요소 웹 디자인사용해서는 안되는 것.

94) 부트스트랩 4. 모달 창.

95) 오 우선 순위그리고 계승안에 CSS연습 중

96) 조판 방법 PSD 레이아웃~에 부트스트랩 그리드. 1 부.

97) PSD 레이아웃을 구성하는 방법 부트스트랩 그리드. 2 부.

98) 의사 요소를 사용하는 방법 CSS에서 전후.

99) 기능 정보 CSS의 블록 너비와 높이.

100) 의사 요소 이후 및 의사 클래스 마지막 자식.

101) 다양한 장치에서 사이트를 표시하는 방법.

102) 그리드 레이아웃 부트스트랩(1 부)

103) 그리드 레이아웃 부트스트랩(2 부)

104) 그리드 레이아웃 부트스트랩(파트 3)

105) 그리드 레이아웃 부트스트랩(4부)

친애하는 친구 안녕! 이 단원에서는 CSS그것이 무엇이며 올바르게 사용하는 방법. 이것은 내가 가장 많이 설명하려고 노력할 "For the little ones" 시리즈의 기본 수업입니다. 평범한 언어 CSS로 문서 스타일 지정의 기본 - Cascading Style Sheets( 씨계단식 에스스타일 에스모자).

시원한

그것을 핀

1부: CSS 기초

이 수업은 HTML 마크업 언어가 무엇인지, 어떻게 작동하고 작동하는지, 기본 태그와 레이아웃 규칙에 대해 자세히 설명했던 "초보자를 위한 HTML 기초" 수업의 논리적 연속입니다. 이 강의에서는 마크업 언어를 사용하여 생성된 문서의 스타일을 다룰 것입니다. 특정한 모양, 특정한 색깔, 순서, 크기를 주는 것 다양한 요소페이지의 텍스트를 참조하여 Cascading Style Sheets 작업에 대한 모범 사례를 살펴보겠습니다. 기본 사항을 이해하면 HTML 문서의 스타일을 정확하고 효과적으로 스스로 할 수 있습니다.

라는 사실에 주의를 환기시킵니다. 이 설명서우리는 웹 브라우저에서 HTML 문서와 함께 사용하는 맥락에서만 CSS를 고려할 것입니다. 에서 CSS 사용다른 마크업 언어를 사용하는 다른 문서의 스타일을 지정할 수 있습니다. 예를 들어, 스타일 XML 안드로이드 앱, SVG 또는 Unix 계열 운영 체제의 다양한 데스크탑 환경.

일반적으로 CSS는 모습서류. 이것은 그것이 매우 간단하고 배우기 그렇게 어렵지 않은 원래의 원시 구조로 구성되어 있음을 시사합니다. 가장 어려운 것은 구문도, 구성을 작성하는 규칙도 아니지만, 큰 금액 CSS 속성다양한 작업을 수행하는 암기용. 다행스럽게도 모든 규칙은 해당 의미 로드와 함께 영어로 되어 있습니다. 우리 언어로의 간단한 번역은 우리가 달성하고자 하는 것을 번역할 때 이 규칙이 무엇을 하는지에 대한 아이디어를 제공합니다. 특정 재산에 영어, 우리가 올바른 속성을 얻을 가능성이 높습니다. 이것은 직관적인 수준에서 CSS 규칙을 기억하는 것을 크게 단순화합니다. 예를 들어 설정해야 하는 경우 배경색영어로 번역하는 것으로 충분합니다. 그 결과 배경색(CSS의 개별 단어는 하이픈으로 작성됩니다.)

1.1 HTML 문서에서 CSS 사용

CSS는 HTML 문서에서 사용하기가 매우 쉽습니다. 그것은 될 수 있습니다:


앞서 말했듯이 CSS는 매우 간단한 구문을 가지고 있습니다. 분해해 봅시다.


광고 규칙은 한 문장으로 설명할 수 있을 정도로 간단합니다. 첫 철자 선택자, 페이지의 특정 요소를 선택한 후 중괄호 쓰여있다 속성공동 가치콜론 다음에 속성 자체가 서로 분리되어 있습니다. 세미콜론. 그게 다야

간단하지 않습니까?

CSS 선언에서 가장 어려운 점은 선택기입니다. 선택기가 어떻게 형성되고 사용되는지에 대한 자세한 내용은 모든 CSS 선택기 단원에서 한 단원에서 배울 수 있습니다. 이는 매우 중요한 주제입니다. 페이지에서 요소를 선택하는 모든 마법이 여기에서 드러났기 때문에 이 단원을 반드시 시청하는 것이 좋습니다. 모든 초보자.

간단히 CSS 선택기- (단어에서 고르다- 선택)은 각 광고 블록이 시작되고 추가 스타일 지정을 위해 페이지에서 동일한 유형의 요소를 선택하는 역할을 하는 구성입니다. 대부분의 경우 특정 하나가 선택기로 사용됩니다. 수업태그, 예:

//HTML:

//CSS: .my-class ( 배경색: #999; )

여기서 선택자는 div 태그의 my-class 클래스로 CSS 파일에서 필요한 스타일을 가져옵니다. 이 경우 배경색은 회색입니다. 따라서 페이지에 클래스와 함께 여러 태그(div뿐만 아니라)가 있는 경우 내 수업, 이러한 모든 요소는 동일한 모양을 갖습니다. 회색 배경색상 #999.

1.3 계단식, 상속 및 우선 순위

계단식 배열의 원리를 이해하는 것은 쉽습니다. 예를 살펴보겠습니다.

//HTML

나라의 말로 하는 산을 훨씬 넘어 멀리.
말의 산을 훨씬 넘어 멀리.
//CSS .parent .children ( 색상: #666; ) .parent ( 패딩: 10px; 색상: #999; )

예제에서 캐스케이드가 CSS로 작성되었음을 알 수 있습니다. .부모의맨 처음에 서고 그 다음에는 자식 클래스가 공백으로 표시됩니다. .어린이들, 하위 요소만 스타일링하는 역할을 합니다. 자식 태그는 클래스가 있는 태그 내에 중첩되어야 합니다. .부모의. HTML 문서에서 태그를 제거하는 경우 .어린이들클래스가 있는 div 태그에서 .부모의, 캐스케이드가 더 이상 작동하지 않고 구조가 손상되므로 디자인이 손실됩니다.

우리의 모범의 결과로 우리는 무엇을 얻을 것입니까? .children 태그는 캐스케이드가 더 길기 때문에 텍스트 색상이 #666이 되고 .parent 태그는 #999가 됩니다. 패딩 속성이 자식 요소에 적용되지 않기 때문에 부모 클래스에는 10px 패딩이 있지만 자식 클래스에는 패딩이 없습니다. 그러나 제거하면 색상: #666;선택기에서 .부모 .자식, 그러면 텍스트가 부모 색상으로 칠해집니다. 색상: #999;


계단식 및 상속을 사용하면 페이지의 특정 요소에 스타일을 지정하고 적용할 스타일의 우선 순위를 지정할 수 있습니다. 우선 순위의 계층 구조를 살펴보겠습니다.

  1. 선언 끝에 지정된 구성이 있는 속성이 가장 높은 우선 순위를 갖습니다. !중요한. 선택기가 중첩된 정도, 스타일이 사용되는 방식(인라인 또는 외부 파일 포함)은 가장 높은 우선 순위를 갖습니다. 사용하지 않는 것이 좋습니다 !중요한스타일링을 할 때, 지원 과정이나 개발 과정에서도 앞으로 혼선이 불가피하게 발생하기 때문에 스타일을 리팩토링해야만 구할 수 있습니다. 연습이 보여주듯이, 항상 사용하지 않는 방법이 있습니다!중요.
    중요 사용의 예: .my-class ( background-color: #999!important; )
  2. 다음으로 가장 중요한 우선 순위는 속성을 통해 태그 자체에 작성되는 인라인 스타일입니다. 스타일이전에 다룬 내용:
  3. 문서 자체의 스타일 태그에 설정된 스타일이 우선합니다.
  4. 태그를 통해 문서에 외부 CSS 파일로 첨부된 스타일은 우선 순위가 훨씬 낮습니다.
  5. 표준 브라우저 스타일 외에 가장 낮은 우선 순위는 하위 선택기 스타일보다 상위 선택기 스타일입니다. 예를 들면 다음과 같습니다.
    //HTML

    말의 산을 훨씬 넘어 멀리.

    //CSS .my-class ( margin: 10px; ) 자식에 대한 우선 순위가 낮습니다. 피 than: .my-class p ( margin: 15px; ) 결과 태그

    class 태그의 .my-class는 margin: 15px 속성 값을 가져옵니다.

또한 클래스 또는 식별자의 수와 선택기에 추가 의사 클래스 및 구문이 있으면 스타일 지정 우선 순위가 높아집니다.

My-class.class-2( margin: 10px; )가 .my-class( margin: 15px; )보다 우선합니다.

등. 논리적 사슬을 따라.

마지막으로, 우선 순위에서 문서 아래에 있는 후속 선언에 나타나는 스타일도 가장 높은 우선 순위를 갖는다는 점에 유의하는 것이 중요합니다. 예를 들어:

My-class( margin: 10px; )는 뒤에 오는 똑같은 선택자보다 우선합니다: .my-class( margin: 15px; )

결과적으로 문서 흐름의 마지막 선택기는 우선 순위가 가장 높기 때문에 margin: 15px 속성 값을 가져옵니다. 그러나 첫 번째 선언의 선택자가 더 길었다면 해당 속성 값이 확실히 우선했을 것입니다.

상속에 관해서는 모든 것이 여기에서 간단합니다. 모든 자식 요소는 부모의 일부 속성을 상속합니다. 어떤 속성이 상속되는지 공부하는 과정에서 알아내야 합니다. 다양한 속성실제 적용. 예를 들어, 텍스트 색상은 항상 자손에 의해 상속되지만 패딩은 그렇지 않습니다.

2부. CSS 속성

모든 CSS 속성을 나열하는 것은 의미가 없다고 생각합니다. 속성이 많고 모든 CSS 속성의 참조를 참조하는 것이 더 실용적이기 때문입니다. HTMLBook 참조에서 CSS 속성을 공부하는 것이 좋습니다.

그러나 레이아웃에서 가장 많이 사용되는 10가지 CSS 속성을 살펴보겠습니다. 나는 10을했다 큰 CSS내 프로젝트에서 파일을 가져오고 사용 빈도별로 속성을 정렬했습니다.

CSS 속성

사용 빈도

설명
색깔 960회 요소 텍스트 색상:
배경색 755회 요소 배경색:
글꼴 크기 524회 글꼴 크기:
불투명 435회 요소 투명도 수준:
심 372회 요소 내부의 여백 크기:
너비 356회 테두리 및 여백을 포함하지 않는 블록 요소 너비:
여유 311회 요소 여백:
키 305회 테두리와 여백을 포함하지 않은 블록 요소의 높이:
글꼴 두께 280배 글꼴 두께:
텍스트 정렬 245회 수평 텍스트 정렬:

3부. 미디어 쿼리

CSS 미디어 쿼리웹사이트가 표시되는 화면 크기 또는 장치에 따라 요소의 스타일을 지정할 수 있는 반응형 레이아웃을 만들기 위한 기반입니다. 기술적으로 미디어 쿼리 true 또는 false일 수 있는 간단한 부울 표현식입니다. 이러한 표현의 조건은 웹 페이지가 표시되는 장치의 매개변수이거나 화면 크기(픽셀)입니다.

이 튜토리얼에서는 미디어 쿼리의 기본 기능을 다룰 것입니다. 적응형 레이아웃사이트 및 실질적으로 유용합니다.

미디어 쿼리는 스타일 파일 자체 또는 문서 본문(스타일 태그)에 작성되며 규칙 선언으로 시작됩니다. @미디어. 미디어 쿼리 구조는 매우 간단합니다.


조건은 장치 - 모두(모든 장치), 화면, 인쇄, TV 등 또는 문서가 표시되는 장치 매개변수 또는 화면 해상도를 설정하는 미디어 기능일 수 있습니다.

가장 일반적으로 사용되는 미디어 기능은 장치의 최대 및 최소 화면 해상도를 정확히 결정합니다.


최대 화면 해상도가 480px인 기기 또는 320px의 최소 해상도는 .my-class 클래스가 회색으로 표시된 태그 텍스트를 렌더링합니다. 이 조건나는 예를 들었는데, 그것은 실질적으로 쓸모가 없다. 대부분의 경우 속성이 적용될 최대 해상도 또는 최소값만 지정해야 합니다.

무엇보다도 예제에서 볼 수 있듯이 함수에는 조건이 포함될 수 있습니다. 그리고 (그리고), 아니다(아니다)그리고 전용(미디어 쿼리를 지원하지 않는 이전 브라우저의 경우). 아니다 논리 연산자 또는 (또는), 그 역할은 쉼표로 수행됩니다. 미디어 기능은 보다시피 일반 괄호로 묶여 있습니다.

미디어 쿼리에 속성을 배치하는 것은 우선 순위를 부여하지 않으므로 미디어 쿼리를 다음 위치에 배치하는 것이 더 합리적입니다. 끝 CSS문서 또는 태그로 업로드 링크다른 해상도 또는 다른 장치에서 후자를 올바르게 재정의하기 위해 사이트의 기본 스타일을 로드한 후 미디어 쿼리가 있는 외부 CSS 파일.

  1. 사용해보십시오 외부에 포함된 CSS 파일만. 웹사이트의 올바른 기능을 위해 필요한 경우에만 내부 스타일을 사용하십시오.
  2. 스타일링해보세요 수업만. 식별자를 스타일 지정하지 마세요(id="hash"로 설정하고 #hash로 작성). 클래스 없이 태그의 스타일을 지정해 보세요. 예를 들어, h3 태그의 스타일을 지정하고 나중에 SEO 전문가여기에서 제목이 부적절하다고 결정하면 일반 div는 제목 클래스와 동일한 속성을 가져야 하며 마찬가지로 렌더링되어야 합니다. 또는 복제할 수 있습니다. HTML 태그예를 들어 .h1, .h2, .h3, .footer, .header, .aside와 같은 클래스로 만들고 그에 따라 스타일을 지정합니다.
  3. 가능한 한 자율적으로 요소의 스타일을 지정하고 캐스케이드 체인을 하나의 블록으로 줄여 상위 요소에 대한 종속성을 줄이십시오. 이는 페이지에서 블록을 가장 효율적으로 재사용하고 레이아웃의 다른 위치에서 수정하는 데 필요합니다. 그러나 광신도 없이. 필요하지 않은 경우 블록의 각 태그에 별도의 클래스를 제공해서는 안 됩니다. 오프라인 사용. 블록을 페이지의 다른 위치로 이동하면 상위 항목에 종속되지 않고 표시되어야 합니다. 이것은 일종의 클래스 명명 방법론을 사용하는 데 도움이 될 것입니다. BEM, 방법론 또는 귀하의 개인적인 경험또는 간단한 규칙내가 제안한 , 클래스 이름을 임의로 지정하고 비논리적이고 긴 클래스 체인을 구축하는 것보다 낫습니다.
  4. 내용이 무엇인지가 아니라 블록의 기능을 기반으로 태그 클래스의 이름을 지정하십시오. 예를 들어 리뷰 캐러셀 섹션이 있는 경우 다음 단어를 사용하여 선택자의 이름을 지정하지 마세요. 리뷰, 오지비등. 더 나은 이름 회전 목마, 페이지당 하나의 캐러셀 항목을 표시할 계획인 경우. 앞으로 이 캐러셀을 사용하여 리뷰를 작성할 뿐만 아니라 예를 들어 회사 동료 목록을 표시하는 데 이 코드를 사용할 수도 있습니다. 이 경우 클래스 이름 리뷰다소 부적절 할 것입니다.
  5. CSS 전처리기를 사용하세요. 그리 어렵지 않습니다. 내 선택은 꽤 오랫동안 Sass 전처리기를 사용했으며 사용을 권장합니다. 우리는 전처리기를 사용하는 것이 얼마나 쉽고 그것이 어떻게 삶을 더 쉽게 만드는지 알려주는 멋진 튜토리얼을 가지고 있습니다: ;
  6. 모든 브라우저에서 기본 스타일을 공통 분모로 가져오는 기본 브라우저 스타일 또는 정규화의 재설정을 사용합니다. 내 프로젝트에서 사용 normalize.css, Bootstrap CSS 프레임워크의 일부입니다.
  7. 레이아웃 프로세스에서 너무 많은 반복 작업을 하고 있다고 느낄 때 CSS 프레임워크 사용으로 전환하거나 가장 일반적으로 사용되는 요소로 직접 개발하면 작업 속도가 빨라집니다. 직장에서만 사용합니다 부트스트랩 그리드버튼, 패널 및 기타 요소의 스타일리시한 디자인 없이. 이것은 효과적인 작업에 충분합니다. 기본 부트스트랩 그리드의 우수한 응답성도 좋습니다.
  8. 속성을 직접 실험하십시오. CSS 참조를 열고 시도하십시오. 이것은 경험을 쌓고, 어떤 속성이 어떤 역할을 하는지 기억하고, 문서 스타일을 자동으로 작성할 수 있는 유일한 방법입니다.