Basamaklı Stil Sayfaları'nı anlama

Basamaklı Stil Sayfaları (CSS), web sayfasındaki içeriğin görünümünü denetleyen formatlama kuralları grubudur. Bir sayfayı formatlamak için CSS stillerini kullanmak içeriği gösterimden ayırır. Sayfanızın içeriği—HTML kodu—HTML dosyasında ve kodun gösterimini tanımlayan CSS kuralları başka bir dosyada (harici stil sayfası) ya da HTML belgesinin başka bir bölümünde (genellikle başlık bölümünde) yer alır. İçeriğin gösterimden ayrılması, sitenizin görünümünün tek bir merkezi konumdan denetlenmesini çok daha kolay hale getirir çünkü değişiklik yapmak istediğinizde her sayfadaki her özelliği güncelleştirmeniz gerekmez. İçeriğin gösterimden ayrılması ayrıca daha basit ve açık bir HTML kodu sağlayarak tarayıcı yükleme sürelerinin kısalmasını sağar ve erişilebilirlik sorunu olan kullanıcılar için (örneğin ekran okuyucularını kullanan kişiler) gezinmeyi basitleştirir.

CSS, sayfanızın tam olarak nasıl görüneceği konusunda yüksek esneklik ve denetim sağlar. CSS ile; belirli fontlar ve font boyutları, kalın, italik, alt çizgi ve metin gölgeleri, metin rengi ve arka plan rengi, bağ rengi ve bağ alt çizgisi ve çok daha fazlasını içeren birçok metin özelliğini denetleyebilirsiniz. Fontlarınızı denetlemek için CSS'yi kullanarak, sayfa mizanpajınızın ve görünümünün birden fazla tarayıcıda daha tutarlı şekilde işlenmesini sağlayabilirsiniz.

Metin formatlamaya ek olarak, CSS'yi web sayfasında bulunan blok düzeyinde öğelerin format ve konumlandırmalarını denetlemek için de kullanabilirsiniz. Blok düzeyinde öğe, HTML'de genellikle yeni bir satırla ayrılmış ve görsel olarak blok şeklinde formatlanmış, bağımsız bir içerik parçasıdır. Örneğin, h1 etiketleri, p etiketleri ve div etiketlerinin tümü web sayfasında blok düzeyinde öğeler üretir. Blok düzeyinde öğeler için kenar boşlukları ve kenarlıklar ayarlayabilir, bu öğeleri belli bir konuma yerleştirebilir, bunlara arka plan rengi ekleyebilir, çevrelerine metin ekleyebilir ve benzer işlemler yapabilirsiniz. Blok düzeyinde öğelerle işlem yapmak aslında sayfa mizanpajını CSS ile yapma yolunuzdur.

CSS kuralları hakkında

CSS formatlama kuralları iki bölümden oluşur—seçici ve bildirim (ya da çoğu durumda bildirimler bloku). Seçici, biçimlendirilmiş öğeyi tanımlayan bir terimdir (örneğin p, h1,sınıf adı veya kimlik) ve bildirim bloku stil özelliklerinin neler olduğunu tanımlar. Aşağıdaki örnekte, h1 seçicidir ve parantezler ({}) arasındaki her şey bildirim blokudur:

Bir bildirim iki bölümden oluşur, özellik (örneğin font-family) ve değer (örneğin Helvetica). Önceki CSS kuralında h1 etiketleri için belli bir stil oluşturulmuştur: bu stile bağlanmış tüm h1 etiketlerinin metni 16 piksel boyutunda, Helvetica fontunda ve kalın olacaktır.

Stil (bir kural veya kural grubundan gelir), formatladığı metinden ayrı bir yerde bulunur—bu yer genellikle harici bir stil sayfasıdır veya HTML belgesinin başlık kısmıdır. Böylece, h1 etiketlerine ilişkin tek bir kural aynı anda birçok etikete uygulanabilir (ve harici stil sayfaları söz konusu olduğunda, kural aynı anda birçok farklı sayfadaki birçok etikete uygulanabilir). Bu yolla, CSS kolayca güncelleştirme yeteneği sağlar. Bir konumdaki CSS kuralını güncelleştirdiğinizde, tanımlanmış stili kullanan tüm öğelerin formatları otomatik olarak yeni stille güncelleştirilir.

Dreamweaver uygulamasında aşağıdaki türlerde stil tanımlayabilirsiniz:

• Sınıf stilleri stil özelliklerini sayfadaki tüm öğelere uygulamanızı sağlar.

• HTML etiketi stilleri örneğin h1 gibi belli bir etiketin formatını yeniden tanımlar. O h1 etiketinin CSS stilini oluşturduğunuzda veya değiştirdiğinizde, h1 etiketiyle formatlanmış tüm metin hemen güncelleştirilir.

• Gelişmiş stiller öğelerin belli bir birleşimine veya CSS tarafından izin verildiği şekilde diğer seçici formlara (örneğin bir tablo hücresinde , h2 üstbilgisi göründüğünde seçici td h2 uygulanır) ilişkin formatlamayı yeniden tanımlar. Gelişmiş stiller ayrıca belli bir id niteliği içeren etiketlere ilişkin formatlamayı da yeniden tanımlar (örneğin #myStyle tarafından tanımlanan stiller id="myStyle" nitelik-değer çiftini içeren tüm etiketlere uygulanır).

CSS kuralları aşağıdaki konumlarda bulunabilir:

Ayrı olarak, harici bir CSS (.css) dosyasında (HTML dosyasında değil) saklanan CSS kuralları grubu. Bu dosya, bir belgenin başlık kısmında bağ veya @import kuralı kullanarak bir web sitesindeki bir ya da daha fazla sayfaya bağlanır.

Bir HTML belgesinin baş kısmındaki style etiketinde bulunan CSS kuralları grubu.

HTML belgesi boyunca yer alan etiketlerin belirli örneklerinde tanımlanır. (Satır içi stillerinin kullanılması önerilmez.)

Dreamweaver, varolan bir belgelerde tanımlanmış stilleri, bunlar CSS stil talimatlarına uygunsa tanır. Dreamweaver ayrıca en çok uygulanan stillerin görüntüsünü doğrudan Tasarım görünümünde oluşturur. (Yine de belgeyi tarayıcı penceresinde önizlemek, size sayfanın “canlı” görüntüsünün en doğru şeklini sağlayacaktır.) Bazı CSS stillerinin görüntüleri Microsoft Internet Explorer, Netscape, Opera, Apple Safari veya diğer tarayıcılarda farklı şekilde oluşturulur ve bazıları şu anda hiçbir tarayıcı tarafından desteklenmemektedir.

Basamaklı stiller hakkında

Basamaklama terimi, tarayıcının web sayfasındaki belirli öğelerin stillerini nihai olarak görüntüleme yöntemini belirtir. Web sayfasında gördüğünüz stillerden sorumlu üç farklı kaynak vardır: sayfanın yazarı tarafından oluşturulan stil sayfası, kullanıcının özelleştirilmiş stil seçimleri (varsa) ve tarayıcının kendisinin varsayılan stilleri. Önceki konularda, hem web sayfasının hem de bu sayfaya eklenen stil sayfasının yazarı olarak web sayfası için stiller oluşturma açıklanmıştır. Ancak tarayıcıların kendisinin de web sayfalarını oluşturmak için kullandıkları varsayılan stil sayfaları vardır ve buna ek olarak kullanıcılar, web sayfalarının görüntülenmesini ayarlayan seçimler yaparak tarayıcılarını özelleştirebilirler. Web sayfasının son görünümü, web sayfasını oluşturmak üzere bu üç kaynaktan gelen kuralların (veya “basamaklamanın”) en optimal biçimde bir araya gelmesinin sonucudur.

Genel bir etiket—paragraf etiketi veya <p> etiketi—kavramı göstermektedir. Varsayılan olarak tarayıcılar, paragraf metninin fontunu ve font boyutunu tanımlayan stil sayfalarıyla gelir (diğer bir deyişle, HTML kodunda <p> etiketleri arasında kalan metin). Örneğin Internet Explorer'da, paragraf metni de olmak üzere tüm gövde metni varsayılan olarak Times New Roman, Medium font olarak görüntülenir.

Bununla birlikte web sayfasının yazarı olarak tarayıcının paragraf fontu ve font boyutu için varsayılan stilini geçersiz kılan bir stil sayfası oluşturabilirsiniz Örneğin, stil sayfanızda aşağıdaki kuralı oluşturabilirsiniz:

Kullanıcı sayfayı yüklediğinde, yazar olarak sizin ayarladığınız paragraf fontu ve font boyutu, tarayıcının varsayılan paragraf metin ayarlarını geçersiz kılar.

Kullanıcılar, kendi kullanımları için tarayıcı görünümünü en optimal biçimde özelleştirmek üzere seçimler yapabilirler. Örneğin Internet Explorer'da, kullanıcı fontun çok küçük olduğunu düşünüyorsa daha rahat okumak üzere sayfa fontunu büyütmek için Görünüm > Metin Boyutu > En Geniş'i seçebilir. Sonuç olarak (en azından bu olayda) kullanıcının seçimi, paragraf font boyutunun varsayılan tarayıcı stillerini ve web sayfasının yazarı tarafından oluşturulan paragraf stillerini geçersiz kılar.

Devralma, basamaklamanın bir diğer önemli bölümüdür. Web sayfasındaki birçok öğenin özellikleri devralınır—örneğin, paragraf etiketleri gövde etiketlerinden bazı özellikleri devralır, span etiketleri bazı özellikleri paragraf etiketlerinden devralır vb. Bu nedenle, stil sayfanızda aşağıdaki kuralı oluşturuyorsanız:

Web sayfanızdaki tüm paragraf etiketleri (paragraf etiketinden özellikleri devralan metin de olmak üzere), paragraf etiketi gövde etiketinden bu özellikleri devraldığından Arial ve italik olacaktır. Bununla birlikte, kurallarınızda daha belirleyici olabilir ve devralmanın standart formülünü geçersiz kılan stiller oluşturabilirsiniz. Örneğin, stil sayfanızda aşağıdaki kuralları oluşturuyorsanız:

Tüm gövde metni paragraf metni (ve devraldıkları) dışında (Courier normal (italik olmayan) biçimde görüntülenecektir) Arial ve italik olacaktır. Teknik olarak, paragraf etiketi öncelikle gövde etiketi için ayarlanan özellikleri devralır ancak ardından, kendisi için tanımlanmış özellikler olduğundan bu özellikleri yok sayar. Diğer bir deyişle, sayfa öğeleri genellikle yukarıdakinin özelliklerini devralırken, etiketin özelliğinin doğrudan uygulaması her zaman devralmanın standart formülünün geçersiz kılınmasına neden olur.

Yukarıda bahsedilen tüm etkenlerin birleşimi artı CSS belirtimi (belirli CSS kurallarına farklı önem veren bir sistem) gibi diğer etkenler ve CSS kurallarının sırası, sonuç olarak daha yüksek önceliği olan öğelerin daha düşük önceliğe sahip olan özellikleri geçersiz kıldığı karmaşık bir basamaklama oluşturur. Basamaklama, devralma ve belirtimi yöneten kurallar hakkında daha fazla bilgi için bkz. www.w3.org/TR/CSS2/cascade.html.

Metin biçimlendirme ve CSS hakkında

Varsayılan olarak, Dreamweaver metin biçimlendirmek için Basamaklı Stil Sayfalarını (CSS) kullanır. Özellik denetçisini veya menü komutlarını kullanarak metne uyguladığınız stiller, geçerli belgenin baş kısmına gömülen CSS kurallarını oluşturur.

CSS kuralları ve özellikleri oluşturmak ve bunları düzenlemek için CSS Tasarımcısı'nı da kullanabilirsiniz. CSS Tasarımcısı, Özellik denetçisinden çok daha güçlü bir düzenleyicidir ve geçerli belge için tanımlanmış olan ve belgenin baş kısmında gömülü olan veya harici stil sayfasında bulunan tüm CSS kurallarını görüntüler. Adobe, CSS oluşturma ve düzenleme için birincil araç olarak CSS Tasarımcısı'nı (Özellik denetçisini değil) kullanmanızı önerir. Sonuç olarak kodunuz daha açık ve işlem yapılması daha kolay durumda olacaktır.

CSS Tasarımcısı hakkında daha fazla bilgi için bkz. CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma.

Belgelerinize stil uygulamak için, kendi oluşturduğunuz stillere ve stil sayfalarına ek olarak, Dreamweaver uygulamasıyla birlikte gelen stil sayfalarını da kullanabilirsiniz.

CSS ile metin biçimlendirme hakkında bir eğitim için bkz. www.adobe.com/go/vid0153_tr.

Steno CSS özellikleri hakkında

CSS özellikleri, steno CSS olarak bilinen kısaltılmış bir sözdizimi kullanarak stil oluşturulmasına izin verir. Steno CSS, tek bir bildirim kullanarak birkaç özelliğin değerini belirlemenizi sağlar. Örneğin font özelliği font-style, font-variant, font-weight, font-size, line-height ve font-family özelliklerini tek bir satırda ayarlamanızı sağlar.

Steno CSS kullanırken akılda tutulması gereken önemli bir nokta, steno CSS özelliğinde hariç tutulan özelliklere bunların varsayılan değerlerinin atanmasıdır. Bu, aynı etikete iki veya daha fazla CSS kuralı atandığında sayfaların hatalı şekilde görüntülenmesine neden olabilir.

Örneğin aşağıda gösterilen h1 kuralı uzun CSS sözdizimini kullanır. Burada font-variant, font-stretch, font-size-adjust ve font-style özelliklerine varsayılan değerlerinin atandığına dikkat edin.

Aynı kural tek, steno özelliğiyle yeniden yazıldığında aşağıdaki gibi görünebilir:

Steno notasyonu kullanılarak tekrar yazıldığında, hariç tutulan değerlere otomatik olarak varsayılan değerleri atanır. Bu durumda, önceki steno örneğinde font-variant, font-style, font-stretch ve font-size-adjust etiketleri hariç tutulmuştur.

Birden fazla konumda tanımlı, hem steno formunda hem de uzun formda CSS sözdizimi kullanan stilleriniz varsa (örneğin hem HTML sayfasına gömülü hem de harici stil sayfasından içe aktarılmış), steno kuralda hariç tutulan özelliklerin başka bir kuralda açıkça ayarlanmış özellikleri geçersiz kılabileceğini (veya basamaklandırabileceğini) unutmayın.

Bu nedenle, Dreamweaver varsayılan olarak uzun CSS notasyonunu kullanır. Bu, uzun yazılmış bir kuralı geçersiz kılan bir steno kuralın neden olabileceği sorunları önler. Steno CSS notasyonuyla kodlanmış bir web sayfasını Dreamweaver uygulamasında açarsanız, Dreamweaver uygulamasının tüm yeni CSS kurallarını uzun formda oluşturacağını unutmayın. Tercihler iletişim kutusunun (Windows'da Düzen > Tercihler, Macintosh'da Dreamweaver > Tercihler) CSS Stilleri kategorisindeki CSS düzenleme tercihlerini değiştirerek Dreamweaver uygulamasının CSS kurallarını nasıl oluşturacağını ve düzenleyeceğini belirleyebilirsiniz.

Dreamweaver ve CSS

Dreamweaver'da, CSS ile çeşitli yollarla çalışabilirsiniz:

• CSS Tasarımcısı'nı kullanarak CSS'nizi minimum kodla oluşturabilirsiniz. Daha fazla bilgi için bkz. CSS Tasarımcısı'nı kullanarak sayfa mizanpajını yapma. 
• CSS kodunuzu el ile de yazabilirsiniz. Dreamweaver tarafından sunulan kodlama özellikleri hakkında daha fazla bilgi için bkz. Dreamweaver'da kodlama ortamı.
• Sass, Scss veya Less dosyalarıyla çalışmayı tercih ederseniz dosyalarınızı kendi tercih ettiğiniz sözdizimiyle kodlayıp Dreamweaver'da kullanabilirsiniz. Daha fazla bilgi için bkz. CSS ön işlemcileri.