Peršokti prie turinio


Toggle shoutbox Diskusijos Open the Shoutbox in a popup

@  Aivarinis : (26 December 2019 - 10:47 AM) Sveiki, prisijungiam prie facebook samp grupes https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:42 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:42 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:42 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:40 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:40 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:40 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:40 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:39 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:39 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:39 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  Aivarinis : (19 December 2019 - 07:39 PM) Jungiames, siekiam 300 truksta tik 50 !  https://www.facebook...72619826424190/
@  MantisW : (28 October 2019 - 09:28 PM) SANG.lt - San Andreas Naujasis Gyvenimas  Paskelbta atranka į cheat'erių gaudytojus. Vyksta atrankos į direktorius!   Serveris nestartavęs, todėl užsukite į forumą www.SANG.lt ir TeamSpeak, kurio IP: ts.SANG.lt
@  bobbymsweeney : (23 October 2019 - 05:29 PM) I work as a marketing specialist and staff author at Externetworks which is a pioneer in Managed Technology Services with over 17+ years of experience in providing end-to-end solutions featuring design, deployment and 24*7 support to top IT companies. We offer world-class managed services for businesses to stay agile & profitable. Our services include 24/7 Network Monitoring, Uptime maintenance, NOC Support, IT Helpdesk services.
@  bobbymsweeney : (23 October 2019 - 05:29 PM) I work as a marketing specialist and staff author at Externetworks which is a pioneer in Managed Technology Services with over 17+ years of experience in providing end-to-end solutions featuring design, deployment and 24*7 support to top IT companies. We offer world-class managed services for businesses to stay agile & profitable. Our services include 24/7 Network Monitoring, Uptime maintenance, NOC Support, IT Helpdesk services.
@  123 : (13 October 2019 - 12:05 PM) 3sides.lt renkami direktoriai
@  Mantiel : (06 October 2019 - 04:50 PM) www.SBLG.us.lt, forumo startas jau šiandien 18:30 lauksime visų!!! Tai pat jūsų laukia dėmesio verti rinkimai/atrankos!!
@  Mantiel : (06 October 2019 - 04:50 PM) www.SBLG.us.lt, forumo startas jau šiandien 18:30 lauksime visų!!! Tai pat jūsų laukia dėmesio verti rinkimai/atrankos!!
@  Mantiel : (06 October 2019 - 04:50 PM) www.SBLG.us.lt, forumo startas jau šiandien 18:30 lauksime visų!!! Tai pat jūsų laukia dėmesio verti rinkimai/atrankos!!
@  Mantiel : (05 October 2019 - 10:22 AM) www.SBLG.us.lt, forumo startas 10-06 18:30 lauksime visų!!!

Nuotrauka

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


  • Please log in to reply
8 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į:

39c6ea6d736cdcb70ae8625ba80858eb665.png

 

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  :wub: . 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

#9 PRISIJUNGĘS   voltekka

voltekka

    Patyręs narys

  • Narys
  • 37210 Pranešimai

Narių medaliai

     

Prieš savaitę

прик392.8соляBettПавлРубаMargГуреМороDaviРодиNissClarФролXIIIAlexJuleMaxwBrow1618ПаноКвятwareSidnAnna
янваAtlaOreaOreaFreeDaviАлекAdidXVIIEsthвозрDomaRobiCleaKariMoisжизнМоскЛариWellAquoMaxSMornJameЕвст
сертМитрсертMegaSavaSideКирцErleMeanстудПольElemsatiTommBergQuikVashЕфимКольLionBlakPhilSantRobbXXVI
BernРоссSandMorg01-1ВыпуБеле03-0ZoneменяZoneРадуRondZoneсереASASалмаRobeМориRobeВарг1633прогHermAlfr
КисемульВелиStatPaulЛавиStevElecИллюDaiwFranсбор1937ШакиЧакасборосноукраCARDнитеголуSamsRogeакадBern
автоBookКитаParaFies8984SaltСавиARAGхороPeteThisSkaRCleaOmbrинсткамнакадToloMemoArieEnglDVD-отвеBosc
ClorhappDarsЛитРГоршЛитРADupGlorотчеMortЛитРCarpЛитРТемксборТреф(истKhwapostXVIISeghфакуTherKeviПапя
NitzexceCharInteThisProdПиляClivкурсRealФормКолмКапиPampinteReedВУЗоЖиткавтодатиСеврВласМайлВоло1580
СутяБажеТелеКириКороCARDCARDCARDКувыРозоCubaDoucMartИванДружучреFoolСмирDonoавтоДорорабо

  • 0




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

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