CSS字体样式

最新推荐文章于 2024-05-16 07:03:49 发布

cu4

最新推荐文章于 2024-05-16 07:03:49 发布

阅读量151

点赞数

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/wuwei_19981001/article/details/127251548

版权

一、长度单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* html{
        font-size: 20px;
      } */
      *{
        padding: 0;
        margin: 0;
      }
      .box{
        width: 50%;
        height: 100px;
        background-color: red;
        font-size: 30px;
      }
      /* .box1{
        width: 10rem;
        height: 10rem;
        background-color: #bfa;
      } */
    </style>
    
</head>
<body>
    <div class="box">
          <!-- <div class="box1"></div> -->
    </div>
</body>
</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 视口的高度

我们把视口划分为100个，宽度100vw，高度100vh

二、颜色单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .box1{
          width: 100px;
          height: 100px;
          background-color: rgba(255, 0, 0, 0.5);
    }
  </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

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 自定义字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
          /* 自定义字体 */
          @font-face {
            /* 你给字体起的名字 */
            font-family: "xiyangyang";
            /* 字体的引入路径 */
            src: url(./字体/MeowScript-Regular.ttf);
          }
          @font-face {
            font-family: 'meiyangyang';
            src: url(./字体/ZCOOLKuaiLe-Regular.ttf);
          }
          p {
            color: #f00;
            font-size: 5rem;
            /* font-family:'Times New Roman', Times, serif; */
            font-family: "meiyangyang";
          }
    </style>
</head>
<body>
    <p>方衣得极的也德变为乌罪价览绪快兼妄，自。
     Lorem ipsum dolor sit amet.

    </p>
</body>
</html>