Pereiti prie turinio

CSS pranašumas

Poter

Sukūrė Poter
Tinklalapių kūrimas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

Poter

Poter 24

Sukurta
Sukurta (redaguota)

CSS kas tai?

Cascading Style Sheets (CSS) technologija kuri atsirado prieš keletą metų. Tai geras būdas priskirti stilių HTML elemntams jūsų tinklapiuose. CSS gali pasiūlyti kelis savo pranašumus, įskaitant ir tai, kad nereikia įterpinėti stiliaus informacijos tiesiai į HTML žymenas.

 

CSS pranašumas

 

Lankstus

Stiliai gali būti surašyti į vieną failą ir priskirti HTML elemantams per klases ar ID parametrus. Daug lengviau redaguoti stilių kai viskas randasi vienoje vietoje.

 

Užima mažiau vietos

Naudodami CSS (pvz.: class="main-nav") sukuriate mažesnius HTML failus negu rašydami parametrus į kiekvieną HTML žymeną(pvz.: border="1" cellpadding="3" cellspacing="1" backgroundcolor="#ffc").

 

Stilius atskirtas nuo turinio

Stiliai visiškai atskirti nuo turinio ir tai leidžia lengvai keisti turinį ar tinklapio išvaizdą. Tai naudinga ir kuriant atskirą stilių spausdinimui, mobiliems telefonams.

 

Įvadas į CSS

 

Seni būdai suteikiantys stilių turiniui

Ankščiau kai norėdavome pakeisti šriftą HTML failę naudodavome <font> žymeną, pvz.: <font face="Times">...

 

Jei noredėdavome suteikti lentelei fono spalvą ir briaunos plotį, ar kitus lenteles parametrus naudodavome <table border="1" bgcolor="silver" cellpadding="3" cellspacing="0"> žymeną.

 

Yra kelios problemos naudojant šiuos būdus:

  1. Sudėtinga rašyti, nes stilius integruotas į turinį.
  2. Jūs turite kartoti tuos pačius stilius vėl ir vėl, kur tik norite pavartoti toki patį stilių tinklapyje.
  3. Daug vargo norint pakeisti tinklapio stilių, nes tenka redaguoti kiekvieną puslapį atskirai.
  4. Papildomai padidina failo dydį.
  5. Visur vienodas stilius. Nesvarbu ar tai versija spausdinimui ar mobiliąjam telefonui.

Kaip dirba CSS

CSS yra labai lengvas būdas suteikti stiliu HTML elementams.

 

Jūs galite galite suteikti įvairius parametrus, tokius kaip: briaunas, šriftą, foną ir kt.

 

CSS gali būti vartojamas 3 būdais:

  1. HTML žymenose
  2. HTML puslapio apibrėžimuose
  3. Kaip atskiras failas

  1. HTML žymenose
     
    Jūs galite CSS parametrus įrašyti tiesiai į HTML žymeną. Nesijaudinkite dėl žemiau esančiame pavyzdyje naudojamo <div> tai tiesiog paprasta dėžutė.
     
    <div style="background-color:#ff3; border:1px solid black; color:red; font-size:150%; padding:1em;">Aš suteikiau stiliu div dėžutei</div>


     
    Šis būdas labai panašus į senesnius būdus, kai stilius buvo įrašomas į HTML žymenas, todėl turi tas pačias problemas.
     
    Jis naudojamas, jei ji naudosite vieną kartą. Bet jei yra tikimybė, kad toks pats stilius kartosis kitur, patariame naudoti alternatyvius metodus parašytus žemiau, nes jie sutaupys jūsų laiką, jei norėsite pakeisti ar kitur pritaikyti stilių.
     
     

  2. HTML puslapio apibrėžimuose
     
    Geresnis būdas parašyti CSS į jūsų puslapio apibrėžimus vieną kartą dokumente (<head> sekcijoje).
     
    <head>
 <style type="text/css">
div {
  background-color:#339;
  color:#fff;
  padding:15px;
  border-bottom:5px solid red;
  margin-bottom:15px;
}
 </style>
</head>

<body>
 <div>
Aš suteikiau stiliu div dėžutei
 </div>
 <div>
Tas pats stilius :) bet jis paminėtas tik kartą dokumentuose.
 </div>
</body>


     
    Privalumas tame, kad stilių parašote vieną kartą, o panaudoti galite daug kartų. Jis bus taikomas visiems <div> elementams esantiems dokumente.
     
    Naudokite šį stilių kai norite panaudoti tuos pačius stilius kelis kartus puslapyje, bet ne kituose puslapiuose. Norėdami naudoti stilių visuose jūsų puslapiuose naudokite 3 būdą.
     
     

  3. Kaip atskiras failas
     
    Geriausias būdas pritaikyti stilių HTML elementams, tai sukurti atskira CSS dokumentą. Ir nurodyti jį visuose jūsų puslapiuose.
     
    Kitas šio būdo privalumas, tai kad galite naudoti skirtingus CSS dokumentus, ir taip greitai pakeisti puslapio stilių.
     
    HTML gali naudoti tiek CSS dokumentų kiek jums prireiks, ir jie gali būti sujungti.
     
    Sukurkite du skirtingus failus:
     
    my-styles.css
    body {
 background-color:#ccf;
 letter-spacing:.1em;
}
p {
 font-style:italic;
 font-family:times,serif;
}


     
    my-html.html

    <head>
 <link href="my-styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
 <p>Here is some content in a paragraph.</p>
 <p>Here is another paragraph.</p>
</body>


     
    Paminėkime tai, kad stilius parašytas tik vieną kartą, o gali būti paskirtas keliems elementams. Skirtumas tarp šio būdo ir ankstesnio toks, kad norėdami suteikti ta patį stilių kitam dokumentui tiesiog įterpiame CSS dokumento nuorodą, o ne kopijuojame visą stilių.

Atskiro css failo pranašumai

Vieni iš pastebimiausių pranašumų:

  1. Sumažėjęs failo dydis - kiekvienas CSS stilius rašomas tik vieną kartą.
  2. Sumažėjęs duomenų srautas - naršyklės atsimins CSS turinį, todėl kiekvieną kartą atidarant puslapį nereikės išnaujo siųsti CSS failo.
  3. Lengvesnis atnaujinimas - jūs turi pakeisti stilių tik vienoje vietoje, noredami pakeisti išvaizdą visuose puslapiuose.
  4. Atskiras stiliaus ir turinio kūrimas - išpradžių jūs galite sukurti visus HTML puslapius, įterpdami, klasių pavadinimus ir ID, ir tik tada atlikti dizaino darbus naudojant CSS.
     
    Kaip CSS stilius pritaikyti HTML elementams
     
    Yra kelios paprastos taisyklės kurios padeda pritaikyti stilius elementams. Laimei, jos paprastos ir logiškos:

    2. Pritaikyti patiems HTML elementams
       
      Jei norite stilių pritaikyti tam tikrai grupei HTML elementų, tiesiog nurodykite elemento tipą:
       
      p {
 font-weight:bold;
 line-height:1.3em;
}

<p>Stilius bus pritaikytas man, nes aš paragrafas.</p>
<div>Bet jis nebus pritaikytas man.</div>


    3. Pritaikyti naudojant klasių pavadinimus
       
      Jūs galite suteikti kiekvienam HTML elementui vieną ar daugiau klasių pavadinimus.
       
      Stiliai pritaikyti klasių pavadinimams dažniausiai nekreipia (užgožia) dėmesio į stilius pritaikytus patiems HTML elementams (jų tipams).
       
      <style type="text/css">
 .custom {
color:red;
 }
</style>

<p class="custom">Pritaikomas man</p>
<p>Bet nepritaikomas man</p>


    4. Elementui gali būti pritaikyta daugiau klasių
       
      HTML elementai gali turėti daugiau negu viena klasę.
       
      <style type="text/css">
 .makered {
color:red;
 }
 .yellowbg {
background-color:#ff0;
 }
</style>

<p class="makered yellowbg">Abu stiliai bus pritaikyti man (fonas ir raudonas tekstas).</p>


    5. Pritaikant id parametrams
       
      HTML elementai turi id parametrus, panašiai kaip klasių pavadinimus.
       
      Prieš stiliaus pavadinima turi būti dedamas grotelių ženklas (#).
       
      Prisiminkite kad parametrai priklausantys id užgožia ir nekreipia dėmesio į parametrus gaunamus iš klasės ar elemento tipo stiliaus.
       
      <style type="text/css">
 #banner {
color:green;
 }
 .special {
color:red;
background-color:#ff9;
 }
 div {
color:blue;
font-weight:bold;
 }
</style>

<div id="banner" class="special">
 Šis tekstas bus žalias nes id nekreipia dėmesio i klasės ir elemento tipo stilius.
</div>


       
      Nepamirškite, kad font-weight:bold; ir background-color:#ff9; vis dar pritaikomi tekstui, nes pakeičiami tik color: parametrai.

    6. CSS stilų pritaikymas elementams esantiems viduje elementų.
       
      Tiesiog žvilgelkite:
       
      <style type="text/css">
 div {
color:green;
 }
 .special {
color:red;
background-color:#ff9;
 }
 #banner {
text-decoration:underline;
font-weight:bold;
color:blue;
 }
</style>

<div>
 Tekstas bus žalias nes jis viduje div elemento
 <p class="special">
Tekstas bus raudonas nes jis viduje div ir paragrafo
<span id="banner">
  Šis tekstas bus žalias, bet su paragrafo fonu ir "banner" id parametrais.
</span>
 </p>
</div>


       
      Pirmas tekstas bus žalios spalvos nes jis viduje div.
       
      Antras tekstas bus raudonas, nes jis paragrafe kuriam pritaikytas klasės pavadinimas "special", kuris nekreipia dėmesio ir užgožia div parametrus.
       
      Trečias tekstas viduje visų trijų elementų, bet parametrus gauna iš id. Nepamirškime, kad fonas lieka paragrafo stiliaus, nes id stilius nenurodo fono spalvos.

Orginal version

Į Lietuvių kalbą vertė Poter

 

Laukite tęsinio...

Redagavo Poter
Nuoroda į pranešimą
Dalintis kituose puslapiuose
ech0

ech0 1

Atrašyta
Atrašyta

Taip, CSS ne tik palengvina darbą, bet atveria daug platesnes galimybes už apipavidalinimą, naudojant tik HTML, ir, kaip pavyzdžiui, galite pasižiūrėti, ką galima įgyvendinti, pasitelkiant CSS čia. Na taip, ten ir aukšto lygio grafikos irgi netrūksta, bet atkreipkite dėmesį į tų tinklapių kodą :unsure:

 

CSS praverčia ir SEO. Taip jūsų tinklapis atrodo daug tvarkingesnis ir web crawler'iai atrenka tai, ką reikia, gerokai lengviau.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
adijux

adijux 219

Atrašyta
Atrašyta

na Poter as laukiu tolimesniu CSS pamoku :P ir dar beja, kaip reikia tarkim sukurti toki daikta kaip dokumentas.css ? per notepada ar ka kita? kaip padaryti ta css? ;)

Žinoma, galima su paprasčiausiu notepad padaryti. :)

Tik išsaugok su galūne *.css ir viskas. :P

Nuoroda į pranešimą
Dalintis kituose puslapiuose
euro

euro 352

Atrašyta
Atrašyta

pagal tavo nurodyta 3 buda man niekas nesigauna, nenukreipia to css i ta hmtl nors tu ka, nors adresas geras, bet tekstas italic netampa...be to idejus dynamic meniu, tai kai issiskleidzia ta eilute, man headeri ji pastumia zemyn, o ne issiskleidzia ant jo kaip turetu buti... ;)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Kernius

Kernius 8.352

Atrašyta
Atrašyta
be to idejus dynamic meniu, tai kai issiskleidzia ta eilute, man headeri ji pastumia zemyn, o ne issiskleidzia ant jo kaip turetu buti... ;)

Kas dėl atvaizdavimo, tai su Internet Explorer yra tragedija. Ši naršyklė beveik viską interpretuoja savaip, dažnai nesilaikydama pagrindinių standartų, kuriuos atitinkantys puslapiai puikiai atvaizduojami per FireFox ar Opera. Internet Explorer naudoja didžioji dauguma (jei neklystu, 80%) internautų, todėl nori nenori tenka prie jos taikytis ir neretai rašyt papildomas kodo atkarpas specialiai IE.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
euro

euro 352

Atrašyta
Atrašyta

Kas dėl atvaizdavimo, tai su Internet Explorer yra tragedija. Ši naršyklė beveik viską interpretuoja savaip, dažnai nesilaikydama pagrindinių standartų, kuriuos atitinkantys puslapiai puikiai atvaizduojami per FireFox ar Opera. Internet Explorer naudoja didžioji dauguma (jei neklystu, 80%) internautų, todėl nori nenori tenka prie jos taikytis ir neretai rašyt papildomas kodo atkarpas specialiai IE.

siaip siuo metu yahoo IE naudoja apie 60% internautu :) bet kad ir kaip ten bebutu tai jau vargas grynas...kaip man tuos kodu gabalus prirasyti...negi teks templeita keisti visa? ;)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
LiuShu

LiuShu 23

Atrašyta
Atrašyta (redaguota)

siaip siuo metu yahoo IE naudoja apie 60% internautu :) bet kad ir kaip ten bebutu tai jau vargas grynas...kaip man tuos kodu gabalus prirasyti...negi teks templeita keisti visa? :)

 

yahoo neklysta, IE naudoja virs 80% :)

o kas del IE, Mozillos ir Operos atvaizdavimo, tai jeigu zinai visas narsykliu subtilybes tai html + css + javascript galima parasyti taip kad ant visu narsykliu svetaines turinys bus rodomas identiskai. Cia yra koderiu neismaneliu paskleistas mitas kad neimanoma suvienodinti svetaines turinio atvaizdavimo. Aisku yra kelios isimtys, bet tik kelios. Beabejo kai musu "programuotojai" dirba su dreamweaveriu ar kitokiu brudu, tai taip ir gaunasi; "suprogramuoja" raudonkepuraite ant IE, o ant Operos atvaizduoja buratina :)

Pvz.: dabar kaip tik darau nestardartinio dizaino svetaine http://www.bcna2007.com/ - buvo kodinta ziurint grynai tik ant IE, o ijungus ant Firefox bent jau mano akimis dideliu skirtumu nera, dar ten ne viskas uzbaigta, tai gal koks bugelis yra... bet tikrai nera tokios tragedijos kai kad jus cia vardijat :)

Redagavo LiuShu
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Kernius

Kernius 8.352

Atrašyta
Atrašyta
Pvz.: dabar kaip tik darau nestardartinio dizaino svetaine http://www.bcna2007.com/ - buvo kodinta ziurint grynai tik ant IE, o ijungus ant Firefox bent jau mano akimis dideliu skirtumu nera, dar ten ne viskas uzbaigta, tai gal koks bugelis yra... bet tikrai nera tokios tragedijos kai kad jus cia vardijat :)

Jei svetainės dizainas daromas lentelės (<table>) pagrindu, sutinku - tada tikrai didelių problemų dėl naršyklių skirtumų nekyla, nes jos lenteles atvaizduoja gana panašiai. Man visos problemos prasidėjo, kai nutariau lenteles pakeist į <div> (taip sumažindamas kodo dydį ir tinklapio krovimosi ilgį), su kuriais yra daugybė naršyklių interpretacijų, pradedant position parametru. Neblogas viso to pavyzdys yra vertikalus centravimas. Lentelėje viskas paprasta, o div'e... Sukurti net keli specialūs tinklapiai, nagrinėjantys, kaip atlikt šį veiksmą, kad jis teisingai būtų atvaizduojamas visose naršyklėse. Vienas jų - http://www.student.oulu.fi/~laurirai/www/css/middle/

Nuoroda į pranešimą
Dalintis kituose puslapiuose
LiuShu

LiuShu 23

Atrašyta
Atrašyta

Jei svetainės dizainas daromas lentelės (<table>) pagrindu, sutinku - tada tikrai didelių problemų dėl naršyklių skirtumų nekyla, nes jos lenteles atvaizduoja gana panašiai. Man visos problemos prasidėjo, kai nutariau lenteles pakeist į <div> (taip sumažindamas kodo dydį ir tinklapio krovimosi ilgį), su kuriais yra daugybė naršyklių interpretacijų, pradedant position parametru. Neblogas viso to pavyzdys yra vertikalus centravimas. Lentelėje viskas paprasta, o div'e... Sukurti net keli specialūs tinklapiai, nagrinėjantys, kaip atlikt šį veiksmą, kad jis teisingai būtų atvaizduojamas visose naršyklėse. Vienas jų - http://www.student.oulu.fi/~laurirai/www/css/middle/

 

Tai mano pateiktos svetaines pagrindinis karkasas sukurtas <div> pagalba, jei turi DevTools tai isijunk ir pamatysi. O table'ai naudojami ten kur div'ais yra tiesiog neracionalu ar tiesiog neimanoma issireiksti.

 

taip, apie toki modeli kalbejau liushu, taciau pazvelk pats kad tas meniu sokineja aukstyn zemyn per headeri, kas lb vargina ir sunkina navigacija, ten dar ne visos problemos issprestos :)

 

nezinau su kokiu browseriu tu narsai, bet man ant IE6, IE7, Firefox 1.5.0.4 rodo idealiai. Beto, ka tu vadini tuo headeriu?

headeriu vadinamas paveiksliukas kuris eina kartu ar salia svetaines logotipo ir dazniausiai naudojamas virsutines svetaines dalies fone, ten tokio kaip ir nera :)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
okiro

okiro 402

Atrašyta
Atrašyta (redaguota)

taip, apie toki modeli kalbejau liushu, taciau pazvelk pats kad tas meniu sokineja aukstyn zemyn per headeri, kas lb vargina ir sunkina navigacija, ten dar ne visos problemos issprestos :)

 

Ten ana svetainė tikrai lieva, ir meniu juokingas... Pabandyk iš http://www.tele2.lt :) Čia rodos normalus meniu ir ar toi ko tau reikia?

Redagavo okiro
Nuoroda į pranešimą
Dalintis kituose puslapiuose
okiro

okiro 402

Atrašyta
Atrašyta

http://tvs.protolab.info/satys/lt/title/

liushu paziurek, man ir su IE ir su Opera sitas meniu sokineja aukstyn zemyn :) nemanau kad cia viska suderines esi :)

 

okiro aga, butent tokio man ir reikia :)~ gal zinai is kur gauti? :)

 

Tai, o iš source pakopinti neina iš puslapio? :) Jei ne, pabandyk paieškot http://www.dynamicdrive.com :)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
  • po 1 mėnesio...
  • po 8 mėnesių...

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...