Latest web development tutorials
×

CSS 참조 설명서

CSS 참조 설명서 CSS 선택자 CSS 음성 참조 CSS Web 안전 글꼴 CSS 생기 CSS 단위 CSS 색 CSS 법률 색상 값 CSS 색 이름 CSS 16 진수 색상 값 CSS 브라우저 지원

CSS 재산

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight grid-columns grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS3의 @media 쿼리

예

문서 미만 300 픽셀 폭 경우 배경 프리젠 테이션 (배경 색상)을 수정하는 것입니다 :

@media 화면과 (최대 폭 : 300 픽셀) {
몸 {
배경 색상 : 연한 파랑;
}
}

»시도

정의 및 사용

당신은 다른 매체 유형에 대해 서로 다른 스타일을 정의 할 수 있습니다, @media 쿼리를 사용합니다.

@media가 다른 화면에 설정할 수있는 미디어가 매우 유용합니다 @ 당신이 디자인 응답 페이지를 설정해야합니다 특히, 서로 다른 스타일의 크기.

이 과정의 브라우저 크기를 재설정 할 때, 페이지를 다시 렌더링되는 브라우저의 폭 및 높이에 기초하여 상기 페이지.

브라우저 지원

테이블의 수치는 지원 @media 규칙을 먼저 브라우저의 버전 번호를 나타냅니다.

규칙
@media (21) 9 3.5 4.0 9

CSS 구문

만 (| 아니 | @media의 MediaType과{미디어 기능)
CSS-코드;
}

또한 다른 미디어에 대해 서로 다른 스타일 시트를 사용할 수 있습니다 :

<링크 REL = "스타일"미디어 = "MediaType에와 | 없습니다 | 전용 (미디어 기능)"HREF = "mystylesheet.css">

미디어 유형

값 기술
모든 모든 장치
귀의 사용되지 않습니다. 음성 및 음성 합성을위한
점자 사용되지 않습니다. 터치 피드백에 사용되는 점자 장비
양각 사용되지 않습니다. 인쇄 블라인드 인쇄 장치
핸드 헬드 사용되지 않습니다. 이러한 PDA와 작은 전화기 등의 휴대용 기기 또는 작은 장치에 대한
인쇄 프린터 및 인쇄 미리보기
투사 사용되지 않습니다. 프로젝션 장비
화면 컴퓨터 화면, 태블릿 PC, 스마트 폰 등을하십시오.
연설 화면 판독기 및 기타 음향 장비에 적용
청각 장애 사용되지 않습니다. 이러한 휴대 장치의 전신, 단말 장치와 같이 제한된 문자, 문자 격자 고정
TV 사용되지 않습니다. TV와 웹 TV에 대한

미디어 기능

값 기술
종횡비 높이 비율이 페이지 폭의 가시 영역에서의 출력 장치를 정의
색 각 그룹의 컬러 원고의 수를 출력 장치를 정의한다. 이 색상 소자가 아닌 경우,이 값은 0과 같다
색상 색인 컬러 룩업 테이블 내의 엔트리의 수는 출력 장치로 정의된다. 만약 컬러 룩업 테이블을 사용하지 않는 경우,이 값은 0과 같다
장치 종횡비 높이 비율로 정의 화면 출력 장치 표시 폭.
장치 높이 정의 화면 출력 장치 볼 높이.
장치 폭 정의 화면 출력 장치 표시 폭.
그리드 출력 장치는 그리드 또는 격자 여부를 조회하는데 사용.
신장 페이지 높이의 가시 영역에서의 출력 장치를 정의한다.
최대 종횡비 정의 화면 출력 장치 폭과 높이의 최대 비 표시.
최대 컬러 출력 장치의 최대 개수를 컬러 원고들의 각 세트를 정의한다.
최대 컬러 인덱스 컬러 룩업 테이블 엔트리의 최대 수는 출력 장치로 정의된다.
최대-장치 종횡비 정의 화면 출력 장치 폭과 높이의 최대 비 표시.
최대 기기 높이 화면의 최대 높이에 표시 출력 디바이스를 정의한다.
최대-장치 폭 정의 화면 출력 장치 최대 표시 폭.
최대 높이 페이지의 최대 높이의 가시 영역에서의 출력 장치를 정의한다.
최대 - 흑백 버퍼가 픽셀 당 포함 단색 프레임에 정의되어 흑백 원고의 최대 개수이다.
최대 해상도 최대 해상도는 장치를 정의한다.
최대 폭 페이지의 최대 폭의 가시 영역에서의 출력 장치를 정의한다.
분 종횡비 가로 세로 페이지 표시 최소 비율의 영역에서의 출력 장치를 정의한다.
분 컬러 출력 장치에게 컬러 원고들의 각 세트의 최소 수를 정의한다.
분 컬러 인덱스 컬러 룩업 테이블 내의 엔트리들의 최소 수는 출력 장치로 정의된다.
분 기기 종횡비 스크린은 폭과 높이의 출력 장치에 표시 최소 비율을 정의한다.
분 기기 폭 화면 출력 장치는 표시의 최소 폭을 정의.
분 기기 높이 최소 출력 장치의 화면 표시의 높이를 정의한다.
최소 높이 페이지의 최소 높이의 가시 영역에서의 출력 장치를 정의한다.
분 - 흑백 컬러 원고의 최소 수는 단색 프레임 버퍼에 정의 된 픽셀 당 포함
분 해상도 최소 해상도 장치를 정의한다.
최소 폭 페이지의 최소 폭의 가시 영역에서의 출력 장치를 정의한다.
흑백의 흑백 프레임 버퍼에 정의 된 픽셀 흑백 원래 번호 당이 포함되어 있습니다. 이 단색 장치가 아닌 경우, 그 값은 0과 같다
방향 페이지 높이의 가시 영역에서의 출력 장치를 정의하는 폭보다 크거나 같다.
해결 장치의 해상도를 정의한다. 예를 들면 : 96dpi, 300DPI, 118dpcm
주사 장비의 스캐닝 프로세스 정의 TV 유형입니다.
폭 페이지 폭의 가시 영역에서의 출력 장치를 정의한다.

예

더 많은 예제

예

반응 형 디자인을 만들 수 @media 쿼리를 사용합니다 :

@media 만 화면 (최대 폭 : 500 픽셀) {
.gridmenu {
폭 : 100 %;
}

.gridmain {
폭 : 100 %;
}

.gridright {
폭 : 100 %;
}
}

»시도

관련 페이지

CSS 자습서 : CSS 미디어 유형