CSS의 모든 일반적인 데이터 유형-CSS 튜토리얼-php.cn

이 글에서는 CSS의 일반적인 데이터 유형에 대해 설명합니다. CSS의 속성 값에는 다양한 형식이 있습니다. 사용자 에이전트(예: 브라우저)가 값이 유효한지 인식하려면 값이 이 유형의 값에서 지원하는 형식 중 하나를 준수하는지 확인해야 합니다. 이러한 속성 값이 지원하는 형식을 데이터 유형이라고 하며, 사양에서는 형식으로 식별됩니다.

CSS에는 특정 데이터 유형과 일반 데이터 유형이라는 두 가지 데이터 유형이 있습니다. 특정 데이터 유형은 단일 속성 또는 속성 클래스에만 연관됩니다. 예를 들어, 데이터 유형 은 변환 속성의 값으로만 사용될 수 있습니다.

반면에 일반 데이터 유형은 특정 속성과 연결되지 않습니다. 예를 들어, 데이터 유형의 값은 10px이며 여백, 글꼴 크기 및 기타 일련의 속성에 사용될 수 있습니다.

이 기사에서는 일반적으로 모든 일반적인 데이터 유형에 대해 이야기하겠습니다.

디렉터리 이름 유형

텍스트 값 키워드

텍스트 값 참조 문자열 리소스 로케이터 기본 수치 값 실수

측정 각도 < ;angle>

측정 빈도 <주파수>

기타 색상

기타 사진 <이미지>

기타 위치 < 위치>

텍스트 데이터 유형

키워드

키워드 데이터 유형은 CSS에 사전 정의된 키워드를 의미합니다. 이 유형에는 표시 속성의 블록 값과 같은 특정 속성에 고유한 값뿐만 아니라 CSS에서 일반적으로 사용되는 초기, 상속 및 설정 해제도 포함됩니다.

.foo { border-color: red; position: acquire;

}

이 키워드는 대소문자를 구분하지 않으며 따옴표 안에 사용할 수 없습니다. 이는 문자열 데이터 유형 과의 혼동을 방지합니다.

맞춤 키워드

맞춤 키워드 데이터 유형 ( 라고도 함)는 스타일 시트 작성자가 정의한 키워드를 나타냅니다. 의 정의에는 일반적인 CSS 단어 중 하나가 될 수 없는 등 특정 제한 사항이 있습니다.

맞춤 키워드의 가장 일반적인 예는 animation-name 속성의 값입니다. 이 속성은 사용자 정의 애니메이션을 해당 값으로 허용할 수 있습니다. 사용자 정의 애니메이션 이름은 스타일 시트 작성자가 정의합니다.

@keyframes hulkify {   from { 
    color: pink; 
    transform: scale(1);
  }   to { 
    color: green; 
    transform: scale(2);
  } 
}.bruce-banner { animation-name: hulkify; }

로그인 후 복사

인용 문자열

문자열 데이터 유형 은 인용된 문자열을 나타냅니다. 이 문자열은 따옴표로 묶여 있으며 임의의 유니코드 문자 시퀀스입니다.

.foo::after {  content: "Hello, world!";
}.foo::before {  content: "We can add &#39;quotes&#39; within quotes \A And move to a separate line";
}

로그인 후 복사

리소스 로케이터

리소스 로케이터 는 리소스 파일이나 조각을 참조하는 데 사용됩니다. 이 데이터 유형은 일반적으로 url() 함수를 사용하여 표현되지만 경우에 따라 @import 규칙과 같이 형식으로 표현될 수도 있습니다.

이 데이터 유형에는 세 개의 URL(Uniform Resource Locator)이 있습니다.

절대 URL에는 프로토콜과 도메인 이름이 포함됩니다. 이 유형의 URL로 지정된 리소스는 스타일 시트가 속한 도메인 이름과 동일할 필요는 없습니다.

상대 URL이 가리키는 파일은 스타일 시트 파일 위치를 기준으로 합니다.

로컬 URL(조각 URL)은 기본 파일 자체 내의 요소를 가리키는 데 사용됩니다. 파일 경로가 아닌 요소의 ID로 참조됩니다.

/* Absolute URL */@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400"); /* Realtive URL */.foo { background-image: url("../img/bg.png"); }
@import "components/buttons.css"; /* Fragment URL */.bar { filter: url("#blurFilter"); }

로그인 후 복사

기본 숫자 유형

Integer

정수 유형 은 수학에서 정의된 정수입니다. 소수 부분이 없는 완전한 숫자입니다. 정수에는 양의 정수와 음의 정수가 포함됩니다. 정수의 부호는 첫 번째 숫자 앞에 + 또는 -로 지정되며, 아무것도 지정되지 않은 경우 기본값은 +입니다.

.foo { z-index: 10; }.foo { z-index: +10; }.bar { z-index: -10; }

실수

실수 유형, 즉 " 실수". 이는 정수 , 0 또는 소수일 수 있습니다. 정수 유형과 마찬가지로 실수에도 양수 값과 음수 값이 있으며 첫 번째 숫자 앞에 기호로 표시됩니다.

.foo { line-height: 3; }.bar { line-height: -2.5; }.foo { line-height: +5.5; }

로그인 후 복사

ratio

比率数据类型表明两个数值之前的关系，这两个数值均为正的整数值。尽管数学中比率有着多种书写方式，但是在CSS经常被写作 / 。

比率类型的典型用法是用来在媒体查询中指明目标设备的分辨率。

@media screen and (device-aspect-ratio: 16/9) { /* Wide screen displays, iPhone 5 */ }
@media screen and (device-aspect-ratio: 4/3) { … }

로그인 후 복사

百分比

百分比数据类型由一个实数值后加一个 % 符号组成。它表示的是其他值的一部分。因此，针对不同的值类型，有不同的百分比数据类型

长度百分比是长度值的一部分。

数值百分比是数值的一部分。

角度百分比是角度值的一部分。

时间百分比是长度值的一部分。

频率百分比是长度值的一部分。

.foo { 
    width: 50%; /* <length-percentage> */
    line-height: 200% /* <number-percentage> */
    voice-pitch: 25% /* <frequency-percentage> */}

로그인 후 복사

尺寸数据类型

尺寸是数值数据类型中的一种，是一种度量单位。它前半部分由数值组成，后面跟一个单位符号。当数值部分为 0 时，单位可以省略。

距离

距离数据类型表示距离的单位，有两种长度单位。

绝对单位，如 px ， cm 以及 pt 。这些单位的距离值都是固定的，与物理测量相关。一旦声明，它们的大小不会因为容器元素的字体大小变化而发生改变。

相对单位，如 em ， rem 以及视口单位。这些单位并没有一个客观的度量标准。相反的，这类单位的实际值由它们的父元素决定。这就意味着它们的大小会因为所依赖元素的大小改变而改变。

.foo {
font-size: 16px; /* absolute */
width: 50vw; /* relative */}

角度

角度数据类型表示圆的一个角度。存在四种单位来定义角度度量。

deg 单位表示角的度数。一个完整的圆为360度。

grad 表示角的Gradians度。一个完整的圆为400 grad 。

rad 表示角的弧度。一个完整的圆为2π（约为57.29rad）。

turn 表示圆周长。一个完整的圆为1turn.

这些单位都存在正负值之分，表明顺时针或者逆时针。下面的例子中，指出了如何用各种单位表示顺时针90度。

.foo { 
    /* Going clockwise */
    transform: rotate(90deg);    transform: rotate(100grad);    transform: rotate(0.25turn);    transform: rotate(1.57rad);    /* Going anti-clockwise */
    transform: rotate(-270deg);    transform: rotate(-300grad);    transform: rotate(-1.25turn);    transform: rotate(-55.72rad);
}

로그인 후 복사

时长

时长数据类型是时间单位。有两种单位能够用来定义时间。

s 表示一秒钟。

ms 表示一毫秒。1秒等于1000毫秒。

.foo { transition-duration: 1s; } 
.bar { transition-duration: 1000ms; }

로그인 후 복사

频率

频率类型表示声音的频率。存在两个单位用来定义频率。

kHz 表示千赫兹。

Hz 表示赫兹。1000Hz等于1kHz.

.foo { voice-pitch: 250Hz; } 
.bar { voice-pitch: 1kHz; }

로그인 후 복사

分辨率

分辨率数据类型表示用户当前设备的分辨率。分辨率是单一像素点（物理）的大小，通过1CSS英寸、厘米或者像素需要多少像素点能填满来定义。这一计算方式依赖于我们所用的CSS单位，有四种方式可以指定分辨率。

dpi 表示每CSS英寸中物理像素点的个数。

dpcm 表示每CSS厘米中物理像素点的个数。

dppx 表示每CSS像素中物理像素点的个数。

@media (min-resolution: 100ddpx) { .. }
@media (min-resolution: 100dpcm) { .. }
@media (min-resolution: 300dpi) { /* Retina display */ }

로그인 후 복사

其他数据类型

颜色

颜色数据类型用来定义颜色值。这一数据类型有两种格式。

关键字形式：可以使预定义颜色中的一种（如 cornflowerblue ）， transparent 以及 currentColor 等关键之。

数值形式：可以使用颜色表示法中的一种， #rgb ， rgb() ， rgba() ， hsl() ， hsla() 。

下例是我们如何用不同的形式实现黑色颜色值。

.foo {   color: black;   color: #000;   color: rgb(0,0,0);   color: rgba(0,0,0,1);   color: hsl(0,0%,0%);   color: hsla(0,0%,0%, 1);
}

로그인 후 복사

图片

图片数据类型表示一个2D图像。它可以是以下三种形式中的一种。

URL引用：通过数据类型来指定。

文档中的元素：通过 element() 函数来指定。（提示：这一函数的支持度较为有限。）

渐变函数 :使用数据类型来定义。

.foo { background-image: url(&#39;path/to/bg.png&#39;); }.bar { background-image: element(&#39;#background&#39;); }.baz { background-image: linear-gradient(white, gray); }

로그인 후 복사

位置

位置数据类型指出了一个元素在容器区域或元素中的位置。它可以使下列三种类型中的一种：

关键字 : top ， right ， bottom ， left 以及 center 。

长度值。

百分比，长度百分比。

下例给出了如何让一个大小为100x100px背景图定位在容器元素（300x300px）的左下角。

.foo { 
  background-position: right bottom;  background-position: 200px 200px;  background-position: 100% 100%;
}

로그인 후 복사

以上就是css的通用数据类型，希望对大家有帮助。