Day03 Web前端学习笔记

最新推荐文章于 2024-07-12 16:27:40 发布

夜深邃星如尘

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量44

点赞数 1

分类专栏： web 文章标签：前端学习笔记 css

本文链接：https://blog.csdn.net/m0_74281884/article/details/131622202

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

伪类选择器

伪类选择器：用来描述一个元素的特殊状态。比如第一个元素、某个元素的子元素、鼠标点击的元素

a:link {
            color: pink;---------------------字体颜色
        }
        a:visited {
            color: red;---------------------访问后字体颜色
        }
        -----------------------------------------/* :hover   鼠标悬停 */
        a:hover {
        ---------------------------------------------/* cursor  鼠标样式 */
            cursor: pointer;----------------------------鼠标在链接上面悬停是的样式
            font-size: 40px;
        }


        a:active {
            font-size: 70px;------------------------------鼠标按住不动时字体的大小
        }

      display: none;--------------------------删除原有的样式

结构伪类选择器

1.原理：能够使用结构伪类选择器在HTML中定位元素
2.作用：根据元素在HTML中的结构关系查找元素( 根据html结构选择标签 )
3.优势：减少对于HTML中类的依赖，有利于保持代码整洁( 选择方便,省去了很多类名 )
4.场景：常用于查找某父级选择器中的子元素

父元素子元素:nth-child(n) :父元素第n个子元素
even：偶数
odd：奇数

ul li:nth-child(3) {------------------------匹配父元素中的第几个
        }
ul li:nth-of-type(4) {----------------------指定类型E的第几个
        }
ul li:nth-child(2) {--------------------先看nth-child，再看li
        }

ul li:nth-of-type(2) {--------------------先找li,把指定元素的盒子排列序号
        }

伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

：：before       content:"~"
::after  content:"~"
::selection

文本相关样式

text-indent: 2em;

文本水平对齐方式

text-align: center;

overflow: auto;

行高单行文本垂直居中行高=元素高度

line-height: 200px;

list

css具有层叠行，后面的会覆盖前面的

list-style:

元素显示模式转换

行内元素无法设置宽、高转换为行内块元素

display: none;隐藏元素，脱离文档流

display: inline-block; 将元素转换为行内块元素

display: inline; 行内元素

display: block; 块元素

背景

background-color: aqua;
background-image: url(../.jpg);------------插入背景图片
background-repeat: no-repeat;
background-attachment: fixed;------------------背景图片固定
background-position: top left; */--------------定位
background: fixed url(../.jpg) no-repeat;-------------背景不重复

样例：五彩导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 54px;
            color: #3f3f3f;
        }

        .one {
            background-image: url(../01-案例/images/bg1.png);
        }

        .two {
            background-image: url(../01-案例/images/bg2.png);
        }

        .three {
            position: relative;
            background-image: url(../01-案例/images/bg3.png);
        }

        .three img {
            display: none;
            position: absolute;
            bottom: -130px;
            left: 0;

        }

        .four {
            background-image: url(../01-案例/images/bg4.png);
        }

        .one:hover {
            background-image: url(../01-案例/images/bg5.png);
            color:rgb(0, 255, 255);
        }

        .two:hover {
            background-image: url(../01-案例/images/bg6.png);
            color:rgb(0, 225, 255);
        }

        .three:hover {
            background-image: url(../01-案例/images/bg7.png);
            color: rgb(0, 255, 255);
        }

        .three:hover img {
            display: block;
        }

        .four:hover {
            background-image: url(../01-案例/images/bg8.png);
            color: rgb(0, 225, 255);
        }
    </style>

</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">
        五彩导航
        <img src="../code.jpg" alt="">
    </a>
    <a href="#" class="four">五彩导航</a>

</body>

</html>

边框

border-radius        边框弧度
border-width        边框宽度
border-style        边框样式
border-color 边框颜色

样例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border-radius: 10px; */
            /* border-width 边框宽度 */
            /* border-width: 20px;
            border-style: solid;
            border-color: rgb(35, 223, 18); */
            border: 4px solid black;
            /* border-radius: 50%;    边框弧度*/
            border-top-left-radius: 40%;
        }
    </style>
</head>

<body>
    <div>
        我是一个盒子
    </div>
</body>

</html>

合并相邻边框

合并相邻边框 border-collapse: collapse;

<table cellspacing="0">---------------边框空隙为0

阴影

样例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* box-shadow: 20px 20px 10px 10px black; */
        }

        p {
            text-shadow: red 5px 5px;

        }
    </style>
</head>

<body>
    <div>
        bvdjvdjc
    </div>
    <p>woshi wenzi</p>
</body>

</html>

轮廓线

outline: none; 取消乱廓线

outline-style: groove; 罗廓线样式

防拖拽

resize: none; 防止文本拖拽

vertical-align 改变与文字的对齐方式

隐藏元素

display: none; 脱离文档流，原来的位置不再保留

visibility: hidden; 元素隐藏，位置保留

opacity: 0; 透明度为0

绝对定位

position: relative; 相对定位

osition: absolute; 绝对定位：不保留原来位置子绝父相父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动。如果都没找到，则相对于浏览器进行定位

top: 100px; 距离顶端100px

当元素的position设置为absolute时,则开启了元素的绝对定位

用法: position: absolute;

绝对定位的特点:

与相对定位一样.开启了绝对定位以后,如果不设置偏移量,元素的位置不会发生任何改变

开启绝对定位之后,元素会从原有的文档流中脱离.只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块

绝对定位会改变元素的性质.行内元素变为块元素,块元素的宽度被内容撑开(即块元素中原有内容有多宽,开启绝对定位之后的块元素就有多宽)

绝对定位会使元素提升一个层级

固定定位

固定定位:相对于可视区域进行定位

以浏览器的可视窗口为参照点移动元素
定位参照点跟父元素没有任何关系
固定定位的元素页面发生滚动时不随滚动条滚动
固定定位不在占有原先的位置，脱离文档流

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

position: fixed;
right: 40px;
top: 50%;
height: 100px;
background-color: pink;

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）

视口元素：显示内容的区域。会设置宽，高。一般会设置 overflow:hidden
容器元素：离 sticky 元素最近的能滚动的祖先元素。
粘性约束元素：粘性定位的父元素。有时，也会出现粘性约束元素就是容器元素的情况。
sticky 元素：设置了 position: sticky; 的元素。