Basamaklı Stil Sayfası (CSS), tasarımcıların belirli öğeleri gruplara atayarak aynı anda birkaç özelliği değiştirmesine olanak tanıyan bir web sitesi kodlama sistemidir. Örneğin, web sitesi arka planı için bir kod kullanarak tasarımcılar, CSS dosyasında tek bir değişiklikle web sitesinin tüm sayfalarındaki arka plan rengini veya görüntüsünü değiştirebilirler. Temel bir web sitesi için CSS'nin nasıl oluşturulacağı aşağıda açıklanmıştır.
adımlar
Bölüm 1/4: Satır İçi CSS Yazma
Adım 1. HTML etiketleri hakkında temel bilgilere sahip olduğunuzdan emin olun
Etiketlerin nasıl çalıştığını ve
kaynak
ve
href
Öznitellikler.
Adım 2. Bazı temel CSS özelliklerini öğrenin
Çok fazla özellik olduğunu göreceksiniz. Ancak, hepsini öğrenmek gerekli değildir.
-
Bilmeniz gereken bazı temel CSS özellikleri şunlardır:
renk
ve
font ailesi
- .
Adım 3. Her bir ilgili özellik için değerler hakkında bilgi edinin
Tüm özelliklerin bir değere ihtiyacı vardır. İçin
renk
mülk, örneğin,
kırmızı
değer.
Adım 4. Hakkında bilgi edinin
stil
HTML özelliği.
Gibi bir öğe içinde kullanılır
href
veya
kaynak
. Bunu kullanmak için, eşittir işaretinden sonraki tırnak işaretleri içine CSS niteliğini, iki nokta üst üste ve ardından özelliğin değerini koyun. Bu bir CSS kuralı olarak bilinir.
Adım 5. Satır içi CSS'nin genellikle profesyonel web geliştiricileri tarafından web siteleri için kullanılmadığını anlayın
Satır içi CSS, bir HTML belgesine gereksiz dağınıklık ekleyebilir. Ancak, CSS'nin nasıl çalıştığını tanıtmanın harika bir yoludur.
Bölüm 2/4: Temel CSS Yazma
Adım 1. Kullanmak istediğiniz programı başlatın
HTML ve CSS dosyaları oluşturmanıza izin vermelidir.
Yüklü özel bir programınız yoksa, Not Defteri veya başka bir metin düzenleyici kullanabilirsiniz. Dosyanızı hem metin dosyası hem de CSS dosyası olarak kaydetmeniz yeterlidir
Adım 2. Web siteniz için HTML dosyasını açın
Yüklü bir HTML düzenleyiciniz varsa bunu da bir HTML düzenleyiciyle açmalısınız.
HTML düzenleyicileri, HTML ve CSS'yi aynı anda düzenlemenize olanak tanır
Adım 3. HTML kafanızda bir etiket oluşturun
Bu, ayrı bir dosyaya ihtiyaç duymadan CSS yazmanıza izin verecektir.
Adım 4. Stil eklemek istediğiniz bir öğe seçin ve öğenin adını ve ardından bir dizi küme parantezi ({ }) yazın
Kodunuzu daha okunaklı hale getirmek için, her zaman ikinci kaşlı ayracı kendi satırına koyun.
Adım 5. Köşeli ayraçlar arasında, CSS kurallarınızı,
stil
bağlanmak.
Her satır noktalı virgül (;) ile bitmelidir. Kodunuzu okunaklı hale getirmek için her kural kendi satırından başlamalı ve her satır girintili olmalıdır.
Bu stilin, sayfada seçilen türün tüm öğelerini etkileyeceğini unutmamak çok önemlidir. Bir sonraki bölümde daha spesifik stil ele alınacaktır
Bölüm 3/4: Daha Gelişmiş CSS
Adım 1. Bir HTML dosyası değil, bir CSS dosyası oluşturun ve bunu kullanarak kaydedin.
.css
uzantı.
HTML dosyanızı da açın.
Adım 2. HTML kafanızda bir etiket oluşturun
Bu, HTML belgenize ayrı bir CSS dosyası bağlamanıza olanak tanır. Bağlantı etiketinizin üç özelliği olması gerekir:
rel
tip
ve
href
-
rel
"ilişki" anlamına gelir ve tarayıcıya HTML belgesiyle olan ilişkinin ne olduğunu söyler. Burada değeri olmalıdır
"stil sayfası"
- .
-
tip
ne tür medyaya bağlanıldığını söyler. Burada değeri olmalıdır
"metin/css"
-
href
- burada, bir öğede nasıl kullanıldığına benzer şekilde kullanılır, ancak burada bir CSS dosyasına bağlanması gerekir. CSS dosyası, HTML dosyasıyla aynı klasörde bulunuyorsa, tırnak işaretleri içinde yalnızca dosya adının yazılması gerekir.
Adım 3. Aynı stili eklemek istediğiniz farklı türlerdeki öğeleri seçin
Ekle
sınıf
bu öğelere atıfta bulunun ve bunları seçtiğiniz bir sınıf adına eşitleyin. Bu, öğelerinize aynı stili verecektir.
Adım 4. Bir sınıfın alacağı stili atayın
CSS dosyanıza sınıf adını, önünde bir nokta (.) olacak şekilde yazın (ör.
.sınıf
).
Adım 5. Özel stil eklemek istediğiniz öğeleri tek tek seçin ve bir
İD
bağlanmak.
Kimlikler, CSS'de nokta yerine bir sayı sembolü (#) kullanılarak oluşturulur.
Kimlikler sınıflardan daha spesifiktir, bu nedenle bir kimlik, sınıftan farklı bir değere sahip bir özniteliğe sahipse herhangi bir sınıf stilini geçersiz kılar
Bölüm 4/4: Daha Fazlasını Öğrenmek
Adım 1. w3 okullarını ziyaret edin
Web geliştirme becerilerini öğretmeyi amaçlayan resmi bir web sitesidir. W3, HTML ve CSS'nin yanı sıra diğer web dilleri için listelenen birçok referansa sahiptir.
Adım 2. Özellikle HTML ve CSS öğrenmeyi ve öğretmeyi amaçlayan diğer siteleri bulun
CSS tricks.com gibi siteler özellikle CSS ve web tasarım becerilerini öğretmeyi amaçlar. Saygın kaynaklar bulmak, öğrenme yolculuğunuzda size yardımcı olacaktır.
Adım 3. Web tasarımcıları ve geliştiricileri ile iletişime geçin
Deneyimleri ve teknik bilgileri size değerli bilgi ve becerileri öğretebilir.
Adım 4. Karşılaştığınız web sitelerinin kaynak kodunu görüntüleyin
İyi geliştirilmiş web sitelerinin CSS'sini görüntülemek, web sitelerinin bölümlerini tasarlamanın yollarını gösterebilir. Alıştırma olarak kopyalamak ve kodla uğraşmak, farklı CSS özelliklerini nasıl kullanacağınızı öğrenmenize yardımcı olabilir.
Video - Bu hizmet kullanılarak YouTube ile bazı bilgiler paylaşılabilir
