Anasayfa / Yazılım / HTML / CSS / CSS Kullanımı

CSS Kullanımı

HTML dökümanlarımıza CSS eklemenin birden fazla yolu vardır. Bunlardan en basiti inline olarak bir HTML öğenin içerisine style kodu tanımlamaktır.

İsmail GÜRSOY

Burada h1 elementi içinde arka plan rengi gri şekilde olan, rengi kırmızı olan bir yazı tipinde İsmail GÜRSOY h1 başlığını yazdırdık. Görüldüğü gibi CSS tanımlamam HTML elementim içinde style etiketi ile başladı.Style etiketinin hemen ardından bir tanımlama yapıyorum onun ardından üst üste iki nokta ve değeri giriyorum, ikinci bir özellik yani ikinci bir tanımlama yapabilmek içinde arada noktalı virgül kullanıyorum.

özellik tanımlamam : değer ; özellik tanımlamam2 : değer şeklinde..

Görüldüğü gibi bu şekilde CSS tanımlayabilirim. Her bir HTML element için bunu yapabilirim. Ancak bu yol tabii en basit ve aslında en uğraştırıcı bir yoldur. Örneğin bir HTML döküman içinde ben tüm h1 elementlerinin aynı özellikte olmasını istiyor isem, tüm h1 elementlerine ayrı ayrı istediğim değerleri yazmam gerekir.

Dolayısı ile bu gibi bir durumda kullanışsızlığı ortaya çıkıyor. Burada başvuracağımız yol ise ilgili HTML döküman içinde CSS kodlarımızı embed etmek, yani o doküman içine kodlarımızı gömmek. Buna bir örnek verelim :





Untitled Document







İsmail GÜRSOY

Bu sefer bir HTML doküman içinde head alanında bir style tanımlıyorum ve bunun içinde CSS özelliklerimi tanımlıyorum. Bu şekilde bu HTML dokümanı içindeki tüm aynı türdeki elementler için tek bir elden yönetme şansını bulabiliyorum. Burada dikkat edileceği üzere;

1) Style alanım < head > elementi içinde.
2) < style > ile başlıyor ve ile bitiriyorum ve her bir elementi tanımlarken önce süslü parantez aç ve sonra kapa şeklinde {,} arasına CSS özelliklerimi tanımlıyorum. (ekstra boşlukları bilerek verdim yazıda görünsün diye)

Style element aslında body içinde de tanımlanabilir head içinde olması bir zorunluluk değil, ama kabul gören en yaygın kullanım şekli head içinde olmasıdır. Çünkü bu tipteki metadata bilgileri site içeriğinde kod okunmasını zorlaştırır.

Style içinde birden fazla HTML öğe, class içinde kodlar bulundurabilirim tabii ki, örneğin aşağıdaki gibi bir yapı olabilir.

gibi..

Tabi altta yer alan class tanımlamalarını öylesine verdim.. Şu an bi anlamı yok bizim için :))

CSS tanımlamamızı ayrı bir dokümanda da yapabiliriz. Buda external olarak adlandırılıyor yani harici tanımlama.. Bu doküman bir style sheet dokümanı olarak oluşturuluyor ve bağımsız olarak tutuluyor. Böylelikle aynı dokümanı birden fazla olan HTML dokümanlarımız içinde kullanabiliyoruz. Oldukça pratiklik sağlıyor. Bu dokümanın uzantısı css oluyor.

Örneğin bir HTML editör içinde bir style sheet dokümanı oluşturduğunuz da artık bu doküman içinde CSS tanımlamalarınızı yaparken < style > ve < /style > içinde tanımlama yapmanıza gerek kalmıyor. Direkt olarak CSS tanımlamalarınızı yapıyorsunuz.

stil.css dosyası olduğunu farzedelim bu dosya içinde;

h1 {
min-width: 500px;
border: thick double red;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: x-large;
padding: .5em;
color: black;
background-size: contain;
margin-top: 0;
}

.dtable {
display: table;
}
.drow {
display: table-row;
}
.dcell {
display: table-cell;
padding: 10px;
}
input {
width: 2em;
text-align: right;
border: thin solid black; 
padding: 2px;
}
label {
width: 5em;
padding-left: .5em;
display: inline-block;
}
#buttonDiv {
text-align: center;
}
#oblock {
display: block;
margin-left: auto;
margin-right: auto;
min-width: 500px;
}

gibi bir tanımlama yapabiliriz.

Daha sonra bunu bir HTML dokümanına referans veriririz. Bu referans işlemini HTML dokümanımız içinde head elementi içinde şu şekilde yaparız.

şeklinde yaparız.

Bu şekilde referans ile birden fazla HTML dokümanına böylelikle CSS dokümanızı bağlayıp tek bir CSS dokümanı ile birden fazla HTML dokümanımızı yönetebiliriz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir