web第三天和第四天笔记

1.字体样式

<style>
        p {
            /* font-size :字体大小  字号 */
            font-size: 12px;
            /* font-family 字体 */
            font-family: "微软雅黑";
            /* 字体粗细  400:正常   700：加粗 */
            /* font-weight: bold; */
            font-weight: 700;
            /* 字体样式   font-style */
            /* font-style: normal; */

            /* style weight size family   字号和字体必须同时存在 */
            /* font: italic 700 20px '宋体';   不推荐 */
            /* css层叠性   属性名相同时，后边的样式会将前面的样式覆盖掉 */
        }
    </style>

2.文本缩进

<style>
        /* body {
            text-indent: 20px;
        } */


        p {
            font-size: 20px;
             text-indent: 32px; 
            text-indent: 2em;
        }
    </style>

3.文本对齐方式

.box1 {
            /* 对齐方式：text-align   居中的是内容*/
            text-align: center;
        }

        .box2 {
            width: 300px;
            height: 400px;
            background-color: pink;
            text-align: center;
        } 

4.文本修饰

 <style>
        a {
            /* 清除a链接默认样式 */
            /* text-decoration: none; */
            /* text-decoration: line-through; */
            /* text-decoration: underline; */
            text-decoration: overline;
        }
    </style>

5.大小写转换

<style>
        ul li:nth-child(1) {
            text-transform: uppercase;
        }

        ul li:nth-child(2) {
            text-transform: lowercase;
        }
    </style>

6.行高

<style>
        p {
            line-height: 50px;
        }

        div {
            width: 400px;
            height: 200px;
            background-color: pink;
            text-align: center;
            /* 单行文本借助行高垂直居中 */
            line-height: 200px;
        }
    </style>

7.文本溢出

<style>
        div {
            width: 300px;
            height: 500px;
            background-color: yellow;
            overflow: auto;

            /* overflow: hidden; */
            /* overflow: scroll;
            
            
            /* white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; */
        }
    </style>

8.背景

<style>
        div {
            width: 300px;
            height: 500px;
            background-color: yellow;
            overflow: auto;

            /* overflow: hidden; */
            /* overflow: scroll;
            
            
            /* white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; */
        }
    </style>

9.列表样式

<style>
        li {
            /* 去除li默认样式的 */
            list-style: none;
            list-style: decimal;

        }
    </style>

10.元素显示模式转换

​
<style>
        li {
            /* 去除li默认样式的 */
            list-style: none;
            list-style: decimal;

        }
    </style>

​

11.轮廓线

 <style>
        input {
            outline-style: none;
            outline-style: dashed;
            /* outline-style: dotted;
            outline-style: double; */
            outline-color: aqua;
            /* outline-width: thick; */
            /* outline-width: 40px; */
            outline: none;
        }
    </style>

12.边框

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;

            border-width: 3px;
            border-color: rgb(33, 29, 29);
            border-style: solid;
            border-top-left-radius: 50%;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 20px;
        }
    </style>

13.合并相邻边框

<style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 40px;
            height: 30px;
            border: 3px solid black;
        }
    </style>

14.颜色

 <style>
        p {
            /* 前景色   字体颜色          */
            color: red;
            color: rgb(33, 106, 178);


        }

        div {
            width: 300px;
            height: 300px;
            background-color: rgb(230, 24, 24);
            /* background-color: rgba(rgb(71, 15, 15), rgb(47, 118, 47), rgb(76, 76, 118), .3); */
            /* opacity   0-1   0时，只是视觉上看不到，原来位置还在保留
               设置透明度的 */
            opacity: 0;
        }
    </style>

15.元素隐藏方式

  <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 1、设置透明度隐藏   0-1   保留原来位置*/
            /* opacity: 0; */
            /*2、 display :none     不保留原来位置*/
            /* display: none; */
            /* 3、visibility：hidden */
            visibility: hidden;

        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>

16.鼠标样式以及防拖拽

style>
        textarea {
            /* 防止拖拽 */
            resize: none;
            /* 鼠标样式 */
            cursor: initial;
        }
    </style>

17.绝对定位

<style>
        .grandfather {
            position: relative;
            width: 1200px;
            height: 1200px;
            background-color: aquamarine;
        }

        .father {
            position: absolute;
            top: 200px;
            position: relative;
            width: 600px;
            height: 600px;
            background-color: aqua;

        }

        .son {
            width: 200px;
            height: 200px;
            font-size: 40px;
        }

        .son1 {
            /* 绝对定位会放弃原来的位置  子绝父相    逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找*/
            position: absolute;
            /* top: 50px; */
            left: 90px;
            bottom: 40px;
            background-color: blue;
            /* 显示的优先级 z-index*/
            z-index: 2;
        }

        .son2 {
            position: absolute;
            bottom: 50px;
            background-color: darkorange;
        }
    </style>

18.固定定位

        .box1 {
            /* 固定定位   相对于可视窗口进行定位   放弃原来位置 */
            position: fixed;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

19.粘性定位

<style>
        p {
            position: sticky;
            top: 20px;
            background-color: pink;
        }
    </style>