CSS bàsic - Resum - Multimedia (UOC) - Paquita Ribas

1,230 views

Published on

Resum de CSS bàsic, segons l'assignatura Llenguatges i Estàndards Web, del Grau Multimèdia de la UOC.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,230
On SlideShare
0
From Embeds
0
Number of Embeds
623
Actions
Shares
0
Downloads
84
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS bàsic - Resum - Multimedia (UOC) - Paquita Ribas

  1. 1. CSSESTILS DE TEXTPROPIETAT VALORSFont-famity cursive, fantasy, monospace, sans-serif, serifFont-size xx-small, x-small, small, medium, large, x-large, xx-large (o també amb px o em)Font-style italic, normal, obliqueFont-variant normal, small-capsFont-weignt bold, normalLine-height Normal ( o també 1em, 1,5em, 4em...)Text-align center, justify, left, rightText-decoration line-through, none, overline, underlineText-transform capitalize, lowercase, none, uppercaseWhite-space normal, nowrap, pre, pre-line, pre-wrapcolor Es pot posar blue, black... o també #f00IMATGES PROPIETAT DEFINICIÓ DESCRIPCIÓBackround- Estableix el color de fons És més habitual fer servir la notació hexadecimals.color També s’inclouen els valors transparent o inherit.Image Indica la ruta o URL de la Per exemple: url(foto.png) imatge de fons S’ha de posar sempre url seguida i sense espais, de la imatge entre parèntesiRepeat Indica en quina direcció s’ha Els valors són: de repetir la imatge de fons repeat, repeat-x, repeat-y i no-repeatAttachment Defineix el comportament de Les imatges poden desplaçar-se amb el contingut o la imatge de fons quan l’usuari quedar-se fitxes a la pantalla de visualització. Els desplaça valors són: scroll, fixed i inheritPosition Indica al navegador on Els valors vàlids inclouen length (en píxels), col·locar la imatge de fons percentatges (de l’amplada de l’element) i les paraules clau: top, right, botton, left i center. Es poden mesclar percentatges i píxels, però no paraules clau amb píxels o percentatges.Background La propietat abreujada que es Les propietats sempre s’haurien d’indicar en el pot fer servir per descriure mateix ordre: tota la resta de propietats 1 – Color d’una línia 2 – url 3 – repeat 4 – attachment 5 – horizontal-position 6 – vertical-position Exemple: Background: green url(logo.gif) no-repeat left top;
  2. 2. TIPUS DE CURSORPROPIETAT: VALOR EQUIVAL A...cursor: pointer; Una mácursor: help; Un interrogantcursor: progress; Un rellotge d’arena amb un cursorcursor: wait; Un rellotge d’arena http://www.ignside.net/man/css/cursores.phpTIPUS DE PUNT EN LES LLISTESPROPIETAT: VALOR EQUIVAL A...list-style-type: square; Un quadratlist-style-type: circle; Un punt negrelist-style-type: disc; Un cerclelist-style-type: none; Ningún puntIMATGES COM A PICSi posem una classe a la llista podem establir una imatge com a pic de llista. Primereliminaríem el pic i desprès afegiríem la imatge amb background.Si dintre de <ul> posem una classe “picnou”, el CSS seria així: .picnou { margin: 0; padding: 0; list-style-type: none; } .picnou li { background: #fff url("icon.gif") 0 3px no-repeat; padding: 0 0 5px 15px; }LLISTES HORITZONTALS COM A MENÚ - Eliminaríem els margin i paddins de <ul> - canviaríem l’element bloc per element en línia amb display: inline - Aplicaríem una mica d’espaiat a la dreta dels elements de la llista perquè no toquin #mainmenu { margin: 0; padding: 0; } #mainmenu li { display: inline; padding: 0 1em 0 0; }SUBRATLLATSPROPIETAT: VALOR EQUIVAL A...text-decoration: underline; Amb subratllattext-decoration: none; Desactivar subratllat
  3. 3. ESTILS ALS ENLLAÇOSEls enllaços sempre han d’anar en aquest ordre.PROPIETAT: VALOR EQUIVAL A...a:link{}a:visited{}a:focus{} Ja no es sol utilizar. Millor activea:hover{} Per sobrea:active{} Seleccionattext-decoration: none; Desactivar les decoracions dels estats que hi ha per defecteOutline: thick solid #000; Contorn sòlid que no ocupa espai a l’enllaçBORDERS, RATLLES I MARGESPROPIETAT: VALOR VALORS EQUIVAL A...border-bottom: 1px solid #00c; solid dotted dashed Ratlla inferior de diferents decoracionsborder-width Amplada de voraborder-style Dashed Vora de línia discontínua. Dotted Vora de línia puntejada Double Vora de doble línia. Groove Relleu. Inset Relleu. None No hi ha vora. Equivalent a especificar una border-width (amplada) de zero. Outset Relleu. Ridge Solid Border amb l’efecte de profunditat La vora és una línia contínua sense ombraborder-top Es pot canviar topborder-top-width per right, bottom oborder-top-style leftborder-top-colorMargin-top -right, -borrom, -left, Col·locar espai en blanc al voltant marginMargin: auto; Marge (espai en blanc) segons el valor proporcional al seu propi full d’estil.Margin-bottom Marge inferiorMargin-top Marge superiorPadding-top O també right, bottom, left
  4. 4. OVERFLOWPROPIETAT: VALORS EQUIVAL A...overflow Visible L’element desborda la caixa hidden Els elements fora dels límits de la caixa quedaran amagats auto Els elements fora dels límits queden amagats però es crearan les barres de desplaçament que siguin necessàries. scroll S’incorporen barres de desplaçament verticals i horitzontals encara que no calguin
  5. 5. DISPLAYPROPIETAT: VALORS EQUIVAL A...Display: Block, inline, none Canviar el valor del display bloc o líniaFLOATPROPIETAT: VALORS EQUIVAL A...float: Left L’element flota a l’esquerra right L’element flota a la dreta none Es fa servir per desfer una declaració d’una altra regla inherit L’element hereta el valor float del seu element pareCLEARPROPIETAT: VALORS EQUIVAL A...Clear: Left Garanteix que la seva caixa aparegui sota de qualsevol caixa flotada a l’esquerra right Garanteix que la seva caixa aparegui sota de qualsevol caixa flotada a la dreta both Apareix sota tots els elements flotants none Valor per defecte inherit HeretarPOSITIONPROPIETAT: VALORS EQUIVAL A...position static L’element flota a l’esquerra relative L’element flota a la dreta absolute Es fa servir per desfer una declaració d’una altra regla fixed L’element hereta el valor float del seu element pare
  6. 6. POSICIONAMENT ESTÀTICDISTÀNCIA VERTICAL ENTRE DUES CAIXES DE BLOCmargin-bottom margin-topDISPOSICIÓ DE CAIXES EN LÍNIAdirection: ltr Direcció d’esquerra a dreta (per defecte)direction: rtl Direcció de dreta a esquerra (idiomes àrab o hebreu)line-height Modificar l’alçada de líniavertical-align Controla les alineacionsvertical-align: baseline Les caixes en línia s’alineen de manera que les seves línies de base de text queden alineadesPOSICIONAMENT RELATIULa caixa es col·loca igual que qualsevol element estàtic de bloc però es pot desplaçarsegons les rpopietats top, bottom, left i rightspan { position: relative; top: 1em; left: 2em; background-color: lime;}En el posicionament relatiu el top: 1em i bottom: -1em són el mateixPOSICIONAMENT ABSOLUTEl posicionament absolut no té un avantpassat posicionat: El bloc contenidor és el ques’anomena bloc contenidor inicial, que a la pràctica equival a l’element html. Això voldir la finestra del navegador. Significa els límits de la pàgina.Si un element absolut està dintre d’un element relatiu, l’element relatiu fa de pare del’element absolut.

×