Basamaklı Stil Sayfaları veya CSS, bir web sayfasının nasıl görüneceğini söyleyen bir dildir. CSS, bir web sitesinin sade yapısına renk, stil ve düzen ekler. Tıpkı iyi hissetmek ve şık görünmek için kıyafetlerinizi seçtiğiniz gibi, CSS de bir web sayfasının süslenmesine ve çekici görünmesine yardımcı olur. Web geliştirmede, sayfadaki metin ve kutuların rengini, boyutunu ve konumunu değiştirmek için CSS kullanırız. Bu ders, size CSS'nin temellerini basit bir dille tanıtacaktır. CSS'nin ne olduğunu, neden önemli olduğunu ve HTML ile nasıl çalıştığını öğreneceğiz.
CSS, Basamaklı Stil Sayfaları anlamına gelir. Web sayfalarını biçimlendirmek için kullanılan özel bir dildir. CSS'yi bir binanın boyası ve dekorasyonu olarak düşünün. Bina HTML'den yapılmıştır ve CSS onu güzelleştirir. CSS kullanarak web sayfanızdaki öğelerin etrafındaki arka plan rengini, yazı tiplerini ve boşluğu değiştirebilirsiniz. CSS, web tasarımcılarının web sitelerinin daha iyi ve daha eğlenceli görünmesini sağlayan bir araçtır.
Bir çizimi renklendirdiğinizi düşünün. Çizimin çizgileri bir web sitesinin temel yapısı gibidir. CSS, çizime hayat katan boya kalemleri ve işaretleyiciler gibidir. Birkaç basit kuralla, tüm çiziminizi düzden renkliye dönüştürebilirsiniz!
CSS, web sitelerini çekici ve kullanımı kolay hale getirmek için kullanılır. Stili içerikten ayrı tutar. Bu, sayfadaki kelimelerin ve resimlerin (HTML tarafından sağlanır) aynı kalması, CSS'nin ise bunların nasıl göründüğünü kontrol etmesi anlamına gelir. Stili güncellediğinizde, içeriği değiştirmeniz gerekmez. Bu ayrım, web geliştiricilerinin daha hızlı çalışmasına yardımcı olur ve siteleri ziyaret etmeyi daha keyifli hale getirir.
CSS'yi seçtiğiniz kıyafet gibi düşünün. Farklı kıyafetler giydiğinizde farklı görünürsünüz, ancak yine de aynı kişisinizdir. CSS, bir web sitesinin görünümünü, üzerindeki bilgileri değiştirmeden değiştirir. Bu, yalnızca bir CSS dosyasını düzenleyerek tüm bir web sitesinin tasarımını güncellemeyi kolaylaştırır.
CSS, HTML ile el ele çalışır. HTML, bir web sayfasında şeylerin nereye gideceğini belirleyen temeldir. CSS daha sonra renkleri, yazı tiplerini ve stili eklemek için devreye girer. Bir tarayıcı bir web sayfasını yüklediğinde, önce HTML ile yapıyı oluşturur ve ardından CSS'de tanımlanan stilleri uygular.
CSS bir kurallar kümesi olarak yazılır. Her kuralın iki bölümü vardır: bir seçici ve bir bildirim bloğu. Seçici, tarayıcıya hangi HTML öğesinin biçimlendirileceğini söyler. Bildirim bloğu bir veya daha fazla bildirim içerir. Her bildirimin bir özelliği ve bir değeri vardır. Özellik, değiştirmek istediğiniz şeydir ve değer, onu nasıl değiştireceğinizi söyler.
Örneğin sayfanın arka plan rengini açık mavi yapmak için aşağıdaki gibi bir kural yazabilirsiniz:
<kod>gövde {
arka plan rengi: açık mavi;
</kod>Bu basit kural tüm sayfanın arka planını değiştirir.
Temel bir CSS kuralı basit bir deseni takip eder. Seçiciyi ve bir özellik ve değer bloğunu gösterir. Desen şu şekilde görünür:
<kod>seçici {
özellik: değer;
</kod>Burada, seçici hangi HTML öğesinin hedefleneceğini seçer. Özellik , değiştirmek istediğiniz şeydir ve değer , onu nasıl değiştirmek istediğinizdir.
Örneğin, tüm paragraf metninin mavi olmasını istiyorsanız şunu yazarsınız:
<kod>p {
renk: mavi;
</kod>Bu kural web tarayıcısına her <p> (paragraf) öğesinin mavi metne sahip olması gerektiğini söyler.
CSS seçicileri, web sayfanızdaki hangi öğelerin stil kurallarından etkileneceğini seçmenize olanak tanır. Birkaç tür seçici vardır ve her biri biraz farklı şekilde çalışır.
Bu farklı seçiciler, web sayfanızın belirli bölümlerini biçimlendirmek için size çok fazla güç verir. Öğeleri hassas bir şekilde hedeflemenize ve nasıl görünmeleri gerektiğine karar vermenize olanak tanırlar.
CSS, web sayfanızı biçimlendirmek için kullanabileceğiniz birçok farklı özellik sunar. Her özellik, bir öğenin görünümünün belirli bir yönünü değiştirmenize olanak tanır. Bazı yaygın özellikler şunlardır:
Her CSS özelliğinin ardından bir değer gelir. Örneğin, metne kırmızı renk vermek için şunu yazabilirsiniz:
<kod>p {
renk: kırmızı;
</kod>Bu basit kural tüm paragrafların kırmızı metinli olmasını sağlar. Renk özelliği metnin nasıl görüneceğini kontrol eder ve kırmızı değeri ona hangi renkte olacağını söyler.
CSS'deki "basamaklı" kelimesi, stillerin bir kuraldan diğerine akabileceği anlamına gelir. Aynı öğeye iki kural uygulanabiliyorsa, sıra hangisinin kazanacağına karar verebilir. Bu, bazen bir bloğun diğerinin bir kısmını kapladığı blokları istiflemeye benzer.
Yaygın bir kural, doğrudan bir HTML öğesinin içine yazılan stillerin (satır içi stiller olarak adlandırılır) CSS dosyanızdaki stilleri geçersiz kılacağıdır. Başka bir kural ise, bir üst öğe biçimlendirilirse, alt öğelerinin aksi belirtilmediği sürece bu stili miras alabileceğidir.
Örneğin, bir <div> öğesinin metin rengini yeşil olarak ayarlarsanız, <div> öğesinin içindeki metin de miras nedeniyle genellikle yeşil görünecektir. Bu, bir web sayfasında tutarlı bir tasarım sağlamaya yardımcı olur.
CSS ile renkleri birçok şekilde değiştirebilirsiniz. red , blue ve green gibi genel renk adlarını kullanabilirsiniz. Ayrıca red için <code>#FF0000</code> gibi onaltılık kodları veya <code>rgb(255, 0, 0)</code> gibi RGB değerlerini de kullanabilirsiniz.
Yazı tipleri CSS'in bir diğer önemli parçasıdır. Yazı tipi, bir defterde seçtiğiniz el yazısı stiline benzer. CSS'de yazı tipi ailesini, boyutunu, kalınlığını ve stilini değiştirebilirsiniz. Örneğin, paragraflarınızın Arial'de görünmesini istiyorsanız şunları kullanabilirsiniz:
<kod>p {
yazı tipi ailesi: Arial, sans-serif;
</kod>Bu kural tarayıcıya, eğer mevcutsa metni Arial yazı tipinde görüntülemesini, mevcut değilse benzer başka bir yazı tipini kullanmasını söyler.
CSS ile renk ve yazı tiplerini değiştirmek, metnin daha kolay okunmasını ve web sayfanızın daha ilgi çekici görünmesini sağlar.
CSS Kutu Modeli, bir öğenin farklı bölümlerinin bir sayfada nasıl düzenlendiğini anlamanın bir yoludur. Her öğe bir kutu gibidir. Kutu modelinin dört bölümü vardır:
Bir fotoğraf hayal edin. Fotoğrafın kendisi içeriktir. Fotoğrafı çevreleyen mat, dolgu gibidir. Her şeyi bir arada tutan çerçeve sınırdır. Ve çerçevenin etrafındaki alan kenar boşluğudur. Bu modeli kullanarak, tasarımınızın tüm parçalarının uygun alana ve dengeye sahip olduğundan emin olabilirsiniz.
CSS yalnızca renkler ve yazı tipleriyle ilgili değildir; ayrıca bir web sayfasındaki öğeleri düzenlemenize yardımcı olur. Buna düzen ve konumlandırma denir. CSS ile her bir öğenin sayfada nerede görüneceğine karar verebilirsiniz.
Bir web sayfasının düzenini kontrol etmenin birkaç yolu vardır, bunlardan bazıları şunlardır:
Bu düzen tekniklerini kullanmak oyuncakları bir rafa yerleştirmek gibidir. Her oyuncağın nereye gideceğine siz karar verirsiniz, böylece hepsi yeterli alana sahip olur ve düzenli görünür. Bu, web sayfanızı daha düzenli ve davetkar hale getirir.
İşte HTML ve CSS'nin birlikte nasıl çalıştığına dair bir örnek. Bu örnek kod, biraz stil içeren basit bir web sayfasını gösteriyor:
<kod><!DOCTYPE html>
<html>
<kafa>
<stil>
vücut {
arka plan rengi: açık mavi;
}
h1 {
renk: lacivert;
yazı tipi boyutu: 24px;
}
P {
renk: yeşil;
yazı tipi boyutu: 18px;
}
</stil>
</başlık>
<gövde>
<h1>İlk Web Sayfam</h1>
<p>Bu, CSS kullanılarak tasarlanmış basit bir web sayfasıdır.</p>
</gövde>
</html></kod>Bu kod açık mavi arka plan rengine sahip bir web sayfası oluşturur. Başlık metni lacivert ve paragraf metni yeşildir. <code><style></code> etiketinin içindeki CSS kuralların nasıl yazıldığını ve uygulandığını gösterir.
CSS'yi HTML'nize üç ana yolla ekleyebilirsiniz. Her yöntemin duruma bağlı olarak kendi kullanımı vardır:
Harici yöntem, profesyonel web geliştirmede en yaygın kullanılan yöntemdir, çünkü HTML'yi düzenli tutar ve birçok sayfadaki stilleri aynı anda güncellemenize olanak tanır.
CSS birçok açıdan çok faydalıdır. İşte web geliştirmede CSS kullanmanın bazı faydaları:
CSS kullanmak, özel bir araç kutusuna sahip olmak gibidir. Araç kutusundaki her araç, web sayfanızın görünümünü kolayca iyileştirmenize yardımcı olur. Pratik yaptıkça, CSS'nin web sitelerini güzel ve kullanıcı dostu hale getirmede ne kadar güçlü olabileceğini göreceksiniz.
Ziyaret ettiğiniz her web sitesi bir şekilde CSS kullanır. En sevdiğiniz çizgi film sitelerinden okul proje sayfalarına kadar, CSS eğlenceli ve okunması kolay bir düzen oluşturmanıza yardımcı olur. Düzenli aralıklı ve net metinli renkli bir web sayfası gördüğünüzde, bu CSS'nin iş başında olduğunu gösterir.
Oyunlar, çizgi filmler veya çevrimiçi hikayeler gibi popüler web sitelerinin tasarımını düşünün. Renklerin, yazı tiplerinin ve düzenlerin düşünceli kullanımı bu web sitelerini heyecan verici ve ilgi çekici hale getirmeye yardımcı olur. CSS ayrıca uygulamalarda ve mobil sitelerde kullanılır ve içeriğin hem büyük ekranlarda hem de küçük telefonlarda iyi görünmesini sağlar.
Günlük hayatta, CSS bir odayı dekore etmeye benzer. Odanız için bir tema seçebilir, renkli resimler asabilir ve mobilyalarınızı düzgünce düzenleyebilirsiniz. CSS web siteleri için de aynısını yapar. Dijital alana düzen ve güzellik getirerek ziyaretçiler için hoş bir hale getirir.
CSS hakkında öğrendiğimiz temel noktalar şunlardır:
CSS, siteleri güzel ve gezinmesi kolay hale getirerek web geliştirmenin hayati bir parçasıdır. Daha fazla keşfederken ve kendi web sayfalarınızı oluşturmaya çalışırken, CSS'nin yaratıcılığınızı ifade etme aracınız olduğunu unutmayın. Renkler, yazı tipleri ve düzenlerle denemeler yapmanın tadını çıkarın, çünkü her küçük değişiklik iyi tasarlanmış bir web sitesinin büyüsüne katkıda bulunur.
En sevdiğiniz web sitelerini uygulamaya ve gözlemlemeye devam edin. Farklı stillerin dikkatinizi çekmek ve hoş bir deneyim yaratmak için nasıl kullanıldığına dikkat edin. Zamanla, CSS'nin basit HTML yapılarını görsel olarak ilgi çekici web sayfalarına dönüştürmede ne kadar güçlü olabileceğini göreceksiniz.