Wygład css ładne stylizowanie strony

pytanie zadane 22 kwietnia w HTML i CSS przez Mist Użytkownik (740 p.)

https://meymar.serv00.net/blogMistake.html witam mam takie coś bo robię bloga oczywiście to szkic na razie ale muszę się nauczyć ładnie stylizować strony pomoże ktoś ?

Z góry dziękuję

1 odpowiedź

odpowiedź 22 kwietnia przez VBService Ekspert (254,260 p.)
edycja 22 kwietnia przez VBService

Polecam

Kevin Powell -

Helping you learn how to make the web, and make it look good while you're at it.
css-tricks.com

BTW,

nie ma potrzeby podawać type="text/css" wystarczy zapis

<link rel="stylesheet" href="stylBloga.css">

możesz używać takiego zapisu dla kodowania strony

<meta charset="UTF-8">

dobrze jest umieści taki zapis w przypadku treści na stronie w języku polskim

<html lang="pl">

[ Podstawowa struktura dokumentu HTML ]

nie mieszaj polskiego nazewnictwa dla atrybutu id z angielskim nazewnictwem, zdecyduj się na jeden sposób, zalecane jest używanie języka angielskiego.

<div id="contener">    
    <div id="tytuł">      
      Blog M      
    </div>
    
    <div id="rest">22/4/2024 00:22:22</div>    
    <div id="login">      
       LOGIN:      
    </div>
    <div id="artykuły">      
      <div class="artykuł"> </div>
      ...
    </div>
    
    <div id="stopka">
      ...     
    </div>    
  </div>

w przypadku używania polskiego lepiej unikaj używania polskich znaków diaktrytycznych

<div id="tytuł">      
  Blog M      
</div>

    ...

<div id="artykuły"> 
  <div class="artykuł"> </div> 
  ...
</div>

tytuł -> tytul, artykuły -> artykuly, ... itd.

polisz-inglisz

<div id="contener">

kontener lub container

Jak dobrać kolory na stronę internetową?

Wywoływanie kodu javascript w oparciu o zdarzenie staraj się zapisywać z poziomu kodu js-a, a nie z html-a.

<body onload="odliczanie()">

window.onload = mojaFunkcja1;
window.addEventListener('load', mojaFunkcja2);

function mojaFunkcja1(e) {
  console.log(e.type, 'mojaFunkcja1'); // dla prezentacji
}

function mojaFunkcja2() {
  console.log('mojaFunkcja2'); // dla prezentacji
}

// lub

window.onload = function() {
  // ... kod
};

window.addEventListener('load', function() {
  // ... kod
});

// lub

window.onload = () => {
  // ... kod
};

window.addEventListener('load', () => {
  // ... kod
});

[ Zdarzenia czyli różne rzeczy, które mogą się dziać w przeglądarce ]
[ Events - tematy dodatkowe ]

Jeżeli nie wstawiasz kodu html, staraj się używać .textContent

<body>
  <div id="container">
    <!-- ... -->

    <div id="rest"></div>

    <!-- ... -->    
  </div>

  <script>
    window.addEventListener('load', () => {
      setInterval(odliczanie, 1000);
    });

    function odliczanie()
    {
      const dzisiaj = new Date();
      const dzien = dzisiaj.getDate(),
            miesiac = dzisiaj.getMonth() + 1,
            rok = dzisiaj.getFullYear();

      const godzina = dzisiaj.getHours().toString().padStart(2, '0'),
            minuta = dzisiaj.getMinutes().toString().padStart(2, '0'),
            sekunda = dzisiaj.getSeconds().toString().padStart(2, '0');

      document.querySelector('#rest').textContent = 
        dzien + "/" + miesiac + "/" + rok + " " +
        godzina + ":" + minuta + ":" + sekunda;
    }
  </script>
</body>

komentarz 22 kwietnia przez Mist Użytkownik (740 p.)

Witam wow długa odp mówię tak tak wiem o tych pierwszych rzeczach ale tak mi wygodniej i tak zapomiałem i HTML Lang =pl coś takiego no i oczywiście dziękuję za pomoc

komentarz 22 kwietnia przez VBService Ekspert (254,260 p.)

Tu masz jeszcze błąd, spacja w adresie między https: a //

<link href="https: //fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

komentarz 22 kwietnia przez Mist Użytkownik (740 p.)

Dziwne z google to skopiowałem

komentarz 22 kwietnia przez VBService Ekspert (254,260 p.)
edycja 22 kwietnia przez VBService

Do "tworzenia" układu strony (layout-u) staraj się wykorzystywać flex lub grid, lub oba razem. Float nie jest już zalecany do tego.

[ CSS Layouts: History from Float to Flexbox and Grid ]

:root {
  --main-color-container: 180deg;
  --main-color-title: 248.5deg;
  --main-color-articles: calc(var(--main-color-container) + 20deg);
  --main-color-article: calc(var(--main-color-articles) + 40deg);
  --main-color-footer: calc(var(--main-color-title) + 25deg);
}
body {
  margin: 0;
  padding: 0;
  background-color: black;  
}
.container,
.container div {
  box-sizing: border-box;
  border-radius: 6px;
}
.container {
  background-color: hsl(var(--main-color-container) 100% 94%);
  color: hsl(var(--main-color-container) 50% 47%);
  border: 2px solid hsl(var(--main-color-container) 70% 67%);

  width: 925px;
  margin: 5% auto;
  padding: 25px;
}
.title,
.rest-login-wrapper,
.articles,
.footer {
  width: 100%;
  margin: 50px auto 0; 
}
.title {
  background-color: hsl(var(--main-color-title) 80% 68%);
  color: hsl(var(--main-color-title) 40% 34%);
  border: 2px solid hsl(var(--main-color-title) 60% 54%);

  text-align: center;
  font-family: "Noto Serif", serif;
  font-size: 70px;
  
  height: 115px;
  margin: 15px auto 0;                                             
}
.rest-login-wrapper {
  display: flex;
  justify-content: space-between;
}
#rest,
#login {
  height: 115px;
  padding: 8px;
}
#rest {
  background-color: darkorange;
  border: 2px solid tomato;      
  color: darkslategray;

  width: 412px;  
  font-size: 35px;
}
#login {
  border: 2px solid darkolivegreen;
  background-color: slategray;
  color: darkred;

  width: 302px;
  font-size: 18px;
}
.articles {
  background-color: hsl(var(--main-color-articles) 100% 94%);
  color: hsl(var(--main-color-articles) 50% 47%);
  border: 2px solid hsl(var(--main-color-articles) 70% 67%);
  /*
  border: 3px solid darkcyan;
  background-color: white;
  */  
  padding: 10px;
}
.article {
  background-color: hsl(var(--main-color-article) 100% 94%);
  color: hsl(var(--main-color-article) 50% 47%);
  border: 2px solid hsl(var(--main-color-article) 70% 67%); 
  /*
  border: 2px solid black;
  background-color: whitesmoke;
  */
  width: 100%;
  height: 85px;  
}
.article + .article {
  margin: 10px 0 0;
}
.footer {
  background-color: hsl(var(--main-color-footer) 80% 68%);
  color: hsl(var(--main-color-footer) 40% 34%);
  border: 2px solid hsl(var(--main-color-footer) 60% 54%);

  height: 115px;  
}

<body>
  <div class="container">    
    <div class="title">      
      Blog M      
    </div>

    <div class="rest-login-wrapper">
      <div id="rest">
        22/4/2024 12:50:08
      </div>
      <div id="login">      
        LOGIN:      
      </div>
    </div>

    <div class="articles">
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
    </div>

    <div class="footer"></div>
  </div>
</body>

[ :root ] [ var(--zmienna) ] [ calc() ] [ box-sizing ] [ hsl() ]

1	komentarz 22 kwietnia przez Mist Użytkownik (740 p.) Ach jestem młody a jednak staroświecki

1	komentarz 22 kwietnia przez Sefinek Obywatel (1,180 p.) @VBService, polisz-inglisz, rozbawiło mnie to nawet :D

1	komentarz 24 kwietnia przez batmat1903 Nowicjusz (140 p.) @VBService, świetne treści podlinkowałeś - nie znałem, a przydadzą się bardzo! Pozdrawiam