＜html＞css样式学习（第四天）文本样式

最新推荐文章于 2023-12-15 11:15:30 发布

〆启

最新推荐文章于 2023-12-15 11:15:30 发布

阅读量227

点赞数 2

分类专栏： css HTML 文章标签： css 学习 java html5

本文链接：https://blog.csdn.net/m0_70516782/article/details/125430403

版权

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

长度单位：

1:像素 px

像素是屏幕上一个个的小正方形，我们正常看不到的，需要放到最大，才能看到

px是固定的单位，px也是非常常用单位

2:百分比 %

相对于其父元素的宽高比，是相对单位，一般用来做响应式的布局

3、em

相对于当前元素的字体大小来改变长度,如果当前元素没有设置字体大小，

那么浏览器会继承祖先元素的字体大小，最终html根标签根元素的默认字体大小是16px

4、rem

相对于根标签根元素改变字体的大小，一般用来做响应式的布局

<!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>
</head>
<style>
      #a1{ 
        width: 300px;
        height: 300px;
        background-color: red;

        /* font-size:20px;  */
        /* 字体20px */
      }
      .a2 {
        width: 10rem;
        height: 10rem;
        /* font-size: 20px; */
        background-color: green;
      }
</style>
<body>
    <div id="a1">
        <p class="a2">长度单位</p>
    </div>
</body>
</html>

颜色单位

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

red green yellow orange

这种单位不推荐使用单词比较多，不好描述

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

R red

G green

B blue

浓度值 0-255

3:RGBA

a 透明度 0-1之间数值

1 不透明 0 完全透明

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

十六进制 0-9abcdef 如果数值两两重复，可以截取一位表示

常用的颜色

#ccc 灰色 #eee 深灰色

#f00 红色 #0f0 绿色

#f60 棕黄色

rgb(255,0, 0)

5:HSL值 HSLA值

颜色浓度

色相

亮度

透明度

例如:

color:#0f0; (绿色) color:rgb(0,0,0); (为黑色) color:rgb(255,255,255);（白色）

字体的样式

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

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

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

4:@font-face 自定义字体

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    
    <style>
      p {
        color: red;
        font-size: 30px;
        font-family:"xiyangyang";
      }
      @font-face {
        /* 字体起的名字 */
        font-family: "xiyangyang";
        /* 引入下载的字体的路径 */
        src: url(./字体/MeowScript-Regular.ttf);
      }
    </style>
  </head>
  <body>
    <p>其灰斗请法张作智切巴答的孔，何郭倒秦君。dsfdsdfexcf</p>
  </body>
</html>