Dlaczego atrybut border nie działa.

pytanie zadane 26 sierpnia 2021 w HTML i CSS przez tonn204 Mądrala (7,440 p.)
zamknięte 27 sierpnia 2021 przez tonn204

Witam, mam pliki jak poniżej, kiedy w css dla klasy menuElement ustawiam wszystko dla atrybutu border nie widzę wprowadzonych zmian. Pojawiają się one dopiero kiedy css dodam bezpośrednio w kodzie HTML . O co mam zrobić, żebym nie musiał dodawać dodatkowych linii css w kodzie html i żeby wszystko działało tak jak chcę?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>MyMenySite</title>
</head>
<body>
  <div id="container">
    <div id="logo">
      <div class="menuElement" style="border: 1px; border: solid; border-color: brown; margin-right: 30px;">
        <h4>My img</h4>
      </div>
      <div class="menuElement" style="border: 1px; border: solid; border-color: brown;">
        <h4>Home</h4>
      </div>
      <div class="menuElement" style="border: 1px; border: solid; border-color: brown;">
        <h4>Contact</h4>
      </div>
      <div class="menuElement" style="border: 1px; border: solid; border-color: brown;">
        <h4>Done projects</h4>
      </div>
      <div class="menuElement" style="border: 1px; border: solid; border-color: brown;">
        <h4>About me</h4>
      </div>
    </div>
  </div>
</body>
</html>

body
{
  background-color: rgba(133, 130, 130, 0.938);
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#container
{
  width: 1080px;
  height: 980px;
  margin-left: auto;
  margin-right: auto;
}

.menuElement
{
  border-style: solid;
  border: 2px;
  border-color: rgba(206, 13, 13, 0.979);
  width: 200px;
  height: 40px;
  float: left;
  text-align: center;
  margin-right: 5px;
}

.menuElement > h4
{
  margin: 10px;
}

komentarz zamknięcia: Problem został rozwiązany.

2 odpowiedzi

odpowiedź 26 sierpnia 2021 przez VBService Ekspert (253,140 p.)
edycja 26 sierpnia 2021 przez VBService

Jak sama nazwa wskazuje, style są "kaskadowe", więc są "nakładane" na elementy html w czasie renderingu kodu w określonej kolejności.

Twój zapis

...

  border-style: solid;
  border: 2px;
  border-color: rgba(206, 13, 13, 0.979);

...

powoduje, że border: nadpisuje border-style: co powoduje, że border nie przyjmuje postać "solid"

Samo użycie border: jest "skróconym" (shorthand) zapisem tego:

border-width: 2px;
border-style: solid;
border-color: rgba(206, 13, 13, 0.979);

border: 2px solid rgba(206, 13, 13, 0.979);

1	komentarz 27 sierpnia 2021 przez tonn204 Mądrala (7,440 p.) Dziękuję za pomoc

odpowiedź 26 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

  border-style: solid;
  border: 2px;
  border-color: rgba(206, 13, 13, 0.979);

Taki zapis powoduje, że border-style: solid jest nadpisany przez border i wyjściowo border-style jest ustawiony na none. Spójrz na domyślne wartości poszczególnych składowych dla border: https://developer.mozilla.org/en-US/docs/Web/CSS/border#formal_definition

Zapoznaj się też z kolejnością aplikowania styli w CSS [1, 2].

Zapisz border albo całościowo, w skróconej postaci:

border: 2px solid rgba(206, 13, 13, 0.979);

albo rozpisując konkretne składowe:

border-width: 2px;
border-style: solid;
border-color: rgba(206, 13, 13, 0.979);

Jeśli w którymś miejscu używasz skróconego zapisu (samo border) to on nadpisuje wszystkie dotychczasowe wartości składowe, więc np.:

border-width: 2px;
border-style: solid;
border-color: rgba(206, 13, 13, 0.979);
border: 1px dashed black;

stworzy wyjściowo taki border, jak określony w ostatniej linijce. Natomiast w drugą stronę, możesz stworzyć border - choć to tyczy się praktycznie każdej własności w CSS, którą można zapisać w skróconej wersji - zapisem skróconym, a w innych stylach dla tego samego elementu nadpisywać poszczególne jego składowe, np.:

border: 1px dashed black;
border-style: solid;
border-color: red;

wyjściowo stworzy border koloru czerwonego, ze stałą (ciągłą) linią.

1	komentarz 27 sierpnia 2021 przez tonn204 Mądrala (7,440 p.) Dziękuję za pomoc.

Podobne pytania

0 głosów

1 odpowiedź 166 wizyt

Atrybut img src srcset, dlaczego to nie działa poprawnie

pytanie zadane 21 stycznia 2023 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)

+1 głos

1 odpowiedź 260 wizyt

Dlaczego hosting CBA zmienia mi atrybut action w formularzu?

pytanie zadane 22 października 2021 w HTML i CSS przez edtjyuh Nowicjusz (220 p.)

0 głosów

1 odpowiedź 134 wizyt

Dlaczego nie usuwa mi border-left?

pytanie zadane 31 maja 2017 w HTML i CSS przez assassin Gaduła (3,260 p.)

Dlaczego atrybut border nie działa.

Zaloguj lub zarejestruj się, aby skomentować.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci