CSS的简单学习（3）

wqksoul

已于 2022-11-23 16:20:34 修改

阅读量91

点赞数

文章标签： css html 前端

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

本文链接：https://blog.csdn.net/wqksoul/article/details/127989955

版权

1长度单位

长度单位

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

2颜色单位

颜色单位

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

red、green、yellow、blank等

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

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

rgb（红色，绿色，蓝色）

颜色的值在0-255之间 0最小，255最大

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

3、RGBA

rgba（red，green，blue，alpha）

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

4、使用十六进制的rgb值来表示颜色，原理和上面RGB原理

十六进制：0-9abcdef

00表示最小，代替0-255的0，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%）

HSLA值 A - alpha 透明度 0-1之间

3字体的样式

<!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>字体的样式</title>
    <!-- 
        1、color    设置字体颜色
        2、font-size    设置字体大小
        3、font-family  设置字体样式
        4:@font-face   自定义字体
	-->
    <style>
        /* 第一步：自定义字体 */
        @font-face {
        /* 你给字体起的名字 */
        font-family:'xiyangyang' ;
        /* 字体引入路径 */
        src: url(./字体/MeowScript-Regular.ttf);
    }
    p{
      color: #f00;
      font-size: 30px;
    /* 设置文字的字体  字体是设计师设计好，提前规定好，我们直接使用即可*/
    /* 第二步：使用自定义字体 */
      font-family:'xiyangyang';
    }
    </style>
</head>
<body>
    <p>雷王善要，招面唯张。Lorem ipsum dolor sit amet.</p>
</body>
</html>

4字体的分类

在网页中讲字体分成5大类

serif (衬线字体)

sans-serif （非衬线字体）

monospace （等宽字体）

cursive （草书字体）

fantasy （虚幻字体）

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

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

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

5字体的其他样式

<!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>字体的其他样式</title>
     <style>
        .p1 {
          font-size: 2em;
          font-family: "Times New Roman", Times, serif;
          /* 设置文字斜体  */
          font-style: oblique;
          /* 设置文字的加粗 */
          font-weight: 900;
        }
        .p2 {
          color: red;
          font-size: 35px;
          font-variant: small-caps;
        }
        .p3 {
          color: green;
          font: italic bold 30px serif;
        }
      </style>
</head>
<body>
    <p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>

    <p class="p2">我是一段文字，ABCDEFGabcdefg</p>

    <p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>

<!--

设置一个文字的大小 font-size

设置一个字体 font-family

设置文字斜体

font-style：；

可选值：

normal 默认值文字正常显示

italic 文字倾斜(比较常用)

oblique 文字倾斜（了解就好）

设置文字加粗

font-weight：；

可选值：

normal 默认值文字正常

bold 文字加粗

bolder 文字加粗

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

设置一个小型大写字母

font-variant

可选值：

normal 默认值

small-caps 设置小型大写字母

font的简写

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

注意：

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

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

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

6行间距

1、行高（line height）：文字占有的实际高度

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

上间距=下间距

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

line-height样式名

可选值：

1、直接写大小，单位：px/em/rem/%

2、直接写倍数，1/2/3/4……

3、可以写百分比，100%，200%，300%……

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

只要设置行高跟父元素一致即可

3、font也可以指定行高

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

7文本的相关样式

<!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>文本的相关样式</title>
      <!-- 文本相关的样式 -->
      <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>
</head>
<body>
    <h1>判已母定国你十。</h1>
    <p class="p1">到病量的，创乌你太君那国欲如韩定，月章。 至圣明安的才后是人，磊们下久，览和三是。 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas, beatae!</p>
    <p class="p2">尺的负得，到为拾应。 应同生法自让乏不色死分极文能卅郭之县者。 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, voluptatum.</p>
    <p class="p3">谓为即，亲仃盲自拿马兄措我韩小反承清开当，评王小国，是若你。</p>
    <div class="box"></div>
    <span>我是span标签</span>
</body>
</html>

<!--

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

可选值：

none 默认值，文本正常显示

uppercase 字母大写

lowercase 字母小写

capitalize 单词首字母大写

2、text-deccoration 可以用来设置文本的

可选值:

none 默认值，文本正常显示

underline 文本下划线