10.5 学习CSS笔记

字体的符合属性

<style> 

         .属性值 {

                 font：属性... 最后两位依次是 字体大小和字体组

            }

<style>

        div {

            font-size: 90px;

        }

        .china1 {

            color: blueviolet;

        }

        .china2 {

            color: rgb(213, 129, 33)

        }

        .china3 {

            color: rgba(213, 129, 33,.5);

        }

        .china4 {

            color: #0000ff;（HEX）

        }

        /* 0000ff可以简写成00f */

        .china5 {

            color: #0000ff88;（HEXA）

        }

        /* 0000ff88可以简写为00f8,两位一样时可省略一位 */

.china6 {

            color: hsl(0, 100%, 50%);

        }

        .china7 {

            color: hsla(0, 100%, 50%, .5);

        }

    </style>

文本间距

字母间距：letter-spacing。

单词间距：word-spacing(通过空格识别词)

属性值为像素(px),正值让间距增大，负值让间距缩小。

例如

 <style>

        div {

            font-size: 30px;

        }

        .atguigu2 {

            letter-spacing: 20px;

        }

        /* letter-spacing是字母（包括一个一个的文字）间距 */

        .atguigu3 {

            word-spacing: 20px;

        }

        /* work-spacing是单词间距（除非每个文字中间+空格否则不奏效 */

    </style>

4.3文本修饰

属性名：text-decoration·

可选值：1.none:无装饰线（常用:超链接本身自带下划线，想要取消就用text-decoration: none;)

              2.underline:下划线（常用）

              3.over1ine:上划线4.line-through:

删除线可搭配如下值使用：1.dotted:虚线2.wavy:波浪线3.也可以指定颜色。举例：atext-decoration:none;

例：

<style>

        div {

            font-size: 40px;

        }

        /* 上划线overline 波浪线是wavy */

        .china1 {

            text-decoration: overline wavy gray;

        }

        /* 下划线underline 虚线是dotted 颜色加最后*/

        .china2 {

            text-decoration: underline dotted;

        }

        /* 删除线line-through  */

        .china3 {

            text-decoration: line-through;

        }

        .china4 {

            font-size: 40px;

            text-decoration: none;

        }

        /* 超链接本身自带下划线，想要取消就用text-decoration: none;*/

    </style>

1.由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小。例如：font-size设为40px,最终呈现的文字，可能比40px大，也可能比40px小。

2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

行高

/* font-size line-height 值（px）不要设置相等 */

           /* 第二种写法 line-hingt:normal; */

           /* 第三种 line-hight:1.5;(用的比较多1.5~2) */

           /* 第四种 line-hight 150% */

行高

应用场景1：调整多行文字的间距

应用场景2：单行文字的垂直居中

·行高注意事项：

1.line-height过小会怎样？--文字产生重叠，且最小值是g,不能为负数

2.line-height是可以继承的，且为了能更好的呈现文字，最好写数值。

3.1ine-height和height是什么关系：

    1>设置了height,那么高度就是height的值。

     2>不设置height的时候，会根据line-height计算高度。

ul {

                list-style: square outside url("./../../../枫叶.jpg");

            }

<style>

        table {

            /* border-width: 2px; */

            /* border-color: black; */

            /* border-style: solid; */

            border: 2px black solid;

        }

        tr,th,td {

            border: 2px black solid;

        }

    </style>

表格独有的属性

    1.  /* 控制列宽 */

            table-layout: fixed;

     2.       /* 控制单元格间距 */

            border-spacing: 0px;

      3，      /* 合并相邻单元格边框 */

            border-collapse: collapse;

    4,       /* 隐藏没有内容的单元格(生效的前提是不能合并边框) */

            empty-cells: hide;

   5，         /* 设置表格标题的位置 */

            caption-side: bottom;

以上五个属性只有表格才能使用

   /* 设置背景颜色 */

            background-color: rgb(62, 118, 221);

            /* 设置背景图片 */

            background-image: url(./../../../枫叶.jpg);

            /* 设置背景图片的重复方式 */

            background-repeat: repeat-x;

            /* 控制背景图片的位置的第一种方式 */

            /* background-position: left top ; */

            /* 控制背景图片的位置的第二种方式 */

            background-position: 70px 70px;

            /* 复合属性 */

            background-color: bisque url(./../../../枫叶.jpg) 300px;

/* 第一种单位是px */

        #d1 {

            width: 40px;

            height: 40px;

            font-size: 20px;

            background-color: cadetblue;

        }

        /* 第二种单位是em(相当于当前元素font-size的背倍数，自己身上没有font-size就找父级元素，

        均没有找html的默认值16，如果自身的font-size的单位也是em那就像之前一样找父级) */

        #d2 {

            width: 40em;

            height: 40em;

            font-size: 20px;

            background-color: rgb(32, 145, 149);

        }

        /* 第三种是rem(相当于根元素的font-size的倍数) */

        #d3 {

            width: 40rem;

            height: 40rem;

            font-size: 20px;

            background-color: rgb(6, 117, 120);

        }

        #d4 {

            width: 40px;

            height: 40px;

            font-size: 20px;

            background-color: cadetblue;

        }

        /* 第四种是%(相对其父元素的百分比) */

        .inside{

            width: 50%;

            height: 25%;

            font-size: 20px;

            background-color: coral;

●行内元素(inline)
又称:内联元素
特点:
1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列.
2.默认宽度:由内容撑开，
3、默认高度:由内容撑开，
4、无法通过css 设置宽高,
●行内块元素(inline-block)
又称:内联块元素
特点:
1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列,
2.默认宽度:由内容撑开,
3.默认高度:由内容撑开
4.可以通过Css设置宽高，

总结各元素的显示模式

重点记！！！！