CSS 작성 순서에서 주의할 점은 무엇인가요?

1. CSS 순서

우선 브라우저가 CSS를 읽는 방식은 위에서 아래로라고 명시되어 있습니다. 우리는 일반적으로 CSS를 작성하며 요소에 이러한 속성이 있는 한 원하는 효과를 얻을 수 있습니다. 그러나 이는 향후 유지 관리 및 브라우저의 렌더링 효율성에 일정한 영향을 미칩니다. 그렇다면 CSS의 순서를 어떻게 작성해야 할까요? 특정 규범이 있나요?

　우선 CSS의 속성은 특성에 따라 여러 범주로 구분된다는 것을 알고 있습니다.

　1. 표시, 위치 및 부동과 같은 요소 특성을 지정하면 레이아웃 방법이 결정됩니다.

　2. 요소 지정 line-height, margin, padding, width, height 등과 같은 차지하는 공간에 따라 요소의 크기와 위치가 결정됩니다

　　3. 요소 자체를 지정합니다. 글꼴 크기, 색상, 배경 등과 같은 효과는 이러한 속성이 요소의 효과를 결정합니다

실제로 CSS의 속성을 분류하면 다음을 사용하여 명확한 답을 얻을 수 있습니다. 예를 들어 우리가 쓴 순서대로 요소를 그리는 CSS

p.detail {
  font-size: 10px;
  line-height: 12px;
  width: 30px;
  height: 30px;
  display: inline;        
}

설명: 글꼴 크기 10px, 줄 높이 12px, 너비 30px의 요소입니다. 높이 30px, 인라인 스타일의 표시 모드

속성을 읽기 시작하면 요소의 특성과 표시 모드를 모르기 때문에 요소 위치를 지정하기가 어렵습니다. 마지막 줄을 읽어보니 이것이 인라인 요소이고 너비와 높이의 정의가 유효하지 않으므로 이 CSS 작성 순서는 권장되지 않습니다.

p.detail {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 10px;
}

설명: 이것은 요소, 디스플레이 메서드입니다. 높이가 20px이고 너비가 상위 요소와 같고 높이가 20px인 인라인 블록입니다. 색상은 흰색이고 글꼴 크기는 10px입니다. 요약: CSS를 작성할 때 권장되는 사양은 먼저 요소의 표시 특성에 영향을 미치는 속성을 작성한 다음 요소의 위치에 영향을 미치는 속성을 작성하고 마지막으로 요소의 내부 속성을 작성하는 것입니다

2. 클릭하거나 마우스를 올리면 CSS 쓰기 강조 표시가 실행됩니다.

마우스를 올리면 변경해야 하는 요소에 활성 클래스 이름을 추가한 다음 활성에서 변경해야 하는 속성을 작성하는 경우가 많습니다

예:

.content {
  background: black;  
}
.active {
  background: white;
}

요소를 클릭할 때 .content의 배경색을 검정색에서 흰색으로 변경한 다음 활성 클래스 이름을 .content에 추가하면 예상한 효과를 얻을 수 있습니다. 그러나 때로는 그렇게 해야 합니다. 클릭할 때 요소의 속성보다 더 많은 것이 변경될 수 있습니다. 이 상황에서

　클래스 이름이 .click인 요소를 클릭할 때 요소의 아이콘 글꼴과 범위 요소가 다음과 같이 변경되면 어떻게 해야 합니까? 더 크고 다른 하나는 빨간색으로 변합니다. 이렇게 할 수 있습니다

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.icon-active{
　　　　font-size: 40px;
　　}
　　.text-active{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.icon-font&#39;).addClass(&#39;icon-active&#39;);
　　　　$(&#39;.text&#39;).addClass(&#39;text-active&#39;)
　　})
</script>

　이것은 우리의 기대 효과를 달성할 수 있지만, 이는 두 요소의 연관된 응답입니다.

In. 사실, 조심스러운 친구들은 여기에 .parent 태그가 있다는 것을 발견했을 수도 있으며, 이를 부모 태그에 추가하는 코드는 다음과 같습니다:

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.active .icon-font{
　　　　font-size: 40px;
　　}
　　.active .text{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.parent&#39;).addClass(&#39;active&#39;);
　　})
</script>

　

변경될 CSS 요소에 가장 가까운 가장 바깥쪽 레이어에 활성 클래스 이름을 추가한 다음 클래스 이름 아래 하위 요소의 스타일을 다음과 같이 설정하기만 하면 됩니다. 원하는 효과

위 내용은 CSS 작성 순서에서 주의할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!