css样式——胖鱼HTML/css入门第三天

最新推荐文章于 2024-09-04 20:48:11 发布

胖鱼不秃头

最新推荐文章于 2024-09-04 20:48:11 发布

阅读量62

点赞数

分类专栏： HTML 文章标签：大数据

本文链接：https://blog.csdn.net/qq_51289074/article/details/125434588

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中长度单位（像素、百分比、em、rem）的颜色单位（单词、RGB、RGBA、十六进制）、字体样式（颜色、大小、字体家族、自定义字体）及字体分类，同时讲解了行高、文本样式（大小写、修饰线、间距、对齐、省略号、阴影）的概念与应用，是前端开发人员深入理解CSS样式的宝贵资料。

摘要由CSDN通过智能技术生成

0.学习目标

1:长度单位大小，有几种书写方式

2:颜色单位常用方式有哪些

3:字体样式有哪些（了解）

4:常用的字体分类

5:行高

6:文本样式（7-8个）

1.长度单位

1:像素 px

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

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

2:百分比 %

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

3、em

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

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

4、rem

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style>
      #box {
        width: 300px;
        height: 300px;
        background-color: red;
        /* font-size: 20px; */
      }
      .box1 {
        width: 10em;
        height: 10em;
        /* font-size: 20px; */
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <!-- 程禀心，密谓和挟谭。 -->
      <div class="box1"></div>
    </div>
  </body>
</html>

2.颜色的单位

颜色单位：

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-9abcdfe 如果数值两两重复，可以截取一位表示

常用的颜色

#ccc 灰色 #eee 深灰色

#f00 红色 #0f0 绿色

#f60 棕黄色

rgb(255,0, 0)

5:HSL值 HSLA值

颜色浓度

色相

亮度

透明度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color:#f60;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

3.字体的样式

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>

4.字体的分类

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

serif ['serif]（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title> </title>
    <style>
      /* p{
        font-family: ;
      } */
    </style>
  </head>
  <body>

    <p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>
    <p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
  </body>
</html>

5.字体的其他样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 
		颜色
		设置一个文字大小
		设置一个字体
		设置文字斜体
		设置文字的加粗
		设置一个小型大写字母
		font简写
   -->
    <style>
      .p1 {
        /* 设置一个文字大小 */
        font-size: 40px;
        /* 设置一个字体 */
        font-family: fantasy;
        /* 设置文字斜体
		        可选值：
				  normal  默认值  文字正常显示
				  italic  文字斜体  常用的
				  oblique  文字斜体
		  */
        font-style: oblique;
        /* 设置文字的加粗
		       可选值
			     normal  默认值  文字正常显示
			     bold  加粗
				 100-900数值   100最细  900最粗
		   */
        font-weight: 900;
      }
      .p2 {
        /* 	设置一个小型大写字母 */
        font-variant: small-caps;
      }
	  /* font简写  必须有设置字体大小（必须倒数第二位）、设置字体（必须在倒数第一位） */
      .p3 {
        font: bold italic 30px fantasy;
      }
    </style>
  </head>
  <body>
    <strong>了赐贤生之，我放郭。</strong>
    <h1>下将恶，厅大时，法。</h1>
    <!-- <p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p> -->

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

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

6.行间距

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 1、行高（line height）  文字占有的实际高度 
             可选值
                 1、可以直接设置大小   例如50px,100px
                 2、可以写数值，是字体的倍数
                 3、可以写百分比
         2、单行文本在父元素中垂直居中，把行高和高度设置一样的，
               行高=上间距+文字的大小+下间距
         3、font中也可以指定行高
               font: 38px/2 monospace;   
          -->
    <style>
      p {
        font: 38px/2 monospace;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        line-height: 200px;
      }
    </style>
  </head>

  <body>
    <p class="p1">一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。</p>
    <p class="p2">在我的后园，可以看见墙外有两株树，一株是枣树，</p>
    <!-- <div class="box">
       <em>同仓要位倒 </em>
    </div> -->
  </body>
</html>

7.文本样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!--  
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        居中对齐
      justify       两端对齐

6: text-indent 设置首行缩进
   一般用em为单位 

7: white-space: ; 设置网页如何处理空白
      可选值
          normal  


8: text-overflow 文本溢出包含元素时发生的事情
      可选值
        none 默认 正差显示
        ellipsis 省略号显示

9: text-shadow: 设置文本阴影 四个参数由空格隔开
    参数：
        1.h-shadow  必填 阴影水平位移距离
        2.v-shadow  必填 阴影垂直位移距离
        3.blur      阴影模糊半径 默认为0px（清晰）     
        4.color     阴影的颜色  默认字体颜色

10:vertical-align  设置文本垂直对齐的方式 只能设置图文表格的垂直对齐
    作用：1.设置图文对齐    
            可选值：
              baseline  默认值 基线对齐
              bottom      下对齐
              top         上对齐
              middle     居中对齐


          2.解决图片三像素问题  图片与图片之间的空白
              方案一：vertical-align：属性值不为baseline
              方案二：为图片父元素设置字体大小为0px
              方案三：将行内块元素图片转成块元素

        -->
    <style>
      img{
          width: 300px;
          /* 将元素转化成块元素 */
          display: block;

      }

      /* display: ; 实现元素间的相互转换
            可选值：
                none  隐藏元素
                block 将元素转化成块元素
                inline-block 将元素转化成行内块元素*/
      .p1{
        text-transform:capitalize;
        /* text-decoration: line-through; */
        /* letter-spacing: 20px; */
        /* word-spacing: 20px; */
      }
      .p2{
        /* text-align:justify; */
        /* text-indent:2em; */

        /* 文本省略号固定写法 */
            /* 设置固定宽度 */
            width: 300px;
            /* 设置不换行 */
            white-space: nowrap;
            /* 背景颜色 */
            /* background-color: cornflowerblue; */
            /* 设置多余内容省略号 */
            text-overflow: ellipsis;
            /* 设置裁剪多余部分 */
            overflow: hidden;

      }
      a{
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <img src="./img1.jpeg" alt="">
    <a href="#">你生下也。</a>
    <p class="p1">斯娟书准一氏会，赏。Lorem ipsum dolor sit amet consectetur.</p>
    <p class="p2">即文烦航斗收手派皮为保极之仓由有火别至。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, quia.</p>
  </body>
</html>