hatırlatma amaçlı
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span><strong> <sub> <sup> <textarea> <time> <tt> <var>
- inherit
- left
- none
- right
- none
- block
- inline-block
- inline
- flex
- grid
- table
- static
- absolute
- relative
- fixed
- sticky
- inherit
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- border: kalınlıkpx tipi rengi
- border-width: inherit,medium,thick,thin,px;
- border-style: dashed|dotted|double|groove|hidden|inherit|inset|none|outset|ridge|solid;
- border-color: color name,hex code,decimal code;
- border-radius: 50%;
- border-top|right|bottom|left-width|style|color|radius:
- box-sizing : border-box (width height'a padding ve border dahil margin dahil değil)
- box-sizing: content-box (width height'a padding ve border dahil değil margin zaten değil)
- font-size: px, %(mevcut sayfa px'inin yüzde katı %200 -> 2 katı), em(mevcut sayfa px'inin katları 0.5em -> yarısı), rem(1 rem = 16px)
- font-family: tarayıcı destekliyorsa ilk font kulanılır, tarayıcı desteklemiyorsa deneyeceği ikinci font, ikinci fontta olmazsa varsayılan seçilecek üçüncü font;
- font-weight: normal|bold|bolder|lighter|number|initial|inherit;
- font-style: normal|italic|oblique|initial|inherit;
- font-variant: normal|small-caps|initial|inherit;
En popüler ikon kütüphaneleri;
- Font Awesome
- icons8
- Flaticon
- Ionicons
- text-decoration: inherit|line-through|none|overline|underline;
- text-indent: (paragraf başı boşluğu) büyüklük değeri alır;
- text-transform: none,capitalize(baş harfler büyük),uppercase(tüm harfler büyük),lowercase(tüm harfler küçük),initial,inherit;
- text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
- text-align: center|left|right|justify; (inline etiketlere etki etmez)
- word-spacing: (kelimeler arası boşluk)
- letter-spacing: (harfler arası boşluk)
- column-count: sayı; (metni kolonlara böler)
- column-rule: 1px solid black; (kolon arasına çizgi eklenebilir)
- line-height: (satırlar arası yükseklik)
- list-style-image: none|url|inherit|initial;
- list-style-position: inside|outside|inherit|initial;
- list-style-type: dics|circle|decimal|lower-alpha|upper-alpha|square|none;
Elementleri ortalamanın bir yolu (Transform ve Translate ile);
İlk önce ebeveyn element'in positionunu relative yap. Sonra çocuk elementin position özelliğini absolute yap yukarıdan ve soldan 50% ver. transform özelliğini translate(-50%, -50%) yap.
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Elementleri ortalamanan diğer bir yolu (Flex ile);
Ebeveyn elementin display özelliğini flex yapıyoruz. justify-content ve align-items özelliklerini ise center yapıyoruz.
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
justify-content: center;
align-items: center;
}box-shadow: yatay,dikey,blur,yayılım;
box-shadow: 10px 20px; yatay 10px dikey 20px
box-shadow: 10px 20px 10px;** yatay 10px dikey 10px blur 10px
box-shadow: 10px 10px 10px 2px; yatay 10px dikey 10px blur 10px yayılım 2px
-
transition: property duration timing-function delay;
-
transition: width 2s (etkin olmasını istediğim özellik kaç saniyede) , height 5s, ... ;
-
transition-property: color (sadece geçiş efektinin uygulanmasını istediğim özellikler - opsiyonel kullanım all);
-
transition-duration: 3s (geçiş efektinin ne kadar süreceği);
-
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int|start|end),cubic-bezier(n,n,n,n)|initial|inherit (estetik geçişler sağlanır);
-
transition-delay: 1s (geçiş efektinin ne kadar zaman sonra başlayacağı);
😇 transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
😇 :nth-child(n){} prop, n = odd -> tek, n = even -> çift
😇 :hover{} prop
😇 background-attachment: fixed;
Genelde kullanılan medya özellikleri: width, height, max-width, min-width, max-height ve min-height
Mantıksal operatörler kullanılabilir: not,and,only
@media screen and (ozellik:deger) {
}Örneğin: Sadece 750px bir genişlikte görüntülenecek tanım
@media screen and (width: 750px) {
}Örneğin: 750px ve altındaki bir genişlikte görüntülenecek tanım
@media screen and (max-width: 750px) {
h1
{
font-size: 14px;
}
}bunun hemen ardına aynı yapıda ama max-width:400px olacak bir tanım daha yaparsak yukarıdaki tanım 750px ve 400px arasında en son yaptığımız tanım ise 400px ve aşağıdaki genişlikte görüntülenir.
@media screen and (max-width: 400px) {
h1
{
font-size: 12px;
}
}yani 750px ve 400px arasındaki genişlike h1 etiketinin font büyüklüğü 14px iken 400px ve altındaki genişliklerde 12px'dir.
Örneğin: 600px ve üstündeki genişlikte görüntülenecek olan tanım
@media screen and (min-width: 600px) {
h1
{
font-size: 14px;
}
}Medya sorgu ifadelerini birleştirerekte tanımlama yapabiliriz
@media screen and (max-width: 1200px) and (min-width: 800px) {
h1
{
font-size: 20px;
}
}örneğin yukarıdaki tanım 800px ve 1200px arasındaki ekranlar için yapılmıştır.
display: flex;
Container Seviyesi varsayılan direction row (react native'de col)
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
İtem Seviyesi
- align-self
- order
- flex-grow: 0
- flex-shrink: 1
- flex-basis: auto