Software related blog » css

TopStyle Pro, CSS la extrem

belial — Mon, 07 Jan 2008 12:45:27 +0000

Un prieten vechi de-al meu este TopStyle Pro. Am inceput sa lucrez cu el undeva pe la inceputul anului trecut. Pot spune ca e un program care te ajuta sa-ti pastrezi calmul si-n situatiile cele mai extreme. Usor de folosit cu o interfata foarte usor de inteles care-ti “pune pe tava” cele mai folosite instrumente fara sa te incurce intr-un fel.

Editorul este destinat codului (x)HTML si CSS, fisiere pe care le deschide extrem de rapid. Din pacate nu beneficiaza de snippet-uri insa are o functie auto-complete destul de folositoare. “CSS Selectors” sau asa numitele clase css sunt foarte frumos puse la dispozitia utilizatorului pentru a-i usura cat mai mult procesul de scriere respectiv intelegere a codului. Si culorile cu un mic preview si codul lor HEX isi fac aparitia in bara de meniu.

Trebuie sa recunosc ca programul poate fi folosit cu succes si la editarea fisierelor de tip php. TopStyle Pro nu se da in laturi nici de la frameworking avand un tab usor de folosit cand vine vorba de fisiere multiple, diferite proiecte; tab usor de interschimbat cu un alt tab numit “Style Inspector” care are o structura arborescenta continand cam orice definitie CSS care v-a trecut prin minte.

De bagat in seama mai este fireste si functia preview, taburile, si “style checker-ul” care ne anunta daca vreun browser va avea vreo problema la interpretarea unei parti din codul nostru.

Putin mai jos niste poze pentru a va ajuta sa va faceti o idee despre program.

Asadar daca va petreceti mult timp printre clase si defintii CSS si nu ati auzit inca de acest minunat programel va invit sa va descarcati o copie de pe pagina oficiala.

Download TopStyle Pro.

Cosmetizare link cu CSS

belial — Tue, 13 Nov 2007 17:24:38 +0000

Daca vreti sa dati un look mai deosebit link-urilor voastre puteti incerca varianta de mai jos:
Codul html:



link


link super link

Codul css (style.css):

.a {
color: #990000;
text-decoration: none;
background-color: transparent;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
font:10px Verdana, Arial, Helvetica, sans-serif;
}

Efectul final:

CSS Cheat Sheet

belial — Sat, 03 Nov 2007 19:45:28 +0000

Un must have pentru cei care doresc sa se initieze in CSS.

Poza-i destul de folositoare cand incerci sa inveti cum sta treaba cu css-ul. Sper sa va fie de ajutor (cel putin cat mi-a fost mie).

Font Size (em, px, pt, etc)

belial — Sat, 03 Nov 2007 18:31:42 +0000

Pentru a defini marimea unui font avem la indemana mai multe variante. Probabil ca ati intalnit mai multe variante de genul:

#body h2 { font-size: 1em;}

#body h2 { font-size: 10px;}

#body h2 { font-size: 20pt;}

#body h2 { font-size: medium;}

Este crucial ce variante folosim. Voi incerca sa va explic si de ce.

1em se refera la marimea caracterului “M” cand browser-ul afiseaza pagina la marimea standard a textului (la fel si 1ex se refera la marimea caracterului “X”);
1px inseamna ca marimea fontului va fi de 1px (pixel);
1pt inseamna ca marimea fontului va fi de 1 punct. Aceasta este o valoare fixa pentru toate fonturile si reprezinta cca. 1/72 dintr-un inch. Uneori nu se poate folosi aceasta valoare.

Valorie relative sunt ceva de genul em, ex, px, etc iar cele fixe sunt pt, in, cm, mm, etc.

Fireste, totul depinde de context, insa va sugerez sa folositi valorile relative pentru ca pagina sa fie cat mai compatibila cu o arie mai mare de rezolutii respectiv browsere.

Ce este CSS ?

belial — Sat, 03 Nov 2007 18:06:50 +0000

Mai mult ca sigur ca toti dintre noi am folosit cel putin o data CSS (Cascade Style Sheets) dar nu neaparat am stiut ce este.

Istoria CSS-ului dateaza inca din ‘97 cand a fost folosit pentru prima data. Ca sa fac o comparatie, va invit sa va ganditi la functia intalnita in MS Word cu care putem sa definim anumite clase de preformatare pentru difertie parti ale unui document.

Cele mai intalnite functii se refera la font-ul si la culoarea unui text. Spre exemplu in HTML ati fi folosit sintaxa


un titlu rosu

pentru a afisa un titlu rosu

Avantajul cand folositi CSS este acela ca puteti defini un stil cum ar fi

H4 { color: red; }

ceea ce va insemna ca toate titlurile definite cu h4 vor fi de culoare rosie.

Regula de baza pe care este construit CSS se bazeaza pe doua lucruri: selector si declaratie.

Selectorul reprezinta tag-ul HTML care va fi afectat de declaratie. Declaratia reprezinta stilul dupa care va fi formatat selectorul.

Asadar pentru a face ca tot textul bold sa fie de culoare rosie vom folosi declaratia:

b {color: red;}

O alta calitate a CSS este aceea de a putea defini mai multe declaratii in acelasi timp cum ar fi:

b {color: red;} h1{color: red;} h2{color: red;}

In loc sa folosim declaratia de mai sus putem s-o folosim pe cea de mai jos:

b, h1, h2 {colord: red;}

Asadar toate titlurile cu tag-urile h1 si h2 respectiv textul bold vor fi de culoare rosie.

Deasemenea putem grupa mai multe declaratii:

h4 {font-family: Tahoma; color: blue}

CSS poate fi folosit in 3 parti pe o pagina: in sectiunea , intr-un fisier extern sau intr-un tag separat. Declaratiile facute intr-un tag separat vor afecta doar acel tag pe cand celelalte doua variante vor afecta pagina care incarca declaratiile, integral.

Pentru a putea putea folosi declaratiile CSS in sectiunea va trebui sa cream un tag numit

O alta medota ar fi sa ne facem un fisier cu extensia .css iar mai apoi sa-l incarcam folosind codul urmator:

inainte de tag-ul .

O metoda pe care eu o mai folosesc cand vreau sa fac bypass la anumite declaratii si pe care nu o recomand decat celor care stiu ce fac este aceea de a importa declaratiile dintr-un fisier css chiar daca documentul are stabilite niste declaratii locale:

Atentie la declararile multiple pentru acelasi element; ultima declaratie va fi folosita pentru formatarea selectorului:

h1 {font-size: 1em;}

h1 {font-size: 15px;}

Asadar titlul cu tag-ul h1 va avea marimea font-ului de 15px.