집 > 기사 > 웹 프론트엔드 > CSS 모양 속성은 무엇입니까? CSS 모양 속성 소개

CSS 모양 속성은 무엇입니까? CSS 모양 속성 소개

不言원래의: 2018-08-18 16:19:374272검색

이 기사에서는 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개 항목은 선택사항입니다.