CSS에서 운영 체제 스타일을 사용하는 방법

CSS2.1의 덜 알려진 기능 중 하나는 기본 운영 체제 테마에서 사용중인 글꼴과 색상을 정의하는 기능입니다. 이것은 더 엄격한 OS 통합이 필요한 상황에서 유용 할 수 있습니다 (예 : HTML 도움말 파일, Adobe Air 또는 오프라인 웹 응용 프로그램. 시작하기 전에 몇 가지 경고가 있습니다.

모든 OS/브라우저 조합에서 작동하는 이러한 특성에 의존하지 마십시오. 신청서가 Beos의 Opera에서 작동 해야하는 경우 먼저 테스트하는 것이 좋습니다!
• 속성은 외관 값 유형에 유리하여 CSS3에서 더 이상 사용되지 않았습니다 (현재 브라우저 지원은 매우 제한적이지만). 사용자가 OS에서 비정상적, 충돌 또는 못생긴 색 구성표를 정의하는 것을 막는 것은 없습니다. 페이지는 디자이너가 아니라 선택을 반영합니다
• .sys {font-size : 1em; } .sys th {font-weight : bold; 색상 : #fff; 배경색 : #888; } .sys, .sys td, .sys th {text-align : 왼쪽; 패딩 : 1px 3px; 테두리 : 1px Solid #666; 국경-콜라스 : 붕괴; } .sys .prop {font-weight : bold; } 시스템 폰트 시스템 글꼴은 '폰트'속성을 사용하여 할당됩니다. 가족, 규모 및 스타일은 모두 적절한 것으로 배정됩니다 (예 :

  다음 글꼴 값을 사용할 수 있습니다. '예'열에는 OS가 설정 한 현재 글꼴을 보여줍니다. 속성

  body
  {
  	font: caption;
  }
  

  설명 예 CaptionControls 글꼴 (버튼, 드롭 다운 등) ABC ABC 123 아이코콘 레이블 Fontabc ABC 123 Menumenu Fontabc ABC 123 Message-BoxDialog Box Fontabc ABC 123 Small-Captionsmall 제어 LabelSABC ABC 123 STATUS-BARSTATUS BAR FONTABC ABC 123 시스템 색상 시스템 색상은 색상 값을 기대하는 모든 속성에 할당 할 수 있습니다 (예 : 다음 색상 값을 사용할 수 있습니다. 가독성을 위해 Camelcase에 표시되지만 모든 케이스는 유효합니다. '예'열에는 OS에서 설정 한 색상이 표시됩니다. 속성 설명
  예 ActiveBorderactive 윈도우 테두리  ActiveCaptionActive Window 캡션  여러 문서 인터페이스의 appworkspacebackground 색상  BAC소  3D 디스플레이 요소의 경우 ButtonFace 색상  3D 디스플레이 요소를위한 ButtonHighlightDark 그림자 (빛에서 멀어짐)  3D 디스플레이 요소의 경우 ButtonShadowshadow 색상  푸시 버튼에서 ButtonTextText  캡션, 크기 상자 및 스크롤 바 화살표 상자의 CaptionTextText  GrayTextGrayed (비활성화) 텍스트 (OS에서 지원하지 않으면#000)  컨트롤에서 선택된 하이라이트  컨트롤에서 선택한 항목의 하이라이트 텍스트  비활성 보수 활성 창 경계  inactivecaptioninactive window 캡션  비활성 캡션에서 텍스트의 inactiveCaptionTextColor  툴팁 컨트롤을위한 InfoBackgroundbackground 색상  툴팁 컨트롤을위한 InfotextText 색상  Menumenu 배경  메뉴의 menutextText  scrollbarscroll bar 그레이 영역  3D 디스플레이 요소에 대한 Threddarkshadowdark 그림자  3D 디스플레이 요소의 경우 Threedfaceface 색상  3D 디스플레이 요소에 대한 3 히드 히 클리어 라이트 컬러  3D 디스플레이 요소 용 threedlightshadowlight 색상 (빛을 향함)  3D 디스플레이 요소를위한 Thredshadowdark 그림자  Windowwindow 배경  WindowframewIndow 프레임  Windows의 WindowTextText  이러한 속성이 다음 프로젝트에서 유용할까요? CSS 시스템 스타일에 대한 자주 묻는 질문

  body
  {
  	color: WindowText;
  	background-color: Window;
  	border: 2px solid ActiveBorder;
  }
  

  CSS 시스템 스타일이란 무엇입니까? 왜 중요한가? CSS 시스템 스타일은 운영 체제 또는 브라우저에 기초한 사전 정의 된 스타일 세트입니다. 개발자가 사용자의 시스템 환경 설정에 적응할 수있는 웹 페이지를 만들 수 있으므로보다 개인화되고 액세스 가능한 사용자 경험을 제공 할 수 있기 때문에 중요합니다. 예를 들어, 사용자가 시스템을 어두운 모드로 설정 한 경우 CSS 시스템 스타일로 스타일이있는 웹 페이지 가이 설정과 일치하도록 자동으로 조정할 수 있습니다. CSS 시스템 스타일은 일반 CSS 스타일과 어떻게 다른가요?

  일반 CSS 스타일은 개발자에 의해 정의되며 사용자의 시스템 설정에 관계없이 동일하게 유지됩니다. 반면에 CSS 시스템 스타일은 역동적이며 사용자의 시스템 선호도에 따라 변경 될 수 있습니다. 이로 인해 적응 가능하고 사용자 친화적 인 웹 디자인을 만들기위한 강력한 도구가됩니다.

  웹 디자인에서 CSS 시스템 스타일을 어떻게 사용할 수 있습니까?

  CSS 시스템 스타일은 다른 스타일과 마찬가지로 CSS 코드에서 사용할 수 있습니다. 주요 차이점은 고정 값을 지정하는 대신 시스템 색상 키워드를 사용한다는 것입니다. 예를 들어, 사용자의 시스템 창 배경과 일치하도록 배경색을 설정하려면 Code Backgr 일부 예제에는 버튼의 얼굴 색상에 대한 Buttonface, 선택한 텍스트 색상의 강조 표시 및 Windows의 텍스트 색상에 대한 Windowtext가 포함됩니다.

  모든 브라우저에서 지원되는 CSS 시스템 스타일은
  CSS 시스템 스타일은 Chrome, Firefox, Safari 및 가장자리를 포함한 대부분의 최신 브라우저에서 광범위하게 지원됩니다. 그러나 호환성을 보장하기 위해 여러 브라우저에서 웹 디자인을 테스트하는 것이 좋습니다.

  다른 CSS 스타일과 함께 CSS 시스템 스타일을 사용할 수 있습니까?

  예, CSS 시스템 스타일은 다른 CSS 스타일과 함께 사용할 수 있습니다. 이를 통해 브랜드와 적응할 수 있고 일관된 디자인을 만들 수 있습니다. CSS 시스템 스타일은 어떻게 접근성을 향상 시키는가? CSS 시스템 스타일은 웹 페이지가 사용자의 시스템 환경 설정에 적응할 수 있도록하여 접근성을 향상시킵니다. 이렇게하면 시각적 장애가있는 사용자가 사이트를 탐색 할 수 있습니다. 시스템 설정을 요구할 수 있도록 시스템 설정을 조정할 수 있습니다.

  CSS 시스템 스타일을 재정의 할 수 있습니까?

  예, CSS 코드에서 다른 스타일을 지정하여 CSS 시스템 스타일을 상체 할 수 있습니다. 그러나 이것은 시스템 스타일 사용의 적응성 이점을 무효화 할 것임을 명심하십시오.

  CSS 시스템 스타일 사용에 대한 단점이 있습니까?

  CSS 시스템 스타일 사용에 대한 잠재적 인 단점 중 하나는 다른 시스템에서 일관되지 않은 설계로 이어질 수 있다는 것입니다. 그러나 이것은 시스템 스타일과 일반 CSS 스타일의 조합을 사용하여 완화 할 수 있습니다.

  CSS 시스템 스타일에 대해 자세히 알아볼 수있는 곳은 어디입니까?

  CSS 시스템 스타일에 대해 온라인으로 제공 할 수있는 많은 리소스가 있습니다. 일부 권장 사이트에는 Mozilla Developer Network, W3C 및 Sitepoint가 포함됩니다.

위 내용은 CSS에서 운영 체제 스타일을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!