CSS	인터넷 익스플로러		크롬	오페라	원정 여행	파이어폭스	기계적 인조 인간	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

간략한 정보

CSS 버전

가치

center 텍스트를 중앙에 정렬합니다. 텍스트는 텍스트 블록이 있는 브라우저 창이나 컨테이너에 가로로 배치됩니다. 텍스트 줄은 웹 페이지 중앙을 따라 이어지는 보이지 않는 축에 묶여 있는 것처럼 보입니다. 이 정렬 방법은 제목과 캡션 등 다양한 서명에 적극적으로 사용되며 텍스트 디자인에 공식적이고 견고한 느낌을 줍니다. 다른 모든 경우에는 많은 양의 텍스트를 읽는 것이 불편하다는 이유로 가운데 정렬이 거의 사용되지 않습니다. justify Justified는 왼쪽과 오른쪽을 동시에 정렬하는 것을 의미합니다. 이 작업을 수행하기 위해 이 경우 브라우저는 단어 사이에 공백을 추가합니다. 왼쪽 텍스트를 왼쪽으로 정렬합니다. 이 경우 텍스트 줄은 왼쪽으로 정렬되고 오른쪽 가장자리는 사다리처럼 배열됩니다. 이 정렬 방법은 사용자가 쉽게 찾을 수 있기 때문에 웹사이트에서 가장 널리 사용됩니다. 새 줄큰 텍스트를 편안하게 읽을 수 있습니다. right 텍스트를 오른쪽으로 정렬합니다. 이 정렬 방법은 이전 유형에 대한 길항제 역할을 합니다. 즉, 텍스트 줄은 오른쪽 가장자리에 정렬되고 왼쪽은 "찢어진" 상태로 유지됩니다. 새 줄을 읽는 왼쪽 가장자리가 정렬되지 않았기 때문에 이 텍스트는 왼쪽 정렬된 경우보다 읽기가 더 어렵습니다. 따라서 오른쪽 정렬은 일반적으로 3줄 이하의 짧은 제목에 사용됩니다. 텍스트를 오른쪽에서 왼쪽으로 읽어야 하는 특정 사이트는 고려하지 않으며 유사한 정렬 방법이 유용할 수도 있습니다. auto 요소의 위치를 ​​변경하지 않습니다. 상속 상위 값을 상속합니다. 시작 텍스트가 왼쪽에서 오른쪽으로 이동하는 경우 왼쪽과 동일하고 텍스트가 오른쪽에서 왼쪽으로 이동하는 경우 오른쪽과 동일합니다. end 텍스트가 왼쪽에서 오른쪽으로 이동하는 경우 오른쪽과 동일하고, 텍스트가 오른쪽에서 왼쪽으로 이동하는 경우 왼쪽과 동일합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. Safari 브라우저에서 텍스트 정렬

Internet Explorer 버전 7.0 이하에서는 이를 다소 다르게 해석합니다. 이 예다른 브라우저보다 텍스트뿐만 아니라 블록도 정렬합니다(그림 2).

쌀. 2. Internet Explorer 7의 텍스트 정렬

객체 모델

document.getElementById("elementID ").style.textAlign

브라우저

버전 7.0 이하의 IE는 블록 수준 요소의 내용뿐만 아니라 요소 자체도 정렬합니다.

텍스트 정렬 및 들여쓰기를 결정하는 HTML 태그

타이포그래피에 사용되는 양쪽 맞춤 텍스트

아래 예에서는 정렬 방법을 보여줍니다. 텍스트를 너비로페이지:

정렬="왼쪽"	정렬="오른쪽"
	서비스 부문에 고용된 근로자 수와 정보 보급이 날로 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면, 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.
정렬="정렬"	정렬="가운데"
서비스 부문에 고용된 근로자 수와 정보 보급이 날로 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면, 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.	서비스 부문에 고용된 근로자 수와 정보 보급이 날로 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면, 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.

정당화 값은 균일성을 보장합니다. 텍스트를 오른쪽과 왼쪽으로 정렬, 그건 폭이. 이 방법은 인쇄에 널리 사용됩니다.

HTML의 텍스트를 가운데와 너비에 맞춰 정렬

HTML 중앙에 텍스트 정렬, 오른쪽에 텍스트 정렬:

결과:

속성 및 값

• align="left" - 정의 왼쪽 텍스트 정렬(기본).
• 정렬="가운데" - 텍스트를 중앙에 정렬합니다..
• 정렬="오른쪽" - 텍스트를 오른쪽으로 정렬합니다.

정렬 | HTML 텍스트 들여쓰기

HTML 텍스트페이지 왼쪽의 들여쓰기

우리는 생산할 것입니다 텍스트 들여쓰기두 가지 방법으로 왼쪽에 있습니다.

결과:

새 창에서 보기.

속성 text-align-last ( HTML 정렬과 혼동하지 마세요)는 블록의 마지막 줄이나 강제 중단 전 줄의 정렬 방법을 결정합니다. 일반적으로 단락의 마지막 줄에는 모든 공간을 채울 만큼 충분한 텍스트가 포함되어 있지 않기 때문에 이는 중요합니다.

이 글에서는 허용되는 값과 브라우저 지원을 포함하여 text-align-last 속성의 모든 측면을 다룰 것입니다.

사용법 및 허용되는 값

text-align-last 속성을 사용하는 것은 간단합니다. 다음은 텍스트의 마지막 줄을 오른쪽으로 정렬하는 코드 조각입니다.

소개 그래프( text-align: justify; // IE 및 Edge에 필수 text-align-last: right; )

속성은 7개의 값을 가질 수 있습니다. 아마도 align:left , right 및 center 의 표준 HTML 텍스트 값에 익숙할 것입니다. 마지막 줄의 텍스트를 컨테이너의 오른쪽, 왼쪽 및 중앙에 정렬합니다.

아래 예에서는 이 세 가지 값의 차이점을 보여줍니다.

예시 보기

네 번째 값인 justify 는 텍스트가 컨테이너의 전체 너비에 고르게 분포되도록 마지막 줄을 정렬합니다. 이는 단어 사이에 적절한 수의 공백을 추가함으로써 달성됩니다. 텍스트의 양에 따라 이 속성을 사용하면 단어 사이에 너무 큰 간격이 생기지 않고 마지막 줄의 공백을 완전히 채울 수 있습니다.

두 번째 단락의 텍스트도 너비에 걸쳐 펼쳐져 있지만 마지막 줄에는 단어가 하나만 포함되어 있으므로 왼쪽에 배치됩니다.

예시 보기

텍스트의 마지막 줄을 왼쪽으로 정렬하는 것은 왼쪽에서 오른쪽으로 읽는 언어에 적합합니다( LTR), 그러나 이는 RTL 언어의 경우 올바르지 않습니다. 이런 경우 왼쪽이나 오른쪽 값을 사용하면 문제가 발생할 수 있습니다.

다행히 시작 값을 사용하여 쓰기 및 읽기가 시작되는 가장자리에 텍스트를 정렬할 수 있습니다. 즉, text-align-last 속성을 start 로 설정하면 텍스트가 LTR 언어의 경우 왼쪽으로 정렬되고 RTL 언어의 경우 오른쪽으로 정렬됩니다.

끝 값을 사용하여 쓰기 및 읽기를 시작하는 반대쪽 가장자리에 텍스트를 정렬할 수도 있습니다. 이는 LTR 언어의 경우 오른쪽 값, RTL 언어의 경우 왼쪽 값에 해당합니다.

예시 보기

이 속성의 기본값은 auto 입니다. 사용될 경우, justify 로 설정되지 않은 한 HTML 텍스트 정렬 속성의 값에 따라 마지막 줄의 텍스트가 정렬됩니다. 그렇지 않으면 text-justify 속성이 distribution 으로 설정된 경우에만 텍스트가 컨테이너 너비에 걸쳐 분산됩니다. 그렇지 않으면 텍스트가 쓰기 및 읽기가 시작되는 가장자리에 정렬됩니다.

중요 사항

text-align-last가 작동하려면 text-align 속성을 justify 로 설정해야 합니다. 하지만 이 규칙은 IE와 Edge에서만 구현됩니다. Firefox 및 Chrome에서는 text-align을 justify로 설정하지 않고도 속성이 작동합니다. 아래 예에서는 Edge 및 IE에서 텍스트가 오른쪽 정렬되어야 합니다. 다른 브라우저에서는 text-align-last 속성 값에 따라 단락의 마지막 줄이 정렬되고 나머지 줄은 오른쪽 정렬됩니다.

데모 보기

HTML 정렬을 정렬하기 위해 text-align을 설정하지 않으면 결과가 좋지 않습니다. 따라서 텍스트 분포를 너비로 설정할 가능성이 높습니다.

태그를 사용하여 단락에 강제 줄 바꿈이 지정된 경우에도 속성이 작동합니다.
또는 그런 것. 이 속성은 가장 바깥쪽 요소뿐만 아니라 지정된 요소 내 텍스트의 모든 마지막 줄에 영향을 미친다는 점을 명심하세요. 예를 들어 기사 또는 div 요소 내부의 텍스트에 세 개의 단락이 포함되어 있는 경우 각 단락의 마지막 줄은 전체 상위 요소에 대해 설정된 text-align-last 속성에 따라 정렬됩니다.

콘텐츠의 가장 마지막 줄만 정렬해야 한다면 :last-child 또는 :last-of-type 선택기를 사용할 수 있습니다. 아래 데모의 코드를 예로 들어 보겠습니다.

기사( text-align: justify; ) 기사 p:last-of-type( text-align-last: right; )

기사 마지막 단락의 마지막 줄을 오른쪽으로 정렬합니다. 나머지 줄은 HTML 텍스트 정렬 속성의 값에 따라 정렬됩니다.

데모 보기

다른 선택기인 :even 및 :odd를 사용하여 정렬을 변경할 수도 있습니다.

때로는 단락이 한 줄로만 구성될 수도 있습니다. 이 경우 text-align 속성과 text-align-last 속성 모두에 값을 지정했다면 후자의 속성이 우선 적용됩니다.

다음 코드 조각을 고려해보세요.

p ( text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )

두 번째 단락에 한 줄만 있으면 text-align-last가 우선 적용되므로 텍스트는 왼쪽으로 정렬됩니다. 아래 데모는 다음과 같습니다. 이 코드실제 CSS 및 기타 몇 가지 HTML 예맞추다.

데모 보기

브라우저 지원

이 속성에 대한 지원은 " 옵션을 사용하여 활성화할 수 있습니다. 실험적인 웹 플랫폼 기능 활성화" V 구글 크롬및 Opera는 각각 버전 35 및 22부터 시작됩니다. Chrome 47+ 및 Opera 34+에서 완벽하게 지원됩니다.

Firefox에서 이 속성을 사용하려면 -moz- 접두사를 붙여야 합니다. 시작 및 끝 값은 IE에서 지원되지 않습니다. 동시에 Edge는 이 속성을 완벽하게 지원합니다. text-align-last를 완전히 지원하지 않는 유일한 인기 브라우저는 Safari입니다.

일반적으로 사이트 작성자는 철자 규칙과 자신의 선호도에 따라 대문자와 소문자를 직접 결정합니다. 그러나 대소문자를 변경하는 프로세스는 속성을 사용하여 자동화할 수 있습니다. 텍스트 변환. 이 속성은 네 가지 값을 사용할 수 있습니다.

• 없음 - 텍스트가 변경 없이 작성됩니다.
• 대문자로 쓰다- 각 단어는 대문자로 시작됩니다.
• 소문자 - 모든 문자가 소문자로 변경됩니다(소문자).
• 대문자- 모든 문자는 대문자(대문자)로 표시됩니다.

예를 들어, 다음 규칙은 H1 제목이 대문자여야 함을 지정합니다.

H1(텍스트 변환: 대문자;)

약어, 요소명, 제목 등의 대소문자 자동 변경을 설정하여 편리합니다. 텍스트 요소, 대문자 또는 소문자로 작성해야 합니다.

텍스트 장식: 텍스트 장식 속성

재산 텍스트 장식텍스트에 추가 디자인을 제공할 수 있습니다. 이 속성의 값은 상수입니다. 없음, 밑줄, 윗줄, 줄바꿈그리고 깜박거리다를 사용하면 일반 텍스트를 표시하고, 텍스트 위, 아래 또는 텍스트를 통해 선을 그리거나 텍스트를 깜박이게 할 수 있습니다. 이 속성의 다양한 값을 사용하는 예가 그림 11.4에 나와 있습니다.

쌀. 11.4.

부동산의 가장 일반적인 용도 텍스트 장식기본 링크 밑줄을 변경하는 것입니다. 예를 들어, 다음 규칙은 링크에 밑줄을 표시하도록 지정합니다.

A:링크(텍스트 장식: 밑줄;)

단어 사이의 간격: 단어 간격 속성

텍스트에서 단어 사이의 간격을 설정하려면 word-spacing 속성을 사용하십시오. 이 속성의 값은 다음을 사용하여 설정할 수 있습니다. 예어 Normal - 기본값이며 현재 글꼴의 표준 간격을 설정합니다. 표준 간격 외에 간격을 설정하려면 사용 가능한 CSS 단위로 값을 지정할 수 있으며 값은 음수일 수 있습니다.

따라서 다음 규칙은 H1 제목의 단어 사이의 간격을 1em만큼 늘립니다.

H1(단어 간격: 1em;)

텍스트 정렬: text-align 속성

정렬은 보이지 않는 부분을 따라 텍스트 블록의 왼쪽 또는 오른쪽 가장자리를 배치하는 것입니다. 수직선. 텍스트를 정렬하려면 text-align 속성을 사용하세요. 이 속성의 유효한 값은 각각 왼쪽, 오른쪽, 가운데 및 양쪽 맞춤 정렬을 지정하는 왼쪽, 오른쪽, 가운데 및 양쪽 맞춤입니다.

다음 규칙은 DIV 요소 내에 포함된 모든 요소의 가운데 정렬을 설정합니다.

DIV(텍스트 정렬: 가운데;)

행간: 줄 높이 속성

리딩은 서로 가까운 선의 기준선 사이의 거리입니다. 일반적인 상황에서 줄 사이의 간격은 글꼴의 유형과 크기에 따라 달라지며 브라우저에 의해 자동으로 결정됩니다. 하지만 이 값은 line-height 속성을 사용하여 변경할 수 있습니다. 기본값인 Normal을 사용하면 브라우저가 줄 사이의 간격을 자동으로 계산합니다. 0보다 큰 숫자는 현재 텍스트의 글꼴 크기에 대한 승수로 처리됩니다. 이 속성의 값으로 CSS에서 허용되는 모든 길이 단위를 사용할 수도 있습니다. 백분율 표기를 사용할 수도 있으며, 이 경우 글꼴 높이는 100%로 간주됩니다. 음수 줄 간격은 허용되지 않습니다.

글자 간격: 글자 간격 속성

브라우저는 글꼴 크기와 유형에 따라 문자 사이의 간격을 자동으로 조정합니다. 경우에 따라 글자 사이의 거리를 조정해야 할 수도 있습니다. 문자 간격을 제어하려면 letter-spacing 속성을 사용하세요. 이 속성의 값은 CSS 길이 단위일 수 있지만 글꼴 크기(em 및 ex)를 기반으로 하는 상대 단위를 사용하는 것이 좋습니다. 줄 간격과 달리 letter-spacing 속성은 음수 값 사용을 허용하지만, 이 경우 텍스트의 가독성이 유지되는지 확인해야 합니다.

다음 규칙은 H1 헤더의 문자 간격을 0.5em씩 늘립니다.

안녕하세요, 블로그 사이트 독자 여러분. 오늘날 우리는 계속 연구하고 있으며 다음에는 Html 코드에서 텍스트 모양을 디자인하는 데 도움이 되는 텍스트 장식, 수직 정렬, 텍스트 정렬, 텍스트 들여쓰기 및 기타 여러 속성을 갖게 되었습니다.

지난 기사에서 우리는 구성할 속성을 살펴보았습니다. 모습.

글쎄, 이전에도 우리는 모든 유형을 자세히 살펴보고 유형을 그룹화하는 방법과 유형을 해석할 때 브라우저가 설정하는 우선 순위를 배웠습니다. 사실, 이 모든 내용은 여러 기사로 나누어져 있으므로 혼동하지 않으려면 제공된 순서대로 자료를 공부하는 것이 좋습니다.

CSS의 텍스트 장식, 텍스트 정렬, 텍스트 들여쓰기

CSS에서 텍스트 작업을 수행하는 방법은 무엇입니까? 이 목적을 위해 특별히 고안된 규칙이 있다고 가정하는 것이 논리적입니다. 실제로 align 속성을 대체하는 text-align부터 시작해 보겠습니다(P 단락이나 제목과 같은 콘텐츠를 정렬하는 데 사용됨).

가능한 의미는 네 가지뿐입니다.

의미는 이전과 동일하게 유지됩니다. 텍스트 정렬- 선의 수평 정렬입니다. 이 규칙은 블록 요소(단락, 제목 등)에만 적용됩니다. 여러 줄이 나타날 수 있는 태그입니다. 왜냐하면 인라인 요소는 한 줄만 가질 수 있으므로 텍스트 정렬을 사용하는 데 특별한 포인트는 없습니다.

이 규칙의 값은 각각 왼쪽, 오른쪽, 가운데 및 페이지 너비 정렬을 의미한다는 것이 분명합니다(정렬 - 단어 사이의 거리를 늘려 동시에 왼쪽과 오른쪽). 적어도 여러 줄의 텍스트가 있는 요소에 Justify 값을 사용해야 한다는 것은 말할 필요도 없습니다. 그렇지 않으면 눈에 띄는 효과가 없습니다.

예를 들어 다음을 사용하여 이전 단락을 정렬했습니다(왼쪽과 오른쪽 모두 부드러운 테두리가 있음을 볼 수 있음).

텍스트 정렬:양쪽 정렬;

기본적으로 가로 텍스트 정렬은 왼쪽입니다. 물론 이전에 다른 정렬을 지정하지 않은 한 특별히 text-align:left를 작성할 필요는 없습니다. 그건 그렇고, 명확한 예를 위해 다시이 단락을 중앙 (중앙)에 정렬했지만 여기서는 모든 것이 명확하다고 생각합니다.

다음 CSS 규칙 텍스트 들여쓰기예를 들어 단락 태그 P의 텍스트에 대해 빨간색 선을 지정할 수 있습니다. 빨간색 선의 들여쓰기는 값(을 사용하여 더하기 기호 또는 빼기 기호 사용)을 지정하거나 백분율을 사용하여 지정할 수 있습니다.

text-indent에서 계산된 백분율은 무엇입니까? 텍스트에 할당된 영역의 너비에서. 저것들. CSS 규칙 text-indent:50%는 바로 이 줄 길이의 절반에 해당하는 빨간색 선을 설정합니다. 음, 이 단락은 그러한 규칙의 예입니다.

또는 예를 들어 text-indent에서 빨간색 선에 음수 값을 설정하면 이 단락에서 볼 수 있는 대략적인 내용을 얻을 수 있습니다. 성취를 위해 이 결과나는 P 단락 태그에 대해 다음 CSS 규칙을 작성했습니다.

텍스트 들여쓰기:-1em;

음, (표준 빨간색 선을 설정하기 위해) text-indent의 일반적인 사용은 다음과 같습니다: text-indent:40px; (그런데 이 단락에 적용됨). 이 규칙은 앞서 설명한 텍스트 정렬과 마찬가지로 블록 요소에만 적용됩니다., 즉. 여러 줄이 나타날 수 있습니다(단락, 제목 등).

좋아, 이제 다음으로 넘어가자 텍스트 장식(가로선을 사용하여 디자인) 이는 이미 모든 Html 요소(인라인 및 블록 모두)에 적용되어 있습니다.

그것은 단지 네 가지 의미를 가질 수 있습니다:

저것들. 텍스트 장식을 사용하여 사용할 수 있습니다: 윗줄, 줄 바꿈 또는 밑줄 또는 전혀 사용하지 않음(없음). 일부 HTML 요소에는 이미 기본 디자인이 있습니다. 수평선, 예를 들어 기본적으로 밑줄이 그어져 있습니다.

따라서 밑줄을 긋는 것(하이퍼링크 제외)으로 다른 것을 강조하는 것은 좋지 않습니다. 사용자가 잠재의식에 밑줄을 긋고 색상으로 강조 표시하면 클릭하여 이동할 수 있다는 것을 의미하기 때문입니다. 그러나 밑줄로 일반 텍스트를 강조 표시하면 사용자를 오도하고 결과적으로 리소스에 실망하게 됩니다(그는 그럴 것이라고 생각했지만 실제로는 그랬습니다...).

Css 텍스트 장식 규칙을 사용할 때의 미묘한 차이는 Html 요소에 대해 한 번에 세 개(또는 두 개)의 값을 입력할 수 있고(아무 것도 생략하지 않음) 결과적으로 다음과 같은 결과를 얻을 수 있다는 것입니다. 밑줄 - 밑줄 - 줄이 그어진 텍스트 조각(소리도 나고 멋있어 보이지 않나요?):

텍스트 장식:밑줄 윗줄 통과;

텍스트 장식에 대한 값(한 번에 여러 개를 사용하려는 경우)을 작성해야 합니다. 공백 문자를 통해.

수직 정렬 - 수직 정렬

다음으로 수직 정렬(vertical-align)이 있습니다. HTML 코드의 거의 모든 요소에 대해 이는 인라인 요소를 기준선을 기준으로 텍스트와 정렬하는 것을 의미합니다. 사실, 이는 약간 다른 의미입니다. 이 셀에 있는 모든 내용은 수직으로 정렬됩니다.

CSS 수직 정렬 규칙의 경우 다음 값을 사용할 수 있습니다.

선은 기본적으로 기준선에 맞춰 정렬됩니다. 보세요, 신청했어요 이 텍스트의 글꼴 크기를 늘려주세요이 두 조각은 기본(하단) 선에 정렬됩니다. 그리고 수직 정렬을 사용한 수직 정렬은 정확하게 선 정렬 방식을 변경하기 위한 것입니다.

예를 들어, 확대된 동일한 텍스트 부분에 대해 Vertical-align:baseline을 작성하면 변경 사항이 발생하지 않습니다. 기본적으로 이 CSS 규칙에는 기준 값이 사용됩니다.

그건 그렇고, 숫자를 값으로 사용할 수도 있으며 수직 정렬:0이라는 비문은 수직 정렬:기준선과 동일한 의미입니다. 기준선은 0과 같습니다. 따라서 수직 정렬의 이동을 나타내려면 이 이동은 기준선(또는 0)을 기준으로 지정됩니다.

다음과 같이 작성할 수 있습니다.

수직 정렬:10px;

그리고 우리는 받게 될 것입니다 더 큰 글꼴로 조각을 위로 이동하십시오.기준선을 기준으로 10픽셀입니다. 음수 값을 쓰면:

수직 정렬:-10px;

그러면 우리는 얻는다 조각을 아래로 이동기준선에 비해. 예제를 보면 이동으로 인해 줄 높이가 증가하여 텍스트가 인접한 줄과 충돌하지 않고 들어갈 수 있다는 것이 분명합니다. 이동은 Em 및 Ex에서도 지정할 수 있으며, 이 요소의 줄 높이에서 계산되는 백분율로 지정될 수 있습니다(마지막 기사에서 를 사용하여 설정하는 방법을 배운 것을 기억하십시오).

테이블 셀의 내용을 수직으로 정렬하려면 수직 정렬은 Top 및 Bottom 값을 사용하여 각각 셀의 상단과 하단에 내용을 정렬해야 합니다(글쎄, 테이블 셀의 중간은 기본 수직 정렬 값으로 사용됩니다) ).

글꼴 요소의 경우 text-top, text-bottom, middle을 사용할 수 있습니다. 예시로 사용해보자 이 텍스트 조각의미:

수직 정렬:가운데;

결과는 어땠나요? 확대된 부분의 중간 줄은 일반 텍스트의 기준선과 정렬됩니다. 중심선에 대한 수직 정렬이 이루어졌습니다. 텍스트 상단과 텍스트 하단의 경우 모든 것이 동일합니다. 이것은 text-top 이고 이것은 text-bottom 입니다.

Css 속성인 Vertical-align sub 및 super의 값은 다음에서 발생한 하위 및 슈퍼 인덱스에 해당합니다. 순수 HTML(사용하기 전에 CSS 속성시각 디자인용).

텍스트 변환, 문자 간격, 단어 간격 및 공백

없음은 기본적으로 사용되며 텍스트의 문자가 어떤 식으로든 변경되지 않음을 의미합니다. Html로 작성된 대로 문자가 표시되는 방식입니다. text-transform의 대문자 값은 조각의 모든 문자를 대문자( 이 문장에 예가 나와 있습니다, text-transform:uppercase 규칙이 사용되었으며 문자는 원래 소문자로 작성되었습니다).

Css 텍스트 변환 규칙의 소문자 값을 사용하면 조각의 모든 문자를 소문자로 변환할 수 있으며 대문자 값을 사용하면 단어의 첫 글자를 모두 대문자로 만들 수 있습니다( 이 문장의 예- 텍스트 변환:대문자화). 저것들. 텍스트 변환을 사용하면 일반 텍스트로 원하는 모든 작업을 수행한 다음 모든 것을 쉽게 되돌릴 수 있습니다.

따라서 예를 들어 모든 제목을 글로만 작성하는 작업이 있는 경우 대문자로, 그런 다음 평소대로 HTML로 작성하고 text-transform:uppercase를 통해 CSS에서 대문자로 만듭니다. 그런 다음 무언가를 다시 변경하기로 결정한 경우 사이트에 있는 100,500개의 헤더 전체 내용이 아닌 스타일만 약간 변경하면 됩니다.

기본적으로 문자 간격과 단어 간격은 모두 보통으로 설정되어 있습니다. 즉, 이는 0과 같습니다(즉, 문자와 단어 사이의 거리는 어떤 방식으로도 변경되지 않습니다). 이 규칙에서 거리 변화량은 Em 또는 Ex 픽셀로만 지정할 수 있으며 백분율로는 지정할 수 없습니다.

그러나 양수 값(문자나 단어의 희소성)과 음수 값(문자나 단어를 서로 가깝게 표시)을 모두 사용할 수 있습니다. 예를 들어 다음을 수행할 수 있습니다. “이것이 이 문구의 문자를 얇게 만드는 방법입니다”다음 CSS 규칙을 사용합니다.

문자 간격: 0.4em;

아니면 할 수 있습니다 "이것이 이 문구의 기호를 서로 더 가깝게 만드는 방법입니다."사용하여:

문자 간격:-1px;

단어 간격에 대해서도 마찬가지입니다. 유일한 차이점은 단어 사이의 거리가 변한다는 점입니다. 예를 들어 이 구문에서는 이 CSS 구성을 사용합니다.:

단어 간격:4em;

마찬가지로 단어 간격에 음수 값을 사용하여 단어 사이의 거리를 줄일 수 있습니다.

음, HTML 코드의 텍스트 형식을 특정 방식으로 지정할 수 있는 오늘의 마지막 CSS 규칙은 다음과 같습니다. 공백. HTML 코드를 작성할 때 발생한 웹 페이지에 공백 문자를 표시하는 역할을 담당합니다.

기사에서 기억하는 것처럼 브라우저는 코드를 구문 분석할 때 모든 공백, 줄 바꿈 및 탭을 하나의 공백으로 결합하고 웹 페이지의 줄을 정확하게 다음과 같이 나눕니다. 공백 문자, 이는 코드에서 발생했습니다.

따라서 공백은 다음 세 가지 값 중 하나를 취할 수 있습니다.

기본값은 Normal이며 이 경우 위에서 설명한 대로 모든 것이 표시됩니다. 그러나 Pre 값을 사용하면 다음과 같이 사용과 완전히 유사해집니다. 웹 페이지에서는 코드를 작성할 때 있었던 모든 추가 공백 문자와 함께 텍스트가 표시되며 브라우저는 더 이상 이를 사용하여 전송할 수 없습니다.

글쎄요, 무슨 뜻인가요? 지금 랩 CSS 규칙인 white-space:nowrap을 사용하면 브라우저가 조각 내에서 찾은 공백 문자를 래핑하는 것을 방지할 수 있습니다. 간단한 Html 파일을 만들고 다음과 같은 태그에 텍스트를 포함하여 모든 것이 어떻게 작동하는지 직접 시험해 볼 수 있습니다.

행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다.

당신은 관심이 있을 수도 있습니다

목록 스타일(유형, 이미지, 위치) - HTML 코드의 목록 모양을 사용자 정의하기 위한 CSS 규칙
Z-색인 및 CSS 커서 규칙을 사용하여 마우스 커서를 변경하는 위치 지정
안쪽 여백, 여백 및 테두리 - 설정됨 CSS 내부외부 여백 및 모든 측면(상단, 하단, 왼쪽, 오른쪽)에 대한 프레임
CSS란 무엇이며 CSS 스타일 시트를 연결하는 방법은 무엇입니까? HTML 문서그리고 이 언어의 기본 구문
CSS의 부동 및 지우기 - 블록 레이아웃 도구
CSS - 그게 무엇인가요? 계단식 스타일 시트가 어떻게 연결되나요? HTML 코드스타일 및 링크 사용
CSS의 차원 단위(픽셀, Em 및 Ex) 및 상속 규칙
태그, 클래스, ID 및 범용 선택기와 최신 CSS의 속성 선택기
위치(절대, 상대 및 고정) - 위치 지정 방법 HTML 요소 CSS(왼쪽, 오른쪽, 위쪽 및 아래쪽 규칙)
CSS의 배경(색상, 위치, 이미지, 반복, 첨부) - 배경 또는 배경색 설정을 위한 모든 것 HTML 사진강요