CSS 계층

그래서 내가 지난번에 여기에 있을 때 우리는 자바스크립트 창고의 각 층과 그것들이 어떻게 결합되어 아름다운 혼란스러운 프레임워크에서 프레임워크를 구축하는지 토론했다!
만약 당신이 그 문장을 놓쳤다면, 여기를 클릭하여 보십시오.
이 게시물은 많은 사람들의 공감을 불러일으킨 것 같아서 정말 좋다.내가 이 글을 쓸 때, 나는 내 사이트의 한 요소로 정렬 문제를 복구하려고 시도하기 시작했다.이렇게 시도하는 과정에서 나는 CSS에도 차원이 있다는 것을 깨달았다.자, 우리 시작합시다!

W3C 및 표준

만약 당신이 이전에 들어 본 적이 있다면, 저를 막아 주십시오. CSS에는 표준이 있습니다.이 표준은 CSS 작업 그룹(W3C)에 의해 제어됩니다.2011년에 W3C는 CSS 표준을 독립적으로 발전할 수 있는 모듈로 나누기로 결정했다.따라서 이 언어는 더 이상 완전한 버전 업데이트가 없다.CSS3가 가장 현대적인 CSS 버전이라고 들어보셨을 거예요.기술적으로 말하자면, 이 표준은 정식으로 존재하지 않는다. 왜냐하면 지금은 모두 독립된 모듈이기 때문이다. 그러나 사람들이 이 용어를 사용하는 것은 모든 모듈이 3급 표준화에서 시작되기 때문이다.
이 표준을 바탕으로 브라우저에서 지원합니다.각 브라우저에는 자체 CSS 해상도/렌더링 엔진이 있습니다.이것이 바로 사람들이 인터넷 익스플로러가 무엇을 지지하고 지지하지 않는지 이야기하는 것을 자주 듣는 이유다.따라서 Javascript처럼 CSS가 브라우저 설명에 표시될 수 있을지 걱정됩니다.

CSS 및 DOM

브라우저에서 사이트를 내보내면 렌더링 엔진이 HTML을 해석하고 CSS를 해석합니다.DOM 트리에 요소를 추가하면 연관된 스타일에 해당 요소가 매핑됩니다.여기서 검사기를 내보내서 주어진 요소의 최종 스타일에 대한 세부 사항을 볼 수 있습니다.

만약 네가 생각한다면, 너는 심지어 이런 스타일을 가지고 놀 수 있다!

겹겹이 쌓인 풍격은 마치 이집트의 강과 같다

CSS는 실제로 캐스케이드 스타일시트를 나타냅니다.브라우저에서 CSS를 해석할 때는 소스별로 다른 스타일시트를 고려해야 합니다.
브라우저 자체가 제공하는 브라우저 스타일이 있습니다."author"스타일, 즉 당신(또는 다른 사람)이 구축한 사이트를 보여주는 스타일시트가 있습니다.사용자 스타일을 사용하여 특정 사용자의 사이트 보기 스타일을 덮어쓸 수도 있습니다.
그것들이 충돌할 때 무슨 일이 발생합니까?누가 이겼어요?CSS는 이러한 서로 다른 양식을 어떻게 합치는지에 대해 하나의 차원 구조를 가지고 구체적인 상황에 따라 권위성을 가진다.

For more details check out Introducing the CSS Cascade

나 CSS 알아!잠깐만, 이 사람이 누구야?!

따라서 코드의 차원을 설명하는 것 외에 먼저 CSS를 작성하는 데는 많은 차원이 있다.우리가 스타일을 생각할 때, 우리는 보통 키 값 쌍이 가득한 CSS 파일을 생각하는데, 이 키 값 쌍은 스타일을 코드에 분배합니다.이러한 규칙은 기본적으로 지정된 HTML 요소에 적용되는 규칙입니다.

a {
    color: black;
}

그러나 CSS는 이미 몇몇 친구들을 이겼다.똑같이 유행하는 것은 LESS와 Sass다.이것들은 CSS 사전 프로세서로 간주됩니다.이들은 기본적인 CSS를 사용하고 사용 가능한 문법을 확장하기 때문에 스타일 파일에 변수와 중첩 규칙을 직접 포함할 수 있습니다.

$brand-color: #fc3;
a {
    color: $brand-color;
}
nav {
    background-color: $brand-color;
}

이것은 Sass 문법의 예이다

As an aside Sass used to be its own language. After version 3 it was made to be compatible with CSS, so modern Sass is really SCSS and uses the file extension .scss. Oh, and both still exist and some people prefer to use the original Sass syntax, so watch out for that. Fun times!

특이성과 선택기

양식에 대해 알아야 할 중요한 부분 중 하나는 그들의 디자인 방식이 개발자들이 가장 효과적인 단계에서 그것들을 응용할 수 있도록 허락한다는 것이다.페이지에 HTML 요소가 너무 많기 때문에 모든 제목이나 단추에 영향을 주는 스타일을 선택하는 것이 각 스타일을 따로 설정하는 것보다 훨씬 쉽다.CSS는 선택기를 사용하여 스타일을 요소에 매핑하여 이 문제를 처리합니다.선택기는 세 가지 유형이 있다.

유형 선택기

클래스 선택기

속성 선택기

Id 선택기

There are also universal selectors, but those do not have an effect on specificity

선택기는 여러 가지 방식으로 조합하여 사용할 수 있다.첫 번째 방법은 여러 개의 선택기를 사용하여 비추려는 원소의 특이성을 증가시키는 것이다.

a {
    color: black;
}

a.thanos {
    color: purple;
}

이 HTML과 결합하면 링크는 어떤 색입니까?

<a class="thanos" href="/"> Click Me! </a>

링크가 보라색으로 바뀝니다!이것은 유명thanos이 있기 때문에 그것에게 두 개의 선택기를 주었다.우리가 사용하는 a 표기 양식은 선택기 하나만 사용하여 하나의 요소에 비추기 때문에 thanos 규칙이 더욱 구체적이고 이길 수 있다.
이런 특수성을 사용하면 사이트의 모든 링크를 검은색으로 바꿀 수 있지만, 한 페이지의 링크가 보라색이어야 한다는 것을 결정할 수 있다.그러나 네가 이렇게 시도한다면 무슨 일이 일어날까?

a {
    color: black;
}

.thanos {
    color: purple;
}

이 두 가지 상황에서 선택기가 하나밖에 없기 때문에 스타일이 충돌할 가능성이 높다.그러나 CSS에는 어떤 스타일을 들을 것인지에 대한 규칙이 있습니다.이것은 선택기의 전일성이 작용을 발휘하는 두 번째 방식이다.조작 순서는 id 선택기가 가장 구체적이고 그 다음은 속성 선택기와 연결된 종류 선택기, 그 다음은 표기 선택기다.
Mozilla has more in-depth explanations 관심이 있다면.주의, 당신은 이 두 가지 특정성 개념을 결합하여 사용할 수 있습니다.

내연 스타일

네, 다음 층!지금까지 나는 모든 CSS가 어떤 스타일시트에 포함되어 있다고 가정해 왔다.그러나 스타일은 HTML에서 직접 지정할 수 있습니다.그러나 이것은 요소의 항목 스타일시트의 스타일을 덮어씁니다.CSS에 따라 내연 스타일이 더 구체적으로 여겨지기 때문이다.

return (
    <h1 style={{ margin: 0, flex: 1 }}>
        LAURIE             
    </h1>
)}

많은 사람들이 내연 양식의 실천이 좋지 않다고 생각한다.이것은 이 특수성 문제 때문이다.어디에 있는지 의식하지 못한 상태에서 스타일을 덮어씁니다. 낮은 단계에서 작성했기 때문에 곧 곤혹스러울 수 있습니다.또한 내연 스타일은 일반적으로 스타일을 반복하고 공유할 수 있는 요소에 대해 개별적으로 스타일을 설정하고 있기 때문에 더 많은 CSS를 작성해야 합니다.

이런 콘셉트가 어디서 왔는지 알 것 같은데?

이 양식층들은 매우 많은 배열이 있다.CSS의 일부 과제는 주어진 모든 스타일이 다양한 방식으로 생성될 수 있다는 것이다.중요한 것은 당신의 스타일을 어디에 두었는지, 무엇이 그것들을 촉발시켰는지 등등이다. 그러나 정확한 업무 수준을 알면 일을 분명하게 할 수 있다.기억이 안 나면 this handy dandy cheat sheet 뒷주머니에 넣으세요.
다른 유사한 내용을 찾고 있는 경우 다음을 참조하십시오.