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

Czy da się w css zrobić znacznik dla pliku html

VPS Starter Arubacloud
+1 głos
172 wizyt
pytanie zadane 12 października 2020 w HTML i CSS przez chrystian Gaduła (4,780 p.)

Chodzi mi o to ze  mam jednego css podpiętego do wielu plików.html i czy da się dodać znacznik typu # lub . by zmieniał rzeczy tylko w jednym pliku html 

albo cos takiego można 

body:plik1.html
{
}

 

3 odpowiedzi

0 głosów
odpowiedź 12 października 2020 przez radek024 Szeryf (77,180 p.)
Możesz nadawać jakąś klasę w body, tak jak robi to WordPress. Nie da się wskazać na stylizowanie danego pliku w CSS.
komentarz 12 października 2020 przez chrystian Gaduła (4,780 p.)
no robię teraz div na cała strone Czy tak też może być
komentarz 12 października 2020 przez chrystian Gaduła (4,780 p.)
a jak nadać klase dla danego pliku html linijka
0 głosów
odpowiedź 13 października 2020 przez VBService Ekspert (251,210 p.)
edycja 13 października 2020 przez VBService

Ja osobiście nie polecam tworzyć jednego pliku css do wielu html (ale masz prawo mieć inne zdanie w tej kwestii), bardziej na zasadzie np.:
main.css dla wszystkich plików (globalne ustawienia css)
i index1.css, index2.css itd., dla poszczególnych.

<!DOCTYPE html>
<html lang='pl'>
    <head>
        . . .
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="index1.css">
        . . .
    </head>
    <body>
       . . .
    </body>
</html>


That’s how many CSS files should be loaded on any website

Może takie rozwiązanie, będzie pomocne dla Ciebie. 

style.css

      * {
        box-sizing: border-box;
      }
      html, body {
        margin: 0;
        padding: 0;
        border: 0;
      }

      /* wspólny dla: index1.html i  index2.html */
      #index1, #index2 {
        background-color: gray;
      }

       /* lub wspólny dla: index1.html i index2.html*/
      body {
        background-color: gray;
      }



      /* index1.html */
      #index1 pre {
        padding: 2em;
        background-color: coral;
      }
      #index1 p {
        font: 1em monospace;
        padding-left: 2em;
      }
      #index1 p.test1 {
        background-color: darkturquoise;
      }
      #index1 .test2 {
        background-color: deeppink;
      }

      /* index2.html */
      #index2 pre {
        padding: 2em;
        background-color: lightseagreen;
      }
      #index2 p {
        font: 2em monospace;
        padding-left: 2em;
        color: white;
      }
      #index2 p.test1 {
        background-color: black;
      }
      #index2 .test2 {
        background-color: indigo;
      }

index1.html

<!DOCTYPE html>
<html lang='pl'>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <pre></pre>
        <p class="test1">Test 1</p>
        <p class="test2">Test 2</p>

    <script>
        const body = document.body;
        const pre = document.querySelector('pre');
        const file_name = window.location.href.split('\\').pop().split('/').pop();
        const id = file_name.split('.').shift();

        pre.textContent = `Plik: ${file_name}\nUstawiony body id=${id}`;
        body.setAttribute('id',id);
    </script>
    </body>
</html>

index2.html itd. wink

<!DOCTYPE html>
<html lang='pl'>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <pre></pre>
        <p class="test1">Test 1</p>
        <p class="test2">Test 2</p>

    <script>
        const body = document.body;
        const pre = document.querySelector('pre');
        const file_name = window.location.href.split('\\').pop().split('/').pop();
        const id = file_name.split('.').shift();

        pre.textContent = `Plik: ${file_name}\nUstawiony body id=${id}`;
        body.setAttribute('id',id);
    </script>
    </body>
</html>

komentarz 13 października 2020 przez chrystian Gaduła (4,780 p.)

może pokaże jak wyglada mój plik wiem że mozną w head stylem albo oddzielny a jednak w sumie  odzielnny css dla kazdego to mniejsza szansa na nie działanie całej sotrny

komentarz 13 października 2020 przez VBService Ekspert (251,210 p.)
edycja 13 października 2020 przez VBService

style.css

/*  <div id="podstrony"></div>  */
#podstrony { . . . }
#podstrony p {  . . . }
#podstrony a:hover {  . . . }
#podstrony .mojaklasa {  . . . }

/* <div id="podstrona_slajd"></div> */
#podstrona_slajd { . . . }
#podstrona_slajd p {  . . . }
#podstrona_slajd ul li:nth-child(even) {  . . . }
#podstrona_slajd ul li:nth-child(odd) {  . . . }
#podstrona_slajd input[type=text]::placeholder { . . . }
#podstrona_slajd .mojaklasa {  . . . }


lub

@charset "UTF-8";
@viewport {
    width: device-width;
    initial-scale: 1;
}
html, body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.wrap {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}


/*  <div id="podstrony" class="wrap"></div>  */
#podstrony { . . . }
#podstrony p {  . . . }
#podstrony a:hover {  . . . }
#podstrony .mojaklasa {  . . . }

/* <div id="podstrona_slajd" class="wrap"></div> */
#podstrona_slajd { . . . }
#podstrona_slajd p {  . . . }
#podstrona_slajd ul li:nth-child(even) {  . . . }
#podstrona_slajd ul li:nth-child(odd) {  . . . }
#podstrona_slajd input[type=text]::placeholder { . . . }
#podstrona_slajd .mojaklasa {  . . . }

 

komentarz 13 października 2020 przez chrystian Gaduła (4,780 p.)

nw czy dobrze rozumiem ale wystarczy dać np #

#gwint.html body

{
...
}

 

komentarz 13 października 2020 przez VBService Ekspert (251,210 p.)
edycja 13 października 2020 przez VBService

# - hash, oznacza, że chodzi o atrybut id elementu html, np.:
(analogicznie . - kropka, oznacza, że chodzi o atrybut class elementu html)

<div id="przykład1"></div>

w css-ie odwołujemy się wtedy do takiego div-a

#przykład1 {  . . .  }

lub

div#przykład1 {  . . .  }

Poczytaj o CSS Selectors , CSS #id Selector

 

0 głosów
odpowiedź 13 października 2020 przez frostify Mądrala (5,640 p.)
A jaki problem jest w tym, żeby załączyć oddzielny plik css tylko dla jednego wybranego pliku html?

Css można pisać także wewnątrz pliku html, najlepiej wewnątrz <head> w tagu <style>.

Jeżeli jednak nie wiesz jak to zrobić bo np. używasz wordpress, to spróbuj wtyczki dla własnych styli dla poszczególnych stron, jak np. ta tutaj:

https://pl.wordpress.org/plugins/simple-custom-css/

Podobne pytania

0 głosów
1 odpowiedź 305 wizyt
0 głosów
1 odpowiedź 208 wizyt
–1 głos
1 odpowiedź 623 wizyt
pytanie zadane 9 lutego 2018 w HTML i CSS przez PolYGlok Pasjonat (19,450 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 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!

...