Web Tasarımı ve Geliştirme

CSS3'te stillerle başlamak için en iyi yol onları basitçe ekranda bilgi biçimlendirme aracı olarak görmektir. Beraber çalışacağınız bilgilerin çoğu metin olduğundan, metni stilleri anlama temeli olarak başlamak en kolay yöntemdir. Bu temel HTML5 biçimlendirilmiş sayfayla başlayalım:

Basit Sayfa
Basit Bir Başlık






Başlık ile gitmek için basit metin.

Şu anda, başlık ve paragraf oldukça düz. Metin, tarayıcınız için seçtiğiniz varsayılan yazı tipinde görünür. Farklı bir renk kombinasyonu seçmediyseniz, tipik olarak metin beyaz arka planda siyahtır.

Bu noktada, sayfayı farklı şekilde nasıl biçimlendireceğinizi görmek için biraz oynamanıza başlayabilirsiniz. Aşağıdaki prosedür, temel sayfayı biraz daha ilginç görünmesi için değiştirmenize yardımcı olur. Hiçbir biçimlendirme eklemediği sürece, istediğiniz herhangi bir metin düzenleyicisini kullanabilirsiniz. Bununla birlikte, Komodo Edit gibi bir ürünü kullanmak bu görevi oldukça kolaylaştıracaktır.

1. Metin düzenleyicinizle yeni bir HTML5 dosyası oluşturun.

   Editörünüz HTML5 dosyalarını destekleyemez. Herhangi bir metin dosyası yapılacaktır. Belirli bir dosya türünü kullanmak genellikle editörün sizin için bazı kodları otomatik olarak eklediği anlamına gelir; bu da yazma sürenizi kısaltacaktır.

2. HTML sayfası için kodu yazın.

   Kodu tam olarak bu bölümün önceki bölümünde göründüğü gibi yazdığınızdan emin olun.

3. Aşağıdaki kodu hemen etiketin sonuna ekleyin.

   Etiket bir stilin başlangıcını tanımlar. Etiketi doğrudan bu gibi sayfaya yerleştirdiğinizde buna bir iç stil denir. harici stil sayfaları da oluşturabilirsiniz. Harici stil sayfaları CSS dosyalarında bulunur.

   type özelliği, tarayıcıya etiketin metin biçiminde CSS bilgisi içerdiğini bildirir.

4. Etiketinde (ve girdileri arasında aşağıdaki kodu yazın.

   p {font-family: cursive; font-size: large; color: # 0000ff; background-color: # ffff00;}
   

   (paragraf) etiketi anlamına gelir Bu girdideki her şey belgenizdeki

   etiketlerini etkiler.

   Kıvırcık parantezler ({}) Tarayıcıya aralarında bulunan tüm biçimlendirme talimatlarının belgedeki

   etiketleri için geçerli olduğunu söyleyin Her zaman kıvırcık ayraçları stil tanımının bir parçası olarak yer edin.

   Koyu parantez içinde nitelik adını ve değer çiftlerini görürsünüz Örneğin, font-family, hangi fontun kullanılacağını tanımlayan bir CSS özniteliğinin adıdır.Örneğin, öznitelik, platform ve tarayıcı için varsayılan cursive fontu belirtir.CSS genel adlarını kullanmak, uygulamanızın herhangi bir tarayıcı kullanarak tüm platformlarda genel olarak uyumlu sonuçlar üretmesini sağlar.

   font-size özelliği, göreli bir boyutu tanımlar. Bu durumda, büyük, fontu varsayılan boyutuna kıyasla büyük yapmak istediğinizi belirtir. Belirli bir yazı tipi boyutunu belirtmiyorsunuz, yani her bir platform ve tarayıcı, tek tek ortamlar için yazı tipini normalden daha büyük hale getirebilir.

   color özniteliği, yazı tipi rengi için kullanılacak kırmızı, yeşil ve mavi değerleri belirtir. Değer, önce bir karma (#) ve ardından 0'dan ff'ye dek onaltılık renk değerleri izler. Bu durumda, yazı tipi, platform tarafından desteklenen en parlak mavi olacaktır. Benzer şekilde, background-color özniteliği metnin arka planını belirtir ve bu durumda bu sarı olur.

   Sayfayı kaydedin ve tarayıcınıza yükleyin.

5. Şekil 1-2'de görülen stil değişikliğinin etkilerini görürsünüz. Platformunuz veya tarayıcınız font ailesi veya yazı tipi boyutu için farklı değerler kullanabileceğinden, sayfanız bu sayfadaki sayfanızdan farklı olabilir.

   Etiket içindeki p stilinin ardından aşağıdaki kodu yazın.

   

6. h1 {font-family: "Times New Roman", Gürcistan, serif; font-size: 40px; metin hizalama: merkez; metin-dekorasyon: altı çizili; renk: # ff0000; background-color: # 00ffff;}

   Bu stil
   

   etiket girdilerini etkiler ve

   etiket stili için kullanılan birçok girdiyi içerir. Bununla birlikte, bu sefer font-family özniteliğinin üç girdi içerdiğine dikkat edin: Times New Roman değeri en özeldir, bunu Gürcistan takip eder ve onu en az özgül serif izler. Boşluk içeren bir değerle çalışırken, değeri gösterildiği gibi tırnak işaretleri içine almalısınız.

   Üç girişli yaklaşımın kullanılması çıktı görünümünü daha fazla kontrol etmenizi sağlar, ancak yine de belirli bir fontu desteklemeyen tarayıcıların içeriği doğru bir şekilde oluşturmasını sağlar. Belirli bir yazı tipi temin ederken, belirtilen yazı tipinize erişimi olmayan tarayıcılar için daha az spesifik yazı tipi sağladığınızdan emin olun.

   font-size özelliği de farklıdır. Bu sefer stil belirli bir 40 piksel boyutunu kullanır. Belirli bir değer, ekranda özel efektler oluşturmayı mümkün kılabilir, ancak belirli bir değeri kullanmak da sorun yaratır. 40 piksellik bir giriş, masaüstünde veya dizüstü bilgisayarda iyi çalışacak, ancak bir tablette sorunlara neden olabilir ve içeriğin bir akıllı telefonda kesinlikle görüntülenmesini imkansız hale getirebilir.

   Bu stil, metnin görünümünü değiştiren bazı girdileri de içerir. Text-align özniteliği, metnin nereye yerleştirildiğini belirler; text-decoration özniteliği, herhangi bir özel font özelliklerini belirler. Bu durumda yazı tipi, ortalanmış bir alt çizgi ile görüntülenir.

   Sayfayı kaydedin ve tarayıcınıza yükleyin.

7. Şekil 1-3'de görülen stil değişikliğinin etkilerini görürsünüz. Başlık soluk mavi bir arka plan üzerinde kırmızı metin olarak görünüyor ve paragraf sarı bir arka plan üzerinde mavi metin olarak gösterilir.