CSS에서 당신이 모르는 팁-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 당신이 모르는 팁

伊谢尔伦

Dec 01, 2016 am 10:12 AM

css팁

CSS의 계단식 배열은 행복한 동시에 고통스러운 것으로 묘사될 수 있습니다. 일반적으로 매우 잘 작동하지만 문제가 있으면 CSS가 없는 경우에도 사람들을 매우 흥분하게 만듭니다. 우리는 CSS 캐스케이드뿐만 아니라 CSS 가중치에 대해서도 이야기하고 있습니다. 특별한 문제가 발생했을 때만 어려운 것은 아닙니다. CSS의 어려움은 어디에나 있다고 할 수 있습니다.

이 기사에서는 CSS 캐스케이드를 사용하여 더 친숙해지고 불필요한 요구 사항을 줄이는 방법을 알 수 있도록 몇 가지 예를 통해 몇 가지 CSS 팁을 보여 드리겠습니다. 이렇게 하면 가중치를 적용할 때 발생하는 문제도 줄어듭니다.

팁 1

CSS를 작성할 때마다 최대한 트리의 최상위로 돌아가고 싶습니다. 즉, :root로 돌아갑니다.

예를 들어, 저희 웹사이트에는 사이드바가 있는데 이 사이드바에 간단한 개인 소개를 추가하고 싶습니다. HTML 구조는 다음과 같습니다.

<body>
    <main class=“Posts”>
    <aside class=“SideBar”>
        <nav class=“Nav”>
        <p class=“Bio”>

CSS는 다음과 같이 작성됩니다.

.Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
}

이렇게 작성하면 정상적으로 작동하며 스타일 문제가 없습니다. 그러나 사이드바에는 탐색 탐색 기능도 있으며 동일한 스타일이 있을 가능성이 높습니다. 이 예에서는 글꼴 크기와 색상이 동일합니다. nav 및 .Bio에서 이러한 속성을 추출하여 상위 요소인 .SideBar:

.SideBar {
    font-size: .8em;
    color: #888;
}

line-height: 1.5가 이미 .Posts ;에 설정되어 있는 것으로 나타났습니다. 전체 페이지가 동일한 줄 높이를 사용하는 것 같습니다. 그러면 .Bio 및 .Posts의 줄 높이를 루트 요소로 이동할 수 있습니다.

:root {
    line-height: 1.5;
}

이것은 CSS 상식인 것 같지만, 그는 또한 동일한 것을 정의하는 형제 요소에 너무 집중하지 않습니다. 이를 통해 일부 코드가 중복되었음을 확인할 수도 있습니다. 실제로 코드를 리팩토링하는 데 약간의 시간만 투자하면 되기 때문에 이는 나쁘지 않습니다. 그러나 이는 CSS 코드 처리의 상태를 유지합니다.

CSS에서 당신이 모르는 팁

잎이 아닌 나뭇가지에 스타일을 쓰세요

팁 2

스타일은 항상 특정 속성으로 사용됩니다. 조합이 나타납니다

컬러와 베이킹 컬러의 조합이 좋은 예입니다. 작은 조정만 하는 것이 아니라면 모두 함께 조정해야 합니다. 요소에 배경색을 추가할 때 텍스트가 포함되지 않을 수 있지만 일부 하위 요소가 포함될 수 있습니다. 따라서 전경색과 배경색을 함께 설정하면 이러한 요소가 가독성 및 대비 문제에 직면하지 않는다는 것을 항상 확신할 수 있습니다. 다음에 배경색을 변경할 때 텍스트 색상이 모두 그룹으로 함께 나타나기 때문에 변경할 텍스트 색상을 둘러볼 필요가 없습니다.

CSS에서 당신이 모르는 팁

팁 3

currentColor, em 등과 같은 동적 값을 사용하세요.

때로는 텍스트 색상이 다른 속성에도 사용됩니다. . 예를 들어 테두리, 상자 그림자 또는 SVG 아이콘 채우기 등이 있습니다. 동일한 색상을 정의하는 대신 currentColor를 직접 사용하는 것이 있습니다. 기본적으로 색상은 상속 가능하며 다른 속성의 색상을 변경하려면 한 곳에서만 수정하면 됩니다.

마찬가지로 글꼴 크기 속성에 em 단위를 사용하면 :root의 글꼴 크기만 수정하여 요소의 상자 모델 크기를 변경할 수 있습니다.

이에 대한 자세한 내용은 "문자열을 사용하여 스타일 설정(STRINGS)" 기사를 확인하세요.

CSS에서 당신이 모르는 팁

팁 4

상속 속성 값을 사용하여 상위 요소의 스타일을 상속하여 UA 자체 스타일을 재정의하세요.

버튼 및 입력과 같은 양식 컨트롤의 경우 브라우저마다 고유한 스타일(UA 스타일)이 있습니다. 상속을 사용하여 상위 요소의 스타일을 상속함으로써 브라우저의 UA 스타일을 재정의할 수 있습니다.

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

위 예제 코드는 sanitize.css에서 가져온 것입니다. Normalize.css도 이런 방식으로 사용됩니다. 이런 식으로 사용하지 않는다면...

input[type="range"], input[type="radio"] 및 input[type="checkbox"]와 같은 요소에 앞서 도입된 currentColor 속성을 사용하여 자동으로 색상을 일치시킬 수도 있습니다. 아무것도 변경할 필요가 없을 수도 있습니다. 밝은 색상을 어두운 색상으로 변경할 수 있습니다.

CSS에서 당신이 모르는 팁

요약

물론 모든 사람에게 강요하는 것은 아니지만 좋은 점입니다. 이 팁은 간단하고 실용적이므로 귀하의 웹 사이트가 최대한의 이점을 얻을 수 있다고 말하고 싶습니다. CSS 전처리기를 사용하더라도 코드 출력에 영향을 주지 않으며 몇 가지 변수를 절약할 수도 있습니다.

은 Tachyon과 같은 단일 클래스 이름에도 적합합니다. 아마도 복잡성과 필수 클래스도 줄일 수 있습니다.

또 다른 흥미로운 점은 CSS 변수인 CSS 속성을 사용자 정의할 수도 있다는 것입니다. 전처리기와 달리 사용자 정의 속성을 재정의하면 현재 선택 범위에만 영향을 미칩니다. 따라서 어떤 의미에서는 "계단식 변수"입니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Cohost.org의 잃어버린 CSS 트릭Apr 25, 2025 am 09:51 AM

이 게시물에서 Blackle Mori는 코 호스트의 HTML 지원의 한계를 추진하면서 발견 된 몇 가지 해킹을 보여줍니다. 감히 CSS 범죄자 라벨이 붙어 있지 않도록 감히 사용하십시오.

커서를위한 다음 레벨 CSS 스타일Apr 23, 2025 am 11:04 AM

CSS가있는 커스텀 커서는 훌륭하지만 JavaScript를 사용하여 다음 단계로 가져갈 수 있습니다. JavaScript를 사용하면 커서 상태를 전환하고 커서 내에 동적 텍스트를 배치하고 복잡한 애니메이션을 적용하며 필터를 적용 할 수 있습니다.

Worlds Collide : 스타일 쿼리를 사용한 KeyFrame Collision DetectionApr 23, 2025 am 10:42 AM

2025 년에 서로를 ricocheting하는 요소가있는 대화식 CSS 애니메이션은 CSS에서 Pong을 구현할 필요가 없지만 CSS의 유연성과 힘이 증가하는 것은 LEE의 의심을 강화합니다.

UI 효과를 위해 CSS 배경 필터 사용Apr 23, 2025 am 10:20 AM

CSS 배경 필터 속성을 사용하여 사용자 인터페이스 스타일에 대한 팁과 요령. 여러 요소들 사이에 필터를 배경으로 배경으로 배경으로하는 방법을 배우고 다른 CSS 그래픽 효과와 통합하여 정교한 디자인을 만듭니다.

미소?Apr 23, 2025 am 09:57 AM

글쎄, SVG '의 내장 애니메이션 기능은 계획대로 이상 사용되지 않았다. 물론 CSS와 JavaScript는 부하를 운반 할 수있는 것 이상이지만 Smil이 이전과 같이 물에서 죽지 않았다는 것을 아는 것이 좋습니다.

'예쁜'은 보는 사람의 눈에 있습니다Apr 23, 2025 am 09:40 AM

예, 텍스트-랩을위한 점프 : Safari Technology Preview의 예쁜 착륙! 그러나 Chromium 브라우저에서 작동하는 방식과는 다른 점을 조심하십시오.

CSS- 트릭 연대기 XLIIIApr 23, 2025 am 09:35 AM

이 CSS- 트릭 업데이트는 Almanac, 최근 Podcast 출연, 새로운 CSS 카운터 가이드 및 귀중한 컨텐츠에 기여하는 몇 가지 새로운 저자의 추가 진전을 강조합니다.

Tailwind ' s @apply 기능은 소리보다 낫습니다Apr 23, 2025 am 09:23 AM

대부분의 경우 사람들은 Tailwind ' S 단일 프로퍼 유틸리티 중 하나 (단일 CSS 선언을 변경)와 함께 Tailwind ' s @apply 기능을 보여줍니다. 이런 식으로 선보일 때 @apply는 전혀 약속하는 소리가 들리지 않습니다. 그래서 Obvio

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.