"CSS3 최신 버전 참조 매뉴얼"은 CSS3 공식 온라인 참조 학습 매뉴얼입니다. 이 CSS3 온라인 개발 매뉴얼에는 다양한 CSS3 속성, 구문, 정의, 사용 방법, 예제 조작 등이 포함되어 있습니다. 웹 프론트엔드 학습자와 개발자에게 꼭 필요한 책입니다. 매뉴얼 문서를 온라인으로 확인해보세요! 참고: CSS3은 CSS 기술의 업그레이드 버전입니다. CSS3 언어 개발은 모듈화를 향해 발전하고 있습니다. 이러한 모듈에는 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 등이 포함됩니다.
CSS3는 CSS(Cascading Style Sheets) 기술의 업그레이드 버전으로 1999년에 공식화되었습니다. 2001년 5월 23일 W3C는 주로 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈을 포함하는 CSS3 작업 초안을 완성했습니다. 테두리, 텍스트 효과 및 다중 열 레이아웃과 같은 배경 및 모듈.
CSS 발전의 주요 변화는 CSS3를 일련의 모듈로 나누기로 한 W3C의 결정입니다. 브라우저 공급업체는 CSS의 속도에 맞춰 빠르게 혁신하므로 모듈 접근 방식을 채택하면 다양한 브라우저 공급업체가 특정 기능만 지원하므로 CSS3 사양의 요소가 다양한 속도로 발전할 수 있습니다.
그러나 서로 다른 브라우저는 서로 다른 시기에 서로 다른 기능을 지원하므로 크로스 브라우저 개발도 복잡해집니다.
CSS는 웹페이지의 스타일과 레이아웃을 제어하는 데 사용됩니다. CSS3은 최신 CSS 표준입니다.
CSS3 언어 기본
CSS3의 구문은 CSS의 원본 버전을 기반으로 하며, 이를 통해 사용자는 중복 클래스, ID 또는 JavaScript를 사용하지 않고도 태그에 특정 HTML 요소를 지정할 수 있습니다.
대부분의 CSS 선택자는 CSS3에 새로 추가되지 않았으며 이전 버전에서는 널리 사용되지 않았습니다.
깔끔하고 가벼운 태그와 구조와 성능의 더 나은 분리를 원한다면 태그의 클래스와 ID 수를 줄이고 디자이너가 스타일 시트를 더 많이 유지할 수 있도록 하는 고급 선택기가 매우 유용합니다. 용이하게.
첫 번째 CSS3 인스턴스 생성 및 실행
Instance
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
아주 간단하고 재미있지 않나요! CSS3의 원리는 CSS의 원리와 동일합니다. 웹 페이지에서 스타일 시트의 선택자를 사용자 정의한 다음 웹 페이지에서 이러한 선택자를 대량으로 참조하는 것입니다.
팁: CSS3 튜토리얼은 CSS3의 새로운 기능과 동시에 여러 웹페이지의 스타일과 레이아웃을 제어하는 방법을 단계별로 배우는 데 도움이 됩니다. 궁금하신 점이 있으시면 PHP 중국어 홈페이지 CSS3 Community에 가셔서 질문해주시면 열성적인 네티즌들이 답변해드리겠습니다.
CSS3의 장점
개발 비용 및 유지 관리 비용 절감
CSS3이 등장하기 전에 개발자는 둥근 모서리 효과를 얻기 위해 하나 이상의 이미지를 사용하여 추가 HTML 태그를 추가해야 하는 경우가 많았습니다. CSS3에는 하나의 태그만 필요하며 이는 CSS3의 border-radius 속성을 사용하여 수행할 수 있습니다.
이런 식으로 CSS3 기술은 사람들이 이미지를 그리고 자르고 최적화하는 작업에서 해방될 수 있게 해줍니다.
나중에 둥근 모서리의 호나 색상을 조정해야 하는 경우 CSS2.1을 사용하여 이미지를 처음부터 그리고 잘라내야 이를 달성할 수 있습니다. CSS3을 사용하면 border-radius 속성 값만 수정하면 됩니다. 수정을 빠르게 완료하려면
CSS3에서 제공하는 애니메이션 기능을 사용하면 개발자는 일부 동적 버튼이나 동적 탐색을 구현할 때 JavaScript를 사용하지 않아도 됩니다. 따라서 개발자는 일부 동적 버튼이나 동적 탐색에 적응하기 위해 스크립트를 작성하거나 적합한 스크립트 플러그인을 찾는 데 많은 시간을 소비할 필요가 없습니다. 동적 웹사이트 효과.
페이지 성능 향상
많은 CSS3 기술은 동일한 시각적 효과를 제공하여 이미지를 "대체"합니다. 즉, 중복된 태그 중첩과 웹 개발을 수행할 때 사용되는 이미지 수를 줄입니다. 다운로드할 콘텐츠가 줄어들고 페이지가 더 빨리 로드됩니다.
또한 이미지, 스크립트 및 플래시 파일 수가 적으면 사용자가 웹 사이트를 방문할 때 HTTP 요청 수를 줄일 수 있으며 이는 페이지 로딩 속도를 향상시키는 가장 좋은 방법 중 하나입니다. CSS3를 사용하여 그래픽 웹 사이트를 만들면 이미지가 필요하지 않으므로 HTTP 요청 수가 크게 줄어들고 페이지 로딩 속도가 향상됩니다.
예를 들어 CSS3 애니메이션 효과는 JavaScript 및 Flash 파일에 대한 HTTP 요청을 줄일 수 있지만, 애니메이션 효과 렌더링을 완료하려면 브라우저에서 많은 작업을 수행해야 할 수 있으며, 이로 인해 브라우저의 응답 속도가 느려지고 사용자 손실.
따라서 복잡한 특수 효과를 사용할 때는 신중하게 생각해야 합니다. 실제로 많은 CSS3 기술은 어떤 상황에서도 페이지 성능을 크게 향상시킬 수 있습니다.
CSS3은 이전 버전과 완전히 호환되므로 계속 작동하기 위해 디자인을 수정할 필요가 없습니다. 웹 브라우저는 CSS2도 계속 지원할 예정입니다.
이 CSS3 튜토리얼 매뉴얼에서 다루는 내용
이 CSS3 튜토리얼 매뉴얼은 둥근 모서리 효과, 그래픽 테두리, 블록 그림자 및 텍스트 그림자를 포함한 모든 새로운 CSS3 기능을 다루며, RGBA를 사용하여 투명도 효과, 그라디언트 효과를 구현하고 @ Font-Face 구현을 사용합니다. 사용자 정의 글꼴, 다중 배경 이미지, 텍스트 또는 이미지 변형 처리(회전, 크기 조정, 기울이기, 이동), 다중 열 레이아웃, 미디어 쿼리 및 기타 새로운 기능 소개 및 실행 예제.
팁: 이 튜토리얼의 각 장에는 많은 CSS3 예제가 포함되어 있습니다. "예제 실행" 버튼을 직접 클릭하면 실행 결과를 온라인으로 볼 수 있습니다. 이러한 예는 새로운 CSS3 기능을 더 잘 이해하고 사용하는 데 도움이 됩니다.
기타 CSS3 관련 학습 참조 리소스
이 페이지 오른쪽의 지식 확장 외에도 다음 리소스도 모두를 위해 선택되었습니다
최신 장
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
관련 강좌
- 웹 프론트 엔드 개발에 대한 빠른 소개 2021-12-10
- 당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본] 2022-09-30
- Gulp 시작하기 비디오 튜토리얼 2022-04-18
- 전우 Gao Luofeng CSS3 비디오 튜토리얼 2022-04-20
- AngularJS 개발 웹 애플리케이션 기본 예제 비디오 튜토리얼 2022-04-18
- Ajax 전체 접촉 2022-04-13
- MUI 프레임워크 기본 비디오 튜토리얼 2022-04-13
- 온라인 교육 수업 체험 수업 2019-01-10