关于CSS3字体属性整理分析
字体属性:
Font-family: {font-family: name}
{font-family: cursive| fantasy | monospace | serif | sans-serif}
Font-size: {font-size: 数值 | inherit |xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length}
Font-style: {font-style: normal | italic | oblique | inherit}
Font-weight: {font-weight: 100-900 | bold | bolder | lighter | normal}
Font-variant: {font-variant: normal | small-caps | inherit}
字体复合属性font: {font: font-style font-variant font-weight font-size font-family}
font-size和font-family必须在font属性中出现,而且按固定顺序。Font-style, font-variant, font-weight可以自由调换。
字体颜色color:{color: name | rgb | hex | hsl | hsla | rgba}
文本高级样式
阴影文本text-shadow: {text-shadow: none |
Text-shadow有四个值,第一个值表示阴影的水平位移,可取正负值;第二个值表示阴影垂直位移,可取正负值;第三个值表示阴影的模糊半径,该值可选;第四个值表示阴影颜色值,该值可选。
溢出文本text-overflow用来定义当文本溢出时是否显示省略标记,即定义省略文本的溢出方式。而不具备其他的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(over-flow:hidden)。 {text-overflow: clip | ellipsis}
Clip:不显示省略标记(…),而是简单的裁切条(主流浏览器都支持)
Ellipsis:当对象内文本溢出时显示省略标记(…)(妹啊,Firefox竟然不支持)
控制换行word-wrap:{word-wrap: normal | break-word}
Normal: 控制连续文本换行
Break-word: 内容将在边界内换行,如果需要词内换行(word-break)也可以实现
保持字体尺寸不变font-size-adjust:{font-size-adjust: none | number}
None: 默认值,允许字体序列中每一字体遵守自己的尺寸
Number:为字体序列中所有字体强迫指定同一尺寸
段落属性:
单词间隔word-spacing: {word-spacing: normal | length}
字符间隔letter-spacing: {letter-spacing: normal | length}
文字修饰text-decoration: {text-decoration: none | underline | blink | overline |line-through}
垂直对齐方式vertical-align: {vertical: 属性值}
水平对齐方式text-align: {text-align: sTextAlign}
文本转换text-transform: {text-transform: none | capitalize |uppercase | lowercase}
文本缩进text-indent: {text-indent: length}
文本行高line-height: {line-height: normal | length}
处理空白white-space: {white-space: normal | pre | nowrap | pre-wrap | pre-line}
Unicode-bidi: {Unicode-bidi: normal | bidi-override | embed}
Direction: {direction: ltr | rtl |inherit}
Atas ialah kandungan terperinci 关于CSS3字体属性整理分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.
