Įvairūs Internetas, tinklapių kūrimas

 CSS (Cascading Style Sheets)

Viskas apie internetą, tinklapių kūrimą, pamokos, patarimai

Standartinė promo » 2008 Lie 15, 05:26

Truputi jus supažindinsiu su CSS ir apmokysiu, kaip ją pritaikyti html kalbai.

CSS (Cascading Style Sheets) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą. Dažniausiai CSS aprašomas html dokumentų pateikimas, tačiau ją galima taikyti ir įvairiems kitiems XML dokumentams (tame tarpe SVG ir XUL).

Daugiau teorijos rasite paspaude čia.

Susipažinę, lekiame prie rimtų dalykų. Dauguma tikriausiai galvojote, kad dizainą į html galima sukoduoti tik su <table></table>. Bet tai netiesa, iš esmės yra įvairiausių būdų, o vieną iš jų pasakoju jums. Tai yra CSS.


#Kaip koduojamas CSS?

Dažniausiai programeriai koduoja jį atskirame .css faile, jį užvadinti galima stilius.css, bet geriausiai style.css. Susikuria atskirą failą style.css nuo html indexo. Pradedame style.css failo kodavimą:

Kodas: Pasirinkti visus
html {
   margin: 0;
   padding: 0;
}

Tai pradžia viso kodo. Įdomu ką aš darau čia? O gi apipavidalinu visą html stilių. Į html apipavidalinimą surašius CSS koduotės, kurias naršyklės nuskaito atitinkamai, kokios jos yra. Šiuo atveju aš įrašiau "margin: 0", tai reiškia, kad html (puslapis) iš išorės nebus patrauktas. "padding: 0", tai reiškia, kad html (puslapis) nebus iš vidaus nustumtas.

Toliau aprašome body.

Kodas: Pasirinkti visus
body {
   font-family: Tahoma;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
   background-image: url('http://imagination.lt/01.png');
   background-repeat: no-repeat;
}

Bodyje visada aprasome defult fontą, jo dydį (font-size: 11px;), rūšį (font-family: Tahoma;), spalvą (color: #000000;). Toliau būtinai aprašome backgroundą, kitaip jis pagal nutylėjima bus baltas. Jo spalvą (background-color: #ffffff;), galbūt bg darysit iš img (background-image: url('http://imagination.lt/01.png');), būtina nurodyti "background-repeat: no-repeat;", jei naudojate bg img.


Štai ir viskas, aprašėme style.css. Dabar beliko html dokumente nurodyti, kur yra style.css, su šiuo kodu:

Kodas: Pasirinkti visus
<link rel="stylesheet" type="text/css" href="style.css">

Jį būtina įrašyti tarp <head></head>. Štai ir viskas. Html sujungtas su style.css ir dabar naršyklė žiūrės į style.css, kaip apibūdino html ir body.



#O būtinas tas style.css? Gal tiesiog galima būtų ji kur nors patalpinti html?

Žinoma, kad galima. Kodas atrodytų taip:
Kodas: Pasirinkti visus
<style type="text/css">
html {
   margin: 0;
   padding: 0;
}
body {
   font-family: Tahoma;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
   background-image: url('http://imagination.lt/01.png');
   background-repeat: no-repeat;
}
</style>

Jį reikia talpinti tarip <head></head>.



Kitoje pamokoje supažindinsiu su <div></div> tagais. Ir kaip jie apipavidalinami style.css faile. Ir žadu įmesti du paaiškinimus, ką daro vienas ir kitas css kodas.



P.S. Jei patiko ši pamoka, kitą paruošiu greičiau. ;)
Naktinis tas mano budejimas su kompiuteriu - tikrai neveda. Hei, kas per deafult theme - minusas.
Vartotojo avataras
promo
Patyręs dalyvis
 
Pranešimai: 547
Miestas: kns
Medaliai: 3
Taškai: 311

Kovų lygis: A

Reputacija: 38 Pridėti reputacijos tašką

Standartinė Imagination » 2008 Lie 15, 11:56

Pradedantiems kūrėjams bus naudinga pamoka ;)
Tik kai kurie terminai naujokams bus sunkiai suprantami.
Vartotojo avataras
Imagination
Urvinis
 
Pranešimai: 10638
Miestas: Vaizduotė
Medaliai: 12
Taškai: 2334

Reputacija: 241 Pridėti reputacijos tašką

Standartinė Fogside » 2008 Lie 16, 10:32

va va po truputį ir išmoksiu css :) super... daugiau pamokų :) :love:
Vartotojo avataras
Fogside
Aktyvus dalyvis
 
Pranešimai: 247
Medaliai: 2
Taškai: 167

Kovų lygis: B+

Reputacija: 8 Pridėti reputacijos tašką

Standartinė (PaPaXa) » 2008 Rgp 08, 01:27

Omg flexai as stebiuosi...
tu gi tiek projektu esi turejes ir nezinai css pagrindu? :shock:

Gal cia netikras flex :shock:
(PaPaXa)
Įsijaučiantis
 
Pranešimai: 86
Miestas: Klaipeda
Taškai: 70

Reputacija: 6 Pridėti reputacijos tašką

Standartinė Tomas » 2008 Rgp 08, 02:03

kad šitą css nėra taip sunku mokintis.
Vartotojo avataras
Tomas
Forumo gyventojas
 
Pranešimai: 822
Miestas: Damme
Medaliai: 3
Taškai: 531

Reputacija: 81 Pridėti reputacijos tašką

Standartinė Mantas » 2008 Rgp 10, 15:39

Super duper kūl! Labai gerai paaiškinta pamoka :shock: :music: dėkui + tau ;)
Mantas
Aktyvus dalyvis
 
Pranešimai: 381
Taškai: 286

Kovų lygis: B+

Reputacija: 12 Pridėti reputacijos tašką

Standartinė Abyss » 2008 Spa 25, 11:58

background-image: url('http://imagination.lt/01.png');
Kiek žinau taip negali būt..
Paveikslėlis
Vartotojo avataras
Abyss
Forumo gyventojas
 
Pranešimai: 768
Miestas: Vilnius
Medaliai: 1
Taškai: 351

Kovų lygis: B+

Reputacija: 16 Pridėti reputacijos tašką

Standartinė promo » 2008 Spa 25, 18:58

gali :)
Naktinis tas mano budejimas su kompiuteriu - tikrai neveda. Hei, kas per deafult theme - minusas.
Vartotojo avataras
promo
Patyręs dalyvis
 
Pranešimai: 547
Miestas: kns
Medaliai: 3
Taškai: 311

Kovų lygis: A

Reputacija: 38 Pridėti reputacijos tašką

Standartinė Saogan » 2008 Spa 25, 19:41

man atrodo abbys su HTML sumaisiai
Saogan
Forumo gyventojas
 
Pranešimai: 1166
Miestas: Jonava
Medaliai: 3
Taškai: 445

Kovų lygis: B

Reputacija: 17 Pridėti reputacijos tašką

Standartinė Abyss » 2008 Spa 25, 21:32

jo, sorry :D
Paveikslėlis
Vartotojo avataras
Abyss
Forumo gyventojas
 
Pranešimai: 768
Miestas: Vilnius
Medaliai: 1
Taškai: 351

Kovų lygis: B+

Reputacija: 16 Pridėti reputacijos tašką

Standartinė JaY » 2008 Spa 27, 18:31

Taigi turiu toki kvaila klausimuka kam tas css reikalingas? :lol: :lol: :lol: (nesijuokit,gyvenam ir mokomes)
anksciau budavo mano kelias toks, susikuri dizaina,susikarpai,isimeti y dreamweaweri ir susitvarkai, o tai kam tada tas css , ka jsi pakeicia? :)
JaY
Pradedantis
 
Pranešimai: 36
Taškai: 15

Reputacija: 0 Pridėti reputacijos tašką

Standartinė Saogan » 2008 Spa 27, 19:30

kai susikarpai yra ir css kodai atrodo tai kaip cia pasakius dizainui pritaikyti ir panasiai skirta. Zinoma mane reiks papildyti ;)
Saogan
Forumo gyventojas
 
Pranešimai: 1166
Miestas: Jonava
Medaliai: 3
Taškai: 445

Kovų lygis: B

Reputacija: 17 Pridėti reputacijos tašką

Standartinė PAl » 2008 Spa 28, 16:46

Css išmokau gal prieš metus kada jis tik pradėjo lietuvoje populiarėt. Seniau darydavau kaip ir JaY. Iki šiol dar gilinu žinias apie css ir jau atkalęs esu atmintinai visus pagrindus. Kadangi teko koduot daug puslapių tai css man buvo būtinas.
Vartotojo avataras
PAl
Aktyvus dalyvis
 
Pranešimai: 275
Miestas: Kaunas
Taškai: 120

Reputacija: 8 Pridėti reputacijos tašką

Standartinė neshas » 2008 Lap 11, 22:50

html/xhtm/css stiliumi tinklalapiai buvo karpomi jau senai, tik jūs gal veliau atėjote į šį platų interneto pasaulį ir sužinojote :) esme tame, kad css yra šiuolaikiška ir greita, kokių tik šposų negalima su tuo css prikrėsti.Šiaip viename faile rašykite stilius kai tinklapiukas nedidelis, ar ten kokia lentelę darote, o dideliems tinklapiams siūlau pasidaryti atskirą stilių failą, iš atskiro failo, greičiau kraunasi visi stiliai ir pats tinklapis :)
Vartotojo avataras
neshas
Patyręs dalyvis
 
Pranešimai: 480
Medaliai: 1
Taškai: 393

Kovų lygis: A

Reputacija: 59 Pridėti reputacijos tašką

Standartinė zonuke » 2009 Bal 19, 09:15

Sveiki Galiu pasakykiti apie css gal ir nieko as ir pats mokinuosi ir kiek galiu pasakiti tai nera sunku su css ar html kodais dirbti beje as zainau visus css man pagrindinius dalykus turiu gal kokia 8 svetaines susikurias , bet praktiškai nuodoju tik pacius pagrindiniu dalykus is css kalbos turiu ju ne mazai dar vienas
dalykas kai kas sako,kad su css butinai turi rasyti kodus taip kaip jie raso puslapiuose galiu teikti kad puse ju nereikalingi is vis kiek esu išbandias tu kodu
ir tai darau jau daugiau kaip 1 su puse,tikras profisionalas programuotojas
gali sukurti su pačiu paprasčiuasiu teksto editorium sukurti neįketinai grazu dizaina svetaines su html tik kodais jus pasižiuretumete kiek yra visokiu html ar netgi css kodu triuku na,kad ir pavisdžui parasytai html tricks neįtiketinai ju pilna svetainese Taigi google musu geriausias draugas 8) Jei norint galit apsilankyti y mano pirma sukurta svetaine http://freewebs.com/googlelt ir pasižiureti tai paprasta google siek tiek html,css ir java kodu.sekmes bekuriant.
zonuke
Naujokas
 
Pranešimai: 4
Taškai: 4

Reputacija: 0 Pridėti reputacijos tašką



Įvairūs Internetas, tinklapių kūrimas

Prisijungti

Forumo stilius

Pasirinkimas:

free tattoo Designs mezoterapija