HTML & CSS | Hap Bilgiler

22-10-2022, 01:44:46

#1

thealiyasar
Bu konu altında HTML ve CSS özelinde hap bilgiler paylaşılmaktadır. Eklenmesini istediğiniz hap bilgileri konuya mesaj olacak yazarsanız ana post'a ekenme yapılacaktır.
Başnot : fırsat buldukça güncellenecektir...

<section> & <article>

HTML5 ile kullanmaya başladığımız bazı etiketlerden <section> ve <article> etiketlerini kullanırken bu etiketler içerisinde mutlaka h2 - h6 arasında başlık bulundurmanız gerekmektedir. Section bölüm Article ise bir makale olarak algılandığı için validate bu etiketlerin içerisinde başlık etiketleri aramaktadır.

<meta name="viewport"

Boyutlandırma ve responsive yapı için kullandığımız viewport meta etiketinde bulunan content kısmında kullanıcıyı sınırlayıcı özellik eklemekten kaçınmalısınız. Validate bu sınırlandırmayı yaptığınızda sizlere uyarı verecektir. Emmet eklentilerinin oluşturduğu meta etiketleri bu sorunun ortaya çıkmasında önemli etken göstermektedir. Aşağıda emmet ile oluşturulan bir meta viewport ve bootstrap'ın tercih ettiği ve doğru olan kullanımı göreceksiniz.
Emmet : <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Boostrap : <meta name="viewport" content="width=device-width, initial-scale=1">

Başlık Kullanımı <h1> - <h6>

Çoğu şehir efsanesi gibi gözüksede bu kullanımın bir kuralı olduğu gerçektir. Başlık kullanımı kendisinden de anlaşılacağı gibi küçükten büyüğe doğru kullanılmalıdır. Burada bilmeniz gereken en önemli husus HTML başlık etiketlerinde sayı ne kadar küçükse önem bir o kadar büyüktür. Oluşturduğunuz şablonlarda önce <h1> etiketi ile başlamalısınız ve bu etiket sayfada sadece bir adet olmalıdır.

:root nedir?
CSS3 ile hayatımıza giren bu selector ( seçiçi ) yazılım dillerinde bulunan değişken nerdeyse aynı işlevdedir. Daha sonra değiştirmeniz gerektiğini düşündüğünüz yada projenizde sabit kullandığınız renkleri, yazı tipleri vb özellikleri bu selector altında tanımlayıp kullanabilirsiniz.
Örnek :

:root { --black-color: #000; --primary-font: 'Poppins', sans-serif; } h1{ color: var(--black-color); font-family: var(--primary-font); }
<h1>Bir Bir Örnek Başlık </h1>
CSS background özelliği
background özellliği css özelliklerinde bir kısaltma özelliğidir. Bu özellik ile aşağıdaki listenin tamamını tek satırda halletme imkanınız vardır. Fazla fantezi yapmayın

background-color

background-image

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

Örnek :

body { background: lightblue url("resim.jpg") no-repeat fixed center; }
CSS :is() nedir?
Çoğu yerde bu kullanımı göremezsiniz. Ama bir kere kullandıktan sonrada vazgeçemezsiniz . Bunun amacı kuralı kısaltma işlemine yarar.

.inner-text p, .inner-text span, .inner-text strong, .inner-text b{ font-size : 16px; } .inner-text :is(p, span, strong, b){ font-size : 16px; }
ealgan adlı üyeden alıntı: mesajı görüntüle
calc ile hesaplama yapabilirsiniz. mesela:

section { width: calc(100% - 200px); }
mesela aside 200px olsun, ana gövdeye de bu genişliği tanımlayabilirsiniz.

genişliğe göre css: mesela ekran genişliği 600px altına düştüğünde uygulanacak cssler buraya yazılır. side bara ve ana tutucuya width:100% verilir ve mobil uyum sağlanmış olur:

@media only screen and (max-width: 600px) { aside,section{ width:100%; } }
aside tag kullanımı: aside sidebar oluyor. section içerisinde aside tagı olabileceği gibi section dışında da (main vs.) olur. yani alanlar için ayrı ayrı aside kullanabilirsiniz.

+ selector'ı kendinden sonraki ilk elementi seçer. örnek:

<section></section> <aside></aside> <----- hedef <aside></aside>
section + aside {...}
örnek tooltip:

<div></div> <span></span>
div span{ display:none; } div:hover span{ display:block; }
position olayları: position fixed ekrana sabit atar yani siz ne kadar scrool yapıp farklı yere gitmeye çalışsanızda ekranınızda görmeye devam edersiniz
position absolute tepesindeki en yakında position relative bulunan element içerisinde fixed görevi görür.
22-10-2022, 01:46:58

#2

MuratCENGEL

Takipte kalalım teşekkürler paylaşım için
22-10-2022, 03:57:35

#3

ealgan
birkaç tane de ben vereyim:

calc ile hesaplama yapabilirsiniz. mesela:
```
section  { width:(100% - 200px); }
```
mesela aside 200px olsun, ana gövdeye de bu genişliği tanımlayabilirsiniz.

genişliğe göre css: mesela ekran genişliği 600px altına düştüğünde uygulanacak cssler buraya yazılır. side bara ve ana tutucuya width:100% verilir ve mobil uyum sağlanmış olur:
```
@media only screen and (max-width: 600px) {
aside,section{
width:100%;
}
}
```
aside tag kullanımı: aside sidebar oluyor. section içerisinde aside tagı olabileceği gibi section dışında da (main vs.) olur. yani alanlar için ayrı ayrı aside kullanabilirsiniz.

+ selector'ı kendinden sonraki ilk elementi seçer. örnek:
```
<section></section>
<aside></aside> <----- hedef
<aside></aside>
```
```
section + aside {...}
```
örnek tooltip:
```
<div></div>
<span></span>
```
```
div + span{
display:none;
}
div:hover + span{
display:block;
}
```
position olayları: position fixed ekrana sabit atar yani siz ne kadar scrool yapıp farklı yere gitmeye çalışsanızda ekranınızda görmeye devam edersiniz
position absolute tepesindeki en yakında position relative bulunan element içerisinde fixed görevi görür.
23-10-2022, 20:59:17

#4

thealiyasar
CSS :is() nedir?
Çoğu yerde bu kullanımı göremezsiniz. Ama bir kere kullandıktan sonrada vazgeçemezsiniz . Bunun amacı kuralı kısaltma işlemine yarar.
```
.inner-text p, .inner-text span, .inner-text  strong, .inner-text b{
font-size : 16px;
}

.inner-text :is(p, span, strong, b){
font-size : 16px;
}
```