html字体相关知识

一、长度单位

        1:像素 px

         实际上是屏幕上的一个个小点,100px,100个小点,这个点,正常情况我们是看不到,

         如果我们把一个内容放大很多倍,就可以看到了,

         在pc端(电脑端),一般情况下1px=1个发光点。

         也是我们最常用的长度单位,它是固定单位

        2:百分比 %  

         相对单位,它是相对于其父元素内容区(width/height)宽高

         子元素的大小会随着父元素的大小变化而变化,我们管这种大小布局,叫流式布局

        3:em

         相对单位,它是相对于其父元素内字体大小而设置的,也就是1em=父元素1个font-fize,

         如果父元素没有字体大小,它就会继承祖先元素的字体大小,如果祖先元素没有设置,

         就会继承根标签(html)的默认的字体大小,也就是16px

        4:rem

         r  root  

         相对单位,它是只相对于根标签(html)的字体大小而设置,也是1rem=1个html的font-size

         html的默认字体大小是16px,有些浏览器有最小的字体大小,一般是10-12px

        5:vw

        viewport width  视口的宽度

        6:vh

        viewport heigth  视口的高度

二、颜色的单位

         

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

  red,green,yellow等,一些简单的颜色,可以用英文单词

  但它不是很方便,一则单词太多,二则颜色也不好描述,三则:太low

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

  rgb(red,green,blue)   浓度0-255

  这个比值不需要记,一般是设计师设计好,或者直接吸取颜色

  3:RGBA

  rgba(red, green, blue, alpha)

  alpha  透明度  0-1之间  

      0是透明,1是不透明

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

   rgb(200,100,80)

   0-9abcdef  16个数字

     语法:#红色的浓度绿色浓度蓝色的浓度

          #7f2eaa

       00 表示最小    0

       ff 表示最大   255

    红色、绿色、蓝色用两位十六进制表示,如果两位十六进制是一样的,可以省略一位

    #ff0000  可简写#f00

    #f0f0f0  不可简写

    常用的16进制颜色:#f00,#0f0,#00f,#ccc灰色,#f60 橘色,#000 ,#fff

   

  5:HSL值  HSLA值(了解)

  HSLA值(色度,饱和度,亮度,透明度)

三、字体的样式

  1:color   设置字体颜色,也可以设置其他颜色,例如边框的颜色等

  2:font-size  设置字体的大小,注意不同的单位px,em,rem

  3:font-family  可以指定文字的字体   设计师也会提前设计好

  4:@font-face   自定义字体

四、字体的分类

  

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

          serif  ['serif](衬线字体)

          sans-serif(非衬线字体)

          monospace (等宽字体)

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

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

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

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

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

五、字体的其他样式

                设置一个文字大小 

                font-size: 30px;

                设置一个字体 

                font-family: Arial, Helvetica, sans-serif;

                设置文字斜体

                font-style  

                  可选值:normal  文字正常显示

                         italic  文字斜体  比较常用

                         oblique  文字斜体

                font-style:oblique;

        .p2{

            color: red;

            设置文字的加粗

            font-weight  

               可选值:

                 normal  文字正常显示  默认值

                 bold/bolder  文字加粗

                 100-900之间的数值   100是最细,900最粗  

            font-weight:700;

            设置一个小型大写字母

            font-variant: ;

               可选值:

                  normal  文字正常显示  默认值

                  small-caps  字母小型大写字母

            font 可以同时设置以上所有的字体相关的样式,颜色不可以

            注意:

              1、必须有字体大小和字体

              2、字体必须在倒数第一位,字体大小必须在倒数第二位

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值