Amikor a böngésző beolvas egy stíluslapot, a HTML-dokumentumot ennek megfelelően formázza a stíluslapon található információkat.
A stíluslap beszúrásának három módja van:
Külső CSS
Belső CSS
Inline CSS
Egy valamivel külső stíluslap módosításával megváltoztathatja egy teljes webhely megjelenését csak egy fájl!
Minden HTML-oldalnak tartalmaznia kell egy hivatkozást a belső stíluslapfájlra a elemet a fejrészen belül.
A külső stílusok a elemben, a HTML-oldal <head> részében vannak meghatározva:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Külső stíluslap bármilyen szövegszerkesztőben írható, és .css kiterjesztéssel kell menteni.
A külső .css fájl nem tartalmazhat HTML-címkéket.
Így néz ki a "mystyle.css" fájl:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Megjegyzés: Ne írjon szóközt a tulajdonság értéke (20) és az egység közé (px):
Helytelen (szóköz):
margin-left: 20 px;Helyes (nincs szóköz):
margin-left: 20px;Belső stíluslap akkor használható, ha egyetlen HTML-oldal egyedi stílussal rendelkezik.
A belső stílus a <style> elemen belül, a fejen belül van meghatározva szakasz.
A belső stílusok a <style> elemben, a HTML-oldal <head> szakaszában vannak meghatározva:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Egy soron belüli stílus használható egyedi stílus alkalmazására egyetlen elemhez.
Soron belüli stílusok használatához adja hozzá a style attribútumot a megfelelő elemhez. A A style attribútum bármilyen CSS tulajdonságot tartalmazhat.
A szövegközi stílusok a releváns "stílus" attribútumán belül vannak meghatározva elem:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tipp: A beágyazott stílus elveszíti a stíluslap számos előnyét (keveréssel tartalom bemutatásával). Használja ezt a módszert takarékosan.
Ha ugyanahhoz a választóhoz (elemhez) különböző stíluslapokon definiáltak bizonyos tulajdonságokat, az utoljára olvasott stíluslap értéke kerül felhasználásra.
Tegyük fel, hogy egy külső stíluslap a következő stílussal rendelkezik a <h1> elemhez:
h1
{
color: navy;
}Ezután tegyük fel, hogy egy belső stíluslap a következő stílussal rendelkezik a <h1> elemhez:
h1
{
color: orange;
}Ha a belső stílus a külső stíluslapra mutató hivatkozás után van megadva, a <h1> elemek "narancs":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Ha azonban a belső stílus a külső stíluslapra mutató hivatkozás előtt van megadva, a <h1> elemek "haditengerészet":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Milyen stílust használ a rendszer, ha egy HTML-elemhez egynél több stílus van megadva?
Az oldal összes stílusa egy új "virtuális" stílusba "lépcsős" lesz lapon a következő szabályok szerint, ahol az elsőnek van a legmagasabb prioritása:
Soron belüli stílus (HTML elemen belül)
Külső és belső stíluslapok (a fejrészben)
Alapértelmezett böngésző
Tehát a belső stílusnak van a legmagasabb prioritása, és felülírja a külső és a külső stílusokat belső stílusok és a böngésző alapértelmezett beállításai.
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>