0 0
Read Time:2 Minute, 46 Second

CSS (Cascading Steel Sheets), HTML elementlerinin rengini, boyutunu, arka planını değiştirmenize olanak sağlayan biçimlendirme dilidir. Birçok ön uç geliştirici ve tasarımcı web siteleri geliştirirken bu dili kullanır. CSS, bir programlama dili değildir. Bu şu demektir, CSS ile bir form oluşturup o formun çıktılarını sunucuya gönderemez, veri işleyemezsiniz. CSS ile yapabileceğiniz şey, oluşturulmuş bir formun “gönder” butonunun boyutunu, arka plan rengini, marjını ayarlamaktır.

CSS’i HTML elementlerini şekillendirmek için kullanıyorsak, CSS’i anlamadan önce HTML nedir, başlıca elementler nedir, bunları anlamamız gerekebilir.

HTML Nedir? Sıklıkla Kullanılan HTML Elementleri Nelerdir?

HTML (Hypertext Markup Lnnguage) yani Hiper Metin İşleme Dili, web sitelerindeki içeriğin görselleştirilmesi ve aktarılması için tarayıcıların okuduğu bir dildir. İnternette okuduğunuz çoğu paragraf HTML’deki “<p>” elementi ile size aktarılır. Çoğu başlık için HTML’deki başlık etiketleri(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) kullanılır. Bir web sitesinde gördüğünüz basit bir tablo, muhtemelen “<table>” elementiyle oluşturulmuştur. Kullandığınız tarayıcı, bu elementler sayesinde size içeriği doğru bir şekilde aktarır. Yani tarayıcı “<p> </p>” açılış ve kapanış etiketleri içindeki metni okur, size bir paragraf olarak iletir.

HTML’deki elementler tabii ki bunlarla sınırlı değildir. Alıntılar için sıklıkla “<blockquote>” kullanılır, listeler için “<ol>” ya da “<ul>” etiketleri devreye girer. Web sitesinin sabit başlığı(header) ve alt kısmı(footer) dışındaki neredeyse tüm elementler bir “<body>” etiketinin içinde kullanılır.

Tüm bu elementlerin nasıl görünmesi gerektiğine karar vermek istediğimiz anda ise devreye CSS girer.

Şu An CSS Yazabiliriz!

Dizüstü ya da masaüstü bilgisayarınızda, fare ile herhangi bir metnin üzerine sağ tıklayıp “incele” kısmına tıkladığınızda, tarayıcınız size okuduğunuz metnin html versiyonunu gösteren bir ekran çıkaracaktır. Bu ekranı muhtemelen daha önce birkaç kere yanlışlıkla açtınız ve ne olduğunu anlamadan hemen kapattınız. İşte şimdi, bu ekranı kapatmadan ve yeni bir HTML dökümanı oluşturmadan CSS’in ne işe yaradığını anlayacaksınız. Birlikte bu ekran aracılığıyla birkaç CSS kodu yazacağız.

Natro.com’un ana sayfasını yeni bir sekmede açarak CSS yazmaya başlayacağız. Sayfayı yeni sekmede açtıktan sonra, “Web Siteniz ve Kurumsal İhtiyaçlarınız İçin Çözümler” alanına sağ tıklayıp “incele” butonuna basın. Artık natro.com’un ana sayfasındaki bu başlığın HTML ve CSS kodunu görüyor olmalısınız. “Elements” başlığı altındaki kodlar HTML kodları, “Styles” başlığı altındaki tüm kodlar CSS kodlarıdır.

CSS Kodları Nelerdir?

Hepsinden bu yazıda bahsetmek pek mümkün değil. Ancak sık kullanılan CSS kodları aşağıdaki gibidir:

display : Elementin görüntülenip görüntülenmeyeceğini veya nasıl görüntüleneceğini tanımlamamızı sağlar. “block”, “flex”, “none” gibi kullanımları vardır.

color : Elementin rengini belirlememizi sağlar. HTML renk kodları ile kullanılır.

background-color : Elementin arka plan rengini belirlememizi sağlar. HTML renk kodları ile kullanılır.

font-weight: Yazı tipinin inceliğini ve kalınlığını belirlememizi sağlar.

font-size : Yazı tipinin boyutunu belirlememizi sağlar. “px” ve “em” ölçüleriyle kullanılır.

margin : Elementin diğer elementlerle arasındaki boşluğu ayarlamamızı sağlar.

padding : Elementin kendi içindeki elementlerle arasındaki boşluğu ayarlamamızı sağar.

border : Kenarlık belirtir. Örneğin, “1px solid #000000” koduyla kullanıldığında 1px’lik siyah bir kenarlık vermiş oluruz.

border-color : Kenarlık rengini belirtmeyi sağlar. HTML renk kodları ile kullanılır.

width : Elementin genişliğini ayarlamamızı sağlar.

height : Elementin yüksekliğini ayarlamamızı sağlar.

position : Elementin pozisyonunu ayarlamamızı sağlar, “relative” , “absolute” , “static” gibi değerler tanımlanarak kullanılır.

text-align: “left” “center” gibi değerlerle kullanılır. Yazının ortalanacağını mı, sola mı yaslanacağını belirlememizi sağlar.

float: “left” “center” “right” gibi değerlerle kullanılır. Elementin yerini belirler.

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön