CSS Anahat Özellikleri
sınırın dışında - Bir anahat bir elementin etrafında çizilen bir çizgidir. Bu bir eleman yapmak için kullanmak olabilir "stand out" .
CSS outline özellikleri bir taslak tarzı, renk ve genişliğini belirtin.
Bu eleman ince siyah sınır ve 10px geniş ve yeşil bir çift anahat vardır.
CSS Outline
Bir outline unsurlar etrafında çizilen bir çizgi (outside the borders) eleman yapmak "stand out" .
Ancak, outline mülkiyet sınır özelliğinden farklı - outline Bir elemanın boyutlarda bir parçası değildir; elemanın toplam genişliği ve yüksekliği anahat genişliği etkilenmez.
Outline Stili
outline-style mülkiyet anahat stilini belirtir.
outline-style mülkiyet aşağıdaki değerlerden birine sahip olabilir:
-
dotted- noktalı taslak tanımlar -
dashed- kesikli anahat tanımlar -
solid- katı anahat tanımlar -
double- çift anahat tanımlar -
groove- 3D yivli anahat tanımlar. etki anahat renkli değerine bağlıdır -
ridge- 3D çıkıntılı anahat tanımlar. etki anahat renkli değerine bağlıdır -
inset- 3D gömme anahat tanımlar. etki anahat renkli değerine bağlıdır -
outset- 3D outset anahat tanımlar. etki anahat renkli değerine bağlıdır -
none- hayır anahat tanımlar -
hidden- gizli anahat tanımlar
Aşağıdaki örnek önce her etrafında ince siyah kenarlık ayarlar <p> elemanı, o zaman farklı gösterir outline-style değerlerini:
Örnek
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Sonuç:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Kendin dene " Note: sürece aşağıda açıklanan DİĞER CSS anahat özelliklerinin hiçbiri HERHANGİ etkisi olmayacaktır outline-style özelliği ayarlandı!
Dış Çizgi Rengi
outline-color mülkiyet anahat rengini ayarlamak için kullanılır.
renk ile ayarlanabilir:
- adı - gibi bir renk adı belirtmek "red"
- RGB - gibi bir RGB değeri belirtmek " rgb(255,0,0) "
- Hex - gibi bir onaltılık değer belirtmek "#ff0000"
- ters - Renkli bir inversiyonu gerçekleştirir (which ensures that the outline is visible, regardless of color background)
Örnek
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Sonuç:
A colored outline.
Çizgi Genişliği
outline-width mülkiyet anahat genişliğini belirtir.
Genişliği belirli bir boyut olarak ayarlanabilir (in px, pt, cm, em , etc) , ince, orta veya kalın: ya da üç önceden tanımlanmış değerlerden birini kullanarak.
Örnek
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Sonuç:
A thick outline.
A thinner outline.
Outline - Steno mülkiyet
kodunu kısaltmak için, bir mülkte tüm bireysel anahat özelliklerini belirlemek de mümkündür.
outline özelliği şu bireysel anahat özellikleri için kullanılan bir kestirme niteliktir:
-
outline-width -
outline-style(required) -
outline-color
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 »
Tüm CSS Anahat Özellikleri
| özellik | Açıklama |
|---|---|
| outline | tek bildiriminde tüm anahat özelliklerini belirler |
| outline-color | bir taslak rengini belirler |
| outline-offset | Bir elemanın çizgisi ve kenar veya sınırda arasındaki boşluğu belirler |
| outline-style | bir taslak stilini ayarlar |
| outline-width | bir taslak genişliğini ayarlar |