Блог

Главная - Вопросы по программированию - стили css не применяются?

стили css не применяются?

#html #css #styles

#HTML #css #стили

Вопрос:

я хотел создать заголовок, но мои стили не работают, мои стили не применяются к этому классу, это мой код.

 .nav-link {
color: inherit;
font-weight: var(--fw-bold);
font-size: var(--fs-h1);
}


.logo{
 max-width: 100px;
}

header{
display: flex;
justify-content: space-between;
padding: 1em;
}

.nav{
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;

transform: translateX(0%);
transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav-list{
 list-style: none;
 display: flex;
 height: 100%;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
 margin: 0;
 padding: 0;
 }

.nav-link {
 color: inherit;
 font-weight: var(--fw-bold);
 font-size: var(--fs-h1);
 }  
 <header>
  <div class="logo">
    <img src="image/logo-naam.png" alt="">
  </div>

  <button class="nav-toggle" aria-label="Toggle navigation">
    <span class="hamburger"></span>
  </button>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item"><a class="nav-link" href="#home"></a>Home</li>
        <li class="nav-item"><a class="nav-link" href="#services"></a>My services</li>
        <li class="nav-item"><a class="nav-link" href="#about"></a>About me</li>
        <li class="nav-item"><a class="nav-link" href="#work"></a>My work</li>
      </ul>
    </nav>
</header>

Он применяет заполнение H1, но не стиль??? Может быть, это перезаписано чем-то другим? Я не уверен, как это происходит, любая помощь будет оценена

Комментарии:

1. На что вы ссылаетесь в своей таблице стилей?

2. это связано, я уверен в этом.

3. вы проверяли в консоли своего браузера, подключен ли css?

4. применяются все мои другие стили.

5. значение переменной не применяется?

Ответ №1:

 :root {
  --clr-dark: #000;
  --clr-light: #ddd;
  --fw-bold: bold;
  --fs-h1: 40px;
}
/* header */

.logo{
 max-width: 100px;
}

header{
display: flex;
justify-content: space-between;
padding: 1em;
}

.nav{
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;

transform: translateX(0%);
transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav-list{
 list-style: none;
 display: flex;
 height: 100%;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
 margin: 0;
 padding: 0;
 }

.nav-link {
 color: inherit;
 font-weight: var(--fw-bold);
 font-size: var(--fs-h1);
 }  
 <header>
  <div class="logo">
    <img src="image/logo-naam.png" alt="">
  </div>

  <button class="nav-toggle" aria-label="Toggle navigation">
    <span class="hamburger"></span>
  </button>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item"><a class="nav-link" href="#home"></a>Home</li>
        <li class="nav-item"><a class="nav-link" href="#services"></a>My services</li>
        <li class="nav-item"><a class="nav-link" href="#about"></a>About me</li>
        <li class="nav-item"><a class="nav-link" href="#work"></a>My work</li>
      </ul>
    </nav>
</header>

Сначала вам нужно объявить корневую переменную, затем вы можете использовать переменную css. В противном случае это не сработает.

Комментарии:

1. я объявил их, но это более 300 строк кода, я не хотел помещать сюда все.