Halimclskn
cssders3
Ders 3: Renkler ve arka
Bu derste size web sitelerine renk ve arka plan renkleri uygulamak öğreneceksiniz. Biz de pozisyona gelişmiş yöntemler bakmak ve arka plan görüntüleri kontrol edecek. Aşağıdaki CSS özellikleri açıklanacaktır:
- renk
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- arka plan
Önalan rengi: color niteliğinin
Renk özelliği bir öğenin ön plan rengini tanımlar.
Örneğin, koyu kırmızı olması, bir belgedeki tüm başlıkları istediğinizi düşünün. Başlıkları, tüm HTML öğesi ile işaretlenmiştir <h1> .Aşağıdaki kodu rengini ayarlar <h1> kırmızı elemanları.
h1 { color: # ff0000; }
Renkler Yukarıdaki örnekte (# ff0000) olarak onaltılı değerler girilebilir veya renkleri ("kırmızı") veya rgb-değerleri (rgb (255,0,0)) isimlerini kullanabilirsiniz.
Background-color niteliği
Background-color özelliği elemanların arka plan rengini tanımlar.
Eleman <body> bir HTML belgesinin tüm içeriğini içerir. Böylece, tüm bir sayfa arka plan rengini değiştirmek için, background-color özelliği uygulanmalıdır <body> elemanı.
Ayrıca, başlıkları ve metin dahil olmak üzere diğer elementlere arka plan renkleri uygulayabilirsiniz. Aşağıdaki örnekte, farklı bir arka plan rengi uygulanır <body> ve <h1> elemanları.
body { background-color: # FFCC66; } h1 { color: # 990000; background-color: # FC9804; }
Biz iki özelliği uygulanan dikkat edin <h1> noktalı virgül onları bölerek.
Arka plan görüntüleri [background-image]
CSS özelliği background-image arka plan görüntüsü eklemek için kullanılır.
Bir arka plan görüntüsünü gösteren bir örnek olarak, aşağıda kelebek kullanabilir. Kendi bilgisayarınızı (resmi sağ tıklatın ve seçin "görüntü olarak kaydetmek") üzerinde kullanabilir böylece görüntü indirebilir, ya da uygun gördüğünüz başka bir görüntü kullanabilirsiniz.
Bir web sayfası için bir arka plan görüntüsü olarak kelebek resmi eklemek için, basitçe background-image özelliğini uygulamak<body> ve görüntünün konumunu belirtin.
body { background-color: # FFCC66; background-image: url ("butterfly.gif"); } h1 { color: # 990000; background-color: # FC9804; }
NB: biz olarak görüntünün belirtilen yere dikkat edin url ("butterfly.gif") . Bu görüntü stil sayfası ile aynı klasörde bulunan anlamına gelir. Ayrıca kullanan diğer klasörlerdeki görüntüleri bakabilirsiniz url ("/ images / butterfly.gif..") ve hatta internet üzerinde dosyanın tam adresini belirten: url (" https://img.webme.com/pic/h/halimclskn/butterfly.gif ") .
Arka plan görüntüsü [background-repeat] tekrarlayın
Yukarıdaki örnekte, tüm ekranı kapsayacak şekilde yatay ve dikey olarak varsayılan kelebek tekrarlanmıştır fark ettiniz mi? Özelliğibackground-repeat bu davranışı kontrol eder.
Aşağıdaki tablo için dört farklı değerleri özetlemektedir background-repeat .
| Değer | Tanım |
|---|---|
| background-repeat: repeat-x | Görüntüyü yatay olarak tekrarlanır |
| background-repeat: repeat-y | Görüntüyü dikey olarak tekrarlanır |
| background-repeat: repeat | Görüntü yatay ve dikey olarak tekrarlanır |
| background-repeat: no-repeat | Görüntü tekrar edilmez |
Örneğin, bir arka plan görüntüsü tekrarını önlemek için kodu aşağıdaki gibi görünmelidir:
body { background-color: # FFCC66; background-image: url ("butterfly.gif"); background-repeat: no-repeat; } h1 { color: # 990000; background-color: # FC9804; }
Kilit arka plan görüntüsü [background-attachment]
Özelliği background-attachment bir arka plan resmi içeren elemanı ile birlikte sabit veya kayar belirtir.
Bir okuyucu sayfa kaydırma zaman kilitsiz bir arka plan resmi web sayfasının metin ile birlikte kaydırma olacaktır ise sabit bir arka plan resmi, metin ile hareket etmeyecektir.
Aşağıdaki tablo için iki farklı değerleri özetlemektedir background-attachment . Kaydırma ve sabit arasındaki farkı görmek için örnekler tıklayın.
| Değer | Tanım |
|---|---|
| Background-attachment: scroll | Kilidi - sayfa görüntü kayar |
| Background-attachment: fixed | Görüntü kilitli |
Örneğin, aşağıdaki kodu arka plan görüntüsü çözecektir.
body { background-color: # FFCC66; background-image: url ("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: # 990000; background-color: # FC9804; }
Yer arka plan görüntüsü [background-position]
Varsayılan olarak, bir arka plan görüntüsü ekranın sol üst köşesinde bir konumda olacaktır. Özelliği background-positionarka plan görüntüsünü her yerde ekranda gibi bu varsayılan ve konumunu değiştirmenizi sağlar.
Değerlerini ayarlamak için çok çeşitli yollar vardır background-position . Ancak, bunların tüm koordinatları bir dizi olarak biçimlendirilir. Örneğin, değeri '100px 200px 'pozisyonları tarayıcı penceresinin üst sol tarafında ve 200px arka plan resmi 100px.
Koordinatları tarayıcı penceresinin yüzdesi, sabit birimler (piksel, santimetre, vb) olarak belirtilebilir veya kelimeleri üst, alt, merkez, sağ ve sol kullanabilirsiniz. Aşağıdaki modeli sistemi göstermektedir:
Aşağıdaki tablo, bazı örnekler verilmektedir.
| Değer | Tanım |
|---|---|
| background-position: 2cm 2cm | Görüntü sayfa aşağı soldan 2 cm ve 2 cm konumlandırılmış |
| background-position: 50% 25% | Görüntü merkezi olarak konumlandırılmış ve sayfa aşağı dörtte biri olduğu |
| background-position: sağ üst | Resim sayfanın sağ üst köşesinde konumlandırılmış |
Sağ alt köşedeki pozisyonları arka plan görüntüsü aşağıdaki kod örneği:
body { background-color: # FFCC66; background-image: url ("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: sağ alt; } h1 { color: # 990000; background-color: # FC9804; }
[Arkaplan] Derleme
Özelliği arka planda bu dersi listelenen tüm arka plan özellikleri için kısa bir eldir.
Ile arka plan birkaç özelliklerini sıkıştırabilir ve böylece daha kolay okunmasını sağlar kısa bir şekilde stil yazmak.
Örneğin, bu beş satır bakalım:
background-color: # FFCC66; background-image: url ("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: sağ alt;
Kullanılarak arka aynı sonucu kodun sadece tek bir hat ile elde edilebilir:
background: # FFCC66 url ("butterfly.gif") sabit sağ alt no-repeat;
Şöyle sipariş listesi:
[background-color] | [background-image] | [background-repeat] | [background-attachment] |[background-position]
Bir özellik dışında bırakılırsa, otomatik olarak varsayılan değer olarak ayarlanır. Örneğin, background-attachment vebackground-position Örneğin dışarı alınır:
background: # FFCC66 url ("butterfly.gif") no-repeat;
Belirtilmeyen bu iki özellik sadece size gidin ve sol üst biliyorum olarak varsayılan değerleri atanabilir.
Özet
Bu derste, zaten HTML kullanarak mümkün olmazdı yeni teknikler öğrendim. Eğlence devam ediyor sonraki derse fontları tanımlamak için CSS kullanırken olanakları geniş inceler.
