Embedded Files
CSS
CSS
El CSS (Cascade Style Sheet) és un llenguatge què permet a l'usuari personalitzar la seva pàgina web. Mentre que l'HTML serveix per redactar l'escrit de la pàgina web, el CSS el modifica de diverses maneres: font, mida, color, posició… Podem observar com el CSS “decora” la pàgina web amb el següent exemple, on s'observa a la mateixa pàgina web amb CSS i sense:
Pàgina web amb CSS
Pàgina web sense CSS
ESTRUCTURA DEL Codi
ESTRUCTURA DEL Codi
L'estructura principal consisteix a esmentar una o diverses etiquetes perquè es modifiqui tot el text corresponent a aquelles etiquetes. Dins d'un claudàtor s'escriuen els canvis i aquests poden tenir diferents valors: color, mida, font…
Com Enllaçar el CSS amb l'HTML
Com Enllaçar el CSS amb l'HTML
El codi següent serveix perquè l'HTML tingui les propietats del CSS. En aquest cas l'arxiu CSS s'anomena ‘style.css’.
Tots els elements excepte el content tenen atributs similars, per exemple es pot indicar si es vol editar una cara de l'atribut o la seva mida.
BOXES
BOXES
Les caixes (boxes) serveixen per contenir informació dins d'un espai determinat. Aquestes tenen diferents propietats que determinen diferents parts de la caixa:
Content: Es troba el contingut de la caixa, la informació: imatge, text…
Padding: Espai entre la informació i la vora de la caixa.
Border: Vora de la caixa, divideix el seu interior de l'exterior.
Margin: Espai entre altres elements i la caixa.
Codi CSS
Codi CSS
Resultat
Resultat
Exemple/activitat final
Exemple/activitat final
El següent codi fa referència a aquest enllaç.
*{
margin: 0px;
padding: 0px;
}
body{
background-image: url(images-portfoli/carlos.png), url(images-portfoli/escritorio.png) ;
background-size: 100%;
background-repeat: no-repeat;
}
h1, h2, h4, h5{
color: white;
font-family: "TT Commons", sans-serif;
margin-left: 80px;
}
h1{
font-weight: 300;
font-size: 63.5pt;
margin-top: 1px;
margin-bottom: 1px;
letter-spacing: 3px;
}
h2{
font-weight: 300;
font-size: 24.2pt;
margin-top: 1px;
margin-bottom: 1px;
}
h3{
font-weight: 300;
font-size: 18pt;
margin-top: 1px;
margin-bottom: 1px;
color: black;
}
.boto{
color:#363130;
background-color: #bbed2f;
padding: 10px;
border-radius: 30px;
width: 250px;
margin-top: 140px;
margin-left: 80px;
text-align: center;
font-family: "TT Commons", sans-serif;
}
.line{
content:"";
position: absolute;
z-index: 1;
top: 482px;
bottom: 120px;
left: 21%;
border-left: 2px solid #000000;
}
.arrow{
content:"";
position: absolute;
z-index: 1;
top: 495px;
bottom: 120px;
left: 300px;
color: black;
font-weight: 2px;
font-size: 25pt;
}
.escritorio{
background-image:url(images-portfoli/escritorio.png) ;
background-size: 100%;
padding-top: 475px;
background-repeat: no-repeat;
margin-top: auto;
padding-bottom: 20%;
}
.blank{
height: 200px;
}
.gris{
background-color: #4b4b4b;
height: 100%;
color: white;
}
h4{
margin-top: 10%;
background-color:#4b4b4b ;
font-size: 27.5pt;
letter-spacing: 2px;
width: 59%;
border-bottom: 95px solid #4b4b4b;
border-color: #4b4b4b;
}
h5{
font-size: 20pt;
font-weight: 300;
border-top: 75px solid #4b4b4b;
}
.suerte{
background-color: #eaeaea;
width: 100%;
height: 100%;
}
.empresas{
font-family: "TT Commons", sans-serif;
margin-left: 80px;
font-size: 32pt;
width: 45%;
letter-spacing: 2px;
font-weight: 300;
padding-top: 75px;
padding-bottom: 204px;
}
.box{
max-width: 100%;
height: auto;
}
.crc{
display: flex;
align-items: center;
padding-bottom: 70px
}
.calz, .rest, .clin{
font-family: "TT Commons", sans-serif;
font-weight: 300;
padding-right: 190px;
margin-left: 80px;
font-size: 20pt;
}
.carlosgreen{
background-image:url(images-portfoli/carlosgreen.png) ;
background-size: 88%;
padding-top: 325px;
background-repeat: no-repeat;
margin-top: auto;
padding-bottom: 21%;
background-color:#bbed2f;
}
.op{
font-family: "TT Commons", sans-serif;
font-weight: 400;
margin-left: 700px;
font-size: 32pt;
letter-spacing: 2px;
position: relative;
}
Page updated
Report abuse