前端剑法第三式————碎岩

忽而一剑金石碎，绿梢下，勿回首，天下无处不可游

今日学习内容

目录

长度单位

         1:像素 px

2:百分比 %  

3、em

4、rem  

颜色单位：

字体样式

1:color  

2:font-size   

3:font-family     

4:@font-face   

5.font-style  

6.font-weight

7.font-variant

8.font的简写

字体分类

行间距

行高

文本样式

1: text-transform

* 2: text-decoration  

3: letter-spacing

4: word-spacing

* 5: text-align

* 6: text-indent

7: white-space: 

8: text-overflow

* 9:vertical-align

* 10: text-shadow: h-shadow v-shadow blur color;

---

长度单位

        1:像素 px

         屏幕上的一个个小点，正常情况下，我们看不到的，要放到最大

         也是最常用的长度单位

        2:百分比 %  

         设置的百分比，是父元素内容区长度的百分比，是相对单位

        3、em

         相对单位，相对于当前元素的字体大小设置长度，若当前元素没有设置字体大小，

         就会继承祖先元素的字体大小，直到继承html的默认字体大小，

         html默认的字体大小是16px

         也就是1em=1个font-size

        4、rem  

          相对单位， 只相对于根元素根标签的字体大小进行设置

          也就是1rem=html的1个font-size，只能在html中修改

          多用于移动端的布局

颜色单位：

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

     只适用一些简单的颜色

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

    R  G  B  

    0-255  

    语法：rgb(red, green, blue)

  3:RGBA

   语法：rgba(red, green, blue,a)

   透明度：0-1之间  

    rgba(red, green, blue,0)  完全透明

     transparent  完全透明  

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

      0-9,abcdf

      ff  相当于255  表示最大

      00  相当于0    表示最小

      如果两两重复，可以截取一位，例如：#ff0000,简写#f00

  5:HSL值  HSLA值

•     亮度
•     色相
•     饱和度
•     透明度

字体样式

1:color  

设置字体颜色,也可以设置其他颜色

2:font-size   

字体大小设置

3:font-family     

可以指定文字的字体

4:@font-face   

可以使用自定义的字体

例

第一步：自定好字体 */

      @font-face {

        /* 你给字体起的名字 */

        font-family: "meiyangyang";

        /* 引入字体的路径 */

        src: url(./字体/ZCOOLKuaiLe-Regular.ttf);

 第二步：用自定义的字体 */

        font-family: 'meiyangyang';

5.font-style  

设置文字斜体  

可选值

•                  normal  默认值，正常显示
•                  italic  设置斜体
•                  oblique  设置斜体（不常用）

6.font-weight

设置文字的加粗

可选值：

•                 bold   加粗
•                 bolder  加粗
•                100-900之间数值  100最细， 900最粗

7.font-variant

设置一个小型大写字母  

可选值：

•                 normal    默认值  正常显示
•                 small-caps   设置小型大写字母

 8.font的简写

         1、字体大小，字体必须要设置

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

         3、字体大小后可设置行高

           语法：字体大小/行高

           例：20px/40px

字体分类

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

•           serif  ['serif]（衬线字体）
•           sans-serif（非衬线字体）
•           monospace （等宽字体）
•           cursive ['kə:siv]（草书字体）
•           fantasy  ['fæntəsi]（虚幻字体）

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

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

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

行间距

1，行高  文字占有的实际高度

        line-height 设置行高

           可选值：

             a：直接跟大小   例如40px  50px

             b：直接跟数值，是字体大小的倍数    例如1，2，3，4，

             c：可以跟百分比，是字体大小的百分比  

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

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

           上间距和下间距平分空白的区域

3、 font中也可以指定行高

文本样式

1: text-transform

可以用来设置文本的大小写

    可选值：

•        none   默认值，正常显示
•        capitalize  首字母大写
•        lowercase   设置字母小写
•        uppercase   设置字母大写

* 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(设置单行省略号)

文本溢出包含元素时发生的事情

 /* 设置单行文本省略号 */

        width: 300px;

        /* 设置文本不换行 */

        white-space: nowrap;

        /* 设置多余文本省略号的形式出现 */

        text-overflow: ellipsis;

        /* 裁剪多余的 */

        overflow: hidden;

* 9:vertical-align

 设置元素垂直对齐的方式

* 10: text-shadow: h-shadow v-shadow blur color;

设置文本阴影

        水平位移距离  必填  可正可负

        垂直位移距离  必填  可正可负

        模糊半径   可选  

        阴影颜色   可选  默认是字体的颜色

今日学习笔记到此结束