13 atribut gaya fon CSS yang biasa digunakan, yang manakah anda tahu?

WBOY
Lepaskan: 2021-12-31 18:14:38
ke hadapan
4542 orang telah melayarinya

Artikel ini membawakan anda beberapa atribut gaya fon css yang biasa digunakan semasa menetapkan gaya fon Saya harap ia akan membantu semua orang.

13 atribut gaya fon CSS yang biasa digunakan, yang manakah anda tahu?

1. Sifat gaya fon CSS

1.1 font-size Saiz fon

  1. font-sizeAtribut digunakan untuk menetapkan saiz fon Nilai atribut ini boleh menggunakan unit panjang relatif atau unit panjang mutlak.
    font-size: 14px; // px 绝对像素单位font-size: 1em; // 相对父元素字体大小单位// 注:每个元素必须有字体大小,如果没有申明,则直接使用父元素的字体大小//    如果没有父元素(html)则使用基准字号,基准字号为浏览器里设置的字号
    Salin selepas log masuk
  2. Kini, 14px biasanya digunakan dalam halaman web
  3. Cuba gunakan saiz fon genap. Pelayar lama seperti IE6 akan mempunyai pepijat apabila menyokong nombor ganjil.
  4. Antaranya, unit panjang relatif lebih biasa digunakan, dan unit piksel px disyorkan, manakala unit panjang mutlak jarang digunakan. Butirannya adalah seperti berikut:

1.2 font-familyGaya fon

  1. font-family atribut digunakan untuk menetapkan fon. Fon yang biasa digunakan dalam halaman web termasuk Dinasti Lagu, Microsoft YaHei, HeiTi, dll. Contohnya, untuk menetapkan fon semua teks perenggan dalam halaman web kepada Microsoft YaHei, anda boleh menggunakan kod gaya CSS berikut:
     p{ 
     	font-family:"微软雅黑";
     }
     // 注: 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
    Salin selepas log masuk
  2. Pelbagai Fon mesti dipisahkan dengan koma dalam bahasa Inggeris.
  3. Fon Cina memerlukan tanda petikan dalam bahasa Inggeris, manakala fon Inggeris biasanya tidak memerlukan tanda petikan. Apabila anda perlu menetapkan fon Inggeris, nama fon Inggeris mesti mendahului nama fon Cina.
  4. Jika nama fon mengandungi simbol seperti ruang, #, $, dsb., fon mesti disertakan dalam petikan tunggal atau petikan berganda dalam bahasa Inggeris, contohnya, font-family: “Times New Roman”; .
  5. Cuba gunakan fon lalai sistem untuk memastikan ia boleh dipaparkan dengan betul dalam mana-mana penyemak imbas pengguna.
  6. Fon yang paling biasa digunakan dalam halaman web ialah arial, yang dibangunkan oleh Steve Jobs

1.3 CSS UnicodeFon

  1. Tetapkan nama fon dalam CSS dan anda boleh terus menulis bahasa Cina. Walau bagaimanapun, ralat bercelaru akan berlaku apabila pengekodan fail (GB2312, UTF-8, dll.) tidak sepadan. Sistem XP tidak menyokong bahasa Cina yang serupa dengan Microsoft Yahei.

  2. Pilihan 1: Anda boleh menggunakan bahasa Inggeris sebaliknya. Contohnya, font-family: "Microsoft Yahei".

  3. Pilihan 2: Menggunakan pengekodan Unikod secara langsung untuk menulis nama fon dalam CSS boleh mengelakkan ralat ini. Gunakan Unicode untuk menulis nama fon Cina, dan penyemak imbas boleh menghuraikannya dengan betul. font-family: "5FAE8F6F96C59ED1" bermaksud menetapkan fon kepada "Microsoft Yahei".

13 atribut gaya fon CSS yang biasa digunakan, yang manakah anda tahu?

  1. Anda boleh menggunakan escape() untuk menguji kepunyaan fon itu.

    体名称 英文名称 Unicode 编码
    宋体 SimSun 5B8B4F53
    新宋体 NSimSun 65B05B8B4F53
    黑体 SimHei 9ED14F53
    微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1
    楷体GB2312 KaiTiGB2312 69774F53_GB2312
    隶书 LiSu 96B64E66
    幼圆 YouYuan 5E7C5706
    华文细黑 STXihei 534E65877EC69ED1
    细明体 MingLiU 7EC6660E4F53

Nota: Untuk menangani isu pemasangan fon pada komputer yang berbeza, kami cuba hanya menggunakan fon Song Dynasty dan Microsoft Yahei Chinese

1.4 font-weight Ketebalan fon

  1. Selain menggunakan tag b dan strong, anda boleh menggunakan CSS untuk mencapai fon tebal, tetapi CSS tidak mempunyai semantik .
  2. Sambungan: elemen kuat, tebal secara lalai. Elemen kuat mewakili kandungan penting yang tidak boleh diabaikan
    属性 属性值 作用
    font-weight: normal(简写400) 不加粗
    bold(简写700) 加粗
    100~900(100的整倍数) 数值越大字体越粗

Nota: Nombor css 400 bersamaan dengan biasa dan 700 bersamaan dengan tebal. Tetapi kami lebih suka menyatakannya dalam angka.

1.5 font-style Gaya fon

  1. Selain menggunakan tag i dan em, anda juga boleh menggunakan CSS untuk mencapai huruf condong. Tetapi CSS tidak bermakna.
  2. Peluasan: Bahasa yang dinyatakan oleh elemen i: Sekeping teks ini ialah teks khas Dalam penggunaan sebenar, ia biasanya digunakan untuk mewakili ikon (ikon)
    属性 属性值 作用
    font-style: normal 默认值,浏览器会显示标准的字体样式
    italic 浏览器会显示斜体的字体样式
    oblique 浏览器会显示倾斜的字体样式

注:平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式

1.6 font 文字属性速写 (重点)

  1. font属性用于对字体样式进行综合设置,其基本语法格式如下:
    选择器{
    	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型,大小和类型不能省略
    Salin selepas log masuk
  2. 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
  3. 注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

1.7 letter-spacing 字体间距

  1. letter-spacing就是文字与文字间的间距,值可以负数,默认值normal
    p{
    	letter-spacing : 2px;}
    Salin selepas log masuk

1.8 text-decoration 文本修饰:加线

  1. line-through:穿过文字,表示中间加条线
  2. overline:上面加条线(少用)
  3. underline:下面加条线
  4. none:表示没有线,去掉线
  5. 拓展: del、s元素默认中间加线;del元素表示废弃、错误的内容;s元素表示过期的内容;a元素默认下面加线,表示超链接

1.9 text-indent 首行文本缩进

  1. px:缩进多少像素
  2. em:缩进几个字体(中英文缩进宽度值一样)

2.0 line-height 文本行高/垂直居中

  1. 每行文本的高度,该值越大,每行文本的值越大
  2. 设置行高为容器高度,可以让单行文本垂直居中,容器高度为如:height:50px
  3. 行高可以设置为纯数字,表示相对于当前元素的字体大小。如取值1.5:行高为文字的1.5倍,这样文字在放大的时候,行高也在变大,不会出现文字重叠现象

2.1 letter-spacing 文字间隙

  1. em:每个文字间隔几个字体宽度
  2. px:每个文字间隔几个像素

2.2 text-align 文字、行盒、行块盒水平排列方式

  1. left:靠左,默认靠左排列
  2. center:居中
  3. right:靠右

2.3 网页的最小和最大宽度

  1. 设置在body元素的css里
  2. min-width: 1000px 最小像素
  3. max-width: 1500px 最大像素

(学习视频分享:css视频教程

Atas ialah kandungan terperinci 13 atribut gaya fon CSS yang biasa digunakan, yang manakah anda tahu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!