CSS

`margin: auto;` ifadesi, bir elementi yatayda ortalamak için kullanılır. Bu kullanım, genellikle sayfa tasarımlarında sitenin genelini tarayıcının tam ortasına getirmek için tercih edilir.

CSS kullanarak buton üzerine gelindiğinde yazının değişmesi için `:hover` pseudo-sınıfı kullanılabilir. Örnek bir kullanım: ```css .button { transition: background-color 0.3s ease; } .button:hover { background-color: #2ecc71; } ``` Bu kodda, buton üzerine gelindiğinde arka plan renginin değişmesi için bir geçiş efekti tanımlanmıştır.

Bir web sitesinin temel yapısı şu unsurlardan oluşur: 1. Başlık (Header): Web sitesinin üst kısmı olup, logo, menüler, arama çubuğu ve sıkça kullanılan çağrı-yanıt butonlarını içerir. 2. Altbilgi (Footer): Web sitesinin alt kısmı olup, ikincil bir menü görevi görür ve hukuki bilgiler, gizlilik politikası, iletişim bilgileri gibi bağlantıları içerir. 3. Kenar Çubuğu (Sidebar): Sayfanın sol veya sağ tarafında yer alır ve CTA'lar, sosyal akışlar, son blog yazıları, e-posta abonelikleri gibi öğeleri içerebilir. 4. Menü (Navigation): Ziyaretçilerin farklı web sitesi bölümlerini ziyaret etmeleri için gereklidir ve başlıktan erişilebilir olmalıdır. 5. Sosyal Paylaşım Butonları: Ziyaretçilerin içeriği sosyal medyada paylaşmalarını sağlar. 6. Temel Web Sitesi Sayfaları: Ana sayfa, açılış sayfası, hakkımızda, iletişim, blog gibi sayfalardan oluşur. Ayrıca, HTML, CSS ve JavaScript gibi web geliştirme teknolojileri de web sitesinin yapısını ve işlevselliğini oluşturur.

CSS `display` özelliği, HTML elementlerinin nasıl görüntüleneceğini belirlemek için kullanılır. Bu özellik şu şekilde kullanılır: 1. Değerler: `display` özelliğine verilebilecek değerler şunlardır: - block: Eleman, sayfada bir blok alanı kaplar ve altındaki elemanları bir sonraki satıra iter. - inline: Eleman, yalnızca içeriği kadar yer kaplar. - inline-block: Hem içerik kadar yer kaplar hem de genişlik ve yükseklik gibi özellikler uygulanabilir. - none: Elemanı sayfada gizler. 2. Kullanım: Bir elementin `display` özelliğini değiştirmek için CSS kodu şu şekilde yazılır: ```css element { display: değer; } ``` Örnek: `li` elementini satır içi (inline) yapmak için: `li { display: inline; }`.

CSS'de öğeleri alt alta getirmek için float özelliğini kullanabilirsiniz. Bunun için, float: left komutunu kullanarak div etiketlerini yan yana hizalayın. Ayrıca, display özelliğini de kullanarak öğeleri alt alta getirebilirsiniz.

Web sitesi arka plan kodu, HTML etiketlerinin içine yazılır. Örnek kullanımlar: - Tüm sayfanın arka planı için: `body { background-color: blue; }`. - Bir paragrafın arka planı için: `<p style="background-color: #FFFF00;">`. Ayrıca, arka plan resmi eklemek için `background-image` özelliği ve diğer arka plan ayarlarını yapmak için `background-repeat`, `background-attachment` gibi diğer CSS özellikleri de kullanılabilir.

CSS kullanarak belirli bir yazıyı öne çıkarmak için aşağıdaki yöntemleri kullanabilirsiniz: 1. Yazı Rengi: `color` özelliği ile yazının rengini değiştirebilirsiniz. 2. Yazı Hizalama: `text-align` özelliği ile yazıyı yatay yönde hizalayabilirsiniz. 3. Yazı Dekorasyonu: `text-decoration` özelliği ile yazının altını, üstünü veya üzerini çizebilirsiniz. 4. Yazı Biçimlendirme: `text-transform` özelliği ile yazıyı büyük veya küçük harfe çevirebilir ya da her kelimenin ilk harfini büyük yapabilirsiniz. 5. Karakter Aralığı: `letter-spacing` özelliği ile harfler arasındaki boşluğu ayarlayabilirsiniz.

T-Soft'ta CSS kodları, v5 tema kütüphanesinde yer almaktadır.

CSS'de iki sınıfı birleştirmek için, sınıf adlarını boşluk ile ayırarak aynı HTML öğesine atamak gerekir: ```html <div class="sosyal first"></div> ``` Bu durumda, CSS dosyasında sınıflara ayrı ayrı referans vermek için aşağıdaki gibi bir kullanım mümkündür: ```css .sosyal.first { / Stil tanımları / } ```

CSS kullanarak input alanlarını şekillendirmek için aşağıdaki yöntemler kullanılabilir: 1. Temel Stiller: Input alanına genişlik, padding, margin ve border gibi temel stil özellikleri eklenebilir. Örneğin: ```css input { padding: 10px; border: 2px solid #ccc; border-radius: 5px; font-size: 16px; } ```. 2. Placeholder Styling: Placeholder metninin rengi ve stili değiştirilebilir. Örneğin: ```css input::placeholder { color: #aaa; font-style: italic; } ```. 3. İkon Ekleme: Input alanına arka plan resmi veya inline SVG kullanarak ikon eklenebilir. Örneğin: ```css .search-input { background-image: url('search-icon.png'); background-repeat: no-repeat; background-position: 10px center; padding-left: 30px; } ```. 4. Animasyonlar: Input alanının border rengini animasyona uğratmak mümkündür. Örneğin: ```css input { transition: border-color 0.4s ease; } input:focus { border-color: #28a745; } ```. 5. Responsive Tasarım: Input alanlarının farklı ekran boyutlarına uyum sağlaması için relative units veya viewport birimleri kullanılabilir. Örneğin: ```css input { width: 100%; max-width: 400px; box-sizing: border-box; } ```.

CSS hazır şablonları aşağıdaki platformlarda bulabilirsiniz: 1. TemplatesJungle: Çeşitli kategorilerdeki ücretsiz HTML ve CSS şablonlarını sunar. 2. Template0: 800'den fazla ücretsiz web şablonu içeren geniş bir koleksiyona sahiptir. 3. Jotform: Ücretsiz CSS form şablonları ve diğer web şablonları sunar. 4. TOOCSS: Gaming, seyahat, eğitim gibi farklı alanlarda ücretsiz CSS şablonları sağlar. 5. Nicepage: 15.000'den fazla ücretsiz CSS şablonu içeren bir koleksiyona sahiptir.

CSS'te beş ana seçici çeşidi bulunmaktadır: 1. Basit seçiciler. 2. Birleştirici seçiciler. 3. Sözde sınıf seçiciler. 4. Sözde öğe seçicileri. 5. Öznitelik seçiciler.

Evet, HTML ile CSS aynı dosyada kullanılabilir. CSS, HTML dosyasına üç farklı şekilde eklenir: 1. Harici (External) CSS: CSS kodları, .css uzantılı ayrı bir dosyada tutulur ve HTML sayfasına `<link>` etiketi ile bağlanır. 2. Dahili (Internal) CSS: CSS kodları, HTML dosyasının `<head>` bölümü içinde `<style>` etiketi ile tanımlanır. 3. Satır içi (Inline) CSS: CSS stilleri, HTML etiketlerinin `style` parametresi içinde tanımlanır ve tek bir element için geçerlidir.

Bold kodu, HTML'de metni kalın yapmak için kullanılan iki ana yöntemle ilişkilidir: CSS `font-weight` özelliği ve `<b>` etiketi. CSS `font-weight` özelliği ile metni kalın yapmak için `font-weight: bold;` kodu kullanılır. `<b>` etiketi ise metnin stilistik olarak normal yazıdan farklı olduğunu belirtmek için kullanılır, ancak ona ekstra bir önem katmaz.

Margin, bir HTML öğesinin dış tarafındaki boşluğu ayarlamak için kullanılan bir CSS özelliğidir. Margin değeri dört farklı şekilde verilebilir: 1. auto: Tarayıcı, etiketin kenar boşluklarını otomatik olarak belirler. 2. length: px, pt, cm gibi bir uzunluk değeri verilir. 3. %: İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verilir. 4. inherit: Ebeveyn etiketin margin değerini miras alır. Ayrıca, margin özelliği tek tek kenarlara (top, right, bottom, left) ayrı ayrı uygulanabilir.

CSS kullanarak navbar yapımı için aşağıdaki adımları izlemek gerekmektedir: 1. HTML Yapısı: Navbar için `<nav>` etiketi kullanılır ve bu etiket içinde `<ul>` (unordered list) ve `<li>` (list item) etiketleri ile ana menü öğeleri tanımlanır. ```html <nav> <ul> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Hizmetler</a></li> </ul> </nav> ``` 2. CSS Stillemesi: Navbar'ın görünümünü özelleştirmek için CSS kullanılır. Arka plan rengi, metin stili, hizalama, geçiş efektleri gibi özellikler CSS ile belirlenir. ```css nav { background-color: #f2f2f2; } ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 10px; } a { text-decoration: none; color: #333; } a:hover { color: #666; } ``` 3. Hover Efektleri: Navbar öğelerinin üzerine gelindiğinde metin rengini veya arka plan rengini değiştirmek için `:hover` pseudo-sınıfı kullanılır. 4. Responsive Tasarım: Navbar'ın farklı ekran boyutlarına uyum sağlaması için CSS media queries kullanılarak düzen ve tasarım ayarlanabilir.

WOFF2, CSS'de web yazı tipi formatı olarak kullanılır. WOFF2 dosyaları, modern tarayıcıların büyük bir kısmı tarafından desteklenir ve WOFF formatına göre daha iyi sıkıştırma ve daha küçük dosya boyutları sunar. CSS'de WOFF2 yazı tiplerini kullanmak için, `@font-face` kuralı ile yazı tipini tanımlamak ve `src` özelliği ile kaynağını belirtmek gerekir: ```css @font-face { font-family: 'YourFontName'; src: url('path/to/your-font.woff2') format('woff2'); } ```

Arama kutusu için kullanılabilecek bazı CSS özellikleri şunlardır: 1. Form ve Input Stili: Arama kutusunun genel stilini belirlemek için `form` ve `input` etiketlerine CSS uygulanabilir. 2. Icon Ekleme: Arama simgesini (örneğin, büyüteç) arama kutusuna eklemek için `svg` kullanılabilir. 3. Animasyonlar ve Geçiş Efektleri: Arama kutusunun genişleyip daralması veya ikonunun değişmesi gibi animasyonlar için CSS3 geçiş efektleri kullanılabilir. 4. Erişilebilirlik: Arama kutusunun ekran okuyucular tarafından erişilebilir olması için `role` ve `aria-label` gibi attributes eklenmelidir.

Swiper slider'ı sabitlemek için aşağıdaki yöntemler kullanılabilir: 1. Veri Attributları: Swiper slider'ın yüksekliğini sabitlemek için `data-height` attributunu kullanabilirsiniz. 2. JavaScript Ayarları: Slider'ın autoplay özelliğini devre dışı bırakarak (`autoplay: false`) otomatik geçişlerin olmasını engelleyebilirsiniz. 3. HTML Yapısı: Slider'ın HTML yapısında, `position: relative;` ve `width: 100%; height: 100%;` gibi CSS stillerini kullanarak slideri sabit bir konuma yerleştirebilirsiniz.

CSS (Cascading Style Sheets) ve SCSS (Sassy CSS) arasındaki temel farklar şunlardır: 1. Sözdizimi: CSS, noktalı virgül ve süslü parantezlerle belirlenen bir sözdizimine sahiptir. 2. Değişkenler: CSS, değişkenleri doğrudan desteklemez. 3. Nesting (İç İçe Geçme): CSS'te seçiciler ayrı satırlarda belirtilir, iç içe geçme desteklenmez. 4. Mixinler ve Extend: SCSS, mixinler ve extend gibi yeniden kullanılabilir kod bloklarını destekler. 5. Dosya Uzantısı: CSS dosyaları .css, SCSS dosyaları ise .scss uzantısına sahiptir. 6. Derleme: SCSS kodu, tarayıcı tarafından doğrudan yorumlanamaz ve önce CSS'e derlenmesi gerekir.