Notite HTML Si Css by BenyyRR

---------HTML si CSS--------CUPRINS
1. Asa incepe o pagina

2. Text exact ca in notepad
3. Text anulat (notite invizibile in pagina)
4. Text mic sub sau deasupra
5. Subliniere (inserare) si Taiere (stergere)
6. Pentru despartit cuvinte sau Nu
7. Liste
7.1. Liste modificate in CSS
8. Link-uri puse pe cuvinte
8.1. Comenzi rapide in pagina
8.2. Cele 4 faze ale unui Link
9. Inserare Imagini
10. Tabele
10.1. Tabele personalizate in CSS
11. CSS in Head, in Tag si Extern
12. Background -- Culoare, Imagini
12.1. Opacitate (transparenta)
12.2. Background animat
13. Formatari ale Textului
14. Borduri
14.1. Pozitionare Borduri si Text
15. Div-uri
16. Clase
17. ID
18. Gruparea Selectorilor
19. Prima Litera si prima Linie personalizata
20. Gradele de Rudenie
21. Pozitii Tipuri
22. Orice inconjurat cu Text
23. Formulare
23.1. Butoane de Bifat (un punct intr-un cerc)
23.2. Casute de Bifat (nike intr-un patrat)
23.3. Variante de Selectat (gen alege Tara)
23.4. Loc pentru scris Mesaj (textarea)
23.5. Butoane gen "Reset"
23.6. Butoane pentru ales Fisiere (upload)
23.7. Spatiu pentru Text Blocat (can't modified)
24. Inserare Clip (youtube sau altele)
25. Display ( valori )
26. Meniu Expandabil
1. ASA INCEPE O PAGINA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN""html://www.v3.org//TR/xhtml1/DTD/xhtml1transitional.dtd">
==============================================
================================
2. TEXT EXACT CA IN NOTEPAD
<pre>
Acesta este un text preformatat. Prin urmare daca scrii ceva, oriunde si
oricum vei scrie, in pagina textul se va aranja exact ca in notepad.
</pre>==========================================
===============================
3. TEXT ANULAT (notite invizibile in pagina)
 daca nu punem nici una dintre aceste valori,
BORDURA NU SE VA CREEA <--!!
--solid= o singura linie --------- double= 2 linii -------- dotted= linie
punctata ------- dashed= linie intrerupta ----groove/ridge = jumatatea de sus
si cea stanga are nuanta de culoare mai inchisa si invers (inversare
nuante culori) --------- inset/outset= linia de sus si cea stanga are
nuanta de culoare mai inchisa si invers (inversare nuante culori)
border: 5px #ff0000 solid ; --------- acest exemplu este valabil in cazul in care
avem mai multe atribute de scris
border-top/bottom/right/left: 10px #ff0000 double ;---------------- valabil daca
vrem sa personalizam separat
laturile chenarului
14.1. --------Pozitionare ------ Borduri -------- si

-------Text-------margin-left/top/right/bottom: valoarea in px (ex: 20px - 20 legat de px);
---------- distanta dintre bordura si partea stanga / sus a paginii ( se poate
pune si cu - minus )
margin: valoarea in px ;---------------------------------- distanta dintre bordura si
partea stanga, sus, dreapta si jos a paginii
padding: valoarea in px ; -------------------------------- distanta dintre text si
bordura ( valabil pentru toate laturile )

padding-left/right/top/bottom: valoarea in px ; ---- distanta pentru fiecare
parte separat
width: valoarea in px ; ----------------------------------- latimea bordurii, imaginii,
etc.
height: valoarea in px ; ---------------------------------- inaltimea bordurii, imaginii,
etc.
border-spacing: 10px 20px ; ---------------------------- distanta dintre borduri -prima valoare pe orizontal -- a doua valoare pe vertical
border-collapse: collapse ; ----------------------------- anuleaza border-spacing
overflow: visible/hidden/scroll ; --------------------- in cazul in care un text nu
incape in propria bordura atunci el va fi ori ascuns de tot ori ascuns cu scroll
border-radius: valoarea in px ; ------------------------ rotunjeste colturile
border-top-left-radius: valoarea in px ; ------------- rotunjeste anumite colturi
==============================================
================================
15. DIV - URI
<div> ... </div> ------------------------- se pot pune cam toate tipurile de tag uri
left: 300px ; top: 200px ; -------------- o pozitionare mai simpla
==============================================
================================
16. CLASE
<h4 class="ce nume vrem noi sa-i dam"> ------ creeaza o legatura cu head ul
h4.bricheta{ ... } ----------------------------------- in cazul in care vreau sa pun o
restrictie in plus pentru tagurile pentru care se vor face anumite personalizari
.clasa1.clasa2 { ... } ------------------------------- daca vreau ca un tag sa aiba
elemente de personalizare din alta clasa ( sau chiar mai multe) + elementele
proprii de personalizare
==============================================
================================
17. ID
<div id="numele id ului"> ------- iar sus in head -- #numele id-ului ---- se
foloseste pentru a creea o legatura pentru a se putea personaliza din head
sau in alta parte --- se foloseste o singura data un id cu acelasi nume
==============================================
================================
18. GRUPAREA SELECTORILOR
h1, h2, h3 { ... } ------------------- toate 3 head uri vor avea aceesi valoare
==============================================
================================
19. PRIMA LITERA SI PRIMA LINIE PERSONALIZATA
p:first-letter { ... } -------------- personalizarea primei litere
p:first-line: { ... } ---------------- personalizarea primului rand
==============================================
================================
20. GRADELE DE RUDENIE
body strong{ ... } ---------- va personaliza ce se va afla in intervalul
<strong> ... </strong> (sunt sanse sa fie si un paragraf intre -- body - p strong ( relatia bunic-nepot ))
p > strong{ ... } ------------ va personaliza ce se va afla in intervalul
<strong> ... </strong> ( relatie parinte-copil )
==============================================
================================
21. POZITII - TIPURI
position: fixed ; -------- pozitie fixa - aceasta pozitie va ingheta un text pe
ecran, indiferent daca dam cursorul in jos/sus -- background ul va fi doar cat
textul ( se foloseste la reclame )
position: relative ; ----- pozitie relativa - aceata pozitie va fi mereu deasupra
textului care nu are proprietatea position: relative -- se va misca cand vom da
cusorul sus/jos - background ul va fi cat latimea paginii
position: absolute ; ---- pozitie absoluta - pozitionarea va incepe mereu din
marginile paginii -- background ul va fi cat textul - va fi deasupra textelor
care nu au proprietatea position: absolute

==============================================
================================
22. ORICE INCONJURAT CU TEXT
float: right/left ; ----------------- vom putea inconjura ceva cu maxim 3 directii cu
un text
==============================================
================================
23. FORMULARE
<form> ... </form> ------------------- in acest tag se va pune formularele
<input /> ------------------------------ acest tag va creea un chenar cu spatiu de
tastat --nu are tag de inchidere
<input type="text/password" /> -- aceste valori (text/password) va defini
cum va arata textul --password --***
<input maxlength=" nr. max de caractere" /> ------------------- pentru a limita
numarul de caractere scrise
<input size=" latimea chenarului in px" /> ----------------------- vom stabili
latimea chenarului
<form action="numele fisierului in care vrem sa punem datele"> ... </form>
-- pentru a salva datele intr-un fisier
<form method="post"> ... </form> ----------------------------------------------------metoda de salvare a datelor
<label for="numele de la id"> Nume/ Sex/etc. </label> ------ daca vrem sa
dam click pe Nume/Prenume/etc. ca sa se activeze casuta cu spatiul de scris
:focus{ outline-color: #ff0000; } ----------------------------------- pentru a shimba
culoarea bordurii
:focus{ outline: none } --------------------------------------------- anuleaza bordura -se foloseste de obicei
23.1. --------Butoane de bifat ( un punct intr-un
cerc )-------<input id=" ex: nume" /> -------- aici se va pune numele care va fi scris si in
<label for="nume"> ... </label> face posibila bifarea pentru toate butoanele
---- valabil doar in cazul butoanelor
<input name=" ex: nume" /> --- aceste tag "name" va obliga selectarea doar
a unuia din mai multe butoane -- valabil doar in cazul butoanelor
NOTA: De obicei pentru butoane se pune <input name=" ex: nume" />
<input type="radio" /> --------------------------- pentru a creea elemente gen -"doar una bifata din mai multe"
<input checked="checked" /> ------------------- daca vrem ca una din casute sa
fie bifata deja
<input value="Luni/Marti/etc." /> ---- Va trimite aceste date spre fisierul unde
se salveaza datele si mai ales intr-o anumita rubrica -- Luni/Marti/etc.
23.2. --------Casute de bifat (nike intr-un patrat)-------<input type="checkbox" /> --- codul pentru casute pentru bifat (casute
patrate, bifate cu nike)
23.3. --------Variante de selectat (gen-- alege
Tara )-------<select> ... </select> ---------- pentru a creea spatiul ( va fi gol ) pentru o lista
de selectat (gen-- alege Tara )
<option> ... </option> -------- pentru a adauga o valoare in lista
<optgroup label=" numele grupei "> ... <optgroup> --- pentru a grupa
careva variante din lista
<option value="Luni/Marti/etc."> </option> ----------- va trimite aceste date
spre fisierul unde se salveaza datele si mai ales intr-o anumita rubrica -Luni/Marti/etc.
23.4. --------Loc pentru scris mesaj (textarea)-------<textarea > ... </textarea> ---------------------------------------------- codul pentru
loc de scris mesaj
<textarea rows="cate randuri vrem sa scrim"> ... </textarea> ---- pentru a
preciza cate randuri sa aiba spatiul
<textarea cols="numarul coloanelor"> ... </textarea> ---- pentru a preciza
cate litere pe rand sa aiba spatiul
<textarea name="numele ales"> ... </textarea> ----------- acest tag este

pentru a ne putea orienta
23.5. --------Butoane gen "Reset"-------<input type=" button " /> ----------------------- pentru a creea un buton gen
"reset" \_____Buton personalizat
<input ... value=" numele Butonului" /> ----- acest tag va stabili numele
Butonului /~~~~~Buton personalizat
<input type="submit" /> ----------------------- va creea un Buton "Trimiteti"
( traducere de la submit )
<input type="reset" /> ----------------------- va creea un Buton "Resetati"
( traducere de la reset )
23.6. --------Butoane pentru ales fisiere
( upload )-------<input type="file" /> ------------------------- pentru a creea un Buton pentru
upload
<input name=" numele pus de mine" > --- pentru a ma putea orienta
23.7. --------Spatiu pentru Text blocat (nu se poate
modifica)-------<input type="text" readonly="readonly" /> ------- vom creea o casuta cu un
text care nu se va putea modifica
<input type="text" disabled="disabled" /> -------- va crea o casuta cu font
griu care nu se va putea nici copia
<input value="ce vrem sa contina casuta"> -------- pentru a scrie un text in
interiorul casutei
==============================================
================================
24. INSERARE CLIP (youtube sau altele)
<iframe width=" ... "> adresa videoclipului </iframe> ---------- pentru a pune
un clip.
==============================================
================================
25. DISPLAY ( valori )

display: ----------------- afisare in diferite moduri
none ---------------- nu va afisa deloc elementul, prin urmare daca intr-o
lista punem valoarea none unui nume atunci numele urmator ii va lua celui
cu valoarea none
block ---------------- va afisa o lista de ex una sub alta
inline --------------- va afisa o lista de ex in linie
inline-block ------- va afisa o lista de ex in linie
==============================================
==============================================
==============================================
==============================================
=====
26. MENIU EXPANDABIL
<ul class="menu">
<li class="parent">
<a href="#">link 1</a>
<ul class="children">
<li><a href="#">sublink 1</a></li>
</ul>
</li>
<li class="parent">
<a href="#">link 2</a>
<ul class="children">
</ul>
</li>
</ul>
ul {
padding: 0;
/* pentru ca a 2-a lista sa nu se alinieze in continuare
ci exact sub lista parinte*/

margin: 0;
list-style: none;
.menu > li {
display: inline-block;
.parent {
background-color: #ff9900;
position: relative;
.children {
position: absolute;
width: 70px;
.children li {
background-color: #009900;
/* partea care ascunde si afiseaza submeniul */

.parent .children {
display:none;
.parent:hover .children {
display: block;
==============================================
================================

Notite HTML Si Css by BenyyRR

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Notite HTML Si Css by BenyyRR

Încărcat de

Drepturi de autor:

Formate disponibile

---------HTML si CSS--------CUPRINS

1. Asa incepe o pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

prioritate majora din cele 3 moduri css

subliniat) --- overline= linie deasupra --- line-through= linie la mijloc

14.1. --------Pozitionare ------ Borduri -------- si

bordura ( valabil pentru toate laturile )

care nu au proprietatea position: absolute

<textarea name="numele ales"> ... </textarea> ----------- acest tag este

25. DISPLAY ( valori )

/* pentru ca a 2-a lista sa nu se alinieze in continuare

ci exact sub lista parinte*/

/* partea care ascunde si afiseaza submeniul */

S-ar putea să vă placă și