Как изменить шрифт и размер шрифта 1 элемента в панели навигации, не затрагивая другие элементы - PullRequest
Новая
       8

Как изменить шрифт и размер шрифта 1 элемента в панели навигации, не затрагивая другие элементы

0 голосов
/ 10 апреля 2020

Привет, я довольно новичок в html и css, поэтому мне было интересно, как сделать навигационную панель примерно такой:

basi c navbar с lo go в Шрифт Lobster и все остальное в Arial

код: 

<style>
    html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Lobster;
  }

    @media screen and (max-width: 1280px) {
    .navbar a {
        float: none;
        display: block;
    }
}
.navbar {
  width: 100%;
  overflow: auto;
  background-color: white;
  border-bottom: rgb(163, 163, 163) 1px solid;

}

.navbar a {
  float: left;
  color: rgb(94, 92, 92);
  text-align: center;
  padding: 45px 50px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  color: rgb(131, 130, 130);
}

.navbar a.active {
 font: Lobster;
 font-size: 35px;
 color: #990000;
}
.navbar-right {
  float: right;
}
</style>
</head>
<body>

<div class="navbar">
  <a class="active" href="home.html">SalEats!</a>
  <div class="navbar-right">
    <a href="home.html">Home</a>
    <a href="login.html">Login/Sign Up</a>
  </div>
</div>
</body>
</html>

Моя главная проблема - когда я изменяю размер lo go и делаю его шрифтом омара, он меняется шрифт для других элементов омара и делает их не выровненными. Будет ли проще использовать изображение для lo go? Пожалуйста, дайте мне знать, спасибо!

1 Ответ

0 голосов
/ 10 апреля 2020

Точный CSS будет зависеть от вашего HTML. Стили CSS атрибута HTML наследуются всеми его дочерними элементами (с некоторыми оговорками). Так что просто поместите стиль для вашего шрифта lo go в элемент, который является непосредственным родителем текста, например h1 элемент.

Если весь ваш заголовок просто текст внутри одного элемента, то добавьте дочерний элемент, содержащий текст lo go. Например: 

<div class="navbar">
  <h1 class="logo-text">My Title</h1>
  <div>Other stuff in the navbar</div>
</div>

.navbar {
  /* ... navbar style */
}

.logo-text {
  font-size: 24px;
  font-family: ... (your font)
}

Редактировать: Я предполагаю, что, возможно, вы используете полуавтоматический сервис c, такой как Squarespace или Wordpress, так что вы на самом деле не пишу HTML, просто CSS. Если это так, тогда на вашем сайте go откроются инструменты разработчика вашего браузера (F12 в большинстве браузеров). Используйте инструмент «Pick a element», чтобы выбрать свой заголовок и углубиться в HTML, чтобы найти свой lo go. Надеюсь, будет уникальный элемент, который является прямым родителем вашего текста заголовка. Запишите, какой класс / идентификатор имеет этот элемент, чтобы вы могли написать CSS. Если это не так (например, если все элементы панели навигации имеют одинаковый класс), посмотрите CSS псевдоклассы , особенно :first-child.

...