实训第五天——code文本

沐影y_

已于 2022-11-23 20:27:00 修改

阅读量141

点赞数

文章标签： css css3 html

于 2022-11-22 20:47:32 首次发布

本文链接：https://blog.csdn.net/muying0302/article/details/127989632

版权

01.长度单位

长度单位

1:像素 px

就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来,

像素是我们pc端最常用的一个单位，它是一个固定单位

2:百分比 %

是父元素的宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化

一般情况下，做流式布局比较多

3、em

也是一个相对单位，相对于当前元素的字体大小来计算最终大小，

也就是1em=1个font-size。如果当前的元素没有设置字体大小，

那么会继承祖先元素的字体大小，

最终继承到html默认的字体大小，是16px

4、rem

r root 根

也是一个相对单位，相对于根标签html的字体大小来计算最终大小

也就是1rem=1个html的font-size

5、vw、vh

    <style>
      html{
        font-size: 20px;
      }
      section {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      div {
        width: 10rem;
        height: 10rem;
        background-color: red;
      }
    </style>

02.颜色单位

1：在css可以直接使用颜色的单词表示不同的颜色

red，green，yello，blank等

缺点：颜色单词太多了，不好描述

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

rgb（红色，绿色，蓝的）

颜色的值 0-255直接 0最小，255最大

直接用电脑或者插件可以直接吸取颜色的比值

直接用电脑或插件可以吸取颜色的比值,

3:RGBA

regb(red,green,blue alpha)

alpha 透明度 0-1之间设置透明度 0是透明 1是不透明

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

十六进制：0-9abcdef，ff表示最大，代替0-255的255

用十六进制的值表示0-255直接刀数值，表示红色，绿色，蓝色的浓度

语法：#ff0000 像这样两两重复的表示，可以省略一位

简写：#F00

例子：

#f00 红色

#0f0 绿色

#00f 蓝色

#ccc 米白色

#eee 白色

#333 黑色

5.HSL值（H-色相 0-360，S-饱和度 0-100%，L-亮度0-100%）

    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(100, 20, 30);
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgba(100, 90, 40,1);
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            color: #eee;
        }

03字体的样式

    <style>
        /* 自定义字体 */
        @font-face {
            /* 字体起的名字 */
            font-family: 'MuYing';
            /* 字体引入路径 */
            src: url();
        }
        p{
            color: #f00;
            font-size: 30px;
            /* 设置文字的字体  字体是设计师设计好，提前规则好，我们直接用 */
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        /* 
        1：color        设置文字颜色
        2：font-size    设置文字大小
        3：font-family  设置文字字体
        4:@font-face    自定义字体 
        */
    </style>

04.字体的分类

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

serif ['serif]（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

cursive ['kə:siv]（草书字体）

fantasy ['fæntəsi]（虚幻字体）

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

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

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

05.字体的其他样式

设置一个文字大小 font-size

设置一个字体 font-family

设置文字斜体 font-style：；

可选值：

normal 默认值文字正常显示

italic 文字倾斜（比较常用）

oblique 文字倾斜（了解）

设置文字的加粗 font-weight

可选值：

normal 正常

bold 文字加粗

bolder 文字加粗

100-900之间数值 100最细 900最粗没有单位

font简写

可以统一设置文字相关的一些样式

注意：

1.必须要有字体大小和文字的字体

2.字体大小必须在倒数第二位

文字字体必须在倒数第一位

    <style>
        .p1{
            font-size: 2em;
            font-family: 'Times New Roman', Times, serif;
            font-style: italic;
            font-weight: 900;
            font-variant: small-caps;

        }
        .p2{
            font-size: 2em;
            font-family: 'Times New Roman', Times, serif;
            font-style: italic;
            font-weight: 450;

        }
        .p3{
            color: pink;
            font: italic 900 30px serif ;

        }
    </style>

06.行间距

1.行高 (line height) 文字占有的实际高度

行高=上间距+文字大小+下间距

上间距=下间距

如果要设置行与行之间的空白距离，可以通过设置行高来实现

line-height样式名

可选值：

（1）.直接写大小，单位：px/em/rem/%

（2）.直接写倍数，1/2/3/4/5...是当前字体大小的倍数

（3）.可以写百分比100% 200% 300%

2.单行文本在父元素中垂直居中

只需要设置行高跟父元素高速一致

3.font中也可以指定行高

font：字体大小/行高字体；

    <style>
      .p1 {
        font-size: 25px;
        color: red;
        line-height: 2;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: pink;
        line-height:100px ;
      }
      .p2{
        color: green;
        font: 30px/1.5 sans-serif;
        /* line-height: 2; */
      }
    </style>

07.文本样式

1: text-transform 可以用来设置文本的大小写

可选值：

none 文本正常显示默认值

uppercase 字母大写

lowercase 字母小写

capitalize 单词首字母大写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

none 文本正常显示默认值

underline 文本下划线

overline 文本上划线

line-through 文本删除线

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

可选值：

left 默认值，文本靠左对齐

right 文本靠右对齐

center 文本居中对齐

注意：设置文本的对齐方式，必须要给文本一定的空间，

如果行内元素的话，它的宽度是被内容撑开的，也就无法设置

6: text-indent 设置首行缩进

常用的长度单位：em

7: white-space: ; 设置网页如何处理空白，可以设置换不换行

8: text-overflow 文本溢出包含元素时发生的事情

可选值：ellipsis 省略号

9: text-shadow: h-shadow v-shadow blur color;

4个参数（参数之间以空格隔开）

1、阴影的水平位移距离正值向右，负值向左必填

2、阴影的垂直位移距离正值向下，负值向上必填

3、阴影的模糊半径选填，默认是0px

4、阴影的颜色一般情况用rgba 选填，默认是字体的颜色

10：box-shadow: h-shadow v-shadow blur color;

4个参数跟text-shadow是一样

唯一不同的是

阴影的颜色默认是黑色

11: vertical-align 设置元素垂直对齐的方式

  <style>
    .p1 {
      font-size: 30px;
      text-transform: capitalize;
      text-decoration: line-through;
      letter-spacing: 10px;
      word-spacing: 30px;
    }

    .p2 {
      font-size: 30px;
      /* text-align:center; */
      text-indent: 2em;
    }

    .p3 {
      background-color: pink;
      /* 设置单行文本省略号的固定写法 */
      /* 作业：自行研究多行文本省略号的写法 ？*/
      /* 设置宽度 */
      width: 400px;
      /* 设置不换行 */
      white-space: nowrap;
      /* 设置多余的内容裁剪掉 */
      overflow: hidden;
      /* 设置多余的内容以省略号的形式出现 */
      text-overflow: ellipsis;
    }

    h1 {
      color: red;
      text-align: center;
      text-shadow: 5px 5px 10px;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: green;
    }

    /* 需求：当鼠标移入的时候，box四周出现阴影 */
    .box:hover {
      box-shadow: 0px 0px 10px;
    }

    span {
      text-align: center;
    }
  </style>

08.文本样式（图片）

vertical-align 设置元素垂直对齐的方式

作用：

1、设置图文的对齐方式

2、解决图片三像素的问题

引入图片后，图片与图片之间会有三像素的空白，正常情况，这个空白我们是要去除

方法一：

vertical-align 非baseline

方法二：

设置其父元素的font-size为0

方法三：

设置图片为块元素