CSS !fontos tulajdonság

Tartalomjegyzék

Ami fontos?

A CSS !important szabálya arra szolgál, hogy a szokásosnál nagyobb jelentőséget adjon egy tulajdonságnak/értéknek.

Valójában, ha a !important szabályt használja, az felülírja az ÖSSZES korábbi stílusszabályt. konkrét tulajdonság az elemen!

Nézzünk egy példát:

Példa

#myid {
  background-color: blue;
}
.myclass {
  
  background-color: gray;
}
p {
  background-color: red !important;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

Példa magyarázata

A fenti példában. mindhárom bekezdés piros háttérszínt kap, annak ellenére, hogy az azonosító választó és az osztályválasztó nagyobb specifitású. A !important szabály mindkét esetben felülírja a háttérszín tulajdonságot.

Fontos A !fontos

Az egyetlen módja a !fontos felülbírálásának szabály, hogy tartalmazzon egy másik !fontos-t szabály egy ugyanolyan (vagy magasabb) specifikációjú deklarációra a forráskódban - és itt kezdődik a probléma! Ez zavaróvá teszi a CSS-kódot, és a hibakeresés nehéz lesz, különösen, ha nagy stíluslapod van!

Itt egy egyszerű példát hoztunk létre. Nem egészen világos, ha ránézünk a CSS-forráskód, mely színt tartják a legfontosabbnak:

Példa

 #myid {
  background-color: blue !important;
}
.myclass {
  
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

Tipp: Jó tudni a !fontos szabály. Valamilyen CSS-forráskódban láthatod. Azonban ne használja, hacsak nem feltétlenül muszáj.

Talán egy vagy két méltányos felhasználása fontos

A !fontos használatának egyik módja az, ha felül kell írnia olyan stílus, amelyet másképp nem lehet felülírni. Ez lehet, ha az vagy tartalomkezelő rendszeren (CMS) dolgozik, és nem tudja szerkeszteni a CSS-kódot. Ezután beállíthat néhány egyéni stílust a CMS-stílusok felülbírálásához.

A !important használatának másik módja a következő: Tételezzük fel, hogy különleges megjelenést szeretne az oldal összes gombjához. Itt a gombok szürkével vannak díszítve háttérszín, fehér szöveg, néhány kitöltés és szegély:

Példa

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>

</body>
</html>

Egy gomb megjelenése időnként megváltozhat, ha egy másik elembe helyezzük magasabb specifitású, és a tulajdonságok ütköznek. Íme egy példa erre:

Példa

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>

Ahhoz, hogy az összes gombot egyforma megjelenésre kényszerítsük, bármitől függetlenül, hozzáadhatjuk a !fontos szabály a gomb tulajdonságaira, így:

Példa

 .button {
  background-color: #8c8c8c !important; 
  color: white 
  !important;
  
  padding: 5px !important;
  border: 1px solid black !important; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c !important; 
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>