h2 { color: lightblue; font-style: italic; text-transform: uppercase; /* tüm karakterleri büyük yaptık */ font-family: "Times New Roman", Times, serif; /* bilgisayarda varsa Times New Roman, o yoksa Times, o da yoksa serif gösterilir */ font-size: 25px; } h1 { background-color: black; color: white; font-family: "Dancing Script", cursive; /* 'Dancing Script' google font içerisinden seçildi. Düzgün çalışması için index.html içine ekleme yapıldı. Diğer sayfalarda yazı tipi cursive oldu */ font-size: 250%; } /* açıklamalar buraya yazılıyor */ /* aktif kullanılmayan ama silmek istemediğimz kodları açıklama haline getirebilriz */ /* bölümleri ayırmak için de kullanılabilir */ /******************bu bölümün sonu ******************************/ /* etikete eklenen her şey içindeki etiketleri de etkiler */ /************ seçiciler için ***************/ .sinif1 { color: red; } .sinif2 { font-weight: bold; } .sinif1.sinif2 { background-color: aquamarine; } .sinif1 .sinif2 { font-style: italic; background-color: rgb(182, 146, 182); } #essiz-element { color: greenyellow; background-color: black; font-family: "Dancing Script", cursive; } [ozellik] { color: blue; } a.link1:hover { color: red; } .color-blue { color: blue; } .fw-bold { font-weight: bold; } .color-blue.fw-bold { font-size: 42px; } /* iki class boşluk olmadan birlikte yazıldğında ikisini beraber alan etikete ilave özellik getirir */ .color-blue .fw-bold { font-size: 42px; } /* iki class boşluk ile birlikte yazıldğında iç içe etiketlerde (örn p>span) ilkine biri ikinciye diğeri yzılırsa ikinciye (iki classı da kapsadığı için) ilave özellik getirir */ li:last-child { color: red; } /* son elemana özellik atar */ li:first-child { font-style: italic; } /* ilk elemana özellik atar */ li:nth-child(2) { font-family: fantasy; } /* parantez içindeki sayıya denk gelen elemana özellik atar */ li:nth-child(3n-2) { color: blue; } /* parantez içindeki formüle denk gelen elemana özellik atar */ h3 > b { color: red; } p::first-letter { font-size: 25px; text-transform: capitalize; } a:hover { font-size: 25px; text-transform: uppercase; /* text-decoration:none; */ } #first-line::first-line { color: red; } #before::before { content: "bunu CSS yazdı - "; color: green; } #after::after { content: " -bunu da CSS yazdı"; color: green; } /************* kutularla çalışmak ******************/ .box { width: 300px; height: 300px; padding: 10px; margin-right: 20px; float: left; /* float= blok olma özelliğini iptal eder ve verilen özellik yönüne kaymayı sağlar */ } .bg-red { background-color: red; } .bg-yellow { background-color: yellow; } .bg-green { background-color: green; } .float-left { float: left; } .clearfix { clear: both; /* clear özellik verilen yönde sayfada başka birşey olmasını engeller */ /* clear:both her iki yöni de boşaltır */ } .container { width: 1000px; /* margin-left: auto; margin-right: auto; */ /* sol ve sağdan otomatik margin vererek container'ı ortalar */ margin: 50px auto 10px auto; /* yukarı:0 sağ:auto aşağı:0 sol:auto */ /* margin 0 auto; yukarı ve aşağı 0 sağ ve sol: auto */ } .left-bar { width: 200px; float: left; border-radius: 10px; } .content { width: 800px; float: left; } .card { width: 25%; /* % içine girdiği hiyerarşinin yüzdesini alır*/ float: left; border: 1px solid; border-color: black; border-radius: 10px; padding: 2%; margin-left: 3%; margin-bottom: 40px; } /***** CSS incele komutu ile örnekleri incelemek *****/ .patika-button { background-color: #444bff; margin: 0px 3vw; color: white; border: 2px solid var#444BFF; width: auto; z-index: 2; cursor: pointer; /* font-family: "Roboto Mono", monospace; */ /* text-align: center; */ padding: 0.4rem 1rem; border-radius: 0px; align-items: center !important; display: flex !important; } .patika-button:hover { background-color: red; /* shadow: CSS shadow generator ile oluşturuldu */ -webkit-box-shadow: 5px 9px 36px 50px rgba(219, 55, 55, 0.78); -moz-box-shadow: 5px 9px 36px 50px rgba(219, 55, 55, 0.78); box-shadow: 5px 9px 36px 50px rgba(219, 55, 55, 0.78); } .patika-img { max-height: 25px; margin-left: 5px; text-align: center; margin: 0px auto; display: block; }