Motto

"Daca nu incerci sa faci ceva peste cunostintele pe care le ai, nu ai cum sa evoluezi." Ronald Osborn

vineri, 15 mai 2015

Notes: CSS & HTM (4)

Lesson10

  • Multiple selectors: div ul li{}
  • Divide and conque: div
  • clase
  • pozitionarea imaginilor link in blocuri rotunde (border-radius:100%;)

  • display:
  • block
  • inline-block
  • inline (pt h1 si p)
  • none.

  1. Margine: margin:auto; (la mijloc stg-dr);
    margin:40px 30px 20px 10px; (sus-dreapta-jos-stanga=>in sensul acelor de ceasornic) sau
margin-top:40px;
margin-right:30px;
margin-bottom:20px;
margin-left:10px;
  1. Bordura
  2. padding poate fi stabilit ( if you want your padding to be the same for all four sides, you can declare that value only once - padding: 10px - 10 pixels of padding on all sides.):
    1)
    padding-top:40px;
padding-right:30px;
padding-bottom:20px;
padding-left:10px;

    2)
    padding: 40px 30px 20px 10px;
  1. Negative values
  2. pozitionare - float:right;
  3. clearing elements: clear (inlatura blocurile suprapuse sau blocate intre margine si alt bloc)
  4. static by default : static
  5. Absolute positioning: position: absolute
  6. Relative position (isi ia marginea din locul in care era pozitionat si nu din oricare alt reper) position:relative;
  7. fixed positioning (raman pe ecran desi realizezi scroll cu mouse ul) position:fixed;

Lesson11

  • bara de navigare
  • overflow: scroll;
  • tabel cu pozitionari
Publicat de la Niciun comentariu:
Etichete:

Notes: HTM & CSS (3)

Lesson7

  • hexadecimal values (Search for "hex color palette" or "hex color picker")
  • Pixels and ems
Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!

  • fonts:
Verdana | Courier | Garamond
serif | sans-serif | cursive
  • Backup values

    Lesson8

  • blocuri cu <div></div>
  • tabel: bordura pt td si table, height pt td;
  • link uri si text-decoration
  • design a button: desenarea lui cu div;
  • forma butonului: cu border-radius (face colturile desenului rotunde)
  • margin:auto; pozitionarea obiectului la mijloc pt ca marginile laterale sunt egale
  • selectorul universal:
     

Lesson9

  1. bifurcatii: parinti si copii
  2. selectarea unui copil direct: div > p
  3. class si id
class: in css se declara ca .nume{}, iar in htm se apeleaza cu <p class=”nume”></p> (cand ai de stilizat mai multe elemente diferite)
id: (folosit pt cand ai de stilizat un element) in css se descrie #nume{}, in htm se apeleaza <p id=”nume”></p>
  1. pseudo-class selectors (Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked!)
  2. Links
  1. first-child - adauga stil doar elementelor care sunt first child al parintilor imediati (in css: p:first-child{})
  2. nth child - cu el se poate selecta orice alt copil dupa first-child astfel: p:nth-child(2){}
!!!Would turn every paragraph that is thesecond child of its parent element










Publicat de la Niciun comentariu:
Etichete:

Notes: HTM & CSS (2)

Lesson4

Pasii realizarii unei pagini web in HTML:
  • titlul
  • imaginea
  • paragraf
  • liste
  • liste in liste
  • font, culoare, marime

    lesson5

  • tabele:
  • <table></table>;
  • <tr></tr>;
  • <td></td>;
  • <thead></thead>;
  • <tbody></tbody>;
  • denumirea tabelului: <th colspan=”nR”></th>
  • stilizarea capului de tabel
    1. div
      cod:

      Rezultat:


    2. span

      Afiseaza:

    Lesson6

    • Imagini link in tabel
    • CSSCascading StyleSheets = este un limbaj ce descrie infatisarea si formatarea HTML
    • style sheet= e un fisier ce descrie cum ar trebui sa arate un fisier HTML
    • Legatura cu CSS file:
    • Self-closing tags<link type=”” rel=”” href=””>; <img src=””/>

     

Publicat de la Niciun comentariu:
Etichete:

Notes: HTM & CSS (1)

Lesson1

  • html ofera website urilor structura
  • deschidem html cu ajut browserului
  • html are un <head> si un <body> la fel ca mine
  • in <head> avem eticheta  <title> folosita pentru a da un titlu paginii web
  • am mai invatata cum se realizeaza headings <h1-h6> si paragrafe<p>

    Lesson2

    Culoare, marime si tipul fontului:
  • font-size: 14px
  • color: orange
  • font-family: Arial
Atributul style poate fi folosit pentru <p>,<h1> si chiar pentru <a>link

Lesson3

  1. Liste ordonate si neordonate {<ol><li></li></ol> si <ul><li></li></ul>}
  2. Schimbarea culorii, marimii si tipului de font; (Lesson2)
  3. adaugarea comentariilor <!--comentariu→
  4. Schimbarea culorii fundalului paginii, <p>,<h1>etc in <style=”background-color:blue”>
  5. Alinierea textului in style cu text-align:right/left/center
Ingrosarea si italicizarea <strong></strong> si <em></em>

Publicat de la Niciun comentariu:
Etichete: