devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML_CSS学习：常用的字符属性

作者：菜鸟追梦旅行 | 2024-05-07 01:46:46

赞

踩

HTML_CSS学习：常用的字符属性

一、字体大小

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体大小</title>
  6.     <style>
  7.         /*body{*/
  8.         /*    font-size: 20px;*/
  9.         /*}*/
  10.         .atguigu1{
  11.             font-size: 40px;
  12.         }
  13.         .atguigu2{
  14.             font-size: 30px;
  15.         }
  16.         .atguigu3{
  17.             font-size: 20px;
  18.         }
  19.         .atguigu4{
  20.             font-size: 12px;
  21.         }
  22.         .atguigu5{
  23.             /*浏览器能够接受的最小字体是12px*/
  24.             font-size: 3px;
  25.         }
  26.         .atguigu7{
  27.             /*浏览器能够接受的最小字体是12px*/
  28.             font-size: 16px;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="atguigu1">尚硅谷1</div>
  34.     <div class="atguigu2">尚硅谷2</div>
  35.     <div class="atguigu3">尚硅谷3</div>
  36.     <div class="atguigu4">尚硅谷4</div>
  37.     <div class="atguigu5">尚硅谷5</div>
  38.     <div>尚硅谷6</div>
  39.     <div class="atguigu7">尚硅谷7</div>
  40.  
  41. </body>
  42. </html>

二、字体族

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体族</title>
  6.     <style>
  7.         .atguidu1{
  8.             /*衬线字体：有棱角感*/
  9.             /*非衬线字体：五棱角感*/
  10.             font-size: 50px;
  11.             font-family: "微软雅黑";
  12.         }
  13.         .atguidu2{
  14.             font-size: 50px;
  15.             font-family: "黑体";
  16.         }
  17.         .atguidu3{
  18.             font-size: 50px;
  19.             font-family: "宋体";
  20.         }
  21.         .atguidu4{
  22.             font-size: 50px;
  23.             font-family: "华文彩云";
  24.         }
  25.         .atguidu5{
  26.             font-size: 50px;
  27.             font-family: "华文彩云","微软雅黑","黑体","宋体";
  28.         }
  29.         .atguidu6{
  30.             font-size: 50px;
  31.             font-family: "STCaiyun","STHupo","Microsoft YaHei",sans-serif;
  32.             /*可以设置多个字体，按照从左往右的顺序逐个查找，找到就用，最后协商serif,sans-serif*/
  33.         }
  34.  
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="atguidu1">尚硅谷1</div>
  39.     <div class="atguidu2">尚硅谷2</div>
  40.     <div class="atguidu3">尚硅谷3</div>
  41.     <div class="atguidu4">尚硅谷4</div>
  42.     <div class="atguidu5">尚硅谷5</div>
  43.     <div class="atguidu6">尚硅谷6</div>
  44.  
  45. </body>
  46. </html>

三、字体风格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体风格</title>
  6.     <style>
  7.         .atguigu1{
  8.             font-size: 50px;
  9.             font-style: normal;
  10.         }
  11.         属性名：font-style
  12.         常用值：
  13.         /*normal:正常（默认值）*/
  14.         /*italic:斜体（使用字体自带的斜体效果）*/
  15.         /*oblique:斜体（强制斜体产生的斜体效果）*/
  16.         /*推荐使用italic*/
  17.         .atguigu2{
  18.             font-size: 50px;
  19.             font-style: italic;
  20.         }
  21.         .atguigu3{
  22.             font-size: 50px;
  23.             font-style: oblique;
  24.         }
  25.         em{
  26.             font-size: 100px;
  27.             font-style: normal;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="atguigu1">尚硅谷1</div>
  33.     <div class="atguigu2">尚硅谷2</div>
  34.     <div class="atguigu3">尚硅谷3</div>
  35.     <em>尚硅谷4</em>
  36.  
  37. </body>
  38. </html>

四、字体粗细

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体粗细</title>
  6.     <style>
  7.         div{
  8.             font-size: 50px;
  9.         }
  10.         .atguigu1{
  11.             font-weight: lighter;
  12.  
  13.         }
  14.         .atguigu2{
  15.             font-weight: normal;
  16.         }
  17.         .atguigu3{
  18.             font-weight: bold;
  19.         }
  20.         .atguigu4{
  21.             font-weight: bolder;
  22.         }
  23.         .atguigu5{
  24.             font-weight: 600;
  25.         }
  26.         /*数值：*/
  27.         /*100-1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时得精确程度）*/
  28.         /*        100-300等同于lighter 400-500等同于normal 600及以上等同于bold*/
  29.  
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="atguigu1">硅谷1</div>
  34.     <div class="atguigu2">硅谷2</div>
  35.     <div class="atguigu3">硅谷3</div>
  36.     <div class="atguigu4">硅谷4</div>
  37.     <div class="atguigu5">硅谷5</div>
  38.  
  39. </body>
  40. </html>

五、字体复合属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体复合属性</title>
  6.     <style>
  7.         .atguigu{
  8.             font: bold italic 100px "华文彩云","华文琥珀";
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="atguigu">尚硅谷</div>
  14.     属性名：font 可以把上述字体样式合并成一个属性
  15.     编写规则
  16.     1.字体大小，字体族必须写上
  17.     2.字体族必须是最后以为，字体大小必须是倒数第二位
  18.     3.各属性键空格隔开
  19. 实际开发中更推荐使用复合写法，但这也不是绝对得，比如只想设置字体大小，那就直接哦那个font-size属性
  20.  
  21. </body>
  22. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/546865
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号