第一周学习笔记DAY.5

最新推荐文章于 2024-05-17 18:09:22 发布

町枝-

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量886

点赞数 16

文章标签：学习笔记 html

本文链接：https://blog.csdn.net/qq_57513810/article/details/136626117

版权

一、长度单位

1:像素 px

就是屏幕中一个个发光的小点，正常情况下，是看不到，当我们将屏幕放大，就可以看到

像素是绝对单位，在pc端它是比较常用

2:百分比 %

相对单位，相对于其父元素的大小变化而变化，可以用作流式布局

3、em

相对单位，相对于当前元素的字体大小的变化而变化，

当前元素没有设置字体大小，会继承其祖先元素的字体大小,最后继承根标签的字体大小

根标签的默认字体大小是16px

4、rem

r root 根

rem 相对单位，相对于根标签的字体大小变化而变化

5、vw vh 视口的大小变化而变化

二、颜色单位：

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

red green,yellow,blue,black,white,pink ，gray ·····

一方面不好记，另一方面不好描述，所以这种方式简单实用

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

rgb（red,green,blue）,用红绿蓝三种颜色不同的浓度比值勾兑新的颜色

浓度值：0-255之间，0表示最小，255表示最大

3:RGBA

rgba（red,green,blue,alpha）

alpha :透明度 0-1之间，0表示透明，1表示不透明

其他跟rgb一样

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

通过十六进制的表示方式，去表示红色，绿色，蓝色的颜色浓度比值，比值也在0-255之间

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

255 == ff

0 == 0

125 == ??

语法：#红色绿色蓝色

rgb（255，0，0） ==#ff0000 ==#f00

rgb(0,255,0)== #00ff00 == #0f0

rgb(0,0,255)== #0000ff ==#00f

像上述两两重复，可以省略一位

三、字体的样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!--
	1:color   设置字体颜色,也可以设置其他颜色
	2:font-size
	3:font-family可以指定文字的字体
	4:@font-face  自定义字体
	-->
  <style>
    /* 自定义字体 */
    @font-face {
      /* 给自定义字体起名字 */
      font-family:'yiyi' ;
      /* 自定义字体的路径 */
      src: url(./字体/ZCOOLKuaiLe-Regular.ttf);
    }

    p{
      color: #00f;
      font-size: 30px;
      /* 应用自定义字体 */
      font-family:'yiyi';
    }
  </style>
  </head>
  <body>
    <p>
      洞牙偶句，动升是慧。
      Lorem ipsum dolor sit amet.
 </p>


  </body>
</html>

四、字体的分类

在网页中将字体分成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>
      .p1 {
        /* 设置颜色 */
        color: red;
        /* 设置一个文字大小 */
        font-size: 30px;
        /* 设置一个字体 */
        font-family: "Courier New", Courier, monospace;
        /* 设置文字斜体
		font-style: ;
		   可选值：
		   	normal  文字正常显示  默认值
			italic  文字斜体
			oblique  文字斜体
		*/
        font-style: normal;
        /* 设置文字的加粗 
		font-weight: ;
			可选值：
				normal  文字正常显示  默认值
				bold  文字加粗
				bolder  文字加粗
100-900  100最细，900最粗	
		*/
        font-weight: 100;
      }
      .p2 {
        color: green;
        /* 字体简体 
		注意：
		1、必须要设置字体大小，和字体
				font：字体大小 字体；
		2、字体大小必须在倒数第二位，字体必须在倒数第一位
		*/
        font: italic bold 40px sansif;
      }
    </style>
  </head>
  <body>
    <p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>

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

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

六、行间距

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

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

上间距 = 下间距

line-height:; 设置行高

可选值：

大小 100px

数值是当前字体大小的倍数，如果当前字体没设置字体大小，会继承其祖先元素的字体大小，直到继承html默认的字体大小

百分比是当前字体大小的百分比

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

可以设置文本的行高跟父元素的高度一致

行高也是可以被继承的样式

3、font中也可以指定行高

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

七、文本样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .p1 {
        /* 1: text-transform 可以用来设置文本的大小写
        可选值：
          none  文本正常显示  默认值
          uppercase  字母变大写
          lowercase   字母变小写
          capitalize  单词首字母大写
        
        */
        text-transform: capitalize;
        /* 2: text-decoration  可以用来设置文本的修饰
        可选值：
           none  文本正常显示  默认值
           underline  加下划线
           overline  加上划线
           line-through  删除线
        */
        text-decoration: line-through;
        /* 
3: letter-spacing可以指定字符间距 
        4: word-spacing可以设置单词之间的距离
        */
        /* letter-spacing: 5px; */
        /* word-spacing: 50px; */
      }
      .p2 {
        /* 5: text-align用于设置文本的对齐方式
              可选值：
                left  文本靠左对齐 默认值
                center  文本居中对齐  
                right  文本靠右对齐
            注意：文字要有可以活动的空间，否则设置没有效果
        
        */
        color: red;
        text-align: right;
        background-color: pink;
      }
      a {
        text-align: right;
        background-color: blue;
      }
.p3 {
        /* 6: text-indent 设置首行缩进 
        text-indent :;  
            可配合隐藏元素
        */
        /* text-indent: -2em; */
        /* 
        7 : white-space: ; 设置网页如何处理空白
          8: text-overflow 文本溢出包含元素时发生的事情
        */
        /* 单行文本省略号 */
        width: 400px;
        background-color: #bfa;
        /* 文本不换行 */
        white-space: nowrap;
        /* 超出文本以省略号的形式存在 */
        text-overflow: ellipsis;
        /* 裁剪多余文本 */
        overflow: hidden;

        /* 查一下多行文本省略号如何写 */
      }
 h1 {
        /* text-indent: -1000px; */
        text-align: center;
        /* 10: text-shadow: h-shadow v-shadow blur color; 
        参数
              h-shadow  控制阴影水平位移距离  正值，向右；负值，向左  必写
              v-shadow  控制阴影垂直位移距离  正值，向下；负值，向上  必写
              blur   模糊半径，值越大，越模糊  可选  默认是0px
              color  一般可用rgba   可选，默认是字体的颜色

        
        */
        text-shadow:10px 10px 10px blue ;
        color: blue;
      }
    </style>
  </head>

  <body>
    <!-- <div>
      <h1>京东</h1>
      <div>
<img src="./img1.jpeg" alt="">
      </div>
    </div> -->
    <h1>国为当胜落不德大望。</h1>

    <a href="">德下韩，入慷明，要。</a>
    <p class="p1">这若慨，火望但，服。 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus, a.</p>
    <!-- <center> -->
    <p class="p2">自笔褒，给不己都系。 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus, a.</p>
    <!-- </center> -->

    <p class="p3">帮者秦吞落沾先动只。 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus, a.</p>
  </body>
</html>

/* 9: vertical-align 设置元素垂直对齐的方式

可选值：

bottom 图文靠下对齐

top 图文靠上对齐

middle 图文居中对齐

baseline 基线对齐

面试题：什么是图片三像素问题，如何解决这个问题？

图片：是行内块标签，它的特点不会独占一行，可以设置宽高,还有一个特点，

就是元素和元素之间会有三像素的空白

解决方案：

1、 vertical-align:；非baseline默认值

2、在其父元素内，设置font-size为0

3、将图片转成块元素

4、将图片脱离文档流

町枝-

关注

16
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
第一周学习笔记DAY.5

1:像素 px就是屏幕中一个个发光的小点，正常情况下，是看不到，当我们将屏幕放大，就可以看到像素是绝对单位，在pc端它是比较常用2:百分比 %相对单位，相对于其父元素的大小变化而变化，可以用作流式布局3、em相对单位，相对于当前元素的字体大小的变化而变化，当前元素没有设置字体大小，会继承其祖先元素的字体大小,最后继承根标签的字体大小根标签的默认字体大小是16px4、remr root 根rem 相对单位，相对于根标签的字体大小变化而变化。
复制链接

扫一扫