>웹 프론트엔드 >CSS 튜토리얼 >일반적인 CSS 글꼴 속성: background-origin 및 background-clip 소개

일반적인 CSS 글꼴 속성: background-origin 및 background-clip 소개

高洛峰
高洛峰원래의
2017-03-14 15:45:261978검색

(1) 일반적으로 사용되는 글꼴 속성:

  font-weight: 속성 값 100-900 400은 보통 700은 굵게, 값이 클수록, 더 강할수록 Thick

 font-size: 글꼴 크기, 단위는 px 또는 %

 font-family: 글꼴 패밀리일 수 있습니다. : Microsoft Yahei

 font-style: 글꼴 스타일 italic italic Normal Normal

 font-variant:small- caps will 문자는 작은 문자로 변환됩니다.

참고: 모든 속성은 글꼴 속성을 통해 작성할 수도 있습니다. 예:

글꼴: 기울임꼴 굵게 75%/1.8 'Microsoft Yahei',sans - serif 작성 순서: 글꼴 스타일 글꼴-변형 글꼴-가중치 글꼴 크기 줄 높이 글꼴-famiyl, 여러 스타일은 공백으로 구분하여 작성해야 합니다. 이 순서에서 글꼴 크기와 줄 높이는 /

으로 구분되어야 합니다. (2) 글꼴 색상: 색상: 속성 값은 색상 영어로 작성할 수 있습니다. 예: 빨간색

또는 rgb(0-255 ,0-255,0-255);

또는 rgba(0-255,0-255,0-255,0-1);0은 투명을 의미하고 1은 불투명을 의미합니다

 opacity :0-1은 투명도를 의미합니다. rgba()와의 차이점은 이 속성은 하위 태그에 적용되지만 rgba()는 그렇지 않습니다

(3) 줄 간격, 정렬

     줄 높이(줄 높이): a. 픽셀 단위, 예: 48px b. 일반 줄 높이의 배수가 아닌 c. 백분율은 b와 동일합니다. ( 컨트롤 에서 중국어 텍스트의 세로 중심 조정 방법, 컨트롤의 높이 = 라인- 컨트롤의 높이)

  text-align (alignment): 블록 수준 요소의 텍스트 가로 정렬 왼쪽 가운데 오른쪽

 letter -spacing (문자 간격) : 단어 사이의 거리

  text-꾸밈 (문자 수정) : 밑줄 밑줄 삭제 line-through Overline 없음 (하이퍼링크 밑줄 제거 가능)

  overflow: 범위를 벗어난 텍스트 표시 방법을 제어, 자동으로 자동 표시 스크롤바는 텍스트의 양에 따라 항상 표시되며, 숨겨진 범위를 벗어난 텍스트는 overflow-x, 를 통해 가로 및 세로 방향을 설정할 수도 있습니다. overflow-y

 text-overflow: 중복된 텍스트의 표시 방법을 설정하고, clip 잘라내어 줄임표로 표시합니다. (강조는 각 줄에 중복 텍스트 표시 타원, a.white-spacing:nowrap b.overflow:hiddern text -overflow:ellipsis)

  text-shadow: (4 속성 값: 수평 그림자 거리, 수직 그림자 거리, 흐림 거리, 그림자 색상) 텍스트의 그림자, 처음 두 속성 값은 생략할 수 없습니다. 수평 그림자 거리가 멀수록 그림자는 오른쪽으로 이동합니다. 수직 그림자 거리가 멀수록 그림자는 아래쪽으로 이동합니다. 그림자 흐림 거리. 값이 클수록 그림자가 흐려집니다. 기본값은 0이며 흐림이 없습니다. 그림자 색상, 선택 사항, 기본값은 검은색

 text-indent: 첫 번째 줄 들여쓰기, 픽셀 값으로 들여쓰기 크기를 조정할 수 있습니다

text-Stroke: 획 두께, 획 색상

  white-space:nowarp 중국어 줄이 끝 부분에 계속 표시되도록 설정합니다. (중국어는 기본적으로 자동 줄 바꿈으로 설정되어 있으며, 영어는 자동으로 줄 바꿈되지 않고 다음에 따라 자동으로 줄 바꿈됩니다. 공백)

  단어 나누기: 브라우저는 기본적으로 공백에서 줄 바꿈을 수행합니다. 단어 길이가 범위를 초과하면 계속해서 표시됩니다. 단어

( 5) 배경 스타일:

배경 (약식)

사진) : url (

사진 주소), 배경 이미지와 배경색이 동시에 존재, 배경 이미지가 배경색을 덮습니다

    

background-repeat (배경 이미지 반복 방법 ): no-repeat (타일링되지 않음) 반복-x (가로 타일) 반복-y (세로 타일) 반복 타일(기본값)     배경 위치

(위치 좌표, 오프셋에는 가로 및 세로의 2가지 속성 값이 있음): 위치 지정: 왼쪽/가운데/오른쪽, 픽셀 또는 백분율을 쓸 수 있습니다. 하나의 속성 값만 씁니다. 기본값은 수평 방향이고 다른 방향은 기본값은 수직 중앙입니다. (참고: 픽셀을 사용할 때 이미지의 왼쪽 상단 모서리가 각 방향으로 이동하는 실제 거리입니다. 백분율을 사용할 때는 사용하지 않는 것이 좋습니다. 이미지를 제거한 후 남은 공백 거리의 분포 비율을 나타내는 음수를 사용합니다. 예: 배경-위치: 가로로 30% 제거 사진 후 남은 영역은 3:7 포인트)

  top

/center/

bottom 하나의 속성 값만 쓸 경우 기본적으로 다른 속성 값은 중앙에 배치됩니다.

    

background-clip :border-box (테두리 바깥쪽 가장자리부터 표시) padding-box (테두리 안쪽 가장자리부터 표시) content-box (표시되지 않은 텍스트 내용, 배경 이미지 또는 배경색부터 표시) 영역은 잘려 표시되지 않습니다.)

   

background-origin : 위치 지정 시작점 border-box (테두리 바깥쪽 가장자리부터 시작) padding-box (바깥쪽 가장자리부터 시작) 테두리) 테두리 내부 가장자리) 콘텐츠 상자(텍스트 콘텐츠 영역에서 시작)   배경 크기

: 배경 이미지의 크기에는 일반적으로 너비와 너비라는 두 가지 속성이 있습니다. height.height 속성 값이 하나만 있는 경우 기본값은 너비와 높이를 비례적으로 조정합니다.

너비와 높이를 쓰는 방법: a. 픽셀을 직접 씁니다. b. 백분율(상위 컨테이너 너비와 높이의 백분율)을 씁니다. 🎜>

위 내용은 일반적인 CSS 글꼴 속성: background-origin 및 background-clip 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.