CSS Temelleri: Sayfaların Düzeni 2019
CSS Temelleri: Sayfaların Düzeni
Web siteleri oluşturmak,zayıf sinirler. Bilgiye ek olarak, bir sayfa işaretlenirken yaratıcı düşünceye, mükemmeliyetçi tercihlere ve telkari hassasiyete sahip olmak gerekir. Bu konuda CSS basitçe doldurulamaz. Ve her web yöneticisinin temellerini bilmesi gerekiyor.
CSS nedir?
HTML ile aşina olanlar, anlatmaya gerek yok,Bu, sayfa biçimlendirmesinin dili. Ancak içerik oluşturucuları, görünüm ve tasarımdan sorumlu etiketler eklemeye karar verdiler. Bu sadece bu yaklaşımla, sayfa kodu çok hantal ve neredeyse okunamaz hale geldi. Doğal olarak, bu şekilde hiçbir yere yol açmadı, bu yüzden kapsamlı bir çözüm benimsendi: HTML, sayfa düzeni, görsel tasarım için CSS'den sorumludur.
Kısaltma CSS Basamaklı Stil Sayfaları (basamaklı stil sayfası) anlamına gelir. Sayfadaki nesnelerin görselleştirilmesinden sorumlu olan parametrelerden oluşur.
CSS'nin Faydaları
Basamaklı stil sayfası, web yöneticisininsadece güzel bir kaynak yaratır, aynı zamanda kodun okunabilir olmasını sağlar, büyüklüğünü büyük ölçüde azaltır. CSS kullanarak, sayfanın HTML işaretlemesinde mümkün olmayan parametreleri belirtebilirsiniz.
CSS ile, birkaç tıklamayı gerçekten değiştirebilirsinizkaynak sayfaların görünümü. Özellikle site çok sayfalı ise, bu çok uygundur. Tüm tasarım değişiklikleri basamaklı stil sayfasında yapılır ve kaynağın her sayfasındaki parametreler değiştirilerek yapılmaz. Ve sadece CSS sayesinde blok biçimlendirme uygulayabilirsiniz.
CSS'yi bağlama
CSS'nin temel ilkeleri hakkında konuşmak, ilk şeyBir basamaklı stil sayfasını bir HTML dosyasına nasıl bağlayacağınızı öğrenmeniz gerekir. Bu süreç oldukça basit. İlk adım bir HTML belgesi oluşturmaktır. Henüz bilmeyenler için, Not Defteri programında oluşturuyorlar. Ardından, "Farklı Kaydet" işlevini kullanarak bir HTML uzantısı belirtmeniz gerekir.
Aynı şekilde bir basamaklıstil sayfası, sadece dosya uzantısı css ile belirtilmelidir. Alınan belge, HTML dosyaları ile aynı klasöre kaydedilmelidir. Örneğin, bir stil sayfası belgesi style.css olarak adlandırılır. Bir HTML belgesine bağlamak için, harici dosyaları bağlamaktan sorumlu olan <link> etiketini kullanmalısınız. <Head> etiketleri arasında aşağıdakileri girmeniz gerekir:
Belki de bu harici dosyaları bağlamak için en uygun yollardan biridir.
CSS Kuralı
CSS işaretlemesi çalışması ile başlamalıdır.sözdizimi çalışması. Basamaklı stil sayfasında hiçbir etiket, komut dosyası veya parametre yok. Sadece bir kural var. Bir seçici ve bir stil bloğundan oluşur. Basamaklı stil sayfasının bir konumu olduğunu söyleyelim: body {background: black; renk: beyaz}.
Burada vücut sorumludursitenin stil biçimlendirmesi; arka plan: siyah ve renkli: beyaz özellikleri ve anlamlarıdır. Noktalı virgülle yazılırlar. Bu konum sitenin arka planını siyah yapar ve metin beyazdır.
seçiciler
Eh, CSS'ye yoğun bir giriş yapmaya devam ediyoruz. Sayfaların düzeni seçicilerin bilgisi olmadan yapmak oldukça zor olacaktır. Her şey özellikler ve değerleri ile açıksa, seçiciler hakkında ek bilgi, sayfanın istenen düzenini oluşturmaya yardımcı olacaktır.
Seçiciler hakkında bilmeniz gerekenler nelerdir? İlk olarak, çeşitleri:
- Tanımlayıcı.Seçici olarak kullanılabilirsayfa öğelerinin adları. Örneğin, başka bir renkle bir metin paragrafı seçmeniz gerekiyorsa, bir tanımlayıcı ekleyin. Kimlik parametresiyle belirtilir.
Bir tanımlayıcının olabileceğini hatırlamaya değer.sadece bir kez kullan. Bu örnekte, seçiciye pembe denir, başka bir tanımlayıcıya ihtiyacınız varsa, farklı bir ad (pembe2, yeşil, vb.) Ataması yeterlidir.
sınıflar. Birden fazla nesne için aynı parametreleri ayarlamak istiyorsanız, sınıf seçici kullanılır. Örneğin, iki metin paragrafı için kırmızı bir renk belirtmelisiniz.
Sınıfları olan nesneler herhangi bir sayı olabilir.
Aynı nesne için belirtebilir vesınıf ve tanımlayıcı - bu, CSS işaretlemesiyle çelişmez. Ancak, tanımlayıcı daha yüksek bir önceliğe sahip olduğu için, nesne için stil kullanılacaktır. CSS'de bir sayfayı işaretlerken, dikkate değer.
Tanımlayıcılar ve sınıflar herhangi biri için kullanılabilirnesneler. metin ve görüntüler için bir stil belirtmek için bir ihtiyaç varsa, o zaman örneğin (s # pembe, p.red) olduğu gibi, elemanın adını atlayabilirsiniz. Bir nokta veya kafes koyabilirsiniz. Ayrıca, seçiciler gruplanabilir. Örneğin, h1, h2, h3 {color: red; font-sixe: 17px}.
Sayfa Düzeni
Sayfaların düzenini inceleyerek, çeşitli çeşitlerinin olduğunu anlayabilirsiniz:
- Tabular.Henüz basamaklı bir stil sayfası olmadığında, buİşaretleme temel oldu. Kaynak nesnelerin birbirinden en doğru şekilde yerleştirilmesine izin verdi. Ancak kod çok büyük ve arama motorları tarafından zayıf endeksli çıkıyor. Bu yöntemin bir diğer dezavantajı indirme hızıdır. Tablonun tamamı yüklenene kadar, kullanıcı metnin başlangıcını bile görmez.
- Blok.Şimdi bu sayfa düzeni ana yoludur. Kullanımı sadece stil sayfasının geliştirilmesi ve geliştirilmesi sayesinde mümkün oldu.
Blok düzeninin avantajları
CSS kullanarak sayfanın blok düzenibirkaç reddedilemez avantaj. İlk olarak, nesnelerin tarzı, kodun okunabilirliğini büyük ölçüde geliştiren ve hızlıca görsel değişiklikler yapmanıza olanak veren HTML belgesinden ayrıdır. İkincisi, bir katmanı diğerinin üzerine yerleştirmek mümkündür ve bu birkaç kez konumlandırma işlemini kolaylaştırır. Doğal olarak, bu tür siteler arama motorları tarafından daha hızlı yüklenir ve dizine eklenir. CSS'deki sayfa düzeni, modern görsel efektler oluşturmayı kolaylaştırır.
Bu yaklaşımın tek dezavantajı farklıTarayıcıların "Anlamak". Bazı insanlar kaynağı web yöneticisinin gördüğü biçimde gösterir. Ancak, görüntüyü bozan tarayıcılar var. Bu nedenle, çok sayıda sınıf ve seçiciyle, kodu tarayıcılar arası uyumlu hale getirecek olan hackerlar kullanmanız gerekiyor.
Site yerleşimi nasıl oluşturulur?
Başlamanız gereken ilk şey, bir düzen yaratılmasıdır. Bu psd uzantısı ile düzenli bir görüntü olmalıdır. Oluşturulduktan sonra (satın alma veya indirme), görüntüyü bloklara ayırmak ve bir klasöre (tercihen ayrı bir dosyaya) yerleştirmek gerekir. Bu fragmanlar bloklar için bir arka plan olarak kullanılacaktır.
Blok düzeni kullanımı için HTML belgesinde<div> etiketi. İçindeki her şey genellikle bir katman olarak adlandırılır ve bu katmanın biçimi, sınıflar veya tanımlayıcılar kullanılarak basamaklı stil sayfasında belirtilir.
Düzenlemeden sonra yapılacak ilk şeysite parçalara ayrılacak, HTML'de sitenin yapısını <div> etiketini kullanarak ayarlayın ve her katman için kendi seçicisini atayın. Örneğin, bu menü varsa, yaz: id = menu. Ardından basamaklı stil sayfasını bağlamanız ve her katman için parametrelerinizi ayarlamanız gerekir. En basit kod aşağıdaki gibidir.
Parametreleri ayarla
Örneğin, parametrelerin nasıl ayarlandığını açıkça görebilirsiniz.CSS blokları için. Sayfa düzeninin konumlandırılması piksel cinsinden belirtilir, ancak çoğu durumda yüzdelerin kullanılması daha iyidir. Tarayıcı penceresinde, bu site "tuvalin farklı kısımlarından uyarlanmış" gibi görünecektir, çünkü örnekte yalnızca blok alanının rengi kullanılmıştır. Ancak arka plan görüntüsü ile değiştirirseniz, sadece güzel değil, aynı zamanda oldukça işlevsel bir ürün elde edebilirsiniz.
<Div> etiketleri arasında, ihtiyacınız olan her şeyi yazabilirsinizgerekli biçimlendirme ile bilgi. Bu etikette yazılmış herhangi bir metin hemen formatlanmış bloğa eklenir. Bloğun boyutlarının ötesine geçmemek için <div> arasındaki nesneler otomatik olarak azalacaktır.
Bu örnek, tüm bunların sadece küçük bir kısmıdır.Kaynağın nitel özellikleri üzerinde çalışırken web yöneticisinin ne yapması gerekecek. İyi bir web kaynağı oluşturduğunuzda, tarayıcılar arası işlevselliği elde etmek için genellikle bilgisayar korsanlarını kullanabilirsiniz. Düzenleme kod sayfaları işin çok daha kolaydır, ancak elle düzenleme için ihtiyaç Web master kaydetmez özel editörü olabilir.
Herkes bağımsız olarak bir web sitesi oluşturabilir. Esas olan, hem CSS hem de HTML'nin insanlar tarafından yaratıldığını ve insanlar için tasarlandığını anlamaktır. Sayfa düzeninin temelleri herkese açıktır ve web kaynaklarının oluşturulması sadece seçimin ayrıcalığı değildir, aynı zamanda herkes için de oldukça yaygındır.
CSS Temelleri: Sayfaların Düzeni 2019
Related news
CSS Temelleri: Sayfaların Düzeni