CSS 속기와 필기 도구 - 사용시기

속기 (Shorthand)와 단락 (Longhand) - 하나는 간결하고 다른 하나는 정확합니다. 그 중 하나는 명확성을 유지하기 위해 확고한 입장을 취하고있는 반면, 간결함을 원하는 사람은 존재하지 않았습니다. 어느 쪽이든, 그들은 그들의 목적, 장단점을 가지고 있으므로 말할 수 있습니다..

이 포스트는 CSS 요약 표기법과 긴 표기법에 대해 약간의 빛을 발할 것이며, 어느 상황에 가장 적합한 지 결론을 짓습니다..

속기 속성이란 무엇입니까??

속기 속성 다른 CSS 속성 집합에 대한 값을 사용하는 속성입니다. 예를 들어, 국경 너비, 국경 풍 과 테두리 색 ~을 사용하여 경계 재산 혼자.

원래,

 테두리 : 1 픽셀 단색 파랑; 

와 같다:

 border-width : 1px; border-style : 솔리드; 테두리 색 : 파란색;

따라서 개별 속성 값을 별도로 선언 할 필요가 없습니다 (중복, 시간 및 공간을 많이 차지함). 또한 선언에서 left-out 속성을 다시 설정합니다..

어떻게 작동하나요??

앞에서 언급했듯이, 우리는 다른 속성 값들의 집합을 속기로 쓰고, 속칭의 모든 속성 값들이 다른 종류의 ~ 같이 ~하다. 경계. 의 속성 비슷한 종류의 가치 마진 같은 마진, 문제가 중요하다.. 의심 스러울 때 시계 방향으로 기억하십시오.!

선언문에서 물건 하나 또는 두 개를 놓친다면 어떨까요? 위의 예에서 무시했다고 가정 해 봅시다. 국경 풍.

 테두리 : 1px 파란색; 

국경을 더 이상 볼 수 없으며 약식 속성이 효과가 없기 때문에가 아니라 국경 풍 우리가 빠뜨린, 디폴트 값 없음. 이것이 속기 속성이 렌더링 된 방법입니다..

 테두리 : 1px 없음 파랑; 

이제 1px ...에 대한 국경 너비 다른 두 가지를 지키십시오.

 테두리 : 단색의 파란색;

우리는 두꺼운 너비로 만 테두리를 볼 수 있습니다. 국경 너비 속성에 기본값이 있음 매질.

 테두리 : 미디움 솔리드 블루; 

이것으로 우리는 속성 값을 빠뜨린 경우 속기 선언, 해당 속성은 기본값을 사용합니다. (이전에 할당 된 값을 재정의해야하는 경우에도 마찬가지 임).

있을 경우 border-width : 1px; 어딘가에있는 요소에 대해 테두리 : 단색의 파란색; 똑같이 국경 너비가 될거야. 매질 (기본값), 1px.

언급할만한 또 다른 것은 우리는 다음과 같은 값을 사용할 수 없습니다. 상속하다, 머리 글자 또는 설정되지 않은, 모든 CSS 속성에서 사용할 수있는 약자 표기법. 우리가 이들을 사용한다면, 브라우저는 그 값이 어떤 속성이 속기로 표현되어야하는지 정확히 알 수 없을 것입니다 - 선언 전체가 삭제됩니다..

그만큼 모든 재산

다음과 같이 할 수있는 하나의 CSS 속기 속성이 있습니다. 모든 CSS 속성에 대한 값을 설정하십시오.. CSS 전체 값 상속하다, 머리 글자 과 설정되지 않은 모든 속성에 적용될 수 있으므로이 속성은 모든 재산.

 div all : 이니셜

이렇게하면 div 요소는 CSS 속성 값을 모두 버리고 각 속성 값을 기본값으로 재설정합니다..

⚠ 경고

그 (것)들을 오용하지 않 읍시다. 모든 재산. 이 속성을 적용하고자하는 요소의 이전 CSS 코드를 건드릴 수없는 매우 드문 경우에만이 기능이 필요할 수 있습니다..

노트 : CSS 속성 색깔 모든 색상 채널에서 16 진수 값의 두 숫자가 같은 경우 약식 표기법으로 16 진수 값을 사용합니다. 예를 들어, 배경 : # 445599; 같음 배경 : # 459;.

수중 속성이란 무엇입니까??

그만큼 개별 속성 속기 속성에 포함될 수있는 속성을 길이 속성이라고합니다. 몇 가지 예는 다음과 같습니다. 배경 이미지, 여백 - 좌측, 애니메이션 기간, 기타.

왜 우리는 그것을 사용해야 만 하는가??

속기 대안은 편리하지만, 단점이 있습니다. 처음에는 기본 값을 가진 왼쪽 속성을 속기로 대체하는 방법을 보았습니다. 재설정이 필요하지 않은 경우 문제가 될 수 있습니다..

가져 가라. 세례반 속기 속성 예를 들어. 에서 사용하자. h4 요소 (기본 브라우저 스타일 글꼴 두께 : 굵게)

 글꼴 : 20px "택배 신규"; 

위의 속기 코드에서 값은 없습니다. 글꼴 두께 재산, 그러므로 글꼴 두께 : 굵게(브라우저 기본 스타일)은 기본값에 의해 무시됩니다 글꼴 두께 : 보통 그 결과 h4 요소가 의도하지 않았던 굵은 체 스타일을 잃어 버린다..

위의 예에서는 간단한 두 개의 외장 속성, 글꼴 크기 과 글꼴 모음 완벽하다.

또한,에 대한 속기를 사용하여 하나 또는 두 개의 속성 값을 할당하는 것은별로 유용하지 않습니다.. 왜 브라우저 하나에 일일이 필요할 때, 속기에있는 모든 속성 (왼쪽의 것들을 포함하여)을 해석 할 수있는 여분의 작업을 제공하십시오?

제작 과정을 제외하고 개발 단계에서 일부 개발자 (특히 초보자)는 긴 표기법을 사용하는 것이 훨씬 쉽습니다. 가독성과 명확성 향상.

결론

요즘에는 빠른 코딩 (Emmet과 같은 도구를 사용하여)과 축소가 가능하므로 속기에 대한 높은 신뢰성이 필요하지는 않지만 동시에 유형을 입력하는 것은 논리적입니다 margin : 0;. CSS 표기법을 선호하는 컨텍스트는 다양합니다. 그리고 우리가해야 할 일은 표기법이 우리에게 언제 가장 효과적 일지 파악하는 것입니다..