自学CSS基础教程（day5）

目录

注：本文基于VSCode

一、长度单位

二、颜色单位

三、字体样式和分类

1、字体样式

2、字体分类

四、字体的其他样式

五、行间距

六、文本样式

---

一、长度单位

长度单位

            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

<style>
         div{
             width: 50%;
             height: 50%;
             background-color: aqua;
         }
         section{
             width: 200px;
             height: 200px;
             background-color: red;
         }

     </style>

二、颜色单位

 颜色单位：

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

         red、green、yellow、blank等

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

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

            rgb(红色，绿色，蓝色)

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

            例子：000黑色 255255255白色

            直接用电脑或插件吸取颜色比值，Ctrl+Alt+S

        3、RGBA

            rgba(red,green,blue,alpha)

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

        4、使用16进制的rgb值来表示颜色、原理和上边RGB原理一样

        十六进制：0-9abcdef，00代表最小，代替0-255的0，ff表示最大，代替0-255的255

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

        语法：#ff0000，像这样两两重复的表示可以省略一位，简写成#f00

            #f0f0f0 这样的不可以省略

        例子：    #f00 #0f0 #00f #ccc #eee #333

        5、HSL值（H-色相 0-360，S-饱和度 0-100%，L-亮度 0-100%）

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

<style>
        div{
        width: 100px;
        height: 100px;
        background-color: rgb(0, 0, 0);
        }

    </style>

三、字体样式和分类

1、字体样式

        1、color    设置字体颜色，也可以设置其他颜色

        2、font-size    设置字体大小

        3、font-family  设置文字字体  字体是设计师设计好，提前规定好，我们直接使用即可

        4、@font-face   自定义字体

<style>
         /*一、自定义字体*/
         @font-face {
             font-family: yys;/*你给字体起的名字*/
             src: url();/*字体引入路径*/
         }
         p{
             /*二、使用字体*/
             font-family: yys;
         }

     </style>

2、字体分类

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

            serif   ['serif] 衬线字体

            sans-serif      非衬线字体

            monospace       等宽字体

            cursive         草书字体

            fantasy         虚幻字体

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

四、字体的其他样式

        设置字体大小    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、字体大小必须在倒数第二位，字体必须在倒数第一位

<style>
         p{
             font-style: italic;
             font-weight: bolder;
         }
         div{
             font: italic bold 30px serif;
         }
     </style>

五、行间距

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

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

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

        line-height样式名：

            可选值：

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

                2、直接写倍数：1/2/3/4/5……当前字体大小的倍数

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

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

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

        3、font中也可以指定行高

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

<style>
         p{
             line-height: 50px;
             font: 30px/2 serif;
         }
     </style>

六、文本样式

文本相关的样式：

    1、text-transform   设置文本的大小写

        可选值：

            none    文本正常显示    默认值

            uppercase   字母大写

            lowercase   字母小写

            capitalize  单词首字母大写

    2、text-decoration  设置文本的修饰

        可选值：

            none    正常显示    默认

            underline   文本下划线

            overline    文本上划线

            line-through    文本删除线

    3、letter-spacing   指定字符间距

    4、word-spacing     设置单词之间的距离

    5、text-align       设置文本对齐方式

        可选值：

            left    默认    文本靠左对齐

            right   靠右对齐

            center  居中对齐

    注意：设置文本的对齐方式，必须要给文本一定空间，如果是行内元素的话

        它的宽度是被内容撑开的，无法用text-align对齐

    6、text-indent      设置首行缩进

        常用单位：em

    7、white-space      设置网页如何处理空白，可以设置换不换行

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

            可选值：ellipsis    省略号

    9、text-shadow：h-shadow v-shadow blur color；

        有四个参数，参数直接空格隔开

        1、阴影的水平位移距离   正值向右，负值向左    h-shadow  必填

        2、阴影的垂直位移距离   正值向下，负值向上    v-shadow  必填

        3、阴影的模糊半径   选填，默认0px

        4、阴影颜色     一般用rgba  选填，默认是字体的颜色

    10、box-shadow：h-shadow v-shadow blur color；

            4个参数跟text-shadow一样的，唯一不同是：默认阴影颜色为黑色
 

面试题：你能说一说什么是图片三像素问题？有几种方式处理？

    11、vertical-align  设置元素的垂直对齐的方式

        作用：

            1、设置图文的对齐方式

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

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

                方法一：

                    vertical-align  非baseline

                方法二：

                    设置其父元素的font-size为0

                方法三：

                    设置图片为块元素

                方法四：

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

        可选值：

            1、baseline 基线对齐    默认值  以x的最下方为标准

            2、top  文本靠上

            3、bottom   文本靠下

            4、middle   文本居中