【伪类·HTML】

最新推荐文章于 2024-05-21 18:11:13 发布

久靥_

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量662

点赞数 9

分类专栏：蓝桥杯文章标签： html 前端

本文链接：https://blog.csdn.net/Feng_zheng_/article/details/135956373

版权

蓝桥杯专栏收录该内容

8 篇文章 0 订阅

订阅专栏

伪类

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
在这里插入图片描述
对于超链接的伪类，推荐的使用顺序是：
:link - :visited - :hover - :active。

 <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">这是一个链接</a>
  </body>

链接伪类的使用顺序是很重要的，如果顺序不对，有些样式就会被覆盖

列表样式

在这里插入图片描述

<style>
      ul {
        list-style-position: inside;
        list-style-image: url(list.gif);
      }
    </style>

 <ul>
      <li>喵</li>
    </ul>

盒子模型

在这里插入图片描述

border 属性用于设置元素的边框属性，其用法如下

//border: border-width border-style border-color;
   border-top: thin solid red;

border-width：是边框宽度，宽度一般用数值即可。
border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
border-color：是边框线的颜色。
border、border-width、border-style、border-color 都是复合属性，我们也可以单独设置某条边框的样式。
border-color：

border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;

padding （内边距）属性是一个复合属性`padding: 上右下左;`

margin （外边距）

margin: 上右下左;
当左右边距值相同时，写法：

margin: 上边距 左右边距 下边距;

可以通过 margin 属性来改变 p元素相对于 div 元素的位置

display 属性

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。
在这里插入图片描述
block 属性值可以让行内元素以块级元素的方式显示在页面上。

 <style>
      span {
        display: block;
      }
    </style>
  <body>
    <span>蓝桥</span><span>云课</span>
  </body>

span 标签是行内元素，却因为设置 display: block; 导致「蓝桥」与「云课」分开
在这里插入图片描述
inline 属性值可以让像 div 这样的块级元素，接纳其他元素来自己行。

 <style>
      div {
        display: inline;
      }
    </style>
  <body>
    <div>蓝桥</div>
    <div>云课</div>
  </body>

在这里插入图片描述
inline-block让元素具有块内元素的特点，又具备行内元素的特点。display: inline-block;
比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。

    <style>
      a {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>