기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS 소개

CSS는계단식 스타일 시트(Cascading Style Sheets의 약어)는 그래픽 정보를 더 잘 표시하거나 멋지고 친숙한 대화형 경험을 생성하기 위해 HTML 페이지의 스타일을 정밀하게 제어하는 ​​데 사용됩니다.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

CSS 파일의 접미사는 다음과 같습니다. .css

논평

/* 注释的内容 */
1

스타일을 추가하는 세 가지 방법

1. 스타일 인라인 스타일

<span style="color: red">红色文字</span>
1

2. CSS 스타일 선택기를 통해 추가

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. 상속

컨테이너 내의 요소는 컨테이너에 추가된 스타일을 얻습니다.

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• 텍스트 스타일 속성은 모두 상속됩니다. 이러한 속성에는 색상, 텍스트로 시작, 줄로 시작 및 글꼴로 시작이 포함됩니다.
• 상자, 위치 지정 및 레이아웃 속성은 상속될 수 없습니다.

최종 스타일은 누가 결정하나요?

브라우저 기본 스타일, 스타일 인라인 스타일, 다양한 CSS 선택기에 의해 추가된 스타일, 상위 요소에서 상속된 스타일 등 요소에 대한 스타일 소스가 많기 때문에 최종 스타일은 여러 스타일 중에서 가장 높은 우선순위를 갖는 스타일이 됩니다. 스타일.

CSS 스타일 우선순위

https://blog.csdn.net/weixin_41192489/article/details/139720467

스타일의 필수 기본

CSS 길이 단위

https://blog.csdn.net/weixin_41192489/article/details/140236423

CSS 함수

https://blog.csdn.net/weixin_41192489/article/details/140318834

박스 모델

https://blog.csdn.net/weixin_41192489/article/details/102411612

• 높이와 행 높이 모두 상자를 열 수 있지만 배경 이미지는 상자를 열 수 없습니다.

인라인 요소에 대해 참고할 사항

• 인라인 요소는 시작과 끝 부분에만 내부 및 외부 여백을 표시할 수 있으므로 최대한 피해야 하므로 인라인 요소에는 내부 및 외부 여백을 설정하지 마세요.

• 인라인 요소를 래핑한 후에는 테두리 표시가 쌓이고 무질서해지기 때문에 인라인 요소에 테두리를 설정하지 마세요!

• 인라인 요소에 테두리/내부 및 외부 여백을 추가해야 하는 경우 인라인 상자로 변환하세요.

  display：inline-block
  1

어떤 스타일을 추가할 수 있나요?

유니버설 스타일

스타일은 거의 모든 HTML 요소에 추가할 수 있습니다.

폭 높이

• width: 기본값은 콘텐츠의 너비입니다(상자 너비가 아님).
• height: 기본값은 콘텐츠의 높이입니다(상자 높이가 아님).

다음 스타일을 통해 요소의 기본 표준 상자 모델을 IE 상자 모델로 변경할 수 있습니다.

box-sizing:border-box;
1

이 시간에

• 너비: 상자의 너비(왼쪽 테두리 + 왼쪽 패딩 + 콘텐츠 너비 + 오른쪽 패딩 + 오른쪽 테두리)
• height: 상자의 높이(상단 테두리 + 상단 패딩 + 콘텐츠 높이 + 하단 패딩 + 하단 테두리)

심

• 음수 값은 지원되지 않습니다
• 가로든 세로든 백분율 값은 너비를 기준으로 계산됩니다.

padding: 10px;
1

패딩: 상하좌우 10px

padding:10px 5px;
1

상단 및 하단 패딩은 10px입니다.

오른쪽 및 왼쪽 패딩은 5px입니다.

padding:10px 5px 15px;
1

상단 패딩은 10px입니다.

오른쪽 및 왼쪽 패딩은 5px입니다.

하단 패딩은 15px입니다.

padding:10px 5px 15px 20px;
1

상단 패딩은 10px입니다.

오른쪽 패딩은 5px입니다.

하단 패딩은 15px입니다.

왼쪽 패딩은 20px입니다.

국경 국경

관련 스타일도

• 둥근 테두리 테두리 반경
• 테두리 채우기 테두리 이미지
• 개요개요

자세히보다 https://blog.csdn.net/weixin_41192489/article/details/140325106

여유

https://blog.csdn.net/weixin_41192489/article/details/115140348

오버플로오버플로

• visible [기본값] 스크롤바를 자르거나 추가하지 않고 초과된 내용을 모두 표시합니다.
• 숨김: 스크롤 막대를 숨기고 개체 크기를 초과하는 내용을 표시하지 않지만 여전히 스크롤할 수 있습니다.
• auto: 내용이 초과되지 않으면 스크롤 막대가 표시되지 않습니다. 내용이 초과하면 스크롤 막대가 표시됩니다.
• 스크롤: Windows 플랫폼에서는 콘텐츠가 제한을 초과하는지 여부에 관계없이 스크롤 막대가 항상 표시됩니다. Mac 플랫폼에서는 auto 속성과 동일합니다.

오버플로 값이 auto 및 스크롤인 컨테이너는 롤링 컨테이너(스크롤 막대가 있는 컨테이너)입니다. 호환성 문제로 인해 공백에 패딩을 사용하지 않는 것이 좋습니다. 스크롤 컨테이너의 하단 패딩은 흰색입니다.

투명도불투명도

속성 값의 범위는 0.0(완전 투명)부터 1.0(완전 불투명)까지입니다. 범위 제한인 0~1을 초과하는 경우 최종 계산된 값은 경계 값입니다.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

배경 배경

https://blog.csdn.net/weixin_41192489/article/details/140301618

섀도우박스-섀도우

그림자는 상자의 크기를 변경하지 않으며 형제 요소의 레이아웃에 영향을 주지 않습니다. 더 나은 효과를 얻고 3차원 효과를 향상시키기 위해 여러 테두리 그림자를 설정할 수도 있습니다.

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• 수평 오프셋: 오른쪽은 양수 값, 왼쪽은 음수 값입니다.
• 수직 오프셋: 양수 값은 아래쪽으로, 음수 값은 위쪽으로.
• 흐림 수준: 음수일 수 없습니다.
• 내부/외부 그림자 - 삽입은 내부 그림자이며 외부 그림자로 기록되지 않습니다.

box-shadow: 15px 21px 48px -2px #666;
1

자주 사용되는 그림자

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

더 많은 사용법 보기
https://developer.mozilla.org/zh-CN/docs/웹/CSS/박스-섀도우

• [실용] 입력란 자동 채우기 배경색 덮어쓰기

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [실용] 버튼 누름 색상을 일괄 수정

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【실제 전투】마스킹 효과에 대한 초보자 가이드

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

클립 클립 경로

https://blog.csdn.net/weixin_41192489/article/details/121341551

• [실용] 클립 경로는 PPT와 유사한 전환 애니메이션을 구현합니다.
  https://www.zhangxinxu.com/wordpress/2019/05/css-전송-애니메이션

변형변형

https://blog.csdn.net/weixin_41192489/article/details/140314866

줌줌

Firefox 브라우저는 이를 지원하지 않습니다. 다음과 같은 속성 값을 가질 수 있습니다.

• 백분율 값.zoom:50%, 이는 원래 크기의 절반으로 축소됨을 나타냅니다.
• 수치.zoom:0.5, 이는 원래 크기의 절반으로 축소됨을 나타냅니다.
• normal키워드.zoom:normal동등하다zoom:1, 기본값입니다.
• reset키워드.zoom:reset , 이는 사용자가 Ctrl과 − 또는 Ctrl과 +를 눌러 문서를 확대/축소할 때 요소가 그에 따라 축소되거나 확대되지 않음을 나타냅니다. 하지만 이 키워드는 호환성이 좋지 않아 Safari 브라우저에서만 지원됩니다.

Zoom과 scale() 함수 비교

• zoom속성 스케일링의 중심 좌표는 요소의 왼쪽 상단 모서리를 기준으로 하며 수정할 수 없습니다.transform변형scale()함수 스케일링의 기본 중심 좌표는 요소의 중심점입니다.
• 확대/축소 속성 크기 조정은 요소가 차지하는 크기 공간을 실시간으로 변경하고 다시 그리기 및 재계산을 트리거합니다. 따라서 확대/축소 속성 크기 조정의 성능은 scale() 함수의 성능보다 떨어집니다.
• 요소에 확대/축소 속성을 적용하면 계단식 컨텍스트가 생성되지 않으며 고정 요소의 위치 지정 및 오버플로 속성에 의한 절대 위치 요소의 오버플로 숨기기에 영향을 주지 않으며 절대 위치 요소의 포함 블록도 변경되지 않습니다.

마스크 마스크

https://blog.csdn.net/weixin_41192489/article/details/121158821

그라데이션기울기

https://blog.csdn.net/weixin_41192489/article/details/140316024

다양한 유형의 요소에 대한 고유한 스타일

텍스트

https://blog.csdn.net/weixin_41192489/article/details/140264311

하이퍼링크

의사 클래스 스타일 - 다음과 같은 고정된 순서로 작성되어야 합니다.

• :link "링크": 하이퍼링크를 클릭하기 전 - href 속성(앵커 제외)이 있는 모든 하이퍼링크에 적용 - 생략 가능, a 태그에서 축약됨
• :visited "Visited": 링크를 방문한 후 - 생략 가능, a 태그로 축약됨
• :hover "hover": 마우스가 라벨 위에 있을 때
• :active "활성화": 마우스가 라벨을 클릭했지만 놓지 않을 때.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

그림

사진 필터 필터

https://www.runoob.com/cssref/css3-pr-filter.html

상

• 글꼴 두께를 사용하여 반응형 아이콘 구현
  글꼴 크기가 클수록 아이콘 글꼴이 더 세밀해지고, 글꼴 크기가 작을수록 아이콘 글꼴이 더 단순해집니다.
  https://demo.cssworld.cn/8/5-1.php

• CSS 아이콘 병합 - ClipPath Sprites 기술
  https://blog.csdn.net/weixin_41192489/article/details/121242735

시트

마우스를 올리면 행 강조 표시

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

색상의 행이 번갈아 가며

데이터 행 간의 색상이 번갈아 바뀌면 사용자의 독서 피로가 줄어들 수 있습니다.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

스크롤

마우스 커서

커서

커서 색상 캐럿 색상
입력 상자 삽입 커서의 색상 설정(IE 및 Edge 브라우저에서는 아직 지원되지 않음)

input {
    caret-color: red;
}
1
2
3

관련 스타일 표시 및 숨기기

요소를 숨길 수 있는 다음 스타일이 없는 경우 해당 요소가 표시됩니다(일부는 캐스케이드가 덮여 있기 때문에 표시되지 않음).

• display: none [일반적으로 사용됨] 숨겨진 요소, 공간을 차지하지 않음, 리소스 로드 및 DOM 액세스 가능(html 태그에 숨겨진 요소를 추가하면 태그 표시가 없음으로 변경됨)
• visibility: hidden 숨겨진 요소가 위치를 차지하고 리소스가 로드되며 DOM에 액세스할 수 있습니다.
  • 상위 요소가 visible:hidden을 설정하면 하위 요소도 표시되지 않습니다(상속).
  • 하위 요소에 visible:visible이 설정된 경우 해당 하위 요소가 다시 표시됩니다.
• opacity: 0 요소는 보이지 않고 위치를 차지하며 클릭하거나 선택할 수 있습니다.
• clip: rect(0 0 0 0) 요소가 보이지 않고 클릭할 수 없으며 공간을 차지하지 않지만 키보드로 접근할 수 있습니다.
• 음수 Z-인덱스 값은 요소를 숨깁니다. 요소는 보이지 않으며 클릭할 수 없지만 공간을 차지하고 키보드에서 액세스할 수 있습니다.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

위치 의존적 스타일

페이지에서 요소의 위치는 위치 지정, 표시, 부동, 여백 등을 포함한 다양한 스타일에 의해 결정됩니다.

포지션, 디스플레이, 플로트가 동시에 존재할 경우, 아래 링크에 설명된 로직에 따라 해당 요소의 최종 디스플레이 효과가 결정됩니다.

https://blog.csdn.net/weixin_41192489/article/details/119009647

위치 위치

https://blog.csdn.net/weixin_41192489/article/details/140242430

레이아웃표시

https://blog.csdn.net/weixin_41192489/article/details/140250775

여유

https://blog.csdn.net/weixin_41192489/article/details/115140348

조정

https://blog.csdn.net/weixin_41192489/article/details/140255028

계단식 Z-색인

https://blog.csdn.net/weixin_41192489/article/details/140297366

상호작용 관련 스타일

부드러운 스크롤 스크롤 동작: 부드러운

https://blog.csdn.net/weixin_41192489/article/details/121365831

스트레치 크기 조정

https://blog.csdn.net/weixin_41192489/article/details/121396794

장치 적응 관련 스타일

미디어문의 @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

[실용성] 모바일 단말 적응 솔루션(3종)

https://blog.csdn.net/weixin_41192489/article/details/120999355

사용자 정의 CSS 스타일(CSS 변수/사용자 정의 속성)

https://blog.csdn.net/weixin_41192489/article/details/140317369

CSS 작성 효율성 향상

CSS 전처리기

CSS 전처리기는 CSS에 일부 프로그래밍 기능을 추가하는 데 사용되는 특수 프로그래밍 언어입니다(CSS 자체는 프로그래밍 언어가 아닙니다). CSS 전처리기는 궁극적으로 표준 CSS 스타일을 컴파일하고 출력하므로 브라우저 호환성 문제를 고려할 필요가 없습니다. CSS 전처리기에서 변수, 간단한 논리적 판단, 함수 등 기본적인 프로그래밍 기술을 사용할 수 있습니다.

주류 CSS 전처리기에는 Sass(Scss), Less 및 Stylus가 포함됩니다.
(SASS는 버전 3.0부터 SCSS로 이름이 변경되었습니다.)

• Scss 실용 튜토리얼
  https://blog.csdn.net/weixin_41192489/article/details/134313564

CSS 프레임워크

• UnoCSS 실용 튜토리얼
  https://blog.csdn.net/weixin_41192489/article/details/140034188

CSS 코딩 규칙

• 브라우저 기본 스타일 재설정
• 스타일을 사용하지 마십시오.
• 단위는 속성 값이 0인 경우에만 생략 가능
• 값은 일반적으로 짝수입니다(예: 5px 대신 6px)(특히 줄 높이와 글꼴 크기는 차이가 2로 나누어져 글꼴이 줄 중앙에 오도록 합니다).
• 클래스 이름은 의미론적이어야 합니다. 그래야 클래스 이름이 어떤 요소에 작용하는지/클래스 이름으로 달성되는 스타일 효과를 한눈에 식별할 수 있습니다.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

권장 텍스트 스타일

• 글꼴 크기 사용: 중간; 텍스트 컨테이너의 경우(브라우저 기본 크기가 변경되면 그에 따라 텍스트가 확대되거나 축소될 수 있음)
• 상대 단위(% 또는 em)를 사용하는 텍스트 컨테이너 내의 텍스트
• em을 텍스트 여백 단위로 사용

고성능 애니메이션

CSS 고성능 애니메이션의 세 가지 요소는 절대 위치 지정, 불투명 속성 및 변환 속성을 나타냅니다. 따라서 먼저 변환 속성을 사용하여 동일한 애니메이션 효과를 얻습니다. 예를 들어 요소 이동 애니메이션은 여백 속성이 아닌 변형 속성을 사용해야 합니다.