CSS3 코드와 CSS 사이에 차이점이 있나요?-CSS 튜토리얼-php.cn

CSS3 코드와 CSS 사이에 차이점이 있나요?

青灯夜游

풀어 주다： 2022-12-30 11:12:00

원래의

2439명이 탐색했습니다.

다름: css3은 css 기술의 업그레이드 버전입니다. 둥근 모서리, 그림자, 그라데이션, 미디어 쿼리 및 ":root"와 같은 웹 사이트 개발을 더 좋고 편리하게 만들 수 있는 몇 가지 새로운 속성과 선택기가 추가되었습니다. 선택. CSS3에는 호환성 문제가 있으며 지원을 위해 "-ms-"와 같은 브라우저별 접두사를 사용하여 일부 속성을 추가해야 합니다.

CSS3 코드와 CSS 사이에 차이점이 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

(학습 동영상 공유: css 동영상 튜토리얼)

CSS3은 CSS(Cascading Style Sheet) 기술의 업그레이드 버전으로 1999년에 공식화되었습니다. 2001년 5월 23일 W3C는 CSS3의 작업 초안을 완성했습니다. 주로 박스 모델, 목록 모듈, 하이퍼링크 모드, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 및 기타 모듈이 포함됩니다.

CSS 발전의 주요 변화는 CSS3를 일련의 모듈로 나누기로 한 W3C의 결정입니다. 브라우저 공급업체는 CSS의 속도에 맞춰 빠르게 혁신하므로 모듈식 접근 방식을 취하면 CSS3 사양의 요소가 서로 다른 속도로 발전할 수 있습니다. 왜냐하면 다양한 브라우저 공급업체는 특정 기능만 지원하기 때문입니다. 그러나 서로 다른 브라우저는 서로 다른 시기에 서로 다른 기능을 지원하므로 크로스 브라우저 개발도 복잡해집니다.

CSS3 구문

CSS3 구문은 원래 CSS 버전을 기반으로 하며, 이를 통해 사용자는 중복 클래스, ID 또는 JavaScript를 사용하지 않고도 태그에 특정 HTML 요소를 지정할 수 있습니다. 대부분의 CSS 선택기는 CSS3의 새로운 기능은 아니지만 이전 버전에서는 널리 사용되지 않았습니다. 깔끔하고 가벼운 태그를 만들고 구조와 성능을 더 잘 분리하려는 경우 고급 선택기가 매우 유용합니다. 고급 선택기는 태그의 클래스 및 ID 수를 줄여 디자이너가 스타일 시트를 더 쉽게 유지할 수 있도록 해줍니다.

새 선택기는 다음 표에 나와 있습니다.

을 포함하는 E 요소를 att 속성과 일치시킵니다. 와 일치합니다 E: selectedE::selectionNegative pseudo-class F 요소호환성 문제

Selector type	Expression	Description
하위 문자열 일치 속성 선택기	E [att^=" val"]	은 att 속성이 있고 값이 val
	E[att$="val"]	으로 시작하는 E 요소와 일치합니다. att 속성이 있는 E 요소와 일치합니다. 값이 val
	E[att*="val"]	로 끝나는 val E 요소로 시작하고 값이 val
structural pseudo-class	E:root	은 문서의 루트 요소와 일치합니다. HTML(Standard Universal Markup Language의 응용 프로그램)에서 루트 요소는 항상 HTML
	E:nth-child(n)	은 상위 요소의 n번째 하위 요소 E
	E:nth-last-child(n)	상위 요소의 마지막에서 n번째 구조적 하위 요소 E와 일치합니다
	E:nth-of-type(n)	n번째 형제 요소 E
	E:nth-last-of-type(n)	과 일치합니다. 동일한 유형의 두 번째 n번째 형제 요소 E 와 일치합니다.
	E:last-child	상위 요소의 마지막 E 요소와 일치
	E:first-of-type	동일한 레벨 요소의 형제 요소의 첫 번째 E와 일치
	E:only-child	상위 요소의 유일한 하위 요소인 E와 일치합니다.
	E:only-of-type	은 유일한 형제인 E와 일치합니다. 동일한 유형의 요소 E
	E: 비어 있음	은 하위 요소(텍스트 노드 포함)가 없는 요소와 일치합니다. URL 지정된 E 요소
UI 요소 상태 의사 클래스	E:enabled	는 사용자 인터페이스(양식 양식)에서 사용 가능한 상태의 모든 E 요소와 일치합니다.
E:disabled	사용자에서 사용할 수 없는 상태에 있는 모든 E 요소와 일치합니다. 인터페이스(양식 양식)
	사용자 인터페이스(양식 양식)에서 선택된 상태에 있는 모든 요소 E와 일치
	사용자가 선택하거나 강조 표시한 E 요소의 부분과 일치
	E:not(s)	match 단순 선택기와 일치하지 않는 모든 요소 E s
범용 형제 요소 선택기	E ~ F	E 요소와 일치하는 F
	css3의 새로운 기능	css3에는 많은 새로운 기능이 추가되었습니다. 둥근 모서리, 그래픽 테두리, 블록 그림자 및 텍스트 그림자, RGBA를 사용하여 투명 효과 달성, 그라데이션 효과, @Font-Face를 사용하여 사용자 정의 글꼴, 다중 배경, 텍스트 또는 이미지 달성 변환 처리(회전, 크기 조정, 기울이기, 이동) ), 다중 열 레이아웃, 미디어 쿼리 등

브라우저 제조업체는 이전에 CSS3를 구현해 왔습니다. 실제 표준이 되지는 않았지만 브라우저별 접두사를 제공합니다.

Chrome(Google Chrome): -webkit -

Safari (Safari): -webkit-

제조업체 접두사가 있는 스타일을 사용할 때는 접두사가 없는 스타일도 사용해야 한다는 점에 유의해야 합니다. 이렇게 하면 브라우저가 접두사를 제거하고 표준 CSS3 사양을 사용할 때 스타일이 계속 유효하게 됩니다. 예:
```
#example{
  -webkit-box-shadow：0 3px 5px#FFF;
  -moz-box-shadow：0 3px 5px#FFF;
  -o-box-shadow：0 3px 5px#FFF;
  box-shadow：0 3px 5px#FFF;/*无前缀的样式*/
}
```
로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 CSS3 코드와 CSS 사이에 차이점이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!