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

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

odpowiedź 12 października 2020 przez radek024 Szeryf (77,160 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

odpowiedź 13 października 2020 przez VBService Ekspert (256,600 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.

<!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 (256,600 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 (256,600 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

odpowiedź 13 października 2020 przez frostify Mądrala (5,640 p.)

Podobne pytania

0 głosów

1 odpowiedź 348 wizyt

Czy da się zrobić interfejs pendriva w Html i Css lub z pomocą np: JS/C++? :)

pytanie zadane 17 stycznia 2018 w HTML i CSS przez robiczQ Nowicjusz (190 p.)

0 głosów

1 odpowiedź 279 wizyt

Czy da się sprawić, by znacznik semantyczny przestał być semantyczny?

pytanie zadane 21 kwietnia 2019 w HTML i CSS przez Volper Początkujący (300 p.)

–1 głos

1 odpowiedź 775 wizyt

czy da się zrobić/określić target:_blank w css?

pytanie zadane 9 lutego 2018 w HTML i CSS przez PolYGlok Pasjonat (19,450 p.)

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

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

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