Tehnici Web

CSS

Claudia Chiriță . 2023/2024

METADATA

HTML metadata

  <head>
    Titlul paginii 
    
    
    
    
    
    
    
    
    
    
    
  </head>

Elementul base

definește URL-ul de bază pentru toate URL-urile relative din document
într-un document poate exista un singur element base

Elementul base

CSS

CSS = CASCADING STYLE SHEETS

limbaj style sheet folosit pentru definirea aspectului unei pagini web:
- stilizarea elementelor: culoare, mărime, font etc.
- așezarea elementelor în pagină
- determinarea vizibilității
folosit și pentru animații

fișierul de stil

<head>
...

...
</head>

Reguli CSS

fișierul de stil conține una sau mai multe reguli CSS

selector { 
  prop1: valoare1;
  prop2: valoare2;
  prop3: valoare3;
  ...
}

p { 
  color: pink;
  font-family: sans-serif;
  font-size: 12pt;
}

HTML + CSS alignment

în fișier separat

HTML + CSS alignment

în fișier

HTML + CSS alignment

in line

Precedența stilurilor

în ordine crescătoare a precedenței:

stilul implicit al browser-ului
fișier CSS extern și stiluri in file; se aplică stilul care apare scris ultimul în <head>
stiluri inline

Selectori

selector1, selector2 { 
  prop1: valoare1;
}
selector1 {  
  prop2: valoare2;
}

unui element i se pot aplica mai multe reguli
se grupează elementele care au un stil comun; stilurile specifice se scriu în reguli separate
unele stiluri sunt moștenite de la elementele părinte (în arborele DOM), dar pot fi schimbate folosind reguli specifice

Proprietăți: Culori

color: definirea culorii textului;

background-color: definirea culorii fundalului;

specificate prin nume: red, green, blue, pink, ...

Proprietăți: Culori

specificate prin valoarea rgb(red, green, blue)
red, green, blue au valori între 0-255
specificate prin valoarea hexazecimala #rrggbb
rr, gg, bb au valori între 0-255

Proprietăți: Culori

prin valoarea hsl(hue, saturation, lightness)
- hue reprezintă gradul culorii (0-360)
- saturation reprezintă intensitatea (0%-100%)
- lightness reprezintă luminozitatea (0%-100%)

Proprietăți: Culori

prin valoarea rgba(red, green, blue, alpha)
extensie a valorii rgb cu valoarea alpha care reprezintă opacitatea (0.0-1.0)
prin hsla(hue, saturation, lightness, alpha)
extensie a valorii hsl cu alpha
convertor culori

Distanța/mărimea

unități absolute: mm, cm, px, in, pt
unități relative:
- em: relativ la dimensiunea fontului elementului
- %: relativ la dimensiunea părintelui
- vw, vh: relativ la 1% din lățimea/înălțimea viewportului
- rem: relativ la dimensiunea fontului rădăcinii

selectori

Selectorul universal *

Selectarea prin tip

numele unui element din document: h1, p, div, a...

Selectarea prin id

#identif selectează elementul cu id="identif"
<tag id="identif"> conținut </tag>
un document HTML poate conține un singur atribut id cu valoarea "identif"

Selectarea prin clasă

.cls selectează elementele cu class="cls"
<tag1 class="cls"> conținut </tag1>
<tag2 class="cls"> conținut </tag2> cu atributul class grupăm mai multe elemente, care vor avea un stil comun

Selectarea prin clasă

Specificitate

selectarea prin id are specificitate mai mare decât selectarea prin class

Specificitate

când două stiluri au aceeași specificitate, câștigă cel care este scris ultimul în fișierul CSS

!important

proprietățile marcate !important sunt aplicate indiferent de specificitatea lor

inherit

unele proprietăți pot lua valoarea inherit: proprietatea este moștenită de la elementul părinte
folosită pentru a suprascrie un alt stil și a forța comportamentul implicit

Combinarea selectorilor

selectori pentru descendenți
E F selectează toate elementele F care sunt descendenți ai lui E
selectori pentru copii
E > F selectează elementele F care sunt copii ai lui E
selectori pentru frați
E + F selectează toate elementele F care sunt frați cu E și care urmează imediat după E
E ~ F selectează toate elementele F care sunt frați cu E și care urmează după E

Combinarea selectorilor

Selectarea prin atribute

e[attr] -> elementele e care au atributul attr
e[attr="val"] -> elementele e cu attr="val"
e[attr~="val"] -> elementele e cu proprietatea că valoarea lui attr conține cuvântul val
e[attr*="val"] -> elementele e cu proprietatea că valoarea lui attr conține subșirul val

CSS BOX model

reprezentare a spațiului pe care îl ocupă un element pe o pagină și a modului în care acesta se raportează la alte elemente

CSS BOX model

valori CSS default

width + height

width: 500px /* 50% */
/* height, max-width, min-width, max-height, min-height */

BORDER

border: grosime stil culoare;
border-left: grosime stil culoare;
border-right: grosime stil culoare;
border-top: grosime stil culoare;
border-bottom: grosime stil culoare;

grosime: exprimată în px, pt, em, thin, medium, thick
stil: none, solid, dotted, dashed, inset, outset, double, groove, ridge, hidden

BORDER

border-color: ...;
border-style: ...;
border-width: ...;
border-left-color: ...;
border-bottom-width: ...;

border-radius: 12px; /* margini cu colțuri rotunjite */

padding + margin

padding: 15px;
padding-top: 15px;
padding-right: 20%;
padding-bottom:15px;
padding-left: 10%;

margin: 15px;
margin-top: 15px;
margin-right: 20%;
margin-bottom:15px;
margin-left: 10%;

margin: 15px 20% 15px 10%;
padding: 15px 20% 15px 10%;

FLASH QUIZ

pătratul galben are lățimea și înălțimea de 150px

pătratul mare are lățimea și înălțimea de 250px

banda roz și bleu au grosimea de 25px

FLASH QUIZ

pătratul galben are lățimea și înălțimea de 150px

pătratul mare are lățimea și înălțimea de 250px

banda roz și bleu au grosimea de 25px

FLASH QUIZ

FLASH QUIZ SOLUTION #1

FLASH QUIZ SOLUTION #2

fonts

font-family: Helvetica,"Times New Roman",serif;
font-size: 16px; /* 16pt, 1.25em, 125%, x-large*/
font-weight: normal; /* bold, lighter, bolder, 100,...,900 */
font-style: normal; /* italic, oblique */

font-family:

fonturi generice: serif, sans-serif, monospace, cursive, fantasy
fonturi specifice: Times New Roman, Arial, Georgia, Verdana

fonts

font-family: Helvetica,"Times New Roman",serif;
font-size: 16px; /* 16pt, 1.25em, 125%, x-large*/
font-weight: normal; /* bold, lighter, bolder, 100,..., 900 */
font-style: normal; /* italic, oblique */

font-size:

unități: px, pt, em (1em = dimensiunea fontului curent)
valori: xx-small, x-small, small, medium, large, x-large, xx-large, ...
procente: procent din dimensiunea fontului părintelui

fonturi custom

/* pentru importarea unui font*/
	
@font-face { 
font-family: nume-font;
src:url(file-font.ext); 
}

selector { font-family: nume-font; 
}

fonturi custom

exemplu: embed mr. Roboto

Formatare TEXT

color: pink;
text-align: center; /* left, right, justify */
text-decoration: underline; /* overline, line-through */
text-shadow: -2px 5px 2px gray; /* none initial */
/* x-offset, y-offset, blur-radius, culoare */
text-indent: 3em;
text-transform: uppercase; /* lowercase, capitalize */
line-height: 150%; /* 1.5em , 30px */
word-spacing: 1em; /* +15mm */
letter-spacing: 0.1em; /* -1px */

VIZIBILITATE

visibility: visible; /* hidden */

setează vizibilitatea unui element;
chiar dacă vizibilitatea este hidden, elementul ocupă loc în pagină

overflow

overflow: hidden; /* visible, scroll */

descrie modul în care este redat textul care iese dintr-un cadru

display

display: inline; /* block, inline-block, none */

descrie modul în care este afișat un element în pagină
spațiul pe care îl ocupă este lungimea elementului
ignoră proprietățile width și height, dar acceptă border, padding

display

display: block; /* inline, inline-block, none */

descrie modul în care este afișat un element în pagină
permisă stilizarea folosind box model
plasare pe rând nou

display

display: inline-block; /* inline, block, none */

descrie modul în care este afișat un element în pagină
element poziționat inline care poate fi stilizat ca un element bloc
acceptă proprietățile width și height

display

display: none; /* inline, block, inline-block */

descrie modul în care este afișat un element în pagină
elementul nu este afișat
deși elementul este eliminat din pagină, el este prezent în DOM

Extra++

cascading style sheets
utf-8 vs utf-16 vs ascii


          
                  _,.,.__,--.__,-----.
                ,""   '))              `.
              ,'   e                    ))
             (  .-'__,                  ,
              `~`    `-\  /._____,/   /
                       | | )    (  (   ;
                       | | |    / / / / 
              
                         întrebări?