web笔记3

最新推荐文章于 2024-10-16 11:23:07 发布

霖烟易辞

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量69

点赞数

文章标签：前端笔记 css

本文链接：https://blog.csdn.net/tang_7615/article/details/131650163

版权

伪类选择器

链接/访问伪类：:link、:visited、:hover、:active、:focus。这些伪类主要用于样式化超链接。
动态伪类选择器：:active, :hover, :focus。这些伪类主要用于改变元素在不同状态下的样式，例如当用户悬停或单击元素时。
目标伪类：:target。此伪类选取活动链接（被点击的链接）。
语言伪类：:lang。使用这个伪类可以根据元素的语言为其设置样式。
结构性伪类：
- 子元素伪类：:first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child。
- 类型伪类：:first-of-type, :last-of-type, :nth-of-type(n), :nth-last-of-type(n), :only-of-type。
状态伪类：:enabled, :disabled, :checked。这些用于选择和改变表单元素的样式。
否定伪类：:not()。这个伪类排除了一部分元素，并选择其余元素。
空元素伪类：:empty。此伪类用于选取没有子元素的元素。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:link {
            color: pink;
        }

        a:visited {
            color: red;
        }

        /* :hover   鼠标悬停 */
        a:hover {
            /* cursor  鼠标样式 */
            cursor: pointer;
            font-size: 40px;
        }


        a:active {
            font-size: 70px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* s a:hover+div {
            background-color: blue;
        } */
        a:hover+div {
            /* background-color: greenyellow; */
            display: none;
        }
    </style>
</head>

<body>
    <a href="#">关闭广告</a>
    <div></div>
    <div></div>


</body>

</html>

结构伪类选择器

子元素伪类：
- :first-child：选择其父元素的第一个子元素。
- :last-child：选择其父元素的最后一个子元素。
- :nth-child(n)：选择其父元素的第n个子元素。
- :nth-last-child(n)：选择其父元素的第n个子元素，从最后一个子元素开始计数。
- :only-child：选择其父元素唯一的子元素。
类型伪类：
- :first-of-type：选择每个父元素的第一个特定类型的子元素。
- :last-of-type：选择每个父元素的最后一个特定类型的子元素。
- :nth-of-type(n)：选择每个父元素的第n个特定类型的子元素。
- :nth-last-of-type(n)：选择每个父元素的第n个特定类型的子元素，从最后一个开始计数。
- :only-of-type：选择其父元素的唯一的特定类型的子元素。

<!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>
        ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: green;
        }

        ul li:nth-child(3) {
            background-color: blue;
        }

        ul li:nth-of-type(4) {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

伪元素选择器

伪元素选择器是CSS选择器的一种，用于选择一个元素的特定部分，而这个部分并不能被HTML元素表示。伪元素能让你为一些特定的元素部分设计样式。常用的伪元素包括：

::before - 在元素内容的前面插入内容。这个伪元素常用于插入装饰性的内容。
::after - 在元素内容的后面插入内容。和 ::before 类似，这个伪元素也常用于插入装饰性的内容。
::first-letter - 选择块级元素第一行的第一个字母。可以用于设计“首字下沉”等效果。
::first-line - 选择块级元素的第一行。用于改变某个块级元素的第一行的样式。
::selection - 选择用户选择的元素部分。例如，你可以改变用户选中文本的颜色和背景色。
::placeholder - 选择输入框的占位符文本。允许你自定义输入框的占位符样式。

注意，伪元素使用两个冒号(::)前缀来与伪类选择器区分。早期的CSS版本中的伪元素（like ::before and ::after）也接受一个冒号的前缀，但是现代的标准和浏览器推荐使用两个冒号的前缀。

p::before {
  content: "前缀";
  color: blue;
}

文本相关样式

text-indent: 2em;首行缩进、
text-align: center;文本水平居中
text-decoration: none;去掉文本装饰
text-decoration: line-through;文本装饰：删除线
text-decoration: overline;文本装饰：下划线
line-height: 60px;行高

<!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: 200px;
            background-color: pink;
            /* text-indent: 2em; */
            /* 文本水平对齐方式 */
            text-align: center;
            /* overflow: auto; */
            /* 行高  单行文本垂直居中   行高=元素高度*/
            line-height: 200px;



        }

        a {
            color: pink;
            text-decoration: none;
            /* text-decoration: line-through; */
            /* text-decoration: overline; */
        }
    </style>
</head>

<body>
    <div>我是一段文字的世界杯</div>
    <a href="https://www.baidu.com">去百度</a>
</body>

</html>

list

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

list-style-type: 用于改变列表项标记的样式。对应的值可以有 disc, circle, square, decimal, none 等。
list-style-position: 这个属性决定了列表标记是在内容的内部还是外部。其值可以为 inside 或 outside。
list-style-image: 用于将列表标记替换为图像。

<!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>
        /* css具有层叠行，后面的会覆盖前面的 */
        ul li {
            height: 30px;
            list-style: none;
            list-style: circle;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
    </ul>
</body>
</html>

元素显示模式转换

在CSS中，display 属性定义了一个元素如何展示在页面上。常见的几种可选值有 block、inline、inline-block、flex、grid 和 none 等。

block：将元素展示为块级元素，这意味着这个元素会在其前后创建新的行。
inline：将元素展示为行内元素，这意味着这个元素可以和其他元素共享同一行。
inline-block：元素行内展示，但是类似块级元素那样可以设置宽度和高度。
flex：将元素展示为弹性盒布局模型，这使得它可以使用弹性布局的特性。
grid：将元素展示为网格布局模型，这能让你使用网格布局特有的布局特性。
none：元素不会被显示。

div {
  display: block; /* Div是一个块级元素，这会使得它占据一整行。*/
}

span {
  display: inline; /* Span是一个行内元素，它可以和其他元素在一行展示。*/
}

.custom-div {
  display: flex; /* 这使得.custom-div可以使用弹性布局的特性。*/
}

.hide-element {
  display: none; /* 这会让.hide-element完全不可见，不占据任何空间。*/
}

背景

在CSS中，背景相关的属性能帮助你设置和调整一个元素的背景。以下是一些常见的背景属性：

background-color：设置元素的背景颜色。可以使用颜色名称、十六进制颜色代码、RGB 值或者 RGBA 值。
background-image：设置元素的背景为一张图片。你需要提供图片的URL。
background-repeat：设置背景图片是否以及如何重复。主要有 repeat、repeat-x（在水平方向重复）、repeat-y（在垂直方向重复）和 no-repeat。
background-position：设置背景图片的开始位置。如 left top、right bottom、center center等。
background-attachment：设置背景图片是否随页面滚动或固定。选择 fixed 会使图片固定，scroll 会使图片随页面滚动。
background-size：设置背景图片的尺寸。cover 会让图片尽可能填满背景区域，同时保持图片本身的宽高比。contain 会让图片尽可能大，但不超过元素区域，同时也保持图片本身的宽高比。

div {
  background: #ffffff url("image.jpg") no-repeat right top;
}

在这个例子中，我们设置 div 的背景为白色，并设置了一个背景图像（在URL “image.jpg” 中）。图片在 div 右上角展示，并且不会重复。

边框

在CSS中，边框是元素周边的一层线框。边框相关的属性可以帮你定义边框的样式、宽度和颜色。

以下是几个设置边框的常用CSS属性：

border-style：定义边框的样式，常用的值有 none、solid、dashed、dotted 等。
border-width：定义边框的宽度，可以使用长度单位（如px, em等）或相对宽度（如 thin、medium、thick）。
border-color：定义边框的颜色，可以使用颜色名称、十六进制、RGB或RGBA等格式的颜色。
border-radius：定义边框的圆角，值可以是长度或百分比。

这些属性都可以应用于四个边（上、下、左、右）的单独边框，只需在属性前加上 top、bottom、left、right。例如，border-top-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>

合并相邻边框

cellspacing=“0”-------删除单元格之间空隙
border-collapse：collapse-------合并相邻边框

  <style>
          table {
              /* 合并相邻边框 */
             border-collapse: collapse;
        }
  
  
          td {
              border: 5px solid red;
          }
      </style>
  </head>
  
  
  <body>
  
      <table cellspacing="0">
          <tr>
              <td>dsnkd</td>
              <td>cdcdzc</td>
              <td>cdcd</td>
  
  
  
          </tr>
      </table>
  </body>

阴影

box-shadow: 20px 20px 10px 10px black-----阴影

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* box-shadow: 20px 20px 10px 10px black; */
        }
        p {
            text-shadow: red 5px 5px;
        }
    </style>

轮廓线

outline: none--------去掉轮廓线

<style>
        input[type="text"] {
            outline: none;
            outline-style: groove;
        }
    </style>

</head>
<body>
    <input type="text" name="aaaa" id="">
    <input type="password" name="aaaa" id="">


</body>

防拖拽

resize: none-----防止文本拖拽
textarea-----文本域
vertical-align: top-----文本置顶
vertical-align: middle-----文本居中
vertical-align: bottom-----文本置底

<style>
        textarea {
            /* 防止文本拖拽 */
            resize: none;
            /* vertical-align改变与文字的对齐方式 */
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
        }
    </style>

</head>

<body>
    <span>请输入个人介绍：</span>
    <textarea name="xsnsmx" id="" cols="30" rows="10"></textarea>
</body>

隐藏元素

1.display: none;：这个属性会使元素及其所有内容完全消失，不占据任何空间，就像它从DOM中被移除一样。例如：

.hide {
  display: none;
}

2.visibility: hidden;：这个属性会使元素隐藏，但仍然会占据它原本的空间，就像把它变为透明一样。例如：

.invisible {
  visibility: hidden;
}

3.opacity: 0;：这个属性将元素的透明度设为0，使元素及其内容变得完全透明，尽管元素仍然能够占据空间并且可以接受到用户的交互（如点击）。

.transparent {
  opacity: 0;
}

需要说明的是，opacity 和 visibility 的主要区别是 opacity:0 元素可以接受用户的交互，而 visibility:hidden 的元素不会接受用户交互。

4.position: absolute + clip: rect(0 0 0 0); 或 width: 0; height: 0;：这通过将元素的位置移到屏幕之外并剪去其所有内容，从而实现了将元素从视觉上完全隐藏，同时不会影响屏幕阅读器对它的阅读。

这是一个例子：

.offscreen {
  position: absolute;
  clip: rect(0 0 0 0);
}

在这个例子中，有 .offscreen 类的元素会被隐藏且不占据任何空间，但仍然为屏幕阅读器所访问。这种情况常用于增加辅助性文本，帮助视障用户理解页面内容。

绝对定位

position: absolute-----绝对定位：不保留原来位置（子盒子相对于浏览器进行移动）
position: relative-----相对定位（子盒子相对于父盒子进行移动）

子绝父相

父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动，如果都没找到，则相对于浏览器进行定位

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

        .father {
            /* position: relative; */

            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 400px;
        }

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

            position: absolute;
            /* top: -100px; */
            bottom: -100px;
            left: 500px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(40, 65, 65);
        }
    </style>
</head>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">1</div>
            <div class="son2">2</div>

        </div>
    </div>
</body>

固定定位

position: fixed-----固定定位

<style>
        body {
            height: 4000px;
        }

        div {
            /* 固定定位:相对于可视区域进行定位 */
            position: fixed;
            right: 40px;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        小妲己
    </div>
</body>

粘性定位

position: sticky-----粘性定位
top: 0-----距离顶部0

 .sticky {
  position: sticky;
  top: 0;
}

上述CSS规则的意思是：当滚动页面时，具有 .sticky 类的元素将保持在视口顶部，直到它的父元素完全滚出视口。

需要注意的是，position: sticky; 在一些老旧的浏览器版本中可能不受支持，因此在使用的时候需要检查浏览器兼容性。

霖烟易辞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫