如何划线边框内的所有链接并加粗标记段落的某些文本

Question

这是流程的 end product i'm supposed to create and i'm currently during this stage，我一直在思考如何在底部边框的 3/4 链接处画一条直线，以及如何在最后一段的两个边框上加粗标记。以及如何在最终产品

中所示的 2 个边框之间创建 space

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Uppgift 4E</title>
    <style>
    html {
        background-color: lightslategrey;
    }
    body {
        margin: auto;
        width: 500px;
        padding-bottom: 0.1px; /*knep för div margin */
        background-color: #f0ffff;
        text-align: center;
        font-family: sans-serif;

    }
    h1 {
        Color: purple;
    }
    #billy {
        color: darkred;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px;
        border-radius: 5px;
        text-align: left;
    }
    #bob {
        color: darkgreen;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px; /* border tjockhet */
        border-radius: 5px; /* rundiga kanter på border */
        text-align: left;
    }
    .two {
        font-size: large;
    }
    .three {
        font-size: small;
    }
    }
    #bob > .two > a {
        text-decoration: underline overline;
    }
    #bob > .three > a {
        text-decoration: line-through;
    }
    </style>
  </head>
  <body>
    <h1>Uppgift 4E</h1>
    <div id="billy">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
    <div id="bob">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
  </body>
</html>

Answer 1

添加两个东西可以帮助您为 p 标签留出左右边距，并为 div

留出边距

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Uppgift 4E</title>
    <style>
    html {
        background-color: lightslategrey;
    }
    body {
        margin: auto;
        width: 500px;
        padding-bottom: 0.1px; /*knep för div margin */
        background-color: #f0ffff;
        text-align: center;
        font-family: sans-serif;

    }
    h1 {
        Color: purple;
    }
    #billy {
        color: darkred;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px;
        border-radius: 5px;
        text-align: left;
        margin: 10px;
    }
    #bob {
        color: darkgreen;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px; /* border tjockhet */
        border-radius: 5px; /* rundiga kanter på border */
        text-align: left;
        margin: 10px;
    }
    p {
      margin-left: 5px;
      margin-right: 5px;
    }
    .two {
        font-size: large;
    }
    .three {
        font-size: small;
    }
    }
    #bob > .two > a {
        text-decoration: underline overline;
    }
    #bob > .three > a {
        text-decoration: line-through;
    }
    </style>
  </head>
  <body>
    <h1>Uppgift 4E</h1>
    <div id="billy">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
    <div id="bob">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
  </body>
</html>

如何划线边框内的所有链接并加粗标记段落的某些文本

How to line-through all links inside a border and bold mark certain text of a paragraph

html

css

css-selectors

text-styling