THT DUYURU

Web Programlama Asp, Php, Html, Asp.Net, Aspx, Perl Vb Web Programlama Bölümü

Seçenekler

[DEV] CSS Nedir ? - CSS'yi Tanıyalım // Herorahim

HeroRahim01 - ait Kullanıcı Resmi (Avatar)
Siber Güvenlik Kulübü
Üyelik tarihi:
11/2019
Nereden:
Azerbeycan
Mesajlar:
148
Konular:
40
Teşekkür (Etti):
10
Teşekkür (Aldı):
139
Ticaret:
(0) %
2 Hafta önce
#1
Arrow
[DEV] CSS Nedir ? - CSS'yi Tanıyalım // Herorahim
Selam Dostlar , Bugün Sizlere HTML'in Olmazsa Olmazı CSS'yi Tanıyalım



(~) Colors / Renkler

Dünyadaki Tüm Renkleri CSS de Konuştura Bileceğimizi Biliyormuydunuz ? , Evet Renk Kodlarıyla Bunu Yapa Biliriz Tabikide Renk Kodlarıyla Yanaşı Renk İsimleri ve RGB Kodlarınıda Renkte Konuştura Biliyoruz , Örnek Verelim Hemen ;

Yazı Oluşturalım
Kod:
<h1> Herorahim </h1>


Şimdi Üzerinde CSS'yi Deneyelim ...

Kod:
<h1> Herorahim </h1>

*********
h1 {

color: green;

}
</style>

Artık Yazımız Yeşil Renk Almış Durumda Yaptığımız İşlemse ;
h1 Belirtiyoruz ve Süslü Parantez Açıyoruz , Color: (renk); Yazdığımızda İşlem Bitiyor ve Tabikide Süslü Parantezimi Kapatıyoruz ..

Şimdi Aynı İşlevi RGB İle Deneyelim ..

Aynı İşlev Sadece Renk İsminin Yerine RGB Kodlarını Ekliyoruz ...
Sallama Bir RGB Kodu Diyorum ; rgb(225, 92, 41) , Turuncu Renk Aldık ...

Eklemeyi Göstereyim ;

Kod:
<h1> Herorahim </h1>

*********
h1 {

color: rgb(225, 92, 41);

}
</style>


Gördüğünüz Gibi ;

Şimdi Renk Etiketiyle Bir Renk Alalım ...

Turuncu Rengin , Renk Etiketi[ COLOR="Orange"] ( #ff6343 )
, Bunu Kodumuza Eklersekde Şöyle ;

Kod:
<h1> Herorahim </h1>

*********
h1 {

color: #ff6343;

}
</style>




(~) Çerçeve / Border

Bir Çok Çerçeve Türü Mevcuttur , Benim En Sevdiğim "Double" Yani İki Katlı Bir Çerçeve Hemen Test Edelim ...

Kodumuz ;

Kod:
Border: Double;


Test ;
Kod:
<h1> Herorahim </h1>

*********
h1 {

color: #ff6343;
Border: Double;

}
</style>

Çerçeve Genişliği Ayarlamak İçin ;
Kod:
 Border-width: 4px;


4px Yerine İstediğiniz Rakamı Yaza Bilirsiniz ...

Deneyelim ...
Kod:
<h1> Herorahim </h1>

*********
h1 {

color: #ff6343;
Border: Double;
Border-width: 4px;

}
</style>


Çerçeve Rengini Belirleyelim ;
Kod:
  border-color: red;


Artık Çerçevemiz Kırmızı Renkdedir ...

Çerçevemizi Şekillendirelim ;

Kod:
<h1> Herorahim </h1>

*********
h1 {
  border-left: 6px solid red;
  background-color: blue;
}
</style>

Artık Çerçevimizin Soldan 6px Kısımı Kırmızıdır ve Geriye Kalan Hissesi ( Arkaplanı ) Mavidir ...

Çerçeve Şekili ;

Çerçevimizin Köşelerini Esnetmek İçin Yani Daire Yapmak İçin ;
Kod:
  border-radius: 3,5px;


Kullanıyoruz ...



(~) Margin(s) / Kenar(lar)

Bu Kod Sayesinde Projemizin Belirtilen Kısımının Yerini Değişmemizi Sağlıyor ...

Kod:
   margin-top: 10px;


top - bottom - right - left
: Bunlarla Şeklimizi Haraketlendire Biliyoruz ...


Örnek:
Kod:
<h1> Herorahim </h1>

*********
h1 {
  border: 4px solid red;
  margin-top: 100px;

}
</style>




(~) Padding(s) / Esnekleştirme(ler)

Arkadaşlar Padding Şekilimizin Belirtilen Kısımdan Esnekleştirilmesine Yarıyor ..

Örnek :

Kod:
  padding-top: 50px;
Bundada Margindeki Gibi ( top - bottom - right - left ) Kullanılıyor ...

Örnek Verelim :
Kod:
<h1> Herorahim </h1>

*********
h1 {
  border: 4px solid red;
  margin-top: 100px;
    padding-top: 50px;
      padding-bottom: 50px;



}
</style>


(~) Background / Arkaplan

Tasarımımız ve ya Body'miz Arkaplansız Düşünmek Korkunç

Arkaplana Renk Vere Biliriz ve ya Resim Ekleye Biliriz ...

Ben Bu Sefer Çerçeve ve Body Üzerinde Göstereceğim ;

Kod:
<h1> Herorahim </h1>

*********
h1 {
  border: 4px solid red;
  margin-top: 100px;
    padding-top: 50px;
      padding-bottom: 50px;
      Background: grey;



}

body {
  background: green;
}
</style>


Gördüğünüz Gibi Tüm Ekran Yeşil - Çerçeve Grey Oldu ...

Arkaplana Resim Eklemek İçin ;
Kod:
  background-image: url("bubirlink.com/resim/foto.png");

Resim Adresimizi Ekledikten Sonra Her Yer Resimle Dolacaktır , Bu Resimlerden Sadece 1 Tanesini Saklamak İçin
Kod:
  background-repeat: no-repeat;


Kodunu Kullanıyoruz ...



(~) Text / Yazı

Yazdığımız Yazının Yerini Beğenmediyseniz Bunu Ayarlaya Bilirsiniz , (rakam)px İlede Ayarlaya Biliriz Ancak Ben Normal Sözcükleri Tercih Ediyorum ..

Kod:
  text-align: right;

Artık Yazımız Sağdan Beliriyor ...

Kod:
<h1> Herorahim </h1>

*********
h1 {
  border: 4px solid red;
  margin-top: 100px;
    padding-top: 50px;
      padding-bottom: 50px;
        text-align: right;

     



}

body {
  background: green;
}
</style>


Yazımıza Dekorasyonda Vere Biliyoruz , Örn.( Yazımızın Üzerine Çizgi Çekmek İstiyorsak )
Kod:
  text-decoration: line-through;


Tabi Yazımızın Büyük~Küçüklüğünüde Ayarlaya Biliriz ...

(~) İcons / İkonlar

CSS'de İkonlar Genellikle fa - fas - ca gibi sözcüklerle belirlenir , örn. ( Belge ) " fas-fa file " Kullanacağız ..
Kod:
<i class="fas fa-file"></i>


Kodunuzun Üst Kısımına ;
Kod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Eklemeyi Unutmayın Sakın ...



(~) Links / Adresler

Adresimizi :
Kod:
<a href="sitem.com">İnternet Sitem</a>


Böyle Kullanıyoruz ve Adresimiz Belirleniyor ..

Bunu Şekillendirmek Mümkün ...

Kod:
<a href="default.asp">This is a link</a>
*********
a { 

color: grey;
}

</style>


Artık Adresimiz Grey Renk Aldı , Altındaki Çizgiyi Kaldırmak İstiyorsak
Kod:
  text-decoration: none;


Kodunu Kullanıyoruz ...



(~)(~) CSS Temelleri (~)(~)

(~) Hover

Örnek Verelim h1 Yazımız var ve Mouse İle Üzerine Gelince Yeşil Olsun İstiyoruz ...
Bunu Böyle Yapıcaz ;
Kod:
<h1> Herorahim </h1>

*********
h1:hover {

color: orange;

}
</style>

Artık Yazının Üzerine Gidersek Turuncu Renk Alacaktır ...

Background - Text Family vbs. Üzerinde Uygulaya Biliriz ...




(~) NOT (~)

1-) CSS Kodumuzu Girince ********* </style> Unutmayın Sakın
2-) CSS Kısımında Ön Kodumuzdan Sonra Çift Nokta ( : ) Sonda İse Mutlaka Süslü Nokta ( ; ) Olacaktır
3-) Başka Bir Şey Hatırlarsam Yazarım



Arkadaşlar Konuya Saatlarla Emek Verdim , Umarım Teşekkürleri Görüpte Sevine Bilirim

---------------------
Kod:
[̲̅h̲̅][̲̅e̲̅][̲̅r̲̅][̲̅o̲̅][̲̅r̲̅][̲̅a̲̅][̲̅h̲̅][̲̅i̲̅][̲̅m̲̅]
"P4RS Teşekkür etti.
"P4RS - ait Kullanıcı Resmi (Avatar)
Green Team Lideri
Üyelik tarihi:
01/2017
Nereden:
Balkes
Yaş:
18
Mesajlar:
4.576
Konular:
483
Teşekkür (Etti):
1138
Teşekkür (Aldı):
2295
Ticaret:
(0) %
bir Hafta önce
#2
Cevap: [DEV] CSS Nedir ? - CSS'yi Tanıyalım // Herorahim
Ellerine sağlık
Uchiha-Sasuke - ait Kullanıcı Resmi (Avatar)
Green Team (Deneyimli)
Üyelik tarihi:
07/2016
Nereden:
MSFVenom
Mesajlar:
1.350
Konular:
75
Teşekkür (Etti):
30
Teşekkür (Aldı):
379
Ticaret:
(0) %
bir Hafta önce
#3
Cevap: [DEV] CSS Nedir ? - CSS'yi Tanıyalım // Herorahim
Eline sağlık dostum.
---------------------
"Ölüm, insanın değişmez kaderidir; marifet unutulmamaktır.".


HeroRahim01 - ait Kullanıcı Resmi (Avatar)
Siber Güvenlik Kulübü
Üyelik tarihi:
11/2019
Nereden:
Azerbeycan
Mesajlar:
148
Konular:
40
Teşekkür (Etti):
10
Teşekkür (Aldı):
139
Ticaret:
(0) %
5 Gün önce
#4
Cevap: [DEV] CSS Nedir ? - CSS'yi Tanıyalım // Herorahim
// Güncel
---------------------
Kod:
[̲̅h̲̅][̲̅e̲̅][̲̅r̲̅][̲̅o̲̅][̲̅r̲̅][̲̅a̲̅][̲̅h̲̅][̲̅i̲̅][̲̅m̲̅]
'Creative - ait Kullanıcı Resmi (Avatar)
Green Team
Üyelik tarihi:
03/2017
Mesajlar:
3.135
Konular:
94
Teşekkür (Etti):
223
Teşekkür (Aldı):
1059
Ticaret:
(0) %
5 Gün önce
#5
Cevap: [DEV] CSS Nedir ? - CSS'yi Tanıyalım // Herorahim
Emeğine sağlık.
--------------------- ‘’ Ve Orhan Veli Ceketsiz Öldü.’’



Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler