CSS 노트(텍스트 미화)

1. 글꼴 스타일 1, 글꼴 유형 정의(아래 "|"선택적 값을 구분하는 데 사용) 1) font-family 속성font-family: 1 ， 2 ， 3 은 글꼴 이름으로 정의하고 우선순위에 따라 배열한다.쉼표 구분font-family:ncursive|fantasy|monospace|serif|sans-serif - 글꼴 시퀀스 이름으로 2) font 속성(복합 속성, 여러 글꼴 속성을 정의할 수 있음) font:font-style| |font-variant| |font-weight| |font-size| |line-height| |font-family (속성 사이를 공백으로 구분합니다.font는 최소한 글꼴 크기와 유형을 설정하고 뒤에 놓아야 하며 그렇지 않으면 무효)font:caption|icon|menu|message-box|small-caption|status-bar CSS에서 5가지 일반 글꼴을 제공합니다.serif: 와이어 글씨체, 일반적으로 넓어지고, 굵기가 뚜렷해진다sans-serif: 와이어 글씨체가 없고, 일반적으로 넓어지고, 굵기가 뚜렷하지 않다cursive: 초체, 비스듬한 글씨체, 연필 또는 기타 초체 특징fantasy: 기이한 글씨체, 예술글자monospace: 등폭 글씨체
2. 글꼴 크기font-size:xx-small | x-small | small | small | medium | large | x-large | xx-large | larger | smaller | lengthlarger와smaller는 부모 대상의 글꼴에 따라 조정하고 em단위로 length를 계산하여 백분수를 부모 대상의 글꼴로 계산하여 em단위와 동일하게 계산한다.
3. 글씨체 색상color : color 3가지 색상 표시: 색상 이름color:gray 16진법color:#666666 RGBcolor:rgb(120,120,120) CSS3이 지원하는 다른 3가지 색상은 RGBA: RGB에 알파 채널을 추가하여 반투명 색상 HSL을 정의할 수 있음: 색상(H), 포화도(S), 밝기(L)color:hsl(0,100%,100%) HSLA를 사용하여 HSL에 알파 채널을 추가하고반투명 색상을 정의할 수 있습니다.
4. 글꼴 굵기font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 |400 | 500 | 600 | 700 | 800 | 900 속성 수치,normal은 기본값을 나타내며 400, bold는 700
5, 사체 글씨체 font-style: normal | italic | obliqueitalic와oblique는 사체이다
6. 밑줄text-decoration: none| |underline| |blink| |overline| |line-through 오버라인은 윗줄을 표시하고line-through는 관통선을 표시한다.
7. 글씨체 대소문자font-variant:normal | small-caps 및 text-transform:none|capitalize|uppercase|lowercase2. 텍스트 스타일 1, 텍스트 정렬text-align : left |right|center|justifyleft 기본값, 왼쪽 정렬;right 오른쪽 정렬;center 가운데 정렬하기;justify 양쪽 정렬 2, 수직 정렬vertical-aligh: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | lengthauto는layout-flow 속성의 값에 따라baseline 기본값을 정렬합니다.valign 특성을 지원하는 대상 내용과 기선 정렬sub 수직 정렬 텍스트를 나타내는 아래 첨자super 수직 정렬 텍스트를 나타내는 위 첨자top 는 valign 특성을 지원하는 대상의 텍스트와 대상의 맨 위 정렬middle 은valign 특성을 지원하는 대상의 내용과 대상의 중부 정렬bottom 은valign 특성을 지원하는 대상의 내용과 대상의 밑단정렬text-bottom은valign 특성을 지원하는 대상의 텍스트와 대상의 밑단을 맞추는length는 기선에서 계산된 편이량 3, 자간과 자간letter-spacing 자간(자모 간격, 중국어 유효)word-spacing 자간(단어 간격, 중국어 무효)4, 줄 높이(줄 간격)line-height: normal | length5, 축소text-indent: 2emCSS3 새 텍스트 스타일 1, 텍스트 그림자text-shadow: none | length1 length2 length3 colorlength1: 그림자 수평 편이량length2: 그림자 수직 편이량length3: 모호값 2, 그림자 효과 텍스트 그림자의 응용: 대비도 증가, 다색 그림자 정의, 화염 문자 정의, 입체 문자 정의, 스케치 글꼴 정의 등.3. 오버플로우 텍스트 정의text-overflow: clip|ellipsis|ellipsis-wordclip은 생략 표시를 표시하지 않고 나머지는 생략 표시를 표시한다.ellipsis는 마지막 문자에 삽입하고ellipsis-word는 마지막 단어에 삽입한다.4. 텍스트는 줄을 바꾼다(약간)5.동적 내용 추가content: normal|string|attr()|uri()|counter()|nonenormal: 기본값string: 텍스트 내용 삽입sttr(): 요소의 속성 값 URL(): 외부 자원 삽입counter(): 계수기, 정렬 표식 삽입 none: 내용 없음 6, 기본 스타일 복원 CSS3에 initial 속성 값을 추가하여 요소의 스타일 지정 7,사용자 정의 글꼴 유형@font-face{ }속성 및 수치 설명은 다음과 같습니다. font-family: 텍스트의 글꼴 이름 font-style 설정: 텍스트 스타일 font-variant 설정: 텍스트의 대소문자 font-weight 설정: 텍스트의 굵기 설정 font-stretch: 텍스트의 가로로 늘어나는 변형 font-size 설정: 텍스트 글꼴 크기 설정 src: 사용자 정의 글꼴의 절대 경로나 상대 경로를 설정합니다.