Как выделить все ссылки внутри рамки и выделить жирным шрифтом определенный текст абзаца

Это конечный продукт, который я должен создать, и в настоящее время я нахожусь в процессе этот этап, и я застрял на том, как сделать линию через 3/4 ссылки нижней границы и как выделить обе границы жирным шрифтом в последнем абзаце. . а также как создать пространство между двумя границами, как показано в конечном продукте

<!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>

html css css-selectors text-styling

08.05.2019 21:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Знаете ли вы, как я могу выделить жирным шрифтом текст, отображаемый в конечном продукте? Спасибо :)

— 08.05.2019 22:03

Добавьте свойство font-weight :) Если ответ вас устраивает, подтвердите мой ответ. Спасибо

— 08.05.2019 22:05

08.05.2019 21:13