• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

stylizacja znaczników HTML5 w CSS

VPS Starter Arubacloud
+1 głos
287 wizyt
pytanie zadane 11 października 2021 w HTML i CSS przez Mruczekkk Nowicjusz (220 p.)

Mam pewien problem ze zrozumieniem stylizacji znaczników z HTML5 w CSS. Przykładowo jeśli mam taki kod:

<div id= "main">

       <header>     </header>

        <section>
            
             <header> </header>

        </section>

</div>

I teraz w zasadzie 2 rzeczy.

1. Jak zapisać w CSS, że chce ten header z sekcji czy tak:

#main section header { }

czy muszę zrobić id lub klasę do tej sekcji i w ten sposób się odwołać? 

2. Jak wystylizować ten header tak żeby nie dziedziczył po tym głównym? Czy tak wgl powinno być, że on dziedziczy wszystko i nie potrafię nawet tego nadpisać czy to jest jakiś mój błąd w zapisie gdzieś (stąd też pyt 1)?  Czy powinnam po prostu zrobić divy jeśli chcę coś takiego ?

Dziękuję z góry za odpowiedź dopiero się uczę i nie potrafię nigdzie znaleźć na to odpowiedzi.

1 odpowiedź

+3 głosów
odpowiedź 11 października 2021 przez qax Dyskutant (8,060 p.)
wybrane 11 października 2021 przez Mruczekkk
 
Najlepsza

Zakładając, że masz następującą strukturę dokumentu HTML (jeśli <div id= "main"> to kontener głównej treści strony to lepiej zamienić go na <main>):

<main>
   <header></header>
   <section>
      <header> </header>
   </section>
 </main>

Odwoływać się do elementów HTML z poziomu CSS-a można na wiele sposobów. Ten Twój zapis: main section header { } również jest prawidłowy (osobiście sam bym go polecił), ale jest problematyczny, gdy struktura dokumentu HTML ulega częstym zmianom (np. w przyszłości tego headera opakujemy w diva to trzeba będzie zmienić regułę CSS na main section div header { }). Natomiast jeśli do tego headera przypiszesz klasę lub indentyfikator będziesz mogła się do niego odwołać za pomocą header.jakas-klasa lub header#jakis-identyfikator. Musisz tylko pamiętać, że te same klasy możesz przypisywać do wielu elementów, a identyfikator powinien być użyty w kodzie HTML tylko raz.

No i nie wszystkie właściwości CSS są dziedziczone po rodzicu (to byłoby dziwne). Jeśli jakaś cecha (np. color: cyan;) jest nadana elementowi nadrzędnemu (np. <main>), to tego wspomnianego headera możesz obstylizować poprzez nadpisanie dziedziczonej właściwości (na jeden z wyżej wymienionych przeze mnie sposobów), np.

main section header {
   color: cyan;
}

lub jeśli nadasz temu headerowi klasę:

header.jakas-klasa {
   color: cyan;
}

lub jeśli nadasz temu headerowi identyfikator:

header#jakis-identyfikator {
   color: magenta;
}

 

Podobne pytania

0 głosów
3 odpowiedzi 690 wizyt
pytanie zadane 2 kwietnia 2020 w HTML i CSS przez sopll Nowicjusz (170 p.)
0 głosów
1 odpowiedź 282 wizyt
0 głosów
1 odpowiedź 459 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...