Peršokti prie turinio


Toggle shoutbox Diskusijos

@  Zeb0w : (25 September 2019 - 08:52 AM) sveiki
@  Karolizas : (26 August 2019 - 12:24 PM) Esat nueikit i i mano postą
@  DiEvil : (25 August 2019 - 12:13 AM) Kaip suprantu, cia nei gyvos dvasios :D
@  DiEvil : (19 August 2019 - 12:15 PM) Ieskomas zmogus nusimanantis apie cs 1,6 serverius. Taipogi gal yra norinciu prisijungti prie komandos.. Palaciau i PM
@  r y a n a s. : (19 August 2019 - 08:51 AM) Yoo, sveiki
@  #Kenichi : (12 August 2019 - 10:12 AM) Kaip viskas pasikeitė po tiek laiko :D
@  Jessy_Torreto : (21 December 2018 - 11:22 PM) cs.fresko-chata.lt public 89.40.3.123:27015 užsukit
@  123 : (21 December 2018 - 12:14 PM) Sveiki, norime pranešti, kad Country-Life.lt forumas startavo, bei laukia taves!   - Renkamas direktorių prižiūrėtojas!   - Nori tapti žinomu, bei įgauti patirties tam tikrame poste? Aš jums siūlau prisijungti ir išbandyti save.   - Per diena surenkame ~35 žaidėjus ONLINE forume!  - Serverio startas jau sausį!   Projekto Informacija:  Forumas: www.Country-Life.lt✔️
@  123 : (21 December 2018 - 12:13 PM) Sveiki, norime pranešti, kad Country-Life.lt forumas startavo, bei laukia taves!   - Renkamas direktorių prižiūrėtojas!   - Nori tapti žinomu, bei įgauti patirties tam tikrame poste? Aš jums siūlau prisijungti ir išbandyti save.   - Per diena surenkame ~35 žaidėjus ONLINE forume!  - Serverio startas jau sausį!   Projekto Informacija:  Forumas: www.Country-Life.lt✔️
@  #Kenichi : (21 December 2018 - 11:36 AM) Reklamuoti šaukykloje griežtai draudžiama! Gausite ban'a 7 dienom.
@  Artur_Andrej : (11 November 2018 - 09:17 PM) Sveiki
@  #Kenichi : (10 November 2018 - 11:12 AM) https://discord.gg/F5H9twa
@  GGustaz : (03 November 2018 - 12:06 AM) Su kokia programa reikia daryti mapp darbus?
@  Aivarinis : (28 October 2018 - 12:39 PM) ������Malonu matyti, jog jūsų daugėja, bei į forumą matome vis naujesnių veidų, dėkojame jums jog padedate mums plėstis������  - Atėjo toji diena, kokios laukia didelė dauguma, pranešu pirmasias atrankas į mūsų komanda! ������  - Nori tapti žinomu, bei įgauti patirties moderavime? Aš jums siūlau prisijungti ir ižbandyti save. ������  Daugiau info forume: http://nlg.lt/index.....php…  Forumas: www.nlg.lt✔️ Sa:mp adresas: samp.nlg.lt✔️ TeamSpeak: ts.nlg.lt✔️
@  Aivarinis : (27 October 2018 - 07:42 AM) Malonu matyti, jog jūsų daugėja, bei į forumą matome vis naujesnių veidų, dėkojame jums jog padedate mums plėstis  - Atėjo toji diena, kokios laukia didelė dauguma, pranešu pirmasias atrankas į mūsų komanda!   - Nori tapti žinomu, bei įgauti patirties moderavime? Aš jums siūlau prisijungti ir ižbandyti save.   Daugiau info forume: http://nlg.lt/index.....php…  Forumas: www.nlg.lt✔️ Sa:mp adresas: samp.nlg.lt✔️ TeamSpeak: ts.nlg.lt✔️
@  Aivarinis : (25 October 2018 - 08:44 PM) Registruojamės - http://nlg.lt/
@  Aivarinis : (25 October 2018 - 08:43 PM) http://nlg.lt/
@  #Kenichi : (18 October 2018 - 05:41 PM) Kiek reklamerių :o
@  Aivarinis : (30 September 2018 - 09:52 PM) <3 Sveiki <3 noriu pristatyti nauja projekta kuris neseniai išėjo į saulės šviesa, tai yra NewLife.us.lt šio projekto komanda turi užsibrėže tikslų, kurios mes norime įgyvendinti. Šia savaite žadame dirbti visu pajagumu, per visa diena dėl žaidėjų naudos, norime startuoti spalio 6 dieną. Neseniai išėjo naujas atnaujinimas kurį galite pamatyti čia - http://newlife.us.lt/index.php… iš šio atnaujinimo galite pamatyti kaip šio serverio komanda stengiasi dėl žaidėjų. Šio metu vyksta atranka į Ban/Unban prižiurėtoją, ir PD direktorių.
@  Aivarinis : (30 September 2018 - 09:48 PM) http://newlife.us.lt/

Nuotrauka

HTML + CSS per 30 dienų | #8diena - pirmasis CSS kodas


  • Please log in to reply
7 atsakymai į šią temą

#1 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

17 April 2017 - 04:24 PM

Sveikučiai! Jau senai berašiau čia, tad neišsigąskite, stengsiuosi pamokas rašyti kasdien arba kas antrą dieną. Ilgai nerašiau, nes prieš atostogas buvo mokykloje ką veikti (renginių organizavimas, kontroliniai ir pan.), taip pat buvau su šeima išvykęs į Daniją, tada buvo pora gimtadienių, tad kaip matot - buvau tikrai užsiėmęs :D O dabar pradėkime pamoką! :)

---

Šiandien mes mokysimės CSS ir rašysime pirmąjį stiliaus kodo lapą! Pamokai naudosime praeitos pamokos kodą (Pamoka apie nuorodas). Kodas:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Nuorodos</title>
	</head>
	<body>
        </body>
</html>

CSS mes galime įterpti ir HTML faile naudodami žymę style.  Šią žymę mes naudojame tarp <a> ir </a>. Eilutė su nuoroda ir style žyme turėtų atrodyti maždaug taip:

<p>Aplankykite mane <a href = 'http://www.delfi.lt' style = " ">mano svetainėje</a>.</p>

Ir šiuo atveju, jei norime padaryti nuorodos tekstą geltoną, mes turime tarp style žymės kabučių rašyti

style = "color: yellow;"

O štai čia pateikiu simbolius išaiškinantį paveikslėlį:

 

Taigi, dabar su patobulinta nuorodos versija išsaugome failą ir atveriame jį naršyklėje. Ar gražu? Man nelabai. Tai siaubinga spalva. Siaubinga ta prasme, kad tokiame fone ji be galo raižo akis.Nenaudokite jos. Geriau vietoj geltonos (yellow) pakeiskime į juodą (black) spalvą. Naa, išsaugome ir žiūrim. Žymiai gražiau   . Tačiau spalva galima nusakyti ne vien taip. Yra dar vienas būdas: RGB. Red (raudona) Green (žalia) ir Blue (mėlyna). Čia sudedame tris skaičius, kiek kokios spalvos uždėti ir gauname įvairius mix'us. Pvz. pabandykite vietoj color: black; įdėti:

style = "color: rgb(100,200,50);"

Man asmeniškai - graži spalva. Galite eksperimentuoti be galo daug! Tačiau yra dar vienas būdas nusakyti spalvas.. Tai HEX. Tai yra šešių simbolių seka, kuri nusako spalvą. SVARBU! PRIEŠ HEX SPALVOS KODĄ VISADA DĖKITE HASHTAG (# GROTAŽYMĖS) ŽENKLĄ! Pvz. galite pamėginti šią spalvą: #e3e3e3. Tačiau dabar dar dirbkime su paprastais spalvų pavadinimais. Užsidėkime raudoną spalvą. Dabar kaip ir matome - mūsų nuorodos tekstas yra pabrauktas. O kas, jei mes to nenorime? Tam naudojame žymę text-decoration. Su ja turime parašyti ir teksto dekoravimo tipą. Jei norime pašalinti pabraukimą - rašome none. Pvz. :

style = "color: rgb(100,200,50); text-decoration: none;"

Jei tekstą kaip tik norime padaryti pabrauktą - rašome text-decoration: underline;. Tam, kad nesusimaišyti su stiliaus kodais, kad kodai būtų trumpesni, lengviau suprantami ir pan, naudojame CSS dizaino lapą. Taigi, sukurkime naują failą pavadinimu style.css Pavadinimą galite keisti, tačiau aš naudosiu tokį. Būtinai nurodykite, kad tai yra CSS failas. Dabar į CSS failą nukopijuokite ir įdėkite visą turinį esantį tarp style žymės kabučių, o pačią style žymę ištrinkite. Dabar išsaugokite abu failus ir atverkite HTML failą naršyklėje. Na, kaip? Kad to nebūtų, mums reikia nurodyti kur gyvena mūsų CSS failas. Tai galime padaryti su žyme link kurią turime įdėti tarp <head> žymių. Kai parašėte :

<head>
  ...
  <link
</head>

Po link turite nurodyti, kokie santykiai sieja šį failą ir CSS failą. turite rašyti rel="stylesheet"  tada po šios žymelės rašome vietą, kur yra mūsų failiukas. Naviguoti tarp failų galite naudodamiesi ankstesnės pamokos instrukcijomis, o kadangi pas mane CSS failas stovi toje pačioje direktorijoje kaip ir HTML, aš tiesiog parašau href="style.css"   ir viskas. Taip pat šios žymės pabaiga yra šiek tiek ypatinga. Mes ją užbaigiame kaip ir kiekvieną, tradiciškai - > ženklu, tačiau </link> nerašome. Taigi, gale gauname štai tokią žymę:

<link rel="stylesheet" href="style.css">

Naršyklėje matome tokį vaizdą, nes tas CSS failas kaip ir yra, bet jis yra be teisingo turinio. Kitaip sakant, naršyklė jo nesupranta, Tam, kad suprastų - reikia nurodyti, kokį elementą modifikuojame. Tai padaryti galime pridėję ženklą ir taip nurodydami, kad tai yra būtent šiam elementui. Kodas turėtų atrodyti maždaug šitaip:

a {
	color: red;
	text-decoration: none;
}

Štai! Pagaliau! Pagaliau mes susiejome CSS failą su HTML ir CSS failą padarėme pilnai funkcionuojantį! O dabar virš paragrafo žymės su nuoroda pridėkime pirmo lygio antraštės (heading) žymę su užrašu "Mano nuorodos". Dabar einame į CSS failą ir jame rašome h1 { tam, kad nurodytume jog reikia surasti visiškai visas h1 žymes, ir jų turinį modifikuoti pagal nustatymus esančius tarp laužtinių skliaustų. Dabar mes pakeisime teksto šriftą. Tam padaryti naudosime CSS žymę font-family. Yra begalė šriftų pasirinkimų, tačiau tikrai negalima rinktis bet ko, nes gali nutikti taip, kad tą šriftą susiinstaliavę turi ne visi. Yra HTML-saugūs šriftai, kurie veikia ant 99,99% įrenginių. Dabar aš naudosiu HELVETICA šriftą, o antriniu šriftu padarysiu ARIAL. Tai reiškia, kad jei įrenginyje nėra HELVETICA šrifto, bus naudojamas ARIAL. Taigi, sveikinu. Jūs pramokote dirbti su CSS! Su CSS ateityje tikrai galėsite pridaryti begales šaunių dalykų! Pamokos pabaigos HTML kodas:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Nuorodos</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>Mano nuorodos</h1>
		<p>Aplankykite mane <a href = 'http://www.delfi.lt'>mano svetainėje</a>.</p>
    </body>
</html>

CSS kodas:

a {
	color: red;
	text-decoration: none;
}
h1 {
	font-family: helvetica, Arial, sans-serif;
}

Šiandien išmokome

  • dirbti su CSS.

---

Jei kyla klausimų, neaiškumų - susisiekite su manimi šioje temoje arba skype: living.indream1

Tikiuosi, kad Jums patiko ir laukiate kitos dienos pamokos!  :)


  • 2

#2 ATSIJUNGĘS   Lietuvis!

Lietuvis!

20 April 2017 - 04:59 PM

  • Šauni pamoka, man tai neįkandamas dalykas ech....

  • 0

#3 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

01 May 2017 - 05:59 PM

 

  • Šauni pamoka, man tai neįkandamas dalykas ech....

 

sveikas, parašyk man į Skype ;) Padarysim įkandamu ;)


  • 0

#4 ATSIJUNGĘS   Pablo123

Pablo123

01 May 2017 - 09:02 PM

Aciu uz tokias pamokas, tikrai padejai, laukiu daugiau pamoku nes noriu ismokt graziai koduoti dizainus


  • 0

#5 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

02 May 2017 - 12:03 PM

Aciu uz tokias pamokas, tikrai padejai, laukiu daugiau pamoku nes noriu ismokt graziai koduoti dizainus

Smagu, kad padedu :) Tik, dizainus čia išmoksi koduoti iš dalies. Jei kalbi apie forumų dizainus (IPB, phpBB ir kt.), konkrečiai to nebus, tačiau jei kalbi apie parastų svetainių kodavimus - to išmoksi ;)


  • 0

#6 ATSIJUNGĘS   Pablo123

Pablo123

02 May 2017 - 07:55 PM

na seip vistiek pades ir ipb forumo  dizaino odavime, ismokus kodo pagrindus galima bandyti kazka tobulint, tai lauksiu pamoku zinioms praplesti


  • 0

#7 ATSIJUNGĘS   akitaa

akitaa

12 September 2019 - 02:53 PM

Thanks for the Lesson.


  • 0

#8 ATSIJUNGĘS   akitaa

akitaa

25 September 2019 - 10:45 AM

thanks for the lesson.


  • 0




1 vartotojai(-ų) skaito šią temą

0 nariai(-ių), 0 svečiai(-ių) ir 0 slapti(-ų) nariai(-ių)


    Alexa (1)