Skocz do zawartości
PL
Szukaj na Pecetowiczu
  • Utwórz konto

Jak dodać zewnętrzny arkusz stylów do HTML?


Przejdź do rekomendacji Rozwiązane przez Mativve,
Rekomendowane odpowiedzi

Mam pytanie nie wiem jak zrobić na stronie aby pokazywało styl? Jak dodać zewnętrzny arkusz stylów do HTML?
Będę wdzięczny za pomoc.

Odnośnik do komentarza
Udostępnij na innych stronach

Podaj więcej informacji. Jaki styl? 

Odnośnik do komentarza
Udostępnij na innych stronach

Cała strona jest w pliku strona.html Więcej plików nie ma

Odnośnik do komentarza
Udostępnij na innych stronach

  • Rekomendowana odpowiedź
(edytowane)

@Mięta Niestety nie jest dla nas jasne co chcesz osiągnąć - spróbuj:

- uściślić co chcesz zrobić/jaki efekt chcesz uzyskać

- co do tej pory zrobiłeś

- jakie pliki posiadasz


Z tego co rozumiem to posiadasz sam plik HTML o nazwie strona.html w której masz swój surowy, nieostylowany kod.

Aby do niego dodać style możesz to zrobić na 3 sposoby:
1. Zewnętrzny zalinkowany plik - polega to na tym, że tworzysz plik np.: style.css i tam dodajesz swoje style według schematu

element{
	atrybut: wartość
}
 

A więc przykładowy styl będzie wyglądał tak:

p{
	font-size:24px;
  	color:#ff0000;
}

A do naszego pliku HTML dodajemy go w następujący sposób

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

2. Wewnętrzny - polega to na osadzeniu styli pomiędzy znacznikami <style> w sekcji <head> naszej strony czyli będzie to wyglądać tak:

Spoiler


<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytuł naszej strony</title>

    <style>
      p{
        font-size:24px;
        color:#ff0000;
      }
    </style>
</head>
<body>
...Zawartość naszej strony...
</body>
</html>

 

3. Metoda inline -  już nie jest używana aczkolwiek można ją spotkać w tworzeniu np.: mailingów opartych o tabelki (https://www.codecademy.com/articles/html-inline-styles) np.:

<p style="font-size:24px;color:#ff0000;">To jest mój tekst</p>

 

 

Chyba, że źle zadałeś pytanie i chodzi Ci o to aby ktoś z nas zrobił to co pokazałeś na screenie 😉

Edytowane przez Mativve
Odnośnik do komentarza
Udostępnij na innych stronach

Odnośnik do komentarza
Udostępnij na innych stronach

Jeżeli jest to cały kod pliku strona.html to brakuje części head, w którym powinien być link do pliku css. Są odwołania do class w pliku css, a tego pliku nie ma.

Najlepiej pobierz z internetu ładny szablon i uzupełnij go Twoimi danymi- jeżeli nie ogarniasz tematu.

Odnośnik do komentarza
Udostępnij na innych stronach

@SeNioRdokładnie to samo chciałam napisać.........

Odnośnik do komentarza
Udostępnij na innych stronach

@iso Raczej chodzi Ci o odpowiedź Mativve? 🙂

Tak jak napisał Mativve i jarekcda dodaj do swojego pliku strona.html element HTML <head>

<head>
	<link rel="stylesheet" href="style.css">
</head>

gdzie style.css jest zewnętrznym arkuszem stylów, który musisz utworzyć. Za pomocą języka CSS (Cascading Style Sheets) możesz sobie dowolnie definiować wygląd danego elementu. Przykładowo:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

W razie problemów zobacz sobie Darmowy kurs HTML i CSS.

Odnośnik do komentarza
Udostępnij na innych stronach

10 godzin temu, SeNioR napisał:

Raczej chodzi Ci o odpowiedź Mativve? 🙂

Oczywiście masz rację. Mea culpa :)

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...