알아야 할 세 가지 CSS 팁

알아야 할 세 가지 CSS 팁

다양한 브라우저 간의 치열한 경쟁으로 인해 점점 더 많은 사람들이 보다 대화형 액세스 방식인 최신 W3C 웹 표준을 지원하는 장치를 사용하고 있습니다. 인터넷. 이는 마침내 더 강력하고 유연한 CSS를 활용하여 더욱 깨끗하고 유지 관리가 잘되는 브라우저 프런트엔드 코드를 만들 수 있다는 것을 의미합니다. 이제 여러분이 아직 알지 못할 몇 가지 흥미로운 CSS 기능을 살펴보겠습니다.

CSS에서 HTML 속성 값을 표시하려면 attr()을 사용하세요.

attr() 함수는 CSS 2.1 표준 초기에 등장했지만 이제는 대중화되고 있습니다. 이는 CSS의 HTML 태그에 속성을 사용하는 영리한 방법을 제공하며, 많은 경우 이전에 JavaScript 처리가 필요했던 프로세스를 저장하는 데 도움이 될 수 있습니다.

이 기능을 사용하려면 세 가지 요소, 즉 :before 또는 :after CSS 의사 클래스 스타일, .content 속성, 그리고 원하는 HTML 속성 이름이 있는 attr()을 사용해야 합니다. 표현을 사용하세요. 예를 들어

제목에 data-PRefix 속성 값을 표시하려면 다음과 같이 작성할 수 있습니다.

h3:before { content: attr(data-prefix) " "; }

이것은 제목입니다

분명히 이 예는 이것이 얼마나 유용한지는 보여주지 않고 기본만 보여줍니다. 용법. attr()의 훌륭한 응용 프로그램은 사용자가 페이지를 인쇄할 때 페이지에 대한 링크를 표시하는 것입니다. 이를 달성하려면 다음과 같이 작성할 수 있습니다.

@media print { a:after { content: " (link to " attr(href) ") " } 저희 홈페이지를 방문하세요

이 기술을 알고 나면 업무에 얼마나 편리하게 사용할 수 있는지 놀라실 것입니다!

팁: CSS3 표준의 새 버전에서는 attr() 함수가 확장되어 다양한 CSS 태그에서 사용할 수 있습니다.

목록에 일련번호를 자동으로 추가하려면 counter()를 사용하세요.

CSS 2.1에서 이미 지원하는 또 다른 기능은 counter()를 사용하면 페이지 제목에 일련번호를 쉽게 추가할 수 있습니다. , 영역 블록 및 기타 다양한 연속 페이지 콘텐츠에 일련 번호를 추가합니다. 이를 사용하면 이 효과를 얻기 위해

사용에만 국한될 필요가 없으며 페이지에서 사용자 정의 숫자 순서를 보다 유연하게 사용할 수 있습니다.

핵심은 매우 간단하다는 것입니다. :before pseudo-class:

body { counter-reset:heading } h4:before {의 content 속성에 counter()를 추가합니다. counter-increment : Heading; content: "Heading #" counter(heading) "." }


이 카운터 영점 조정 및 자체 증가 방법에 대해 자세히 알아보려면 다음을 참조하세요. 주제 Mozilla 개발자 네트워크 페이지. 중첩된 카운터를 사용하는 방법에 대한 훌륭한 예가 있습니다.

calc()를 사용하여 산술 연산

마지막으로 calc() 함수에 대해 이야기해 보겠습니다. 이 기능을 사용하면 유지 관리하기 어려운 Javascript 코드를 작성하지 않고도 요소의 길이와 너비 계산과 같은 간단한 산술 계산을 수행할 수 있습니다. 이 기능은 덧셈, 뺄셈, 곱셈, 나눗셈을 포함한 모든 간단한 기본 산술 연산을 지원합니다.

너비가 상위 요소의 전체 너비를 차지하지만 다른 용도로 일부 픽셀 너비를 남겨두는 요소를 만들고 싶다고 가정해 보겠습니다.

.parent { width: 100 %; : 검정색 1px; 위치: 상대; } .child { 위치: 절대; 100px; 배경색: #ff8; >
아름답지 않나요? 보다 자세한 소개는 W3C CSS 계산 사양을 참고하시기 바랍니다.

CSS가 일부 방법에서 JavaScript를 대체하여 웹 개발자의 작업을 크게 단순화할 수 있을 정도로 성숙해졌음을 점점 더 명확하게 알 수 있습니다. 이러한 기능을 활용하지 않는 것은 어리석은 일입니다.

위 내용은 꼭 알아야 할 세 가지 CSS 기술입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!