In aceasta lectie vei invata sa faci un stylesheet(foaie cu stiluri). Vei invata modelul de baza CSS si ce coduri sunt necesare pentru a folosi CSS intr-un document HTML. Multe din proprietatile folosite in CSS sunt similare cu cele din HTML, deci daca esti familiarizat cu folosirea HTML pentru layout vei recunoaste multe din coduri.
Sintaxa de baza CSS
Daca dorim ca fundal culoarea rosie pentru pagina web:
Folosind HTML:
<body bgcolor="#FF0000">
Folosind CSS, acelasi rezultat poate fi obtinut astfel:
body {background-color: #FF0000;}
Exista trei metode prin care poti aplica CSS. Recomandarea noastra e sa te concentrezi pe a trei-a metoda (externa)
Metoda 1: In-line (the attribute style)
Exemplul de mai sus cu fundalul rosu poate fi aplicat astfel:
<html>
<head>
<title>Exampletitle>
head>
<body style="background-color: #FF0000;">
<p>This is a red pagep>
body>
html>
<head>
<title>Exampletitle>
head>
<body style="background-color: #FF0000;">
<p>This is a red pagep>
body>
html>
Metoda 2: Interna (the tag style)
<html> <head> <title>Exampletitle> <style type="text/css"> body {background-color: #FF0000;} style> head> <body> <p>This is a red pagep> body> html>
Metoda 3: Externa (link la un fisier style sheet) Metoda recomandata este de a face legatura cu asa numitul style
sheet extern. Un style sheet este un fisier text cu extensia.css. Ca pe orice
fisier il poti salva pe server sau pe hard disk.De exemplu, daca style sheet-ul se numeste style.css si este localizat in folderul style, situatia poate fi ilustrata astfel:
Ce este important este ca creezi un link (o legatura) de la documentul HTML (default.htm) la style sheet (style.css).
O legatura de acest tip poate fi creata cu o linie de cod HTML:
<link rel="stylesheet" type="text/css" href="style/style.css"
/>Linia de cod trebuie inserata in sectiunea header a codului HTML intre si astfel:
<html> <head> <title>My documenttitle> <link rel="stylesheet" type="text/css" href="style/style.css"
/> head> <body> body> html>
Acum pune in practica teoria.
Deschide Notepad (sau orice alt editor de text) si creaza doua fisiere - unul HTML si unul CSS - cu urmatoarele continuturi:
default.htm
<html> <head> <title>My documenttitle> <link rel="stylesheet" type="text/css" href="style.css" /> head> <body> <h1>My first stylesheeth1> body> html>
style.css
body { background-color: #FF0000; }
Trimiteți un comentariu