Web sayfalarının arka planını nasıl değiştirilir? Web sayfasındaki arka planın ve metnin rengini nasıl ayarlanır?

Yardım ile CSS rengi ve arka plan Bir web sayfasının hemen hemen her öğesini belirleyebilirsiniz, arka plan görüntüsünü serbestçe kontrol edebilirsiniz, yatay ve dikey tekrarlanır. Dışında, cSS Araçları Arka plan görüntüsünü konumlandırma kullanarak herhangi bir nokta ekranına yerleştirebilirsiniz. Henüz gitmeyeceğiz, hadi gidelim.

Renk özelliği

Bu özellik, öğenin rengini veya yerine, öğenin içindeki metnin rengini ayarlar. Değer, olası formlardan biri tarafından verilir:

• renk adı (yeşil, siyah, kırmızı ...);
• zımpara renk kodu (008000, 000000, ff0000 ...);
• rGB'de Ondalık Renk Kodu (Renk: RGB (40, 175, 250));

Renk özelliği miras alınır ve herhangi bir öğe için belirtilen bir değerle, değer atalarından devralınır. Ancak, atalar için belirtilmediğini ortaya çıkarabilir - sonra tarayıcı stilleri tablosu varsayılan değerler kullanılarak uygulanacaktır. Bu durumda öğenin rengi büyük olasılıkla siyahtır.

Daha önce de belirttiğim gibi, rengi hemen hemen tüm unsurlara ayarlayabilirsiniz, (H1 ... H6), (Güçlü, EM) ve hatta tüm (p) ve hatta masaların sınırları, ancak bu daha sonra olabilir.

Ne zaman bir metin rengi görevi örneğine bakıyoruz. cSS yardımı:

h1 (Renk: Mavi)

Bu örnekte, web sayfasının ilk seviyesinin tüm başlıkları mavi olacaktır:

güçlü (Renk: Kırmızı)

Bu durumda, sayfanın metninde tüm bunlar bir etiketle vurgulanacaktır. kuvvetli., Kırmızı bir renge dönüşür.

Böyle yazabilirsiniz:

h1, P, Güçlü (Renk: Yeşil)

Sonra birinci seviyenin başlıkları, tüm paragraflar ve etiket tarafından vurgulanan her şey yeşil olacaktır.

Farklı renklerle başlıkları vurgulamak için bir ihtiyaç olduğunda, sınıf seçicileri kullanılır. HTML'de bir sınıfı tanımlamak için bir özellik kullanılır sınıfHerhangi bir maddeye uygulanabilir. HTML'de kodunuzun yazması gerekir:

sınıf \u003d "mavi"\u003e Bu sınıfın başlıklarının rengi mavi olacak

Stiller CSS tablosunda, bu durumda, seçicinin H1 elemanı olacağı kuralları ve noktanın ( . ) Sınıf adı:

h1.Blue (Renk: Mavi)

HTML belgelerinde, tanımlayıcı seçiciler de kullanılır, öznitelik tarafından belirlenir. İD. Tanımlayıcı, bir sınıftan daha önemli veya öncelikli bir özelliktir. Ve eğer bir sınıf ve tanımlayıcı, öğe için HTML kodunda da belirtilirse, tanımlayıcı stili geçerli olacaktır. Kafes işaretinin tanımlayıcısını belirtir ( # ). HTML - tanımlayıcı kodunda kullanmak için, yazmanız gerekir:

İd \u003d "mavi"\u003e Bu tanımlayıcının başlıklarının rengi mavi olacak

Sıradaki stil sayfasında:

h1 # Blue (Renk: Mavi)

ARKA PLAN RENGİ

Bu özellik, herhangi bir HTML öğesi için genel olarak, sayfa için arka plan rengini bir bütün olarak, paragraf, bağlantılar olarak ayarlamanızı sağlar. Bunu yapmak için, özellik değeri renk veya değeri gösterir Şeffaf(şeffaf). Arka plan sayfasının kodu yazılmıştır:

vücut (arka plan rengi: aqua)

Bu durumda, sayfanın arka planı turkuaz olacak ve başlık arka planı verecek:

h1 (arka plan rengi: sarı)

Sarı birinci seviye başlık arka planı alıyoruz.

CSS'de renk ve arka plan

Arka Plan Tekrar Mülkiyet

Bu özellik yatay ve dikey olarak tekrarlanıp tekrarlanmayacağını belirlemek için ayarlandığında uygulanır. Geçerli değerler:

• tekrar et. - Görüntü dikey ve yatay olarak tekrarlanır;
• tekrar-x. - Görüntü sadece yatay olarak tekrarlanır;
• tekrar tekrar. - Görüntü yalnızca dikey olarak tekrarlanır;
• tekrar yok. - Görüntü tekrarlanmadı.

Kod böyle yazılmıştır:

p (
arka plan-resim: URL ( resim ile görüntü dosyası) ;
arka Plan Tekrar: Tekrarlanan X
}

Bu paragrafın metni yatay olacak arka plan görüntüsünün üstünde olacaktır.

Arka Plan Eklenti Mülkiyet

Bu özellik, tarayıcıyı belirlemek için uygulanır, sayfanın arka plan görüntüsünü metinle kaydırın ( kaydırma) veya sabit kalın ( sabit).

vücut (
arka plan-resim: URL ( resim ile görüntü dosyası) ;
background-yineleme: tekrar-x;
arka plan eki: Sabit
}

Bu durumda, arka plan görüntüsü hareketsiz kalacaktır.

Arka Plan Konum Özellikleri

Bu özellik, görüntü akrabanını bulmak için kullanılır. Değerler, uzunlukta (cm, px) uzunluklarında, anahtar kelimeler:

• Dikey olarak:
• Üst. - Görüntünün üst kısmı, sayfanın üst kenarında veya bloğun üst kenarında hizalanır;
• merkez
• alt - Görüntünün alt kısmı, sayfanın alt kenarında veya bloğun alt kenarında hizalanır.
• Yatay olarak:
• ayrıldı. - Görüntünün sol kenarı, sayfanın sol kenarına veya bloğun sol kenarına hizalanır;
• merkez - Görüntünün merkezi, sayfanın ortasına veya bloğun merkezinde tesviye edilir;
• sağ - Görüntünün sağ kenarı, sayfanın sağ kenarında veya bloğun üzerine seviyelendirilir.

Bir örnek kodu yüzde, uzunluk birimleri ve anahtar kelimeler yazıyoruz:

vücut (
arka plan-resim: URL ( resim ile görüntü dosyası) ;
arka plan-pozisyon: 0% 0%
}

Vücut (
arka plan-resim: URL ( resim ile görüntü dosyası) ;
arka Plan-Pozisyon: 10px 25cm
}

Vücut (
arka plan-resim: URL ( resim ile görüntü dosyası) ;
arka Plan-Pozisyon: En İyi Merkez
}

Arka plan rengini ayarlayın ve / veya bir sayfa için bir resim veya ayrı bir öğe yeterince basittir. Asıl şey, nerede ve nasıl yapılabileceğinin yanı sıra bir renk kodu ve / veya bir arka plan resminin bulunduğunu bilmektir. Bu yazıdan çok fazla yeni şey öğreneceksiniz, ancak özellikle yeni başlayanlar için yarattım. Bu nedenle, her şey mümkün olduğunca kısa ve aynı anda ayrıntılı olarak olacaktır. Asıl şey, yalnızca genel sunumu ve hazır örneklere değil, aynı zamanda HTML'de bir arka plan yapmayı da anlamanızdır.

HTML'deki arka planı ayarlamak için ara doctype kullanın

Ve ben gerçeği ile başlayacağım Html5. Sorma fırsatı yok. Bu özellik CSS'de dayanmaya karar verildi. Bu nedenle, aşağıda kullanmayı planlıyorsanız ve geçerli (doğru) bir kod elde etmek istiyorsanız, geçişin geçiş türünde kalmanız gerekir. Bunu yapmak için, web sayfanız aşağıdaki satırla başlamalıdır:

Geçiş// tr "" http://www.w3.org/tr/html4/loose.dtd "\u003e

Bunu çözdüyseniz, geçmişin nasıl oluşturulduğunu anlamalıyım. Ve buradaki ilk şey not edilmelidir - bu arasındaki farktır arka plan rengi ve arkaplan resmi. Başlangıçta gider arka plan rengihangisi mevcut tüm sayfa alanını veya elemanını taşır. Üst üste tekrarlanan arkaplan resmi. Görsel olarak, bu aşağıdaki gibi tasvir edilebilir:

HTML belgesinin ve elemanlarının arka planı

Bilmeniz gereken ikinci şey arasındaki fark belgenin gövdesi ve belgenin elemanı. Belgenin gövdesi Web sayfasının tüm içeriğini içeren, vücut etiketinin Web sayfasının HTML kodunda belirtilmiştir. Açıkçası, belgenin belgesinin arka planı şeffaf olamaz. Belgenin vücudunun arka planı belirtilmemişse, tarayıcı ayarlarında belirtilen varsayılan değer kullanılır.

Sayfa Öğeleri vücut etiketinin içinde. Belgenin tüm öğelerine HTML kullanarak rengi ve / veya arka plan resmi ayarlayabilmeniz dikkat çekicidir. Örneğin, arka plan resmi yalnızca tablolar için belirtilebilir. Varsayılan olarak, genellikle şeffaf bir arka plana sahiptir.

Arka plan rengini oluşturmak için bgcolor öznitelik

Sormak için arka plan rengi Belge veya elemanları BGColor niteliği tarafından kullanılır, örneğin:

Bu durumda, arka plan rengini bir bütün olarak ayarladık. Ancak tablo etiketinde tablo için arka plan renginin nasıl ayarlanacağına bir örnek:

Tablodaki arka plan renginin TR etiketindeki satırlar için ve TD etiketindeki hücreleri için de belirtilebileceği dikkat çekicidir.

Renk kodunu nasıl öğrenirsiniz?

Muhtemelen zaten HTML'deki rengin özel olarak ayarlandığını fark ettiniz mi? koduÖrneğin: # EC008C. Kodu bulmak için grafik editörlerinden birini kullanabilirsiniz. Örneğin, Photoshop'ta kullanabilirsiniz " Göz damlası aleti."(Pipette) resimdeki bir noktadan bir renk elde etmek için. Ardından, araç çubuğundaki ve açılan pencerede ortaya çıkan renge tıklamanız gerekir " Renk seçici"(Renk'i seçin) Renk kodunu kopyalayın.

Dikkatinizi bu kodun başında bir kafes işareti (#) olmadan olacağı gerçeğine çekiyorum, bu işaretin manuel olarak eklenmesi gerekecektir.

Ayrıca çok sayıda kullanabilirsiniz Çevrimiçi hizmetler, Örneğin:

• vb.

Çalışma ilkeleri daha kolaydır - istediğiniz rengi tıklatın ve kodu alın.

Bir arka plan resmi oluşturmak için arka plan öznitelik

Yanı sıra arka plan rengi ve durumunda ve durumunda arkaplan resmiÖrneğin, yani arka plan, yani özel bir özellik kullanmanız gerekir:

Bu durumda, sayfa için arka plan resmini bir bütün olarak soruyoruz. Resimin boyutunun sınırlamaları nedeniyle, örneğin tekrarlanacağı dikkat çekicidir.

Gördüğünüz gibi, tekrarlama, resimler arasındaki geçiş fark edilir. Bu nedenle, bu anın dikkate alındığı özel resimler kullanılır.

Ancak tablo etiketinde bir tablo için bir arka plan resmi nasıl ayarlanacağına bir örnek:

Arka plan resminin yalnızca tablo için bir bütün olarak ve / veya ayrı hücresini ayarlayabileceği dikkat çekicidir. Bir dize için çalışmaz.

Arka plan resmine mutlak ve göreceli yol

Ayrı ayrı dikkat etmeye değer adres arka plan resmi. Bu durumda, resmin göreceli yolu kullanılır, yani. Adres, Görüntü dosyasının konumunda web sayfası dosyasına gösterilir. Bu seçenek özellikle başarılı olarak adlandırılamaz. Resmin mutlak yolunu kullanmak en iyisidir, yani. tam URL'si, Örneğin:

Bu durumda, eşlik eden sorunlara sahip olmayacaksınız. Bu konuda daha fazla bilgi için okuyabilirsiniz.

Özetleyelim

Öznitelikleri kullanmak bgcolor ve arka plan ahlaki olarak modası geçmiştir, çünkü HTML kodunun geçerliliği için Geçiş Doctype'ı kullanmak zorunda kalacaksınız. Arka plan rengini HTML'de ayarlamak için, bir grafik düzenleyicide öğrenebileceğiniz veya özel çevrimiçi hizmetleri kullanarak özel kodları kullanır. Arkaplan resmi, ayrılan alanın kuyruklarında çoğaltılır ve arka plan renginin üstüne yatar. Bir arka plan resmi belirlemek için, tam URL'sini kullanmak daha iyidir. Bunda her şeyim var. Dikkatiniz için teşekkürler. İyi şanslar!

Yeni bir şey öğrenmek ve yeni bir şey öğrenmek için herkese iyi günler! Hiç dikkat ettin mi görünüm Hangi yaratıcıların sayfalarının bir arka planını vermek için tembel olduğunu geliştirmek? Ve döndüm. Katliam görünüyor. Genellikle arasındaki normal ayrılıkların olmaması nedeniyle farklı türler Karışık olduğu ve basitçe bu tür bir web kaynağına daha fazla bakmak için arzuyu ortadan kaybolur.

Böylece böyle bir sorun olmadı, konuyla ilgili bir makale yazmaya karar verdim: "HTML'deki sayfaların bir arka planı nasıl yapılır". Yayını okuduktan sonra, arka plan tasarımını, arka plan tasarımı nasıl ayarlayabileceğinizi, bir arka planın nasıl yapabileceğinizi veya çok daha fazlasını yapabileceğinizi öğreneceksiniz, bu, web sitenizi çekici kılmaya yardımcı olacaktır. Şimdi başlayalım!

Arka plan web sayfalarını ayarlamak için temel araçlar

Arka plan görüntüsünü ayarlamak için, Web-dil geliştiricileri bir özellik arka planı sağladı. Hem CSS'de hem de CSS'de mevcuttur.

İşaretleme dilinde, bu, vücut etiketinin bir niteliğidir ve stil tablolarında - aynı anda arka planın özelliklerini 5'e kadar ayarlamanıza izin veren bir evrensel özelliktir. Arka plan, arka planı renk, renkli resim veya hatta animasyon olarak görev yapmak için kullanılabilecek oldukça esnek bir unsurdur.

Böylece, bir HTML birimi aracılığıyla bir arka plan görüntüsü kurmak için Bu kodu yazacak kadar: ... Ve "Dosya Adresi" kelimeleri yerine resmin yolunu ekleyin.

Ancak, bildirim! Renk paletinden belirtilen bir Monochon tuvalini görmek istediğiniz arka plan formundaysanız, bu, bgcolor niteliği kullanılarak yapılır.

Örneğin, ...Sitemiz için siyah bir arka plan sorduk.

CSS ve HTML'deki renkler, İngilizce bir kelime (örneğin, kırmızı) veya bir işaret # ve sonra altı karakterden oluşan özel bir kod (örneğin # FFDAB9) ayarlanır.

Özel olarak ikinci bir seçenek yazarken yazılım Ürünler Geliştiriciler için palet otomatik olarak önünüzde görünecektir. Bu web dillerini öğrenmeye yeni başladıysanız, renk kodu internette durdurulabilir.

Basamaklı stil masalarında mülk olarak arka plan

Ayarlanmış veya içinde ayrı dosya dan css stilleriveya öğünde