Definire reguli
Definirea de reguli similare
Daca mai multi selectori folosesc aceleasi definitii, acestia se insereaza intr-o lista de elemente
separate prin virgule. Sintaxa generala pentru definirea unei liste cu selectori este:
selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ...}
Impreuna cu selectorii pot fi de asemenea definiti si identificatorii si clasele. Dezavantajul definirii
regulilor similare este ca in momentul in care este modificata o valoare a unei proprietati incluse in
definitie, valoarea respectiva se va modifica in toate etichetele listei de reguli.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Definirea de reguli similare</title>
</head>
<body>
<div id="wrapper">
<h1>Definirea de reguli similare</h1>
<h2>Definirea de reguli similare</h2>
</div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
stil-2-8.css
body{
background-color:#b8e6e6;
}
#wrapper{
margin-left:50px;
}
h1, h2{
color:blue;
}
Definirea etichetelor in context (imbricate)
Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia), spunem
ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz, eticheta parinte, iar
cea inferioara se numeste copil. Se pot crea reguli aferente etichetelor copil, sintaxa generala a unei
reguli contextuale fiind:
selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ...}
Ultimul selector din lista este cel care primeste toate stilurile incluse in regula si le mosteneste pe
cele ale parintilor.
Ca si selectorii grupati, selectorii contextuali pot include in lista selectori de clasa, identificatori sau
selectori HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Definirea etichetelor in context</title>
</head>
<body>
<div id="wrapper">
<div class="div_ex">
<h1>h1 in clasa div_ex</h1>
<h2>h2 in clasa div_ex</h2>
<h3>h3 in clasa div_ex</h3>
</div>
<h1>ex. h1</h1>
<h2>ex. h2</h2>
<h3>ex. h3</h3>
</div>
</body>
</html>
stil-2-9.css
body{
background-color:#e6e68a;
}
#wrapper{
margin-left:50px;
}
/* definim culoarea verde pentru h1, h2, h3 (reguli similare) */
h1, h2, h3{
color:green;
}
/* definim clasa div_ex */
.div_ex {
width:50%;
Leave a Comment
You must be logged in to post a comment.