CSS'i Web Sayfalarına Eklemeyi, Tanımlarını ve Dikkat Etmemiz Gerekenleri Anlattım | Webien.Net: Webmaster Forumu

CSS'i Web Sayfalarına Eklemeyi, Tanımlarını ve Dikkat Etmemiz Gerekenleri Anlattım

Şu anda okunan
CSS'i Web Sayfalarına Eklemeyi, Tanımlarını ve Dikkat Etmemiz Gerekenleri Anlattım

Hızlı cevap
css101-main.jpg



şimdi arkadaşlar bir tane html dosyamız var buna nasıl css entegre edicez kısaca anlatmak istedim

öncelikle css elamanlarını ve anlamlarını tanıyalım

LİNK ÖZELLİKLERİ
a :
Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.

————————————————————————

BİÇİMLENDİRME
color:
Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

————————————————————————

LİSTE ÖZELLİKLERİ
disk:
Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

————————————————————————

KATMAN ÖZELLİKLERİ
position:
Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

————————————————————————

FONT ÖZELLİKLERİ
font-family:
Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.

————————————————————————

TEXT ÖZELLİKLERİ
word-spacing :
Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

————————————————————————

İMLEÇ ÖZELLİKLERİ
crosshair:
İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar.

————————————————————————

ZEMİN ÖZELLİKLERİ
background-color:
Zeminin rengini belirler.
color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

————————————————————————

TABLO ÖZELLİKLERİ
margin :
Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

_________________________________________________________________

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

_________________________________________________________________

border : Tablonun kenarlarının şekillendirilmesini sağlar.

_________________________________________________________________

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

_________________________________________________________________

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

_________________________________________________________________

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

_________________________________________________________________

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

_________________________________________________________________

color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.

şimdi bir html sayfamız var buna css atıycaz


html kodumuz bu

<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uyguluycaz.

Kod:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS'i Uygulamak </title>
  <style type="text/css">
    div{
      color:red;
    }
  </style>
</head>
şimdi .css uzantılı bir dosyaya oluşturalım. ornek.css

Kod:
p {
  color: red;
}

a {
  color: blue;
}
örnek.css mizi oluşturduk.
şimdi bu css dosyasını html dosyasından çağıracaz

Kod:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS'i Uygulamak</title>
  <link rel="stylesheet" type="text/css" href="ornek.css" />
</head>
dip not:
görüldüğü gibi şu kod ile örnek.css dosyamızı çağırdık. <link rel="stylesheet" type="text/css" href="ornek.css" />
bu koda bakarsak css dosyamızda anadizinde fakat biz css dosyamızı anadizine değide bir klasörün içine atıcaz
örnek yeni bir klasör oluşturduk ismi css olsun örnek.css dosyamızıda bunun içine atalım. şimdi yolu değiştiricez

<link rel="stylesheet" type="text/css" href="css/ornek.css" /> bakın burada sadece yolu değiştirdik kod hiç bir zaman değişmez yol değişir arkadaşlar
<link rel="stylesheet" type="text/css" href="./ornek.css" /> bakın burda nokta koyduk önüne buda aynı yola çıkar her bir nokta klasör demek sadece bir klasör açtığımız için tek nokta koyduk önüne. Peki şöyle olsaydı stil/css/örnek.css iki klasör olduğu için kod şöyle olucaktı <link rel="stylesheet" type="text/css" href="../ornek.css" /> bakın iki nokta koyduk
yada direk url yide girebilirsiniz. <link rel="stylesheet" type="text/css" href="siteismi.com/stil/css/ornek.css" /> fakat bu url yöntemini ben tavsiye etmiyorum neden

siz script tasarladınız her dosya çağırmalarında siteismi.com kullandınız siz bunu kendi domaininize göre yapmış oluyorsunuz fakat farklı bir domainde bu scripti kullananlar hata alıcak belki beyaz sayfa hatası belkide sayfa bozuk çıkacak. o yüzden size tavsiyem kodlamalarda domain ismi kullanmayın. nokta kullanın veya klasör ismi kullanın.

ben bir scripti denerken hata alırsam önce veritabanı bilgilerini doğrumu girmişim ona bakarım doğru girdiysem
PHP Sürümüne bakarım buda doğruysa
.htacess'e bakarım domain ismi varmı diye burdada yoksa
açarım tüm dosyalara bakarım domain ismi varmı diye varsa değiştiririm buda büyük bir zahmet.
 
Son düzenleme:

Geunes.Int

Domaine Fısıldayan Adam
Kurumsal
GirisimciStartup
Katılım
31 Eki 2019
Konular
173
Mesajlar
739
Beğeni
199
WBN Puanı
228
 Ticaret - 100%    
1   0   0
Yaş
35
Konum
Beylikdüzü
Ad Soyad
ERDAL ALTINAY
Meslek
Web Yazılım
Hakkında  
Katılım
31 Eki 2019
Mesajlar
739
Beğeni
199
WBN Puanı
228
Yaş
35
Konum
Beylikdüzü
Site
www.geunes.com
 Ticaret - 100%
1   0   0
 Ticaret - 100%
Ad Soyad
ERDAL ALTINAY
Meslek
Web Yazılım
Tecrübe
15 Yıl
Uzmanlıklar
Domain Hizmetleri
Hosting Hizmetleri
Yazılım Hizmetleri
Sms Hizmetleri
Seslendirme Hizmetleri
Santral Hizmetleri
İş referanslarım
Geunes.com
Neden Webien'de?
Biz bir aileyiz.
Banka hesapları
Garanti:
Erdal ALTINAY - TR61 0006 2001 3200 0006 6812 70

Enpara:
Erdal ALTINAY - TR17 0011 1000 0000 0043 2214 62

Teb Bankası:
Erdal ALTINAY - TR84 0003 2000 0000 0079 3454 76

Papara:
Papara Numarası: 1122928260
Üyelik tipi
Kurumsal
Vergi levhası
Beylikdüzü
Whatsapp
02129452011
css farklı bir dünya :)
 

ferdi

Platin üye
Paylaşım ekibi
Katılım
9 Eyl 2019
Konular
269
Mesajlar
327
Beğeni
102
WBN Puanı
108
 Ticaret - 0%    
0   0   0
Konum
istanbul
Hakkında  
Katılım
9 Eyl 2019
Mesajlar
327
Beğeni
102
WBN Puanı
108
Konum
istanbul
 Ticaret - 0%
0   0   0
 Ticaret - 0%
gayet açıklayıcı olmuş
 
Konuyu Görüntüleyen Kullanıcılar(Toplam:0) Üyeleri Gör
Başlatan Benzer konular Forum Cevaplar Tarih
farukwp Counter Strike Source Hilesi[CSS Hile] Oyunlar 0
ferdi CSS ile Yazı veya Linklere Vurgu Efekti (Highlight) Ekleme HTML - CSS - XML 0
Zeki CSS'de Resim Ovalleştirme HTML - CSS - XML 1
Zeki CSS'de Resimleri Standart Boyutlandırmayı Anlattım HTML - CSS - XML 1
724MobilOnay CSS İMLEÇ, ZEMİN & TABLO ÖZELLİKLERİ HTML - CSS - XML 0
724MobilOnay CSS FONT & TEXT ÖZELLİKLERİ HTML - CSS - XML 0
724MobilOnay CSS KATMAN ÖZELLİKLERİ HTML - CSS - XML 0
724MobilOnay CSS LİSTE ÖZELLİKLERİ HTML - CSS - XML 0
724MobilOnay CSS LİNK ÖZELLİKLERİ HTML - CSS - XML 1
deserto Css mobile boşluk Yeni Başlayanlar 9
Zeki CSS Display Kullanımı (Detaylı Anlatım) HTML - CSS - XML 0
ferdi CSS'de Flexbox Nedir, Nasıl Kullanılır? HTML - CSS - XML 0
Zeki İyi Bir CSS Kodu Yazmak İçin 8 İpucu HTML - CSS - XML 0
E web tasarımı hazır yazılım Webmaster Genel 2
wmgerecleri Özhost | hosting | vds | domain | web tasarım | grafiker hizmetleri Hosting Genel 4
hscbilisim Satış Hsc Bilişim E-Ticaret Ürün Satış V1 Web Paketi Ücretli Script Satışı 4
hscbilisim Satış Hsc Bilişim Avukat Ve Hukuk V2 Web Paketi Ücretli Script Satışı 4
oxcakmak DİZİN O Bir Freelancer Web Yazılımcısı - oxcakmak Firma Dizinleri 0
W web master formu TR'de ilk Web Site Tanıtım 0
W İPV6 Destekli Sunucular ⭐ Dedicated ⭐ Web Hosting ⭐ Sunucu Barındırma Paketleri 🚀 WebCloud Hosting Alışverişi 1
H Satış Web Sitesi Yapılır Ücretli Web Tasarım İşleri 1
wmgerecleri DİZİN WMG-Web masterların vazgeçilmezi Firma Dizinleri 0
tuncayalp Bu Program İle Web Sitenizin Trafiğini Uçurun (Googlede Yükselin) Webmaster Pogramları 0
Zeki Web Sitenize Estetik Bir Görünüm Kazandırın Grafik Tasarım 0
Zeki Evdeki bilgisayarı Sunucu Yapma ve Web Sitesini Yayınlama Sunucu Yönetimi 0
Zeki PHP Kişisel Web Site Scripti Ücretsiz Scriptler 0
websimetri Sadece Webien.net'e Özel HostX WHMCS Web Hosting Theme WHMCS 0
FiBuHosting Satış 🚀FiBuHosting - Tüm Web Hosting ve Reseller Paketlerde Net % 35 İndirim!🚀 15 Gün İade Garantisi! Hosting Alışverişi 0
Soner Web Tasarım Prensipleri Web 2.0 0
Soner Web 2.0 Araçları Nedir Web 2.0 0
trteknet Web Sitesi Yaptır - Web Yaptır Firma Dizinleri 0
Soner Web Sitenize Hangi Siteden Kaç Kişi Geldiğini Öğrenin Webmaster Tools & Google Analytics 0
trteknet Web Sitesi Olmayan İşletme Kalmasın webyaptir.com Web Site Tanıtım 0
Soner Web Sitesi Trafiğini Arttırmak Google 0
ferdi Kişisel Web Site Scripti - HTML Ücretsiz Scriptler 0
Soner Web Sitesi Tasarlarken Yapılan Hatalar Yeni Başlayanlar 0
Soner Fireworks Nasıl Web Site Yapılır Yeni Başlayanlar 0
B Web Siteni Tanıt Web Site Tanıtım 0
Geunes.Int Az Kişinin Bildiği Muhteşem Web Siteleri Yeni Başlayanlar 1
Geunes.Int Web Mobil Etkileşimli Android Uygulamaları Gerçekleştirme (Ücretsiz) Video Anlatımlı Konular 0
wmgerecleri WebClos Derin Web Forumu Firma Dizinleri 2
tuncayalp Dns Angel ile Çocuklar için Uygun Olmayan Web Sayfalarını Engelleyin Webmaster Pogramları 0
trteknet Web Sitesi Yaptır - Web Yaptır Web Site Tanıtım 0
Hostgener Hostgener | Herkes İçin Web Hosting, Reseller, Alan Adı Firma Dizinleri 1
wmgerecleri karşılıklı olan web sitenize organik hit kasabileceğiniz bir program Off-Topic 5
wmgerecleri hastane icon setleri web tasarımcılar için işe yarayabilir geliştirilebilir :) İkonlar 3
wmgerecleri İlan web sitesine ortak aranıyor Ortak Arıyorum 23
Bilim Dil.web.tr Gönüllü Ekibini Oluşturuyor! Sosyal Projeler 10
Bilim Dil.web.tr - Yabancı Dil Portalı [BETA] Fikir ve Projeler 13
Soner Web Tasarım Metin Biçimlendirilmeleri Yeni Başlayanlar 0
Benzer konular


















































Üst