Najnowsze tutoriale tworzenie stron internetowych

Style CSS - HTML

❮ Poprzedni Następny Rozdział ❯

CSS = stylach i kolorach

manipulować tekstem
Kolory, Skrzynki

Stylizacji HTML z CSS

CSS oznacza kaskadowych arkuszy stylów

Stylizacja może być dodany do elementów HTML na 3 sposoby:

  • Inline - za pomocą atrybutu stylu w elementy HTML
  • Wewnętrzne - za pomocą <style> element HTML <head> sekcji
  • Zewnętrzne - za pomocą jednego lub więcej zewnętrznych plików CSS

Najczęstszym sposobem dodania stylizacji, jest utrzymanie style w oddzielnych plikach CSS. Ale w tym tutorialu użyjemy wewnętrznej stylizacji, ponieważ łatwiej jest wykazać, i łatwiej można spróbować samemu.

Można dowiedzieć się znacznie więcej o CSS w naszym CSS .

Stylizacja inline (Inline CSS)

Inline stylizacji służy do zastosowania niepowtarzalny styl do pojedynczego elementu HTML:

Inline stylizacji używa style atrybut.

Ten przykład zmienia kolor tekstu w <h1> elementem niebieski:

Przykład

<h1 style="color:blue;">This is a Blue Heading</h1>
Spróbuj sam "

Stylizacja wewnętrzny (Internal CSS)

Stylizacja wewnętrzna służy do definiowania stylu dla jednej strony HTML.

Stylizacja wewnętrzna jest zdefiniowana w <head> sekcji strony HTML, w <style> element:

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Spróbuj sam "

Stylizacja zewnętrzna (External CSS)

Zewnętrzny arkusz stylów jest używany do określenia stylu dla wielu stron.

Z zewnętrznego arkusza stylów, można zmienić wygląd całej witryny internetowej poprzez zmianę jednego pliku!

Aby korzystać z zewnętrznego arkusza stylów, dodać link do niego w <head> sekcji na stronie HTML:

Przykład

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Spróbuj sam "

Zewnętrzny arkusz stylów może być napisany w dowolnym edytorze tekstowym. Plik nie powinien zawierać żadnych tagów HTML. Plik arkusz stylów musi być zapisana z .css przedłużenia.

Oto jak „ styles.css ” wygląda:

body {
    background-color: lightgrey;
}

h1 {
    color: blue;
}

p {
    color:green;
}

Czcionki CSS

CSS color właściwość określa kolor tekstu, który będzie używany dla elementu HTML.

CSS font-family właściwość określa czcionkę używaną do elementu HTML.

CSS font-size właściwość określa wielkość tekstu, który będzie używany dla elementu HTML.

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Spróbuj sam "

Box model CSS

Każdy element HTML ma pole wokół niego, nawet jeśli nie można go zobaczyć.

CSS border właściwość określa widoczną ramkę wokół elementu HTML:

Przykład

p {
    border: 1px solid black;
}
Spróbuj sam "

CSS padding właściwość określa wyściółkę (space) wewnątrz granicy:

Przykład

p {
    border: 1px solid black;
    padding: 10px;
}
Spróbuj sam "

CSS margin właściwość określa margines (space) poza granicę:

Przykład

p {
    border: 1px solid black;
    padding: 10px;
    margin: 30px;
}
Spróbuj sam "

Powyższe przykłady użycia CSS px zdefiniować rozmiary w pikselach.

id Atrybut

Wszystkie powyższe przykłady zastosowania CSS do stylu elementów HTML w sposób ogólny.

Aby zdefiniować specjalny styl dla jednego elementu specjalnego, najpierw należy dodać atrybut id do elementu:

<p id="p01">I am different</p>

następnie zdefiniować styl dla elementu z określonym id :

Przykład

#p01 {
    color: blue;
}
Spróbuj sam "

class Atrybut

Aby zdefiniować styl dla specjalnego typu ( class ) elementów, dodanie class atrybutu elementu:

<p class="error">I am different</p>

Teraz można zdefiniować inny styl dla elementów z określonej klasy:

Przykład

p.error {
    color: red;
}
Spróbuj sam "

Wykorzystywać id do skierowania single elementu. Użyj class do rozwiązania groups elementów.

Podsumowanie rozdziału

  • Użyj HTML style atrybut inline stylizacji
  • Użyj HTML <style> elementem do zdefiniowania wewnętrznego CSS
  • Użyj HTML <link> element, który odnosi się do zewnętrznego pliku CSS
  • Użyj HTML <head> Element do przechowywania <style> i <link> Elementy
  • Użyj CSS color nieruchomości na kolorach tekstowych
  • Użyj CSS font-family właściwość dla czcionek tekstowych
  • Użyj CSS font-size nieruchomości do wielkości czcionki
  • Użyj CSS border nieruchomości do elementów widocznych granic
  • Użyj CSS padding nieruchomości na przestrzeni wewnątrz granicy
  • Użyj CSS margin nieruchomości na przestrzeni poza granicę

Sprawdź się z ćwiczeniami!

Zadanie 1 » ćwiczenia 2» Zadanie 3 » ćwiczenia 4» ćwiczenia 5 » ćwiczenia 6»

Tagi HTML Style

Etykietka Opis
<style> Definiuje styl informacje o dokumencie HTML
<link> Definiuje związek między dokumentem i zewnętrznego zasobu

❮ Poprzedni Następny Rozdział ❯