CSS, web sayfalarının görünümünü tanımlayan bir dil olan basamaklı bir stil sayfasıdır. CSS'nin ana avantajlarından biri, tablo düzenini blok düzeniyle değiştirme yeteneğidir.
Bu gerekli
HTML kodu düzenleyicisi
Talimatlar
Aşama 1
İlk bloğu oluşturun. HTML biçiminde, 'block01' kimliğine sahip bir div etiketi gibi görünecektir. Burada, block01 tanımlayıcısı, CSS açıklamasında, bu bloğun tüm özelliklerinin #block01 seçicisi için belirtildiğini belirtir.
Adım 2
Bloğu CSS'de tanımlayın. CSS stillerinde, tanımlayıcının adını (# block01) belirtin ve küme parantezleri içinde parametrelerini açıklayın - genişlik, konumlandırma, ofset, arka plan rengi, vb. Örneğin, şöyle görünebilir: # block01 {width: 150px; yükseklik: 150 piksel; pozisyon: mutlak; üst: 0 piksel; sol: 0 piksel; arka plan rengi: pembe}. Bu açıklama, kutunun 150 piksel uzunluğunda ve 150 piksel genişliğinde olacağını, belgenin sol üst köşesine sabit bir şekilde yerleştirileceğini ve arka planının pembe renkli olacağını varsayar.
Aşama 3
Bloğuna göreli bir konumlandırma verin. CSS açıklamasında mutlak değil, göreceli konumlandırma kullanırsanız, blokları bir koordinat ızgarasına katı bir yakalama ile değil, halihazırda var olan diğer bloklara göre yerleştirebilirsiniz. Bunu yapmak için kod konumunu değiştirin: mutlak; üst: 0 piksel; sol: 0px pozisyona göre: göreceli; üst: 200 piksel; sol: 100 piksel.
4. Adım
Bloğu bir yuvarlama verin. CSS'de border-radius ifadesi bundan sorumludur. Aşağıdaki kodu stil sayfanıza ekleyin: border-radius: 8px. Blok şimdi yuvarlatılmış köşelere sahip olacak. Yalnızca bazı köşeleri yuvarlamak istiyorsanız, yarıçapı her biri için ayrı ayrı tanımlayın: border-radius: 8px 8px 0px 0px.
Adım 5
Blok bir vuruş verin. Bir bloğun ana hatlarını ince bir çizgiyle vurgulamak için CSS açıklamasına şu kodu ekleyin: border-top: 1px kesikli siyah. Bu talimat, bloğun kenarlığının siyah olacağı ve bir piksel kalınlığında olacağı anlamına gelir. Bu durumda, kontur çizgisinin kendisi kesikli çizgi (kesikli - noktalı çizgi, noktalı - noktalar, düz - düz çizgi) olarak görüntülenecektir.
6. Adım
Kalan blok özelliklerini ayarlayın. Blok içindeki metin için hangi yazı tipinin kullanılması gerektiğini, yazı tipi boyutunun, hizalamanın ve bloğun kenarlarından girintilerin ne olması gerektiğini CSS açıklamasında belirtin. Bu özellikler yazı tipi ailesi, yazı tipi boyutu, metin hizalama ve dolgu tanımlarında açıklanmıştır.
7. Adım
Float özelliğini, bir bloğun diğerine göre akışını özelleştirmek için kullanabilirsiniz. "Sola" ayarlarsanız, öğelerin geri kalanı soldaki bloğun etrafında ve sağda "sağ" - akacaktır. Float değerini “yok” olarak ayarlarsanız blok hizalaması yapılmayacaktır. CSS'deki clear özelliği, bloğun sağa, sola veya her iki tarafa akmasını engeller ve float ifadesini geçersiz kılar.
