字体样式相关知识点小结(第六天)

01、长度单位

长度单位

        1、像素 px

         是屏幕上的一个个小点,这个小点正常情况下,是看不到。只有放大到一定倍数

         才能看到,1个小点就是1px

        物理像素   一开始开发商就设置定好的,在pc端,1px=1个物理像素

        这也是我们最常用的单位,固定单位

        2、百分比 %  

         相对于其父元素的宽高进行设置,是一个相对单位,多用于流体式布局

        3、em

         相对于当前字体大小来进行设置,也是一个相对单位

         如果当前元素没有设置字体大小,它则会继承其祖先元素的字体大小,

         直到继承根标签/根元素的字体大小,根标签/根元素字体默认的大小是16px

        4、rem

          r  root    

          只相对于根标签/根元素的字体大小进行设置的,也是一个相对单位

          相对单位一般多用于移动端的布局

02.颜色的单位

1:在CSS可以直接使用颜色的单词来表示不同的颜色

     但这种用法比较少,因为颜色单词太多了,而且不太好描述

  2:使用RGB值来表示不同的颜色

     rgb(red, green, blue)

     通过红色,绿色,蓝色不同的颜色浓度,调配出一种颜色

     通过0-255之间的数值进行调配

       0    最小

       255  最大

  3:RGBA

      a  透明度    0-1之间数值,0表示完全透明  1表示不透明

  4:使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样

     十六进制  0-9abcdef

     通过十六进制分别表示红色,绿色,蓝色

     如果十六进制,是这样 #00ff00,#ff0000,则可以两位取一位

     简写#0f0,#f00

    常用的十六进制颜色

      #fff   #000  #f00  #0f0  #f60 橘色

      #ccc 浅灰色  

  5:HSL值  HSLA值

     hsla 表示亮度,色相,颜色,透明度

03、字体的样式

  1:color   设置字体颜色,也可以设置其他颜色  

  2:font-size   设置字体的大小   pc端常用的是px,em

  3:font-family  可以指定文字的字体

  4:@font-face   自定义字体

04、字体的分类

在网页中将字体分成5大类:

          serif  ['serif](衬线字体)

          sans-serif(非衬线字体)

          monospace (等宽字体)

          cursive ['kə:siv](草书字体)

          fantasy  ['fæntəsi](虚幻字体)

      可以将字体设置为这些大的分类,当设置为大的分类以后,

        浏览器会自动选择指定的字体并应用样式

      一般会将字体的大分类,指定为font-family中的最后一个字体 ,用来兜底

05、字体的其他的样式

1.设置文字样式

               可选值:

               normal  默认值   文字正常显示

               italic  斜体  常用

             oblique    斜体   不常用

              例如:font-style: normal;

2.font-weight设置文字的加粗

               可选值:

                normal   默认值  正常显示

                bolder/bold  加粗

              100-900  之间的数值      

               例如:font-weight: normal 

3.设置一个小型大写字母

               可选值

               normal    默认值  正常显示

             small-caps  设置小型大写字母

              例如:font-variant: small-caps;

4.font简写模式

            注意点:

            font的简写,大小,跟字体必须要写

           而且大小必须在倒数第二位,字体必须在倒数第一位

           例如:.p3 {

        font: italic bold 40px serif;

      }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值