이전에 배웠던 Html+css3 리뷰노트를 정리해보세요

1. html5의 새로운 기능

일반적으로 사용되는 의미 태그: 탐색 바닥글 헤더 섹션 표시

기능 태그 비디오 오디오 iframe 캔버스(캔버스 및 그리기 기능)

새로운 유형 입력: URL/숫자/범위/날짜(날짜, 월, 주, 시간 등)/검색/색상

2. CSS3

테두리 1개

border-radius: 다양한 할당 방법

상자 그림자:10px 10px 5px 빨간색;

border-image: 과제 내용

border-image-source 테두리에 사용되는 이미지의 경로입니다.

border-image-slice 이미지 테두리가 안쪽으로 오프셋되어 있습니다.

border-image-width 이미지 테두리의 너비입니다.

border-image-outset 테두리 이미지 영역이 테두리를 초과하는 정도입니다.

테두리-이미지-반복

이미지 테두리를 반복할지, 둥글게 할지, 늘려야 할지 여부입니다.

참고: IE9+는 border-radius 및 box-shadow를 지원합니다. .

IE11, Firefox, Opera 15, Chrome 및 Safari 6은 border-image 속성을 ​​지원합니다.

텍스트 2개

text-shadow:5px 5px 5px yellow (각 위치의 의미)

폰트 3종 다른 폰트 소개

@font-face 사용 방법

@font-face{

글꼴군:"Bazaha";

src: url(Chen Daiming Chalk Style Demonstration Version 2.otf);

}

애니메이션 4개

변환:translate(px)/rotate(도) /scale(2)/skew()/matrix()

참고: IE10, Firefox 및 Opera 지원 속성

Chrome 및 Safari에는 접두사 -webkit-이 필요합니다. Internet Explorer 9에는 접두사 -ms-가 필요합니다.

5가지 애니메이션 3D

변환 원본을 사용하면 변환되는 요소의 위치를 ​​변경할 수 있습니다. 과제에는 키워드 숙달이 필요합니다!

transform-origin: x-axis y-axis z-axis; // x-axis X축에서 뷰가 배치되는 위치를 정의합니다. 가능한 값:

transform-style은 중첩된 요소가 3D 공간에 표시되는 방식을 지정합니다!!!

관점!!!

backface-visibility는 화면을 향하지 않을 때 요소가 표시되는지 여부를 정의합니다.

뒷면 가시성: 숨김;

6과도한 전환

참고:

IE10, Firefox, Chrome 및 Opera는 전환 속성을 지원합니다.

Safari에는 접두사 -webkit-이 필요합니다.

참고: IE9 및 이전 버전은 전환 속성을 지원하지 않습니다.

하나의 속성에 4개의 전환 속성을 설정하는 데 사용되는 전환 단축 속성입니다.

전환 속성은 전환이 적용되는 CSS 속성의 이름을 지정합니다.

전환 기간은 전환 효과에 걸리는 시간을 정의합니다. 기본값은 0입니다.

전환 타이밍 함수는 전환 효과의 시간 곡선을 지정합니다. 기본값은 "쉽게"입니다.

다양한 속성 값을 알아야 합니다.

전환 지연은 전환 효과가 시작되는 시기를 지정합니다. 기본값은 0입니다.

7프레임 애니메이션

예:

@keyframes myfirst

{

출처: {배경: 빨간색;}

에서 {배경: 노란색;}

}

8 플로우 레이아웃 미디어 쿼리 반응형

유동 레이아웃: 백분율 레이아웃, 모든 크기는 상위 항목을 참조합니다.

참조 너비

미디어 쿼리 @media screen () 및 ()

반응형: 뷰포트 통합 쓰기

예시 참고:

텍스트 그림자

가로 그림자, 세로 그림자, 흐림 거리, 그림자 색상

텍스트 그림자: 5px 5px 5px #FF0000;

box-shadow 속성은 box-shadow 에 적용됩니다.

box-shadow: h-shadow y-shadow 흐림 확산 색상 삽입;

가로 그림자 위치 세로 그림자 위치 흐림 거리 그림자 크기 그림자 색상 바깥 그림자에서 안쪽 그림자 변경(시작)

div{box-shadow: 10px 10px 5px #888888;}

변환-원점: x축 y축 z축 x축 X축에서 뷰가 배치되는 위치를 정의합니다.

여러 열

열 개수:n;

열 간격:10px; 간격

열 규칙: 2px 빨간색; //테두리 구분선과 동일

크기 조정: 없음|둘 다|가로|세로;

horizontal 요소의 너비를 사용자가 조정할 수 있습니다.

세로 사용자가 요소의 높이를 조정할 수 있습니다.

div{크기 조정:둘 다;

오버플로:자동;

}