Importul CSS extern
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:
Sintaxa pentru importul unei foi de stil externe este urmatoarea:
<style type="text/css">
@import url(nume_fisier.css);
</style>
Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta container STYLE. In cadrul acestei etichete va aparea instructiunea @import, unde
”nume_fisier.css” reprezinta adresa URL a fisierului ce contine regulile CSS definite.
Alaturi de instructiunea @import, in cadrul etichetei STYLE pot exista definiti si selectori care definesc reguli CSS suplimentare.
Alaturi de instructiunea @import, in cadrul etichetei STYLE pot exista definiti si selectori care definesc reguli CSS suplimentare.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML cu CSS definit extern</title>
<style>
@import url('stil-2-3.css');
</style>
</head>
<body>
<h1>Utilizarea foilor de stil in cascada</h1>
<h2 style="color: blue;">Adaugarea unui stil la o eticheta HTML</h2>
<p>Regulile CSS pot fi definite intr-un document HTML, in sectiunea HEAD, cu ajutorul etichetei STYLE, sau
pot fi definite intr-un fisier CSS extern si apelate cu ajutorul etichetei LINK.</p>
<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-3.css
Legarea unui fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului
HTML.
In cadrul unui document HTML se poate face referinta la unul sau mai multe fisiere CSS. De asemenea, un document HTML care are definit un stil CSS intern, poate apela si un fisier CSS extern.
In cadrul unui document HTML se poate face referinta la unul sau mai multe fisiere CSS. De asemenea, un document HTML care are definit un stil CSS intern, poate apela si un fisier CSS extern.
Definirea unui selector HTML (Redefinirea unei etichete HTML)
Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii practic limitat doar de
compatibilitatea proprietatilor cu eticheta HTML la care se refera.
selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ...}
Dupa redefinirea etichetei HTML, toate aparitiile etichetei din documentul HTML vor fi modificate
automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se
adauga altele noi.
h1{color:green; font-size:14pt;}
Definirea unui selector de clasa
Utilizarea selectorilor de clasa ofera posibilitatea configurarii unor stiluri independente care se pot
aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Spre deosebire de un selector
HTML, care defineste un anume tip de eticheta, clasele au un nume unic. Sintaxa generala de definire
a unei clase CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...}
Numele unei clase trebuie sa fie compact (fara spatiu) si nu trebuie sa contina simbolul „.” (punct).
.el_rosu {color:red;}
Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi
folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa asociata in mod direct unui selector
HTML se foloseste urmatoarea sintaxa:
selector_HTML.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...}
Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase nu poate fi un cuvant
rezervat JavaScript.
Definirea unui identificator ID
Asemanator cu selectorii de clasa se definesc si identificatorii. Acestia sunt folositi pentru crearea de
stiluri care pot fi atribuite oricarei etichete HTML. Sintaxa generala de definire a unui identificator
este:
#identificator { proprietate1:valoare1; proprietate2:valoare2; ...}
Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei pagini web pentru identificarea obiectului unic in scopul manipularii acestuia cu
ajutorul functiilor JavaScript.
Identificatorii devin functionali doar atunci cand sunt specificati intr-o eticheta HTML individuala, in cadrul unui document. Numele unui identificator nu poate fi cuvant rezervat din JavaScript.
Identificatorii devin functionali doar atunci cand sunt specificati intr-o eticheta HTML individuala, in cadrul unui document. Numele unui identificator nu poate fi cuvant rezervat din JavaScript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ex. definire: selector, clasa, identificator</title>
</head>
<body>
<div id="wrapper">
<div class="header"><p>Titlu site</p></div>
<div class="header"><h1>Titlu site</h1></div>
<p>CSS</p>
</div>
</body>
</html>
Leave a Comment
You must be logged in to post a comment.