CSS3에는 어떤 모듈이 포함되어 있나요?

css3에 포함된 모듈은 다음과 같습니다: 1. HTML 목록에 스타일을 추가하는 데 사용되는 목록 모듈 2. 다중 열 텍스트를 더 쉽게 정의할 수 있도록 블록 레이아웃 모드를 확장하는 다중 열 레이아웃 , 색상 이름, rgb(), hsl() 등과 같은 다양한 색상을 정의하는 방법을 제공합니다. 4. CSS가 다른 장치에서 작동할 수 있도록 미디어 쿼리;

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

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

CSS 발전의 주요 변화는 CSS3를 일련의 모듈로 나누기로 한 W3C의 결정입니다.

2001년 초에 W3C는 CSS3의 사양 초안을 완성했습니다. CSS3 사양의 새로운 기능은 여러 개의 독립적인 모듈로 나누어져 있다는 것입니다.

• 한편으로는 여러 개의 작은 모듈로 나누는 것이 사양을 적시에 업데이트 및 게시하고 모듈 내용을 적시에 조정하는 데 더 편리합니다. 이러한 모듈은 독립적으로 구현 및 출시되며, 이는 또한 다음의 기반을 마련합니다. CSS의 향후 확장.

• 한편, 지원되는 장치 및 브라우저 제조업체의 제한으로 인해 장치 또는 제조업체는 CSS3 홍보에 도움이 되는 일부 모듈 및 CSS3 하위 집합을 선택적으로 지원할 수 있습니다.

다음은 2021년 1월 기준 CSS3의 각 모듈 사양입니다.

Time	Name	Last status	Module
1999.01. 27 - 2019.08.13	텍스트 장식 모듈	후보 추천	css-text-장식-3
1999.06.22 - 2018.10.1 8	페이지 매김 미디어 모듈	작업 초안	css-page-3
1999.06.23 - 2019.10.15	다중 열 레이아웃	작업 초안	css-multicol- 1
1999.06.22 - 2018.06.19	컬러 모듈	추천	css-color-3
1999.06.25 - 2014.03.20	네이밍 스페이스 모듈	권장	css-namespaces-3
1999.08.03 - 2018.11.06	selector	추천	selectors-3
2001.04.04 - 2012.06.19	미디어문의	추천	css3-mediaqueries
2001.05.17 - 2020.12.22	텍스트 모듈	후보 추천	css-text-3
2001.07.13 - 2021.02.11	계단식 및 상속	권장	css-cascade-3
2001 .07.13 - 2019.06.06	가치합계 단위 모듈	후보 추천	css-values-3
2001.07.26 - 2020.12.22	기본 박스 모델	후보 추천	css-box -3
2001.07.31 - 2018.09.20	폰트 모듈	추천	css-fonts-3
2001.09.24 - 2020.12.22	배경 및 테두리 모듈	후보 추천	css-Backgrounds-3
2002.02.20 - 2020.11.17	목록 모듈	작업 초안	CSS- lists-3
2002.05.15 - 2020.08.27	인라인 레이아웃 모듈	작업 초안	css-inline-3
2002.08.02 - 2018.06. 21	기본 사용자 인터페이스 모듈	추천	css-ui-3
2003.05.14 - 2019.08.02	콘텐츠 모듈 생성	작품 초안	css-content-3
2003.08.13 - 2019.07.16	구문 모듈	후보 추천	css-syntax-3
2004.02.24 - 2014.10.14	하이퍼링크 표시 모듈	workgroup Notes	css3-hyperlinks
2005.12.15 - 2015.03.26	템플릿 레이아웃 모듈	작업 그룹 메모	css -템플릿 -3
2006.06.12 - 2014.05.13	페이지가 매겨진 미디어 모듈에서 콘텐츠 생성	작업 초안	css-gcpm-3
2008.08.01 - 2014.10 .14	Marquee 모듈	작업 그룹 메모	css3-marquee
2009.07.23 - 2020.12.17	이미지 모듈	후보 추천	css-images-3
2010.12.02 - 2019.12.10	쓰기 모드	권장	css-writing -modes-3
2011.09 .01 - 2020.12.08	조건부 규칙 모듈	후보 추천	css3-conditionalr
2012.02.07 - 2020.0 5.19	포지셔닝 레이아웃 모듈	작업 초안	css-position-3
2012.02.28 - 2018.12.04	Fragment Module	후보자 추천	css-break-3
2012.06 .12 - 2020.04.21	박스 정리 모듈	작업 초안	css-align-3
2012.09.27 - 2020.12.18	폭 및 높이 크기 모듈	작업 초안	css - 사이징-3
2012.10.09 - 2017.12.14	카운터 스타일	후보 추천	css-counter-styles-3
2013.0 4.18 - 2 020.06.03	오버플로우 module	Working Draft	css-overflow-3
2014.02.20 - 2020.12.18	디스플레이 유형 모듈	후보 추천	css-display- 3

예:

css3 색상 모듈

CSS3은 색상의 영어 이름으로 표현되는 색상 표현 방법

• 을 지원합니다. 영문명은 색상을 표현하지만 그 표현이 매우 제한되어 기억하고 문의하기가 어렵습니다.

• 은 16진수 색상으로 표현됩니다. 색과 빛의 삼원색의 원리는 표에서 찾아볼 수 있다.

• 은 RGB(r, g, b)로 표현됩니다. 빛의 삼원색, 즉 빨간색 + 녹색 + 파란색의 원리.

• 은 hsl(Hue, Saturation, Lightness)로 표현됩니다. 색조 + 채도 + 밝기.

• 은 rgba(r, g, b, a)로 표현됩니다. 빛의 삼원색인 빨강, 초록, 파랑 ​​+ 투명도의 원리. a ∈ [0, 1], 0은 완전한 투명성을 나타냅니다.

• 는 hsla(색조, 채도, 밝기, 알파)로 표현됩니다. 색상, 채도, 밝기 + 투명도. alpha ∈ [0, 1], 0은 완전한 투명도를 나타냅니다.

CSS3 다중 열 레이아웃

CSS 다중 열 레이아웃 블록 레이아웃 모드를 확장하여 다중 열 텍스트를 더 쉽게 정의할 수 있습니다. 줄이 너무 길면 사람들은 텍스트를 읽는 데 어려움을 겪습니다. 한 줄의 끝에서 다음 줄의 시작 부분으로 이동하는 데 눈이 너무 오래 걸리면 현재 있는 줄을 잃게 됩니다. 따라서 큰 화면을 최대한 활용하려면 작성자는 신문처럼 다양한 너비의 텍스트 열을 나란히 배치해야 합니다.

css3 Media Query

모바일 기기의 급속한 인기로 인해 사용자는 더 이상 기존 컴퓨터 시스템을 통해서만 웹 콘텐츠를 탐색하지 않고 스마트폰, 태블릿 또는 기타 다양한 크기의 기기를 사용하여 탐색하고 있습니다. 웹 콘텐츠 다양한 디바이스를 사용하는 사용자가 좋은 경험을 할 수 있도록 하려면 미디어 쿼리가 필요합니다.

미디어 쿼리는 CSS 스타일 시트의 가장 중요한 기능 중 하나입니다. 소위 미디어 쿼리는 다양한 미디어 유형(장치)을 기반으로 다양한 장치(예: 컴퓨터, 휴대폰, 태블릿, 점자 장치 등)를 구별하는 것을 말합니다. 유형) 및 조건)에 대해 각각 다른 CSS 스타일을 정의합니다. 미디어 쿼리를 사용하면 CSS가 다른 장치 또는 동일한 장치의 다른 조건에서 더 정확하게 작동하여 모든 사용자가 좋은 사용자 경험을 얻을 수 있습니다.

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3에는 어떤 모듈이 포함되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!