Cum s? încorpora?i CSS în HTML
CSS - Cascading Style Sheets.
CSS descrie modul în care elementele HTML trebuie s? fie afi?ate pe ecran, pe hârtie sau în alte suporturi.
CSS economise?te mult? munc?. Poate controla aspectul mai multor pagini web simultan.
CSS poate fi ad?ugat la elementele HTML în 3 moduri:
Inline - prin utilizarea atributului stil în elementele HTML
Intern - folosind un element <style> în sec?iunea
Extern - folosind un fi?ier CSS extern
Cel mai obi?nuit mod de a ad?uga CSS, este s? p?stra?i stilurile în fi?iere CSS separate. Totu?i, aici vom folosi stilul intern ?i inline, deoarece acest lucru este mai u?or de demonstrat ?i mai u?or pentru tine s? îl încerci singur.
Not?: Stilurile inline au cea mai mare prioritate, iar foile de stil externe au cele mai mici. Înseamn? c?, dac? specifica?i stiluri pentru paragrafele dvs., atât în fi?iere de stil încorporate cât ?i în cele externe, regulile de stil conflictuale din foaia de stil încorporate ar trece peste foaia de stil extern?.
Inline CSSUn CSS inline este utilizat pentru a aplica un stil unic la un singur element HTML.
Un CSS inline utilizeaz? atributul style al unui element HTML.
Acest exemplu stabile?te culoarea textului elementului <p> pe albastru si marimea 26px
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1>Defini?ie ?i utilizare Inline CSS in HTML</h1>
<p style="color:blue; font-size:26px">
Aici am utilizat CSS inline in HTML</p>
</body>
</html>
CSS intern sau CSS încorporate.
Un CSS intern este utilizat pentru a defini un stil pentru o singur? pagin? HTML.
Un CSS intern este definit în sec?iunea <head> al unei pagini HTML, în cadrul unui element <style>:
Exemplu 2:
<!DOCTYPE html>
<html>
<head>
<title>Culoarea textului (Text Color)</title>
<style>
h1 {color:green;}
p {color:purple;}
</style>
</head>
<body>
<h1>CSS intern sau CSS încorporate - Cursuri web design online</h1>
<p>Curs de introducere in programare cu specializarea Web Development.
Acest curs are rolul de a va introduce pas cu pas in Web Design (CSS).</p>
<p>Cursuri web profesionale atât pentru
încep?tori cât ?i pentru cei cu experien??.</p>
</body>
</html>
CSS extern - Foi de stil externe
O foaie de stil extern este ideal? atunci când stilul este aplicat pe mai multe pagini.
O foaie de stil extern con?ine toate regulile de stil într-un document separat pe care îl pute?i conecta din orice document HTML de pe site-ul dvs. Foile de stil externe sunt cele mai flexibile, deoarece cu o foaie de stil extern, pute?i modifica aspectul unui întreg site web actualizând doar un fi?ier.
Pute?i ata?a foi de stil externe în dou? moduri - conectarea ?i importarea:
Legarea foilor de stil externe
O foaie de stil extern poate fi legat? la un document HTML folosind eticheta <link>.
Eticheta <link> se înscrie în sec?iunea <head>, a?a cum se arat? aici:
Exemplu 3:
<!DOCTYPE html>
<html>
<head>
<title>CSS extern - Foi de stil externe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML in CSS extern - Foi de stil externe</h1>
<h2>Legarea foilor de stil externe</h2>
<p>O foaie de stil extern con?ine toate regulile
de stil într-un document separat pe care îl pute?i conecta
din orice document HTML de pe site-ul dvs.</p>
</body>
</html>
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.