学习css第三天，课堂笔记

一、长度单位

1.像素   px

就是电脑屏幕上的一个个发光的小点，肉眼看不出

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

2.百分比  %

会继承父元素的宽高，是父元素宽高的百分比，是一个相对单位

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

3.em

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

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

会继承祖先元素的字体大小，最终继承到html默认的字体大小16px

4.rem

r  root  根

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

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

5.vw、vh

二、颜色单位：

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

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

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

  rgb(红色，绿色，蓝色)三原色勾兑成不同的颜色

  颜色的值  0-255

  直接用电脑或插件截图吸取颜色的比值

3.RGBA

  rgba(红色，绿色，蓝色，alpha-透明度)

  颜色的值  0-255   透明度  0-1，数值越小越透明

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

   0-9abcdef (00-ff)

   用十六进制的值来表示0-255之间的数值，表示红色、绿色、蓝色的浓度

语法：#ff0000，两两重复，可省略一位，写作f00

      #f0f0f0 这种不可以省略

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

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

三、字体的样式

1. color：      设置字体颜色，也可以设置其他东西的颜色
2. font-size：   设置字体大小
3. font-family： 设置字体样式

字体是设计师设计好的，我们直接使用即可

1. @font-face  自定义字体

<style>

         p{

             color: pink;

             font-size: 30px;

             font-family: 'Courier New', Courier, monospace;

             @font-face {

                 /* 给字体起的名字 */

                 font-family:'name';

                 /* 字体引入路径 */

                 src: url();

             }

         }

     </style>

1. font-style    设置文字斜体

 可选值：

Normal   正常显示  默认

italic     文字倾斜 （比较常用）

oblique   文字倾斜 （了解）

1. font-weight

   可选值：

normal   正常显示  默认

bold     文字加粗

blolder   文字加粗

数值：100-900  没有单位

.p1 {

        font-size: 2em;

        font-family: "Times New Roman", Times, serif;

        /* 设置文字斜体  */

        font-style: oblique;

        /* 设置文字的加粗 */

        font-weight: 900;

      }

1. font-variant  设置一个小型大写字母

可选值:

normal   正常显示   默认

small-caps设置小型大写字母

1. font 简写   可以统一文字相关的一些样式

注意：

1. 必须要有字体大小和文字字体
2. 字体大小必须在倒数第二位

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

四、字体的分类

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

serif    ['serif']     (衬线字体)

sans-serif          (非衬线字体)

monospace         (等宽字体)

cursive  ['ka:siv']    (草书字体)

fantasy  ['fantasi']   (虚幻字体)

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

当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式

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

• 行间距

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

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

上间距=下间距

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

line-height的样式名：

1. 直接写大小，单位px、em、%、rem
2. 直接写倍数，是当前字体大小的倍数
3. 可以写百分比

1. 实现单行文本在父元素中垂直居中

 设置行高与父元素高度一致，就可以实现文本居中

2. font中也可以指定行高

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

• 文本样式

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

 可选值:

none文本正常显示默认值

uppercase字母大写

lowercase字母小写

capitalize单词首字母大写

    <style>

        .p1{

            text-transform: uppercase;

        }

    </style>

1. text-decoration [dEka ' rerJ(a)n] 可以用来设置文本的修饰

 可选值:

none文本正常显示默认值

underline文本下划线

overline文本上划线

line-through文本删除线

1. letter-spacing可以指定字符间距
2. word-spacing可以设置单词之间的距离
3. text-align用于设置文本的对齐方式

可选值:

left默认值，文本靠左对齐

right文本靠右对齐

center文本居中对齐

1. text-indent 设置首行缩进，常用单位em
2. white-space: ;设置网页如何处理空白

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

 可选值：ellipsis省略号

 /* 设置单行文本省略号的固定写法 */

<style>

    .p3{

         background-color: pink;

        /* 设置宽度 */

         width: 400px;

         /* 设置不换行 */

         white-space: nowrap;

         /* 设置多余的内容裁剪掉 */

         overflow: hidden;

         /* 设置多余的内容以省略号的形式出现 */

         text-overflow: ellipsis;

      }

</style>

1. text-shadow: h-shadow v-shadow blur color;文本阴影

4个参数(参数之间以空格隔开)

1. 阴影的水平位移距离 正值向右，负值向左  必填
2. 阴影的垂直位移距离 正值向下，负值向上  必填
3. 阴影的模糊半径     选填  默认是0px
4. 阴影的颜色一般情况用rgba  选填  默认是字体颜色

1. box-shadow: h-shadow v-shadow blur color;盒阴影颜色

      4个参数和文本阴影一样，只有一点区别

阴影的颜色默认是黑色

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

   作用：

     1.设置图文的对齐方式

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

     引入图片后，图片与图片之间会有三像素的空白，正常情况下，要去掉

    方法一：

      vertical-align 除baseline都可以，top、bottom、 middle

    方法二：

      设置其父元素的font-size为0（有文本是不适用）

    方法三：

      设置图片为块元素

    方法四：

      使图片脱离文档流，设置他浮动或者绝对定位

    可选值：

      baseline基线对齐 默认值 以图片、文字的最下为准

      top     文本靠上

      bottom  文本靠下

      middle  文本居中