Video: Python Tutorial for Beginners [Full Course] Learn Python for Web Development 2024
John Paul Mueller, Web sitelerine tasarım öğeleri eklemeyi düşündüğünüzde, CSS3 otomatik olarak akla gelir. CSS3'ün özellikleri ve seçicileri, bir web sitesinin sunumunu ve özel efektlerini düzenlemenize ve tanımlamanıza yardımcı olacak pek çok seçenek ve araç sunar. Bu yararlı seçiciler ve mülkleri buradan kontrol edin.
CSS3 Seçicileri
CSS3, bir sayfada hangi öğenin formatlanacağını belirlemek için kullandığınız çok çeşitli seçicilere erişim sağlar. Bir seçici ne biçimlendirileceğini tanımlar; stil onu nasıl biçimlendireceğini tanımlar. Bununla birlikte, seçici aşırı yüke geçmek kolaydır. Çoğu geliştirici, seçici ile ilgili tüm görevleri gerçekleştirmek için etiket ve özellik seçicilerinin bir kombinasyonunu kullanır. Genel seçim metodolojileri sağlayan sık kullanılan etiket seçiciler.
-
Etiket , Etiket : İki etiketi virgülle ayırmak, belgede nerede görünürse seçilsin, her iki etiketin seçilmesi anlamına gelir. Örneğin, p'yi kullanarak div, belgedeki tüm
ve etiketleri seçer.
-
Etiket >> Etiket : İki etiketi büyük bir işaret (>) ile ayırmak tarayıcıya, üst etiketi olarak başka bir etiketi olan bir etiket seçmesini söyler. Örneğin, değerine sahipseniz ve div> p kullanıyorsanız, tarayıcı
etiketini seçecektir.
-
Etiket : İki etiketi boşlukla ayırmak tarayıcıya başka bir etikette görünen bir etiketi seçmesini söyler. Bu seçici, ilk etiketin doğrudan ikinci etiketin hemen öncesinde görünmemesi gerektiğinden büyükten daha büyük bir işareti kullanmaktan farklıdır. Örneğin, değerine sahipseniz ve div> p kullanıyorsanız, tarayıcı bir şey seçmez. Ancak bunun yerine div p kullanırsanız, tarayıcı
etiketini seçecektir.
-
+ Etiket : İki etiketi artı işaretiyle (+) ayırmak, tarayıcıya başka bir etiketin hemen sonrasında görünen bir etiket seçmesini söyler. Örneğin, değerine sahipseniz ve div + p kullanıyorsanız, tarayıcı
etiketini seçecektir.
etiketinin etiket içinde görünmediğine dikkat edin, etiketin ardından görünür.
Etiket
-
~ Etiket : İki etiketi bir tilde (~) ayırmak tarayıcıya, başka bir etiketin ardında görünen her etiketi seçmesini söyler. Örneğin, değerine sahipseniz ve div kullanırsanız, tarayıcı hem
etiketlerini de seçecektir. Bu, div + p'den farklıdır (tarayıcı yalnızca etiketi izleyen ilk
etiketini seçecektir).
: kök
-
: Belgenin kök öğesini seçer. Kök eleman belge türüne bağlıdır. Bu seçici normal olarak XML belgeleriyle birlikte kullanılır, ancak onu herhangi bir belge türü ile potansiyel olarak kullanabilirsiniz. Sadece doğru öğelerin hassas bir şekilde seçilmesini sağlamak için, geliştiriciler genellikle etiket seçiciler yerine nitelik seçiciler kullanır.İşte geliştiricilerin ortak kullandığı özellik seçicileri.
. ClassName
-
: Belirtilen ada sahip bir sınıf öznitelik değeri olan nesneleri seçer. Örneğin,. StdPara, nesne türüne bakılmaksızın class = "StdPara" özniteliğine sahip her nesneyi seçer. #Id
-
: Verilen adla bir id öznitelik değeri olan tüm nesneleri seçer. Örneğin, #ThirdHeader, nesne türüne bakılmaksızın bir id = "ThirdHeader" özniteliğine sahip her nesneyi seçer. : lang (Dil Tanımlayıcı)
-
: Belirtilen dil değerine sahip herhangi bir nesneyi seçer. Örneğin,: lang (en), ingilizce dilini kullanan herhangi bir nesneyi seçer. İşte ortak dil tanımlayıcılarının bir listesi. [
-
Özellik ] : Öznitelik değerinden bağımsız olarak belirli bir özniteliği kullanan tüm nesneleri seçer. Örneğin, [lang] lang özniteliğini kullanan tüm nesneleri seçer. [
-
Özellik = Değer ] : Belirli bir değere sahip bir özniteliğe sahip tüm nesneleri seçer. Değer tam olarak eşleşmelidir. Örneğin, [lang = "en-us"], İngilizce değerli bir dil özelliğine sahip her nesneyi seçer. [
-
Özellik ~ = Değer ] : Belirli bir değeri içeren bir özniteliğe sahip tüm nesneleri seçer. Arama değeri yalnızca değerin bir yerinde bir bütün olarak görünmelidir. Örneğin, [title ~ = "Secondary"] başlık niteliğindeki tüm nesneleri Secondary kelimesini ayrı bir kelime olarak seçer. Bu seçici tüm kelimelerle çalışır. [
-
Özellik | = Değer ] : Belirli bir değerle başlayan bir öznitelike sahip tüm nesneleri seçer. Arama değeri, değerin başında bir bütün olarak görünmelidir, ancak tüm değer olması gerekmez. Örneğin, [title | = "Sub"] başlık özniteliklerine sahip Sub nesnesi ile başlayan tüm nesneleri seçer. Bu seçici, tirelendiği terimlerle çalışır. [
-
Özellik ^ = Değer ] : Belirli bir değerle başlayan bir öznitelike sahip tüm nesneleri seçer. Örneğin, [title | = "Sub"] başlık özniteliklerine sahip Sub nesnesi ile başlayan tüm nesneleri seçer. Seçicinin bu formu, [Attribute | = Value] özniteliğinden daha az kısıtlayıcıdır. Bu formu kullanmak, title = "SubHeader", title = "Sub Header" veya title = "Sub-Header" ı eşit güvenilirlikte seçecektir. [
-
Özellik $ = Değer ] : Belirli bir değerle biten bir öznitelike sahip tüm nesneleri seçer. Örneğin, [title $ = "Secondary"] başlık öznitelikleri olan ve İkincil sözcükle biten tüm nesneleri seçer. Bu özellik biçimi sınırsızdır - özel bir biçimlendirme gerektirmez. [
-
Özellik * = Değer ] : Belirli bir değeri içeren bir özniteliğe sahip tüm nesneleri seçer. Örneğin, [title $ = "Secondary"], Secondary sözcüğünü içeren başlık özniteliklerine sahip tüm nesneleri seçer. Seçicinin bu formu [ Öznitelik ~ = Değer ] özniteliğinden daha kısıtlayıcıdır.Bu formu kullanmak, title = "SecondaryParagraph", title = "Secondary Paragraph" veya title = "Secondary-Paragraph" ı eşit güvenilirlikte seçecektir. Özel bir not () seçici, seçicilerin ortak dizisini tamamlar. Tarayıcıya belirli bir etiket veya nitelik seçmemesini ancak bunun yerine başka herşeyi seçmesini söylemek için: not () seçimini kullanın. Örneğin,: değil (p) sayfadaki paragraf etiketlerinden başka her şeyi seçecektir.
CSS3 Özellikleri
Bazı CSS3 özellikleri nadiren kullanılır; diğerleri çoğu zaman geliştiricilerin bunları bilmeleri için yeterince kullanılır. Özellikler ve bunlarla ilişkili değerler, CSS3 kullanarak gerçekleştirdiğiniz biçimlendirmenin temelini oluşturur. CSS3 ile çalışırken en sık kullandığınız özelliklerin bir listesi:
background: Bir öğenin arka planının içeriğini tanımlar. Bu mülkün değeri çoğunlukla doğrusal gradient () gibi bir işlevdir.
-
background-attachment
-
: Bir görüntünün bir öğenin geri kalan kısmı ile nasıl etkileşime girdiğini belirtir. Bu özelliği yapılandırmak için aşağıdaki anahtar kelimeleri kullanırsınız: kaydırma, sabit ve yerel. background-color
-
: Alttaki sayfa rengi gibi bir öğenin arka plan rengini belirtir. Arka plan rengini tanımlamak için şu tekniklerden birini kullanabilirsiniz: onaltılık değer, renk adı, rgb () işlevi, rgba () işlevi, hsl () işlevi veya hsla () işlevi. background-image
-
: Bir öğenin arka planı için grafik olarak kullanılacak bir kaynak konumunu sağlar. Konumu belirlemek için url () işlevini kullanın. background-repeat
-
: Arka plan resminin tekrarlanmasına veya tekrarlanmasına izin vermez (no-repeat anahtar kelimesini kullanır) gerekirse. Görüntüyü yalnızca yatay (tekrar-x) veya dikey (tekrar-y) yönlerde tekrarlamayı da seçebilirsiniz. background-size
-
: Arka plan görüntüsünün boyutunu mutlak bir değer veya yüzde olarak belirler. border
-
: Aşağıdaki anahtar kelimelerden birini belirterek, oluşturulacak kenarlık türünü tanımlar: yok, gizli, noktalı, kesikli, katı, çift, oluklu, sırtlı, içe geçmiş, başlangıç veya miras. Kenarlık-alt-stil, kenarlık-sol-stil, kenar-sağ-stil ve kenarlık-üst-stil özelliklerini kullanarak kenarlıkların her bir kenarının stilini tek tek değiştirmek de mümkündür. border-color
-
: Bir varlığı çevreleyen sınırın rengini belirtir. Arka plan rengini tanımlamak için şu tekniklerden birini kullanabilirsiniz: onaltılık değer, renk adı, rgb () işlevi, rgba () işlevi, hsl () işlevi veya hsla () işlevi. border-image
-
: Satır türü yerine kenarlık içeriği için kullanılacak görüntüyü tanımlar. Normalde, bu mülkün değerini belirtmek için url () işlevini kullanırsınız. border-radius
-
: Bir kenarlık köşesinin yuvarlak olup olmadığını ve yuvarlama miktarını belirler. Yuvarlak bir köşe oluştururken yuvarlama miktarını belirtirsiniz. Yuvarlatılmış bir köşeyi kaldırmak için none anahtar kelimesini kullanın. border-width
-
: Bir elemanı çevreleyen kenarlığın kalınlığını belirleyin.Kenar genişliğini bir anahtar kelime (orta, kalın veya ince) veya gerçek bir ölçüm kullanarak tanımlayabilirsiniz. column-count
-
: Oluşturulan sütun sayısını belirtir. Kullanıcı tarayıcı penceresini yeniden boyutlandırırken sütunların genişliği otomatik olarak dalgalanıyor (veya tarayıcı, belirli bir genişlik de ayarlandığında sütunların arasında gezinmeyi mümkün kılmak için yatay bir kaydırma çubuğu görüntüler). column-fill
-
: Tarayıcının sütunları nasıl doldurduğunu belirler (aynı anda bir sütunu doldurur veya tüm sütunları aynı miktarda içerikle aynı anda doldurur). column-gap
-
: Bir sütunun bitip başka bir sütunun nerede başladığını belirlemeyi kolaylaştırmak için sütunlar arasında bir boşluk oluşturur. column-rule
-
: Kullanıcılar fiziksel bir ayırıcı görebilmek için sütunlar arasında bir kural oluşturur. Bu özellik renk, stil ve genişlikten oluşur. column-rule-color
-
: Sütunlar arasında kullanılan kuralın rengiyle belirlenir. column-rule-style
-
: Sütunlar arasında kullanılan kuralın stilini belirler. column-rule-width
-
: Sütunlar arasında kullanılan kuralın genişliğini belirler. column-span
-
: Bir nesnenin yayabileceği sütun sayısını belirtir. column-width
-
: Bir sütun genişliğini belirtir. sütun
-
: Hem sütun sayısı hem de sütun genişliği özelliklerini tanımlamak için kısa metot sağlar. color
-
: Metin gibi bir varlığın ön plan rengini belirtir. Rengi tanımlamak için şu tekniklerden birini kullanabilirsiniz: onaltılık değer, renk adı, rgb () işlevi, rgba () işlevi, hsl () işlevi veya hsla () işlevi. content
-
: Eleman sunusunun bir parçası olarak belirtilen metni veya diğer kaynağı çıktılar. Bu özellik genellikle görsel öğelere ok eklenmesi gibi görevleri yerine getirmek için kullanılır. Değeri, url () işlevi, bir Unicode karakter numarası öneki bir ters eğik çizgi (örneğin 27A8) veya bir anahtar kelime kullanarak belirtirsiniz. display
-
: Sayfadaki belirli öğe türlerinin nasıl gösterileceğini belirtir. Satır, satır içi, satır içi tablo, liste öğesi, tablo, tablo benzeri satır içi bloklar, satır içi bloklar, satır içi bloklar, satır içi bloklar, tablo-hücre, tablo-sütun, tablo-sütun-grubu, tablo-altbilgi-grubu, tablo-üstbilgi-grubu, tablo-satırı veya tablo-satır-grubu. float
-
: Bir görüntünün belirtilen yönde yüzmesine izin verir. Bu mülkü aşağıdaki anahtar kelimeler kullanarak tanımlarsınız: sol, sağ veya hiçbiri. font-family
-
: Yazı tipinin adını tanımlar. Üçü genellikle CSS'nin bir parçası olarak kullanılan üç yazı tipi sınıflandırmasıdır (ayrıca src özelliğini belirtmedikçe çoğu CSS sayfası da bu üçünü de kullanır): belirli, güvenli Web ve genel. font-size
-
: Sayfadaki diğer yazı tipleriyle karşılaştırıldığında fontun boyutunu belirler veya belirli bir font boyutu sağlar. Yazı tipi boyutunu tanımlamak için bu tekniklerden birini kullanabilirsiniz: belirli boyut, anahtar kelime (büyük veya daha büyük gibi) ve yüzdesi. font-style
-
: Tarayıcının oluşturduğu yazı tipi stilini belirler.Tarayıcının stili desteklemesi ve fontun bu özelliğin etkili olması için stil sağlamalıdır. Font stili anahtar kelimeleri: normal, italik, oblik (normalde daha kuvvetli bir italik) ve miras. font-variant
-
: Yazı tipinin çeşit olarak sunulup sunulmayacağını belirtir. Bu özelliği, tüm tarayıcılar ve fontlar desteklemez. Bu mülkün anahtar kelimeleri normal, küçük-büyük harflerdir ve devralır. font-weight
-
: Yazı tipinin göreli koyuluğu ve konturlarının genişliğini belirler. Yazı tipi ağırlığını tanımlamak için iki yöntem vardır: sayısal ve anahtar kelime (kalın gibi). yükseklik
-
: Bir öğenin dikey boyutunu belirtir. left
-
: Bir sayfadaki bir öğenin en sol konumunu belirtir. liste biçemi
-
: Bir liste öğesinin görünümünü tanımlar. Kullanılacak işaretçilerin türünü, işaretçilerin konumunu ve işaretçilerin gerçekte standart karakterler yerine görüntüler kullanılarak oluşturulup oluşturulmadığını tanımlayabilirsiniz. margin
-
: Bir öğenin kenarlığı ile başka bir öğenin kenar boşluğu arasındaki boşluk miktarını belirtir. margin-bottom
-
: Bir sayfada bir kenar boşluğunun en alttaki yerini belirtir. margin-left
-
: Bir sayfada bir kenar boşluğunun en soldaki konumunu belirtir. margin-top
-
: Bir sayfada bir kenar boşluğunun en üst konumunu belirtir. doldurma
-
: Bir öğenin kenarlığı ile öğenin içeriği arasındaki boşluk miktarını belirtir. position
-
: Bir sayfadaki öğelerin yerleşimini belirtir. Yerleşimi, statik (öğeler akıyor), mutlak (öğeler belirli bir konumda görünür; bu yerleşim başka bir öğenin üzerine gelecek olsa bile), sabit (öğeler tarayıcı penceresine göreli olarak yerleştirilir) veya göreli (öğeler üst öğelere göre yerleştirilir). text-align
-
: Metnin bir satırdaki konumunu belirtir. Hizalama, haklı, sağ, orta ve sol anahtar kelimeleri kullanarak belirtilir. text-decoration
-
: Yazı karakterine alt çizgi, üst çizgi veya çizgi gibi bir karakteristik eklenmesini tanımlar. Bu özellik her yerde çalışır; bu nedenle sayfanızı bir televizyonda izleyen veya bir akıllı telefon kullanan birinin mesajınızı alıp alamayacağını merak etmenize gerek yoktur. metin-taşması
-
: Metin, onu içeren kutunun taştığında gerçekleşecek eylemi tanımlar. Kabul edilebilir değerler şunlardır: klip, elipsler veya sağladığınız bir dize değeri. text-shadow
-
: Hedef karakterlerin gölgesini hedef karakter ile aynı genişlikte görüntüler. Gölgenin konumu, kuvveti ve rengi aşağıdaki özelliklerle belirlenir: h-gölge (gölgenin yatay konumunu belirler), v-gölge (gölgenin dikey konumunu belirler) bulanıklık (netlik belirtir. gölge metni) ve renk (anahat rengini tanımlar). görünürlük
-
: Bir öğenin görünürlük seviyesini belirtir.Bu özelliği yapılandırmak için aşağıdaki anahtar kelimeleri kullanırsınız: visible, hidden, collapse. genişlik
-
: Bir öğenin yatay boyutunu belirtir. kelime aralığı
-
: CJK olmayan (Çince Japonca Kore dili) dil ile çalışıldığında metnin içerdiği kutuda nasıl sarılacağını belirler. Kabul edilebilir değerler şunlardır: normal, tamamı ve tireleme. word-wrap
-
: CJK olmayan bir dil ile çalışırken metnin nasıl kırıldığını ve sonra bir kutu içindeki bir sonraki satıra sarılabileceğini belirler. Kabul edilebilir değerler şunlardır: normal ve break-word.