CSS Ders Slaytları

Transkript

CSS Ders Slaytları

HTML & CSS
CASCADE STYLE SHEET
EĞİTMEN
• AD SOYAD
:
• TECRÜBE
• OKUL
:
:
LÜTFEN DİKKAT!
• SINIFTAKİ BAŞARIMIZIN MAKSİMUM DÜZEYDE
OLMASI İÇİN:
•
•
•
DEVAMSIZLIK YAPMAYINIZ; KAÇIRDIĞINIZ DERSLER
SONRAKİ KONULARA TEMEL OLUŞTURDUĞUNDAN
SONRAKİ DERSLERİ DE ANLAYAMAZSINIZ
DERSLERE ZAMANINDA GELİNİZ; KAÇIRILAN
DERSLERİN TELAFİSİNİN YAPILMADIĞINI
UNUTMAYINIZ
ANLAMADIĞINIZ KONU OLDUĞUNDA HEMEN
EĞİTMENE SORUNUZ
LÜTFEN DİKKAT!
• DERSLERDE CEP TELEFONU V.B. CİHAZLARI
KAPATINIZ
• EĞİTMEN DERS ANLATIRKEN TELEFON, MAKYAJ
V.B. ŞEYLERLE İLGİLENMEYİNİZ
• SINIFIN DİKKATİNİ DAĞITACAK DAVRANIŞLARDAN
KAÇININIZ
LÜTFEN DİKKAT!
• LABORATUVARDAKİ BİLGİSAYAR V.B.
CİHAZLARIN BOZULMAMASI İÇİN:
• SINIFTA YİYECEK-İÇECEK TÜKETMEYİNİZ; SIVI VE
SUSAM GİBİ MADDELER CİHAZLARA ZARAR
VERİR VE DÜZGÜN ÇALIŞMASINI ENGELLER
• CİHAZLARI KURCALAMAYINIZ; CİHAZDA ARIZA
OLDUĞUNU DÜŞÜNÜYORSANIZ BİR KAĞIDA NOT
BIRAKINIZ
LÜTFEN DİKKAT!
• BİLGİSAYARLARDAKİ KORUMA YAZILIMI,
BİLGİSAYAR KAPANDIKTAN SONRA
KAYDETTİĞİNİZ TÜM DOSYALARI & AYARLARI
SİLMEKTEDİR
• LÜTFEN DOSYALARINIZI FLASH BELLEĞE
KAYDEDİN VEYA DERS SONUNDA EMAIL
ADRESİNİZE GÖNDERİN
LÜTFEN DİKKAT!
• YAZILIM İSTEMEYİNİZ. KORSAN YAZILIM
SUÇTUR; HAPİS VE PARA CEZASI VARDIR
• LİSANSLI OLARAK SATIN ALINAN YAZILIMLARIN
YÜKLENMESİNDE YARDIMCI OLUNABİLİR
• ÜCRETSİZ VEYA AÇIK KAYNAK KODLU
YAZILIMLARI SUNUCUMUZDAN
İNDİREBİLİRSİNİZ
DERS SLAYTLARI
• DERS SLAYTLARI VE DİĞER DÖKÜMANLARI
SUNUCUDAN ALINIZ
• Windows Gezgini ->Adres Çubuğu -> \\sunucu\ depo\
• Kullanıcı Adı : bilimsel
• Parola
: bilimsel
•
BİLİNMESİ GEREKENKLER
• TEMEL WINDOWS BİLGİSİ
• NOT DEFTERİ VEYA DEAMWEAVER
• HTML
WWW.BİLİMSEL.COM.TR
9
BAZI TANIMLAR
• NESNE:
– SAYFA/FORM TASARIMINDA KULLANILAN RESİM,
TABLO, METİN KUTUSU V.B. ÖĞELERE NESNE
DENİR.
• ÖZELLİK:
– NESNELERERİN GÖRSELLİĞİNİ DEĞİŞTİRMEYE YA
DA AYARLAMAYA YARAYAN PARAMETRE.
• METOD:
– NESNELERİN YAPABİLDİĞİ İŞLER.
10
NESNE.METHOD()
• HOCA.YÜRÜ()
• HOCA.DERSANLAT()
• BOLT.KOŞ()
– NESNELERE BİR İŞ YAPTIRMAK İÇİN METODLAR
KULLANILIR.
11
NESNE, ÖZELLİK & DEĞER
• ÖRNEĞİN BİR İNSANIN BOYUNUN 185
OLDUĞUNU BELİRTMEK İÇİN:
• NESNE.ÖZELLİK=DEĞER VEYA
• NESNE {ÖZELLİK:DEĞER} GİBİ YAZIM
KURALLARI KULLANILABİLİR.
• İNSAN.BOY=185 VEYA
• İNSAN{BOY:185}
12
NESNE.ÖZELLİK=DEĞER
•
•
•
•
HOCA.KİLO=95
ALİ.SAÇRENGİ=SİYAH
FATMA.GÖZRENGİ=MAVİ
AYŞE.BOY=170
– VB’DE NESNELERİN ÖZELLİKLERİNİ BELİRLEMEK
İÇİN BU YAZIM KURALI KULLANILIR.
13
NESNE{ÖZELLİK:DEĞER}
•
•
•
•
HOCA{KİLO:95}
ALİ{SAÇRENGİ:SİYAH}
FATMA{GÖZRENGİ:MAVİ}
AYŞE{BOY:170}
– CSS’TE NESNELERİN ÖZELLİKLERİNİ BELİRLEMEK
İÇİN BU YAZIM KURALI KULLANILIR.
14
STİL (BİÇEM) NEDİR?
• BELLİ BİR ADLA ANILAN AYARLAR
TOPLULUĞUDUR.
– ÖRNEĞİN BİR METNE ARIAL YAZITİPİNİ, BOLD VE
İTALİK BİÇİMLERİNİ AYNI ANDA UYGULAMAYA
YARAYAN AYARLAR ADLI BİR STİL
OLUŞTURABİLİRSİNİZ.
– YA DA BİR TABLONUN ARDALAN RENGİNİ SARI,
KENARLIK RENGİNİ DE LACİVERT YAPAN TBL ADLI
BİR STİL OLUŞTURABİLİRSİNİZ.
15
CSS NEDİR? NE İŞE YARAR?
• CSS “CASCADE STYLE SHEETS” KELİMELERİNİN
KISALTILMIŞIDIR.
• HTML KOMUTLARININ GÖRSEL ÖZELLİKLERİNİ
BELİRLER. ÖRNEĞİN <P> TAGININ FONTU,
ARDALAN RENGİ, BOYUTU V.B.
• CSS, BELİRLİ BİR İSİM ALTINDA TANIMLANMIŞ
GÖRSEL ÖZELLİKLER TOPLULUĞUDUR.
16
NEDEN CSS KULLANMALIYIZ?
• BAZI HTML KOMUTLARI FARKLI TARAYICILAR
TARAFINDAN FARKLI ŞEKİLDE YORUMLANIR.
• ÖRNEĞİN IE’DA PARAGRAFLAR ARASI MESAFE
6 PUNTO İKEN CHROME’DA 8 PUNTO
OLABİLİR.
• BU DA SAYFALARIMIZIN FARKLI
TARAYICILARDA FARKLI GÖRÜNMESİNE VE
TÜM GRAFİKLERİN KARIŞMASINA NEDEN
OLABİLİR.
17
NEDEN CSS KULLANMALIYIZ?
• YAPTIĞIMIZ SAYFALARIN TÜM TARAYICILARDA
AYNI GÖRÜNMESİ İÇİN CSS KULLANMALIYIZ.
• AYRICA CSS WEB SAYFALARIMIZI KOLAY VE
HIZLI BİR ŞEKİLDE DÜZENLEMEMİZİ VE
GÖRSELLEŞTİRMEMİZİ SAĞLAR.
• YAPTIĞINIZ CSS AYARLARI BAŞKA SAYFALARDA
HATTA BAŞKA SİTELERDE DE KULLANILABİLİR.
18
HTML & CSS
• HTML KOMUTLARI SAYFA İÇERİĞİNİ
DÜZENLER; SAYFADA NE TÜR YAZILAR VE
RESİMLER OLACAĞINI BELİRLER.
• CSS KOMUTLARI İSE SAYFALARIN
GÖRSELLİĞİNİ DÜZENLEMEYE YARAR;
SAYFAMIZDAKİ YAZILARIN BOYUTUNU,
RENGİNİ, KALINLIĞINI V.B. AYARLARI BELİRLER.
19
CSS SAYFANIN NERESİNE YAZILABİLİR?
• CSS AYARLARINI 3 FARKLI YERDE
YAPABİLİRSİNİZ.
– HTML KOMUTUNUN İÇİNDE
– SAYFADA <HEAD> TAGININ İÇİNDE
– HARİCİ BİR METİN DOSYASI İÇİNDE (*.CSS)
20
SYNTAX (YAZIM KURALLARI)
• CSS 3 PARÇADAN OLUŞUR:
– HTML KOMUTU (SELECTOR)
– ÖZELLİK
– DEĞER
• HTML KOMUTU { ÖZELLİK : DEĞER }
– body { color:yellow }
– p {font-family: "sans serif"}
– p {text-align:center; color:red}
21
ÖRNEK-1
• CSS’İN DAHA RAHAT OKUNABİLMESİ VE
ANLAŞILABİLMESİ İÇİN AŞAĞIDAKİ YÖNTEM
KULLANILABİLİR:
–p
•
•
•
•
•
{
text-align: center;
color: black;
font-family: arial
}
22
ÖRNEK-2 (GRUPLAMA)
• AŞAĞIDAKİ ÖRNEKTE FARKLI KOMUTLARIN
RENGİ YEŞİL YAPILIR:
– h1,h2,h3,h4,h5,h6, p, hr
–{
– color: green
– }
23
HTML KOMUTU İÇİN CSS
• HTML KOMUTUNUN VARSAYILAN AYARLARINI
DEĞİŞTİRMEYE YARAR.
• ÖRNEĞİN <P> TAGININ VARSAYILAN ARDALANI
BEYAZ, METİN RENGİ SİYAHTIR.
• CSS İLE <P> TAGININ VARSAYILAN
ÖZELLİKLERİNİ DEĞİŞTİREBİLİRİZ.
24
HTML KOMUTU İÇİN CSS
• <style type="text/css">
–p
–{
– background:#FFFF66;
– color:#336699;
– font-family:Verdana, Arial, Helvetica, sans-serif;
– font-size:12px
–}
• </style>
25
CLASS SELECTOR
• CLASS SELECTOR İLE BELİRLİ BİR HTML
KOMUTU İÇİN FARKLI STİLLER
TANIMLANABİLİR:
– p.sag {text-align: right}
– p.orta {text-align: center}
• P.SAG STİLİ UYGULANIRSA PARAGRAF SAĞA,
P.ORTA STİLİ UYGULANIRSA PARAGRAF ORTAYA
HİZALANIR.
26
CLASS SELECTOR KULLANIMI
• <p class=“sag” > Bu paragraf sağa
hizalanır.</p>
• <p class=“orta” > Bu paragraf ortaya hizalanır.
</p>
27
BİRDEN FAZLA CLASS SELECTOR
KULLANIMI
• <p class="orta kaln"> Bu bir paragraftır ve 2
adet class selector uygulanmıştır. </p>
• YUKARIDAKİ <P> TAGINA “ORTA” VE “KALN”
UYGULANMIŞTIR.
28
CLASS SELECTOR’ÜN TÜM HTML
KOMUTLARINDA KULLANIMI
• BU DURUMDA ÖZELLİKLE BİR HTML TAGI
BELİRTİLMEZ. NOKTADAN SONRA CLASS
SELECTOR ADI VERİLİR, ÖZELLİK VE DEĞER
BELİRTİLİR:
– .orta { text align:center}
• BÖYLECE OLUŞTURDUĞUNUZ CSS TÜM HTML
KOMUTLARINA UYGULANABİLİR.
29
ÖRNEK
• ÖNCE CLASS TANIMLANIR:
– <style type=“text/css”>
– .orta { text align:center}
– </style>
• DAHA SONRA HTML TAGLARINA UYGULANIR:
– <h1 class="orta"> Bu h1 tagı sayfaya ortalanır.
</h1>
– <p class=“orta"> Bu paragraf da sayfaya ortalanır.
</p>
30
BELİRLİ ÖZELLİKTEKİ KOMUTLARA
CSS UYGULAMA
• BAZI CSS’LERİN SADECE BELİRLİ ÖZELLİĞE
SAHİP HTML KOMUTLARINA UYGULANMASINI
SAĞLAYABİLİRSİNİZ.
• ÖRNEĞİN FORMLARDA SADECE METİN
KUTULARININ ARDALANININ SARI OLMASINI
İSTİYORSUNUZ:
– input[type="text"] {background-color: yellow}
31
BELİRLİ ÖZELLİKTEKİ KOMUTLARA
CSS UYGULAMA
– Input [type="text"] {background-color: yellow}
– </style>
• YUKARIDAKİ STİLİ TANIMLAYARAK Input
TAGININ type ÖZELLİĞİ “text” OLAN BÜTÜN
NESNELERİN ARDALANININ MAVİ OLMASINI
SAĞLIYORUZ.
32
ID SELECTOR
• HER HTML TAGININ ID ÖZELLİĞİ VARDIR.
• BELLİ BİR ID DEĞERİNE SAHİP NESNELERE
BELLİ BİR CSS UYGULANABİLİR.
• ÖRNEK ID SELECTOR:
– #dugme{color:#FF9900; font:bold}
• UYGULAMASI:
– <input id=“dugme” type=“submit” value=“giriş”>
33
BİR METNE CSS UYGULAMA
• HERHANGİ BİR TAGIN İÇİNDE OLMAYAN
METİNLERE STİL UYGULAMAK İÇİN <SPAN>
TAGI KULLANILIR:
– <span class="stil">Ad Soyad:</span>
34
AÇIKLAMA SATIRLARI
• AÇIKLAMALAR /* …. */ ARASINA YAZILIR.
• AÇIKLAMALAR PROGRAMCIYA YÖNELİKTİR VE
TARAYICI TARAFINDAN DİKKATE ALINMAZ.
• UYGULAMA:
– /* Metni ortala */
– p { text-align: center; /* Renk siyah */ color: black;
font-family: arial }
35
UZUN LAFIN KISASI…
• .stil1{ background:#99FF00}
• .stil2{text-align:left}
– </style>
• İLE STİL TANIMLANIR
• HTML
KOMUTUNUN
CLASS
KULLANILARAK STİL UYGULANIR.
ÖZELLİĞİ
– <p class=“stil1”>… </p>
36
İÇ VE DIŞ STİLLER
• WEB SAYFALARIMIZI BİÇİMLENDİREN STİLLER
3 FARKLI YERDE TANIMLANABİLİR.
– SAYFA İÇİNDE HEAD BÖLÜMÜNDE (İÇ/INTERNAL)
– BAŞKA BİR DOSYADA (DIŞ/EXTERNAL)
– HTML KOMUTUNUN İÇİNDE (SATIR/INLINE)
37
INTERNAL STYLE SHEET
• EĞER BİR STİL SADECE TEK BİR SAYFADA
KULLANILACAKSA, BU STİL WEB SAYFASININ İÇİNDE HEAD
BÖLÜMÜNDE TANIMLANABİLİR.
– <head>
•
•
•
•
•
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/ata.gif")}
</style>
– </head>
38
EXTERNAL STYLE SHEET
• EĞER BİR STİL BİRDEN FAZLA WEB SAYFASINDA
KULLANILACAKSA ÖZEL BİR SAYFADA
TANIMLANIR.
• BU SAYFA .CSS UZANTILI BİR METİN
DOSYASIDIR.
• BÖYLECE STİL DOSYASINDA YAPILAN
DEĞİŞİKLİKLE SİTEDEKİ TÜM SAYFALARIN
GÖRÜNÜŞÜ KOLAYLIKLA DEĞİŞTİRİLEBİLİR.
39
• ÖRNEĞİN AYARLAR.CSS İSİMLİ BİR NOT
DEFTERİ DOSYASI OLUŞTURULUR.
• BU DOSYANIN İÇİNDE STİLLER TANIMLANIR.
– hr {color: sienna}
– p {margin-left: 20px}
– body {background-image: url("images/ata.gif")}
–…
40
• DAHA SONRA LINK KOMUTUYLA BU STİLLER
SAYFA İÇİNE BAĞLANIR:
– <head>
– <link rel="stylesheet" type="text/css"
href=“ayarlar.css” />
– </head>
• .CSS UZANTILI STİL DOSYASININ İÇİNDE HTML
KOMUTU OLMAMALIDIR.
41
INLINE STYLE SHEET
• HTML KOMUTUNUN İÇİNDE TANIMLANAN
STİLLERDİR.
– <p style="color: sienna; margin-left: 20px" > This is
a paragraph
– </p>
42
CSS PSEUDO CLASS
• BAZI HTML KOMUTLARINA BAZI ÖZEL
İŞLEMLER YAPMAYA YARAR.
• GENELDE LİNKLERİN RENGİNİ DEĞİŞTİRMEK
İÇİN KULLANILIR.
• ÇOK KULLANILDIĞI İÇİN İYİ BİLİNMESİ
GEREKİR.
• SYNTAX (YAZIM KURALI):
• selector:pseudo-class {property: value}
43
CSS PSEUDO CLASS
– AŞAĞIDAKİ STİLLERLE SAYFADAKİ TÜM LİNK
RENKLERİ OTOMATİK DEĞİŞİR.
•
•
•
•
•
•
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
44
HANGİ CSS AYARLARI
ÖNCELİKLİDİR?
•
•
•
•
1-VARSA HTML KOMUTUNUN İÇİNDEKİ CSS AYARLARI
2-VARSA <HEAD> BÖLÜMÜNDEKİ CSS AYARLARI
3-VARSA HARİCİ CSS DOSYA AYARLARI
4-EĞER HERHANGİ BİR CSS TANIMLANMADIYSA HTML
KOMUTLARI TARAYICININ VARSAYILAN AYARLARIYLA
GÖSTERİLİR.
• YANİ EN ÖNCELİKLİ CSS AYARI HTML KOMUTU İÇİNDEKİ
AYARLARDIR.
45
ÖZELLİK VE DEĞERLER
• STİL OLUŞTURMAK İÇİN NESNELERİN
ÖZELLİKLERİ VE BU ÖZELLİKLERİN ALABİLECEĞİ
DEĞERLERİ BİLMEK GEREKLİDİR.
• BUNDAN SONRAKİ KONULARDA ÇOK
KULLANILAN ÖZELLİKLERİ VE ALABİLECEĞİ
BAZI DEĞERLERİ ÖĞRENECEĞİZ.
46
CSS BACKGROUND
• NESNELERİN ARDALAN RENGİNİ BELİRLER.
– <style type="text/css">
•
•
•
•
body {background-color: cyan}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
– </style>
47
CSS BACKGROUND
• BİR RESMİN ARDALAN OLARAK
KULLANILMASI:
• body { background-image: url(‘ata.jpg') }
– </style>
48
CSS BACKGROUND
• RESMİN SADECE DİKEY YAYILMASI:
• body { background-image: url(‘ata.jpg'); backgroundrepeat: repeat-y }
– </style>
• RESMİN SADECE YATAY YAYILMASI:
• body { background-image: url(‘ata.jpg'); backgroundrepeat: repeat-x }
– </style>
49
CSS BACKGROUND
• RESMİN SADECE BİR DEFA KULLANILMASI:
• body { background-image: url('bgdesert.jpg');
background-repeat: no-repeat }
– </style>
50
CSS BACKGROUND
• RESMİN BELLİ BİR NOKTAYA KOYULMASI:
– <head>
•
•
•
•
•
•
body { background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px; }
</style>
– </head>
51
CSS TEXT
• YAZININ RENGİNİ DEĞİŞTİRMEK:
– <head>
• h1 {color: #00ff00}
• h2 {color: #dda0dd}
• p {color: rgb(0,0,255)}
– </style>
– </head>
52
CSS TEXT
• KARAKTERLER ARASI MESAFE:
• h1 {letter-spacing: -3px}
• h4 {letter-spacing: 0.5cm}
– </style>
53
CSS TEXT
• SATIRLAR ARASI MESAFENİN AYARI:
• p.small {line-height: 90%}
• p.big {line-height: 200%}
– </style>
54
CSS TEXT
• PARAGRAFLARIN HİZALANMASI:
• p {text-align: center}
• h2 {text-align: left}
• h3 {text-align: right}
– </style>
55
CSS TEXT
• METİNLERİN ÇİZİLMESİ:
•
•
•
•
•
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
– </style>
56
CSS FONT
• METİNLERİN FONTU:
• h3 {font-family: times}
• p {font-family: courier}
• p.sansserif {font-family: sans-serif}
– </style>
57
CSS FONT
• YAZI BOYUTU:
• h1 {font-size: 150%}
• h2 {font-size: 130%}
• p {font-size: 70%}
– </style>
58
CSS FONT
• FONT BİÇİMİ:
• h1 {font-style: italic}
• h2 {font-style: normal}
• p {font-style: oblique}
– </style>
59
CSS FONT
• YAZI KALINLIĞI:
– <head>
•
•
•
•
•
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
– </head>
60
CSS BORDER
• NESNELERİN ETRAFINDAKİ KENARLIKLARIN
AYARLARI.
– p { border: medium double rgb(250,0,255) }
– p.dotted {border-style: dotted}
– p.one { border-style: solid; border-color: #0000ff }
– p.two { border-style: solid; border-width: 5px }
– </style>
61
CSS OUTLINE
• IE’DE ÇALIŞMAZ
• NESNELERİN ETRAFINA KENARLIK YAPAR.
•
•
•
•
•
p
{
border: red solid thin;
outline: green dotted thick
}
– </style>
62
CSS MARGIN
• NESNELERİN ETRAFINDAKİ BOŞLUĞU
AYARLAR.
• <style type="text/css">
• p.margin {margin: 2cm 4cm 3cm 4cm}
• p.topmargin { margin-top: 25% }
• </style>
63
CSS PADDING
• TABLOLARDA HÜCRE İÇERİĞİ İLE HÜCRE
KENARLARI ARASINDAKİ MESAFEYI AYARLAR.
• HÜCRE:
İÇERİK
64
CSS PADDING
•
•
•
•
td.test1 {padding: 1.5cm}
td {padding-top: 2cm}
</style>
65
CSS LIST
• HTML LİSTELERİNİN İMLERİNİ AYARLAMAK
İÇİN KULLANILIR.
– ul.disc {list-style-type: disc}
– ul.circle {list-style-type: circle}
– ul.square {list-style-type: square}
– ul.none {list-style-type: none}
– Hepsi {list-style: square inside url('arrow.gif') }
– </style>
66
CSS TABLE
• HTML TABLOLARININ GÖRÜNÜŞÜNÜ
AYARLAMAK İÇİN KULLANILIR.
– table.one {
– border-collapse: separate;
– border-spacing: 10px
– empty-cells: show
– }</style>
67
CSS DIMENSION
• NESNELERİN BOYUTLARINI AYARLAR.
– img.normal { height: auto }
– img.big { height: 160px }
– img.small { height: 30px }
– img.medium { width: 50% }
– p.small { line-height: 10px }
– </style>
68
HTML & CSS İLE UYGULAMA
• HTML VE CSS KODLARI KULLANARAK WEB
SİTESİ TASARIMI
69

CSS Ders Slaytları

Transkript

Benzer belgeler

web tasarım ders içerikleri

Web Teknolojileri ve Programla

JavaScript Neye Benzer?

Web Tasar.m. - Aycan Gönenç

velero.shipsnetwork.com b_57499 Jetski Personal Watercraft 9.685

Katalog - Broşür