Skocz do zawartości
Forum komputerowe

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

Mięta

dodany przez Mięta,
w Tworzenie i programowanie stron

 Udostępnij Obserwujący 1
Przejdź do rozwiązania Rozwiązane przez Mativve,

Rekomendowane odpowiedzi

  • Administrator
  • Rozwiązanie
Mativve

Mativve 3 920

Napisano
  • Administrator
  • Rozwiązanie
Napisano (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 odpowiedzi
Udostępnij na innych stronach
jarekcda

jarekcda 2

Napisano
Napisano

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 odpowiedzi
Udostępnij na innych stronach
  • Założyciel
SeNioR

SeNioR 9 332

Napisano
  • Założyciel
Napisano

@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 odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij
Obserwujący 1
Przejdź do listy tematów

  • Podobna zawartość

    • Tomik
      Formatowanie i kolorowanie grup. Poświata, gwiazdki, ikony i Font Awesome
      Przez Tomik
      FORMATOWANIE I KOLOROWANIE GRUP. POŚWIATA, GWIAZDKI, IKONY I FONT AWESOME
      Paleta kolorów  HTML Color Picker
      Font Awesome  Icons | Font Awesome
      Przykładowe efekty:


      FORMATOWANIE
      Utwórz nowy arkusz CSS o nazwie, np.: ranks.css i dodaj:
      .ranks-NAZWA { background: url(TŁO); color: #KOLOR; text-shadow: 1px 1px 15px #POŚWIATA; font-weight: bold; } W Format loginu dodaj:
      <span class="ranks-NAZWA">{username}</span> Legenda:
      NAZWA – nazwa klasy CSS TŁO – tło KOLOR – kolor nazwy grupy POŚWIATA – kolor poświaty

    • Dazai
      [Wykonam] Strony WWW, szablony HTML, proste szablony WordPress
      Przez Dazai
      Zajmuje się tworzeniem stron internetowych HTML, landing-page, one-page, strony wizytówki, a także proste szablony pod CMS Wordpress. Oferuje staranność, dokumentacje, nowoczesność a przede wszystkim przejrzysty kod zrozumiały nawet dla laika. 
      Wykonam: strony HTML, landing-page, one-page, multi-page, blogowe szablony WordPress
      Zakres umiejętności:
      HTML5 & CSS3 JavaScript (podstawowy) Bootstrap 3.x UIKit  RWD WordPress Sass & Gulp.js Adobe Photoshop Podstawy UI/UX Chętnych zapraszam do kontaktu a także przejrzenia mojego portfolio, gdzie link dostępny jest na moim profilu forumowym.
      Kontakt: PW na forum lub [email protected]
    • Marta Długa
      Ostatni dzień miesiąca
      Przez Marta Długa
      Skrypt, który ma pokazać ile dni ma dany miesiąc po wskazaniu miesiąca i roku z formularza przez użytkownika.  
      Nie wiem gdzie mam błąd. Proszę o poprawienie błędu w kodzie php.
      <form action="ostatni_dzien_miesiaca.php" method="post"> <label for="miesiac">Miesiąc:</label> <select name="miesiac"> <?php for($l=1; $l<=12;++$l) echo '<option value="'.$l.'">'.$l.'</option>'; ?> </select></br></br> <label for="rok">Rok:</label> <select name="rok"> <?php for($i=1900; $i<=2090;++$i) echo '<option value="'.$i.'">'.$i.'</option>'; ?> </select></br></br> </br></br><input type="submit" name="sprawdz" value="Sprawdź dzień tygodnia" /> </br></br><input type="reset" name="reset" value="Wyczyść" /> </form> <?php $rok['rok'] = $miesiac['miesiac']; for ($i = 1; $i <= 12; $i++) { $miesiac[$i] = date("t", mktime(0, 0, 0, $i, 1, $rok)); } var_dump($miesiac); ?>
    • Marta Długa
      Kalkulator do wprowadzenia działania w jednym polu input
      Przez Marta Długa
      Witam Jestem początkująca .
      Chce zrobić kalkulator z jednym polem input, gdzie użytkownik wprowadza działanie np. 2 + 2 = lub 2 + 2 + 2 = itp. Użytkownik może wprowadzić dowolną ilość liczb np. 2 + 2 +  2 + 2 = Po kliknięciu oblicz pokazuje się wynik.
      Zrobiłam formularz html, ale nie wiem jak zrobić php. Proszę o pomoc.
      <form action="kalkulator2.php" method="post"> <p>Wpisz działanie</p> <input type="text" name="oblicz_dane" placeholder="wprowadż działanie"> </form> <p>Wynik</p>
×
×
  • Dodaj nową pozycję...