CSS 글꼴 및 텍스트 스타일
텍스트 : 색상, 글꼴 크기, 글꼴, 굵게 등
텍스트 : 줄 높이, 정렬 및 텍스트 장식 등
텍스트 스타일 속성 :
font-family
font-size
색깔
글꼴 두께
글꼴 스타일
在html4.0之前，可以用font，但4之后就不用了
<font face="宋体" color="red" size="12px">hiii</font>
<style>
h1{
font-family:"宋体"，"Times New Roman";}
</style>
이제 글꼴 태그 대신 CSS 스타일을 사용하십시오.
글꼴 크기
상대 단위 :
px 픽셀 모니터 해상도의 영향
에/% em 및 %는 부모 요소에 대해 설정된 크기입니다.
절대 크기, 브라우저 해상도 또는 상위 요소의 크기로 변경할 수 없음
color는 요소
색상 의 텍스트 색상을 정의합니다. | RGB | #ffffff
color : red;
color : rgb (33,43,34); 숫자 0 ~ 255 비율은 0 % -100 %
입니다. color : #fff; #beginning, 6 자리 숫자 : 0 ~ f 는 대소 문자를 구분하지 않고 3 자리 숫자로 축약 할 수 있습니다.
글꼴
두께 :
보통 | 굵게 | 굵게 | 더 밝게 | 100 ~ 900
사실 굵게 및 굵게 표시는 기본적으로 동일한 효과, 100 ~ 600은 동일, 700-900도 동일합니다.
기본값은 보통으로 400에 해당하고 700은 굵게에 해당합니다.
斜体:
글꼴 스타일
일반 기울임 꼴 경사
글꼴 변형 글꼴 변형
요소의 텍스트 를 작은 대문자로 설정합니다. normal | small-caps
텍스트 정렬이 사용됩니다.블록 요소
설정 수평 정렬 요소 내에서 텍스트를 :
속성 값을 :
왼쪽, 오른쪽, 중앙, 정당화
당신이 원하는 경우 이미지를 정렬 할 수 에서 센터 , 당신은 사업부 외부로 둥지 블록 수준 요소가 필요합니다
다른 브라우저의 중앙에 표시하고 div 아래의 p 태그의 텍스트가 중앙에있는 경우
<style>
.first{
text-align:center;}
.first p{
width:50%;margin:0 auto;}
</style>
<div class="first">
<p> fsadfasdfasdfsa</p>
</div>
수직 정렬 속성 인라인 요소에만 효과적
요소의 내용은 세로
기준선, 하위, 슈퍼, 상단, 텍스트 상단, 중간, 하단, 텍스트 하단, 길이, 양의 음의 구분 비율이
세로로 적용됩니다. 세로로 적용된
단일 라인 세로 중앙 :
라인 높이 및 높이가 큰
텍스트 -align : center;
여러 줄 텍스트가 세로로 가운데 정렬됩니다.
인라인 요소는 블록 수준 요소에 배치 할 수 없습니다.
디스플레이 : 테이블을 부모 요소에 추가하고,
중앙 요소에 추가 :
vertical-align : middle;
display : table-cell;
line-height 속성은 요소
에있는 텍스트 줄 의 높이와 길이 를 설정하는 데 사용됩니다. 줄 높이가 글꼴 크기 20px보다 16px 적을 때 백분율
이 겹칩니다.
em을 행 높이 단위로 사용하는 것이 좋습니다.,
em 및 % 가 글꼴 크기와 겹치지 않도록
텍스트 인덱스 : 2em; 상단 그리드
줄 높이가 글꼴 크기와 같거나 1em 또는 100 %로 설정되면 줄 사이의 거리가 더 작아지고 브라우저의 기본 줄 높이가 있으며 Chrome은 16px
줄 높이를 상속 할 수 있습니다.
상속은 계산 된 값입니다 . em 또는 % 값을 직접 상속하는 대신 글꼴 크기> 줄 높이가 겹칠 수 있습니다.
텍스트 스타일 속성 :
단어 간격 은 요소 에서 단어 사이의 간격을 설정합니다.공백을 표준으로 사용
letter-spacing 요소 에서 글자 사이의 간격을 설정 합니다 .
값은 양수 또는 음수로 설정할 수 있으며 단위는 em, %, px 등이 될 수 있습니다.
text-transform 요소의 텍스트 대소 문자 설정 : 대문자, 대문자, 소문자, 없음
text-decoration 요소 내 텍스트 장식 설정
밑줄, 윗줄, 줄 넘김, 깜박임,
깜박임없음호환성 문제가 있음
상속 불가
신청
<style>
p{
background-color:#ececec;height:150px;text-align:center;line-height:150px;}
.one{
font-size:80px;color:#c9394a;font-weight:bold;}
.two{
font-size:40px;color:gray;text-decoration:underline;letter-spacing:5px;vertical-align:15px;}
.three{
font-size:80px;color:gray;font-style:oblique;}
</style>
<p><span class="one">郑乾</span><span class="two">小白啊</span><span class="three">!</span></p>
요약하자면 :
매뉴얼과 인터넷의 도움으로 전체에서 부분으로 웹 페이지 제작
文字 样式
font-family
글꼴 크기
색상
글꼴 두께
글꼴 스타일
텍스트 정렬
줄 높이
수직 정렬
단어 간격
문자 간격
텍스트 변형
텍스트 장식
NEXT :
CSS 배경 및 목록
