이 기사에서는 CSS의 모양 속성이 무엇인지 설명합니다. CSS 모양 속성의 도입에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.
CSS 모양 속성
color: 텍스트 색상
색상 속성은 텍스트 색상을 정의하는 데 사용됩니다. 값을 취하는 방법에는 세 가지가 있습니다. : # 🎜🎜#
- 빨간색, 녹색, 파란색 등 미리 정의된 색상 값입니다.
- 16진수(예: #FF0000, #FF6600, #29D794 등) 실제로 16진수는 색상을 정의하는 가장 일반적인 방법입니다.
- 빨간색과 같은 RGB 코드는 rgb(255,0,0) 또는 rgb(100%,0%,0%)로 표현될 수 있습니다.
주의할 점은 RGB 코드의 퍼센트 색상 값을 사용하는 경우 값이 0일 때 퍼센트 기호를 생략할 수 없으며 0으로 표기해야 한다는 점입니다. %.
line-height: 줄 간격
line-height 속성은 줄 간격, 즉 줄 사이의 거리, 즉 문자의 세로 간격을 설정하는 데 사용됩니다. 일반적으로 행 높이라고 합니다. line-height에 일반적으로 사용되는 속성 값 단위는 픽셀 px, 상대 값 em 및 백분율 %입니다. 실제 작업에서 가장 일반적으로 사용되는 단위는 픽셀 px입니다.
일반적인 상황에서 줄 간격은 글꼴 크기보다 약 7.8픽셀 더 큽니다.
text-align: 가로 정렬
text-align 속성은 HTML의 정렬 정렬 속성과 동일한 텍스트 내용의 가로 정렬을 설정하는 데 사용됩니다. 사용 가능한 속성 값은 다음과 같습니다:
left: 왼쪽 정렬(기본값)
right: 오른쪽 정렬
center: 가운데 정렬
text-indent: 첫 번째 줄 들여쓰기
text-indent 속성은 텍스트의 첫 번째 줄 들여쓰기를 설정하는 데 사용됩니다. 해당 속성 값은 다른 값일 수 있습니다. 단위, em 문자 너비의 배수, 또는 브라우저 창 너비에 대한 백분율을 설정 단위로 사용하는 것이 좋습니다.
1em은 한자 문단의 너비입니다.
p { line-height: 25px;/*行间距*/
text-indent: 2em;/*首行缩进*/
}
h3 {
text-align: center;/*水平对齐*/
}
로그인 후 복사
letter-spacing: 단어 간격 #🎜🎜 #
letter -spacing 속성은 문자 사이의 공백인 단어 간격을 정의하는 데 사용됩니다. 해당 속성 값은 다양한 단위의 숫자 값일 수 있으며 음수 값이 허용되며 기본값은 일반입니다.
word-spacing: 단어 간격
word-spacing 속성은 영어 단어 사이의 간격을 정의하는 데 사용되며 중국어에는 유효하지 않습니다. 문자 간격과 마찬가지로 해당 속성 값은 다른 단위의 값일 수 있으며 음수 값이 허용되며 기본값은 일반입니다.
영어의 경우 자간과 자간을 모두 설정할 수 있습니다. 차이점은 letter-spacing은 글자 사이의 간격을 정의하는 반면, word-spacing은 영어 단어 사이의 간격을 정의한다는 것입니다.
p {
letter-spacing: 2px;/*字间距*/
}
p {
word-spacing: 5px;/*单词间距 针对英文 中文无效*/
}
로그인 후 복사
word-break:자동 줄바꿈
normal 브라우저의 기본 줄바꿈 규칙을 사용하세요.
break-all은 단어 내에서 줄 바꿈을 허용합니다.
keep-all은 반각 공백이나 하이픈으로만 줄바꿈할 수 있습니다.
색상 반투명(CSS3)
텍스트 색상 CSS3에서는 반투명 형식을 채택할 수 있습니다.
color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1之间 color:raba(0,0,0,0.3)
로그인 후 복사
텍스트 그림자(CSS3)
텍스트에 그림자 효과를 추가할 수 있습니다. 그림자 그림자
text-overflow:水平位置 垂直位置 模糊距离 阴影颜色;
로그인 후 복사
# 🎜 🎜#값설명 |
|
h-shadow
필수입니다. 수평 그림자의 위치입니다. 음수 값이 허용됩니다. |
| v-shadow
필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다. |
| blur
선택사항. 흐린 거리. |
| color
선택사항. 그림자의 색상입니다. CSS 색상 값을 참조하세요. |
|
처음 2개 항목은 필수, 마지막 2개 항목은 선택사항입니다.
관련 권장 사항:
CSS3의 모양 속성을 사용하여 elements_html/css_WEB-ITnose의 모양 변경
#🎜🎜 # css 여백 여백 속성 및 사용 요약
위 내용은 CSS 모양 속성은 무엇입니까? CSS 모양 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!