> 웹 프론트엔드 > CSS 튜토리얼 > 마스터해야 할 CSS 텍스트 스타일

마스터해야 할 CSS 텍스트 스타일

零下一度
풀어 주다: 2017-05-06 11:49:06
원래의
2070명이 탐색했습니다.

몇 가지 텍스트 스타일을 소개하여 관심 있는 친구들이 살펴볼 수 있습니다.

텍스트 크기: |xx-small|x-small|small|medium|large|x-large|xx-lager|

  : 상위 요소의 크기에 비해 크다 작다

텍스트 글꼴:

font-family:"宋体","微软雅黑";
//解决多个系统兼容性问题  escape("微软雅黑")
font-family:"%u5FAE%u8F6F%u96C5%u9ED1"  == font-family:"微软雅黑"
로그인 후 복사

글꼴군

  1. serif 글꼴 serif

  2. sans serif 글꼴 sans- serif
    //일반적으로 호환성을 위해 둘 중 하나를 추가해야 현재 시스템에 설정되지 않은 글꼴이 나오지 않습니다.

마스터해야 할 CSS 텍스트 스타일

안감 라인 글꼴

마스터해야 할 CSS 텍스트 스타일

산세리프 글꼴

글꼴 두께

font-weight:  normal(400)  | bold(700) | bolder | lighter |100 ~ 900
로그인 후 복사

글꼴 스타일

font-style:  normal | italic(斜体,使用斜体样式,字体如果没有斜体样式就正常显示)  |oblique(强制斜体)
로그인 후 복사

단어 간격

letter-specing : 数字可以是负数
text-decoration: none  //取消下划线
word-specing : 数字  字间距
//letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请大家注意,word-spacing对中文无效。(其实添加空格也可以有效)
로그인 후 복사

줄 높이

行高  ==  0.5倍行距 + 文字Top + 文字Bottom + 0.5倍行距  注意有顺序,至上而下的
另一个定义: 两段文字之间 两条基线的距离
1.5em = 1.5 = 150%
로그인 후 복사

텍스트 수정

text-decoration = none;  //删掉修饰
text-decoration=underline //下划线
text-decoration=line-through  //删除线
text-decoration: overline//顶线
로그인 후 복사

공백 처리

white-space :normal   //超过p边界宽度就换行
white-space :nowarp           // 只要没遇到换行符,一直往后放
white-space: pre    //  html原格式显示(计算源代码中的空格和换行)
로그인 후 복사

자동 줄 바꿈

word-break :normal //不打断单词
word-break :break-all;  //打断单词
word-break: keep-all  // 不允许换行,除了遇到空格,换行
로그인 후 복사

[관련 권장 사항]

1. 무료 CSS 온라인 동영상 튜토리얼

2. css 온라인 매뉴얼

php.cn Dugujiujian ( 2)-css 동영상 튜토리얼

위 내용은 마스터해야 할 CSS 텍스트 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿