Ponieważ jesteś nowy w html, oto trzy gotowe do użycia przykłady użycia CSS razem z html. Możesz po prostu umieścić je w pliku, zapisać i otworzyć w wybranej przeglądarce:
Ten bezpośrednio osadza Twój styl CSS w twoich tagach / elementach. Zasadniczo nie jest to bardzo miłe podejście, ponieważ zawsze należy oddzielić zawartość / HTML od projektu.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
</head>
<body>
<p style="font-weight:bold;">Hi, I'm very bold!</p>
</body>
</html>
Następny jest bardziej ogólnym podejściem i działa na wszystkich znacznikach „p” (skrót akapitu) w twoim dokumencie, a dodatkowo czyni je OGROMNYMI. Btw. Google stosuje to podejście podczas wyszukiwania:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<style type="text/css">
p {
font-weight:bold;
font-size:26px;
}
</style>
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Prawdopodobnie poświęcisz kilka dni na zapoznanie się z pierwszymi przykładami, jednak tutaj jest ostatni. W ten sposób w końcu oddzielasz całkowicie projekt (css) i treść (html) od siebie w dwóch różnych plikach. stackoverflow przyjmuje to podejście.
W jednym pliku umieścisz cały CSS (nazwij go „hello_world.css”):
p {
font-weight:bold;
font-size:26px;
}
W innym pliku powinieneś umieścić HTML (nazwij go „hello_world.html”):
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<link rel="stylesheet" type="text/css" href="hello_world.css" />
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Mam nadzieję, że to trochę pomoże. Do elementów specyficznych adres w dokumencie i nie wszystkie znaczniki należy zrobić sobie znać class, idi nameatrybutów. Baw się dobrze!