텍스트 서식
이 텍스트는 텍스트 서식 속성의 일부 스타일입니다. 이 호는 사용하여 text-align, text-transform 및 color 속성을. 단락은 정렬, 들여 쓰기, 문자 사이의 간격이 지정됩니다. 밑줄이 색깔에서 제거 "그것은 자신 시도" 링크를.
텍스트 색상
color 속성은 텍스트의 색상을 설정하는 데 사용됩니다.
CSS로, 컬러는 가장 자주에 의해 지정됩니다 :
- 같은 - 색상 이름 "red"
- 같은 - 16 진수 값 "#ff0000"
- 같은 - RGB 값 "rgb(255,0,0)"
봐 CSS 색상 값 가능한 색상 값의 전체 목록.
페이지의 기본 텍스트 색 본체 선택기에 정의된다.
 | 참고 : 내용은 W3C 규격 CSS를 : 당신이 정의하는 경우 color 속성을, 당신은 또한 정의해야합니다 background-color 속성을. |
|---|
텍스트 정렬
text-align 속성은 텍스트의 수평 정렬을 설정하는 데 사용됩니다.
텍스트는 왼쪽 또는 오른쪽 정렬을 중심으로, 또는 정당화 될 수있다.
다음의 예는 중앙 정렬, 좌우 정렬 된 텍스트 (텍스트 방향이 왼쪽에서 오른쪽으로하면 왼쪽 정렬이 기본이며, 텍스트 방향이 오른쪽에서 왼쪽 인 경우 오른쪽 정렬 기본값)를 보여줍니다 :
때 text-align 속성이 설정되어 "justify" 각 라인은 모든 라인이 동일한 폭을 가지고 있으며, 왼쪽과 오른쪽 마진 (잡지, 신문 등) 직선이되도록 뻗어 :
텍스트 장식
text-decoration 속성 설정 또는 텍스트에서 장식을 제거하기 위해 사용된다.
값 text-decoration: none; 종종 링크에서 밑줄을 제거하는 데 사용됩니다 :
다른 text-decoration 값은 텍스트를 장식하는 데 사용된다 :
예
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} »그것을 자신을 시도 | 참고 :이 종종 독자를 혼란으로, 링크없는 텍스트를 강조하지 않는 것이 좋습니다. |
|---|
텍스트 변환
text-transform 속성은 텍스트의 대문자와 소문자를 지정하는 데 사용됩니다.
대문자 또는 소문자로 모든 설정, 각 단어의 첫 글자를 대문자로 사용할 수 있습니다 :
예
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} »그것을 자신을 시도 텍스트 들여 쓰기
text-indent 속성은 텍스트의 첫 줄의 들여 쓰기를 지정하는 데 사용됩니다 :
문자 간격
letter-spacing 속성은 텍스트에서 문자 사이의 간격을 지정하는 데 사용됩니다.
다음의 예는 증가 또는 문자 사이의 공간을 감소하는 방법을 보여줍니다
줄 높이
line-height 속성은 라인 사이의 공간을 지정하는 데 사용됩니다 :
텍스트 방향
direction 속성은 요소의 텍스트 방향을 변경하는 데 사용됩니다 :
단어 간격
word-spacing 속성은 텍스트의 단어 사이의 간격을 지정하는 데 사용됩니다.
다음의 예는 증가 또는 단어 사이의 공간을 감소하는 방법을 보여줍니다
더 예
요소 내부의 텍스트 줄 바꿈을 사용하지 않도록 설정
이 예제에서는 요소 내에 텍스트 줄 바꿈을 사용하지 않도록 설정하는 방법을 보여줍니다.
이미지의 수직 정렬
이 예는 텍스트에서 이미지의 수직 정렬을 설정하는 방법을 보여줍니다.
텍스트에 그림자를 추가
이 예는 텍스트에 그림자를 추가하는 방법을 보여줍니다.
연습으로 자신을 테스트!
모든 CSS 텍스트 속성
| 재산 | 기술 |
|---|---|
| color | 텍스트의 색상을 설정합니다 |
| direction | 텍스트 방향 / 쓰기 방향을 지정합니다 |
| letter-spacing | 증가 또는 텍스트의 문자 사이의 간격을 감소 |
| line-height | 행 높이를 설정합니다 |
| text-align | 텍스트의 수평 정렬을 지정합니다 |
| text-decoration | 장식 텍스트로 추가 지정 |
| text-indent | 텍스트 블록에서 첫 번째 줄의 들여 쓰기를 지정합니다 |
| text-shadow | 텍스트 첨가 그림자 효과를 지정 |
| text-transform | 텍스트의 대소 문자를 제어 |
| unicode-bidi | 와 함께 사용 방향 을 설정하거나 텍스트가 같은 문서에 여러 언어를 지원하기 위해 재정의해야하는지 여부를 반환하는 속성 |
| vertical-align | 요소의 수직 정렬을 설정합니다 |
| white-space | 요소 내부에 공백 처리하는 방법을 지정합니다 |
| word-spacing | 증가 또는 텍스트의 단어 사이의 간격을 감소 |