오랫동안 블로그를 업데이트하지 못해서 그동안 많은 일이 있었고, 지쳤습니다. 하지만 merceCSS를 업데이트하고, 지금까지 정리한 모듈 콘텐츠를 정리해서 모두와 공유하고, 교류회에 참여하는 등 아직 하고 싶은 일이 많이 남아있습니다.
" IKEA 가구 디자인의 모듈화 ", " 페이지 재구성의 모듈러 사고 ", " 페이지 재구성의 부품 생산 핵심 포인트 " 등 모듈 디자인에 대해 많이 언급했지만 구체적인 내용에 대해서는 언급 한 적이 없습니다. 이전 구현 내용, 단지 몇 가지 생각. 이번에는 구현 측면에 중점을 두고 지금까지 진행한 모듈화 작업 중 일부를 요약해 보겠습니다.
모듈화 를 잘하려면 스타일의 범위를 이해하는 것이 매우 중요하다고 생각하므로 이 부분이 이 시리즈의 첫 번째 기사입니다.
프로그램을 작성하는 학생들은 변수에 범위가 있다는 것을 모두 알아야 합니다(모르는 경우 Google에 직접 문의하세요. 여기서는 설명하지 않겠습니다). 스타일 정의에도 범위 문제, 즉 정의 범위가 있습니다. 아래의 p 범위와 같이 이해하기 쉽습니다.
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
스타일 선택기의 우선순위는 학습 스타일에 대한 기본 지식입니다.
사용된 규칙도 매우 간단합니다. 즉, 선택기의 가중치가 함께 추가되고 가중치가 동일하면 나중에 정의된 가중치가 우선합니다 . 매우 간단하지만 작성 시 주의를 기울이지 않으면 CSS의 반복 정의 및 중복 코드가 발생하기 쉽습니다.
위에서 우리는 두 가지 핵심 요소를 도출할 수 있습니다.
스타일의 무게를 안다고 무슨 소용이 있겠는가? 예를 들어 다음과 같이 사용할 수 있습니다. 가장 간단한 예를 들자면,
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
스타일의 가중치를 알면 위의 예가 어떻게 수행되는지 알 수 있습니다. 추가 응용 분야는 " IKEA 가구 디자인의 모듈화 "의 예와 같은 모듈화입니다. 자세한 내용을 확인하세요.