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.