10eko 10
Sortu CSS estilo-orria
Era berean, HTML formatuan testu fitxategi bat sortu genuen, CSSrako testu fitxategi bat sortuko duzu. Prozesu honen irudiak behar badituzu, ikusi lehenengo tutoriala. Hemen daude zure CSS estilo-orria sortzeko Notepad-en:
- Aukeratu Fitxategia> berria Ohar-orrian hutsik dagoen leiho bat lortzeko
- Gorde fitxategia CSS gisa Fitxategia sakatuz
- Joan nire disko gogorreko my_website karpetan
- Aldatu "Gorde mota gisa:" "Fitxategi guztiak"
- Izena "styles.css" fitxategia (utzi komatxorik gabe) eta egin klik Gorde botoian
10/10
Estekatu CSS estiloa zure HTML formatuan
Behin zure webguneko estilo-orri bat duzula, webgunera berarekin lotu behar duzu. Horretarako, esteka etiketa erabiltzen duzu. Jarri esteka honen etiketa edozein lekutan
tags of your pets.htm dokumentuan:10/03
Konpondu orrialdeen marjinak
Nabigatzaile desberdinetarako XHTML idazten ari zarenean, gauza bakarra ikasiko duzu, badirudi marken eta arau desberdinak dituztela gauzak nola bistaratzen dituzten. Nabigatzaile gehienetan zure webgunea berdina dela ziurtatzeko modurik onena ez da baimendu marjinak arakatzailearen aukerara lehenetsi.
Nire orrialdeak goi ezkerreko izkinan hasi nahiago dut, testuaren inguruko estrukturarik edo marjinarik gabe. Nahiz eta edukiak mugitu nahi baditut, marjinak zero ezarri ditut, arbel zuri berdinarekin hasten naizen moduan. Horretarako, gehitu ondoko zure styles.css dokumentuan:
html, body {
marjina: 0px;
betegarria: 0px;
mugan: 0 px;
utzi: 0px;
top: 0px;
}
04 de 10
Orriaren letra-tipoa aldatzea
Letra-tipoa sarritan Web orri batean aldatzea nahi duzun lehen aldia da. Web orri baten letra-tipo lehenetsia itxua izan daiteke, eta benetan Web nabigatzailea bera da, beraz, letra-tipoaren definizioa ez baduzu, ez duzu zure orriaren itxura izango.
Normalean, letra-tipo bat alda dezakezu paragrafoetan, edo batzuetan, dokumentu osoan. Gune honetarako goiburuko eta paragrafo-mailan letra-tipoa definituko dugu. Gehitu ondoko zure styles.css dokumentuan:
p, li {
font: 1er Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5if Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
1em hasi nintzen paragrafoen eta zerrenden elementuen oinarrizko tamaina, eta, ondoren, nire titularrak tamaina ezartzeko erabili nuen. Ez dut espero h4 baino sakonagoa den titulua erabiltzea, baina estiloa ere nahi duzula asmatzen baduzu.
10/10
Lotura interesgarriak egitea
Esteken koloreak lehenetsiak dira urdin eta morea bisualki eta bisitatutako esteketan, hurrenez hurren. Estandarra den bitartean, baliteke zure orrialdeen kolorearen eskema ez egitea, beraz, aldatu. Zure styles.css fitxategian, gehitu hau:
a: esteka {
font-family: Arial, Helvetica, sans-serif;
kolorea: # FF9900;
testu-dekorazioa: azpimarratu;
}
a: bisitatu {
kolorea: # FFCC66;
}
a: pasatzean {
atzeko planoa: #FFFFCC;
font-weight: bold;
}
Hiru esteka-estilo sortu ditut, lehenetsitako esteka a: link gisa: bisitatu zenean bisitatua, kolorea aldatu dut eta a: pasatzean. Honekin: pasatzean, estekaren atzeko planoaren kolorea lortu eta ausardia joateko esteka azpimarratu behar da.
10eko 10
Nabigazioko atala estilizatzea
Nabigazioa (id = "nav") sekzioan lehenik HTML formatuan jarri genuenetik, dezagun lehenengo estiloa. Esan beharra dago zein den zabalera eta eskuinaldean marjina zabalagoa jarri beharra dago, testu nagusiaren kontra ez dadin. Mugitu ere egiten dut inguruan.
Gehitu CSS hau zure styles.css dokumentuari:
#nav {
zabalera: 225 px;
marjina-eskubidea: 15 px;
mugan: ertain ona # 000000;
}
#nav li {
zerrenda-estiloa: none;
}
.footer {
letra-tamaina: .75em;
argi: biak;
zabalera:% 100;
text-align: center;
}
Zerrenda-estiloaren propietateak nabigazio sekzioko zerrenda osatzen du, balak edo zenbakiak ez izateko eta .footer estiloak atalaren barruan zatituta dauden copyright atala txikiagoa izan dadin.
07 de 10
Atal nagusia kokatzea
Zure atal nagusia posizionamendu absolutuarekin kokatuz gero, zure web orrian egon nahi duzun lekuan zehazki egon daiteke. 800px zabalerako egin nuen monitore handiagoak gordetzeko, baina monitore txikiago bat baduzu, murriztu egin dezakezu.
Egin ondoko zure estiloetan.css dokumentuan:
#main {
zabalera: 800 px;
top: 0px;
posizioa: absolutua;
ezkerrera: 250 px;
}
08 de 10
Zure paragrafoak estilatzea
Aurreko paragrafo-letra ezarri dudanetik, paragrafo bakoitza apur bat "jaurtiketa" gehiago eman nahi izan dut hobeto nabarmentzeko. Hori egin nuen goiko aldean mugan jarri zen eta irudia bakarrik baino irudiaren azpian nabarmendu zen.
Egin ondoko zure estiloetan.css dokumentuan:
.topline {
mugako goialdean: lodi solidoa # FFCC00;
}
Orduan, "topline" izeneko klase bat bezala egitea erabaki nuen, horrela paragrafo guztiak definituz. Horrela, paragrafo bat izan nahi dut goiko horia lerro gabe nahi badut, besterik gabe, ezin dut utzi class = "topline" paragrafo-etiketa eta ez du goiko muga.
10/09
Irudiak estilizatzea
Irudiak normalean haien inguruko mugak baditu, hau ez da beti ikusgai irudia esteka bat izan ezean, baina klase bat eduki behar dut nire CSS estilo-orriaren bidez, mugatik automatikoki itzaltzen da. Estilo-orri honetarako, "noborder" klasea sortu nuen, eta dokumentuan dauden irudi gehienak klase honen zati dira.
Irudi horietako beste atal berezi bat dago orrian. Paragrafoaren zati bat izan nahi nuke, mahaiak erabili beharrik gabe lerrokatzeko. Horretarako modu errazena CSS mugikorreko propietatea erabiltzea da.
Egin ondoko zure estiloetan.css dokumentuan:
#main img {
flotatzen: utzi;
marjina-eskubidea: 5px;
marjina-behean: 15 px;
}
.noborder {
mugan: 0 px ez;
}
Ikusten duzun bezala, irudietan ezarritako marjina-propietateak ere badira, paragrafoen ondoan dagoen testu flotatuaren aurka apurtu ez direla ziurtatzeko.
10tik 10
Orain begiratu zure osatutako orria
Zure CSS gorde ondoren, pets.htm orria birkargatu ahal izango duzu zure web arakatzailean. Zure orrialdean irudian agertzen denaren antzekoa izan behar da, irudiak lerrokatuta eta orrialdearen ezkerraldean ondo kokatutako nabigazioa.
Jarraitu urrats hauek zure gune barne orrialde guztietarako. Orrialde bat zure nabigazioan orrialde bakoitza izan nahi duzu.