Website XXL

Css pentru incepatori – Introducere in CSS

Css pentru incepatori – Introducere in CSS

Ce inseamna Css ? Introducere

Cascading Style Sheet sau mai pe romaneste foi de stil css se ocupa cu stilizarea limbajelor bazate pe marcaje precum HTML, XHTML sau XML dar nu este limitat doar la atat. Cu CSS ( cascading style sheet ) detinem controlul asupra designului unei pagini web in timp ce limbajele de marcaje controleaza structura acesteia.
CSS ajuta la simplificarea procesului de creare a paginilor web si obrinerea unui aspect placut al disegnului.
Cu CSS putem detine controlul asupra la: culoarea textului dintr-o pagina, asezarea imaginilor si a colonelor de text, culoarea de fundal a unei pagini, dimensiunea fontului, efecte asupra anumitor linkuri sau imagini etc. Lista cu “minuni css” este destul de lunga dar nu pe atat de complicata.

Pentru stilizarea paginilor folosim CSS in 3 moduri

1. Stil intern ( Recomandat )
2. Stil extern ( Recomandat )
3. Stil in linie ( Nerecomandat )
STILUL INTERN
<head>
<title>Titlul paginii</title>
<style type=”text/css”>
Aici se definesc stilurile CSS
</style>

</head>

Codul pentru stil intern CSS – <style type=”text/css”> </style> ( </style> este tagul care marcheaza sfarsitul codurilor CSS.

Stilul CSS intern se plaseaza in interiorul fiecarei pagini HTML care doriti sa o stilizati, intre tagurile <head> si </head>.

Folosind aceasta metoda (stilurile interne), fiecare fisier HTML va contine codul CSS folosit la stilizare. Asta inseamna ca atunci cand doriti sa faceti o schimbare de stil (marimea fontului, culoare, etc) va trebui sa operati modificarea in toate paginile ce contin acel stil. Aceasta metoda ( stil intern ) este excelenta cand avem un site cu maxim 4-5 pagini. Ce facem in cazul in care site-ul are sute de pagini ? In nici un caz nu o sa aplicam metoda stilului intern… pare cam dubios sa aplici stil intern pe 100 de pagini :D

STILUL EXTERN

Codurile CSS pot fi introduse intr-un fisier extern de tip style.css. Putem realiza un fisier css extern folosind diverse editoare (notepad, notepad++, sublime text 2) sau editoare avansate precum adobe dreamweaver.
Personal recomand Notepad++ sau Sublime Text 2.

Stilul extern este recomandat site-urilor cu un numar foarte mare de pagini. Acelasi cod, design, culori, coloane text etc. aplicam folosind stilul extern dar toate codurile css sunt scrise intr-un fisier extern “style.css” ( poate fi numit in orice fel importanta este extensia fisierului “.css).

Cum ii spunem unei pagini web ce tip de stil sa foloseasca si unde il gaseste?
Foarte simplu, folosind urmatorul cod

<head>

<title>Titlul paginii</title>

<link rel=”stylesheet” type=”text/css” href=”Calea catre fisierul.css” /> </head>

Acest cod trebuie introdus intre tagurile <head> si </head>

Stilul css extern este cel mai recomandat daca doriti sa aveti o intretinere mai usoara, dimensiuni reduse ale paginilor, continut html curat.

STILUL IN LINIE ( Nu este recomandat ! )

Stilul in linie se aplica direct in codul html asupra elementului pe care doriti sa-l stilizati.
<p style =”color: red;”>Acest text este rosu</p>

Este foarte simplu de lucrat cu CSS. Formatul codului HTML este “Tag HTML” “Proprietate CSS” : “Valoare”

Adica h1, h2, h3 color: #000; – se aplica pentru h1, h2, h3 culoarea negru.

Si cu asta am ajuns la final de introducere in css. In functie de timpul liber voi posta alte ghiduri din categoria css ( Clase, Id-uri, Sintaxa, Divizii, Span, Margini, Padding, Fonturi ) etc.

Citeste mai departe despre clase css

 

Leave a Reply