web第三天

伪类选择器：

        a:link{

            color:pink;

        }

        a:visited{

            font-size: red;

        }

        /*hover 鼠标悬停 */

        a:hover{

            /* cursor 鼠标样式 */

            cursor: col-resize;

            font-size: 40px;

        }

结构伪类选择器：

    <style>

    ul li:first-child{

        background-color: green;

    }

    ul li:last-child{

        background-color: pink;

    }

    </style>

 

 

nth-of-type与nth-child()区别：

section div:nth-child():会把所有的盒子都排列序号，

执行的时候首先看：nth-child（）之后回头看div

 

Nth-of-type是在查找对应的，并按需选择

Nth-child是直接按序选择

 

伪元素选择器：

：：before---在选中的文字之前加

：：after---在选中的文字之后加

：：select---文字选中时触发

    <style>

    ul li::before {

        content: "dada";

    }

    </style>

 

 

文本相关样式：

text-indent： 2em；----缩进两个字的距离

 

文本水平对齐：text-align：left（左对齐）    right（右对齐）    center（水平居中）

行内元素会居中，div只内容居中，内容相对里边div居中

line-height：高度；-----单行文本垂直居中

 

文本修饰：文本加下划线、删除线、不加下划线、上划线（不常用）

 text-decoration：underline、line-through（删除线）、none（清楚a标签默认的下划线）、overline

 

List:

height：30px

List-style：circle----设置为圆形

 

元素显示模式转换：

行内元素不能设置宽高，非要设置必须转换为行内块元素

display：inline-block---设置为行内块元素

display：block---设置为块元素（独占一行）

display：inline---设置为行内元素

display：none---隐藏元素

 

Background-image： url（链接）；

Background-repeat： no-repeat；---不再重复

Background-attachment： fixed；----滑动鼠标背景图片不再移动

Background-position： top left；----铺满

 

 

Border-width:-----边框大小

Border-style：-----边框样式

border-radius：50%---边框弧度

border-top-left-radius：40%----左上角弧度

<table>{

border-collapse：-----合并相邻边框

}

</table>

文本阴影：

<div>{

Box-shadow: 20px 20px 10px 10px black

Text-shadow: red 5px(x轴偏移量) 5px（y轴偏移量）

}

Input[type="text"]{

outline：none；

outline-style：groove；
}

防拖拽：

{

Resize: none;------防止文本拖拽

vertical-alin：bottom/top/middle；-----改变文字与文本框的对齐方式

}

<textarea name="xsnsmx" id="" cols="10" rows="10"></textarea>

隐藏元素：

Visibility：hidden；----隐藏元素，位置保留

Opactity: 透明度

绝对定位：

position： absolute；-----绝对定位：不保留位置

<div class="father"></div>

      <div class="son"></div>

bottom：-130px----距离

position：relative；------相对定位

position： fixed------固定定位，相对于可视区域进行定位

position： sticky-----粘性定位

top： 0px----距离顶部0px时定位