En Çok Kullanılan Css Kodları Nelerdir

Font Özellikleri:

  • -font-family: Metinlerin hangi yazı tipi ailesini kullanacağını belirler.
  • -font-size: Metinlerin boyutunu belirler.
  • -font-weight: Metinlerin kalınlığını belirler.
  • -font-style: Metinlerin stilini (normal, italic, vs.) belirler.

Renk ve Arka Plan Özellikleri:

  • -color: Metin rengini belirler.
  • -background-color: Arka plan rengini belirler.
  • -background-image: Arka plan resmini belirler.
  • -background-size: Arka plan resminin boyutunu belirler.
  • -background-position: Arka plan resminin konumunu belirler.

Kenar Boşlukları ve Padding:

  • margin: Bir elementin dış kenar boşluğunu belirler.
  • padding: Bir elementin iç kenar boşluğunu belirler.

Sınıflandırma ve Seçiciler:

  • .class: Belirli bir sınıfa stil atar.
  • #id: Belirli bir id'ye stil atar.
  • element: Belirli bir HTML elementine stil atar.
  • *: Tüm elementlere stil atar.

Pozisyonlandırma Özellikleri:

  • position: Bir elementin pozisyonunu belirler (relative, absolute, fixed gibi).
  • top, bottom, left, right: Pozisyonu ayarlamak için kullanılır.

Box Model Özellikleri:

  • width: Bir elementin genişliğini belirler.
  • height: Bir elementin yüksekliğini belirler.
  • border: Bir elementin sınırını belirler.
  • border-radius: Bir elementin köşe yuvarlaklığını belirler.

Flexbox ve Grid Layout:

  • display: flex;: Esnek düzenler oluşturmak için kullanılır.
  • display: grid;: Grid düzenleri oluşturmak için kullanılır

Responsive Tasarım:

  • @media: Ekran boyutlarına göre farklı stiller uygulamak için kullanılır.

Transition ve Animation:

  • : Elementler arasındaki geçişleri yumuşatmak için kullanılır.
  • animation: Elementlere animasyonlar eklemek için kullanılır.

Saat ve Ölçekleme:

  • transform: Bir elementin dönmesini, ölçeklenmesini veya kaydırılmasını sağlar.
  • rotate, scale, translate: transform özelliği altında kullanılarak elementlerin dönme, ölçekleme ve kaydırma miktarını belirler.

Variable (Değişkenler):

  • --custom-property: value;: Değişkenler tanımlamak için kullanılır.

Box Sizing:

  • box-sizing: border-box;: Elementlerin iç içe geçtiğinde boyut hesaplamasını düzenler.

Font Özellikleri:

  • @font-face: Web sayfalarında kullanılan özel yazı tiplerini tanımlamak için kullanılır.
  • text-align: Metnin hizalanmasını belirler.

Pseudo-elementler ve Pseudo-classlar:

  • :hover, :active, :focus: Kullanıcı etkileşimlerine yanıt veren elementler için stil uygular.
  • ::before, ::after: Elementin içeriği önünde veya arkasında içerik ekler.

Öncelik ve Miras (Specificity and Inheritance):

  • !important: Bir stilin önceliğini arttırmak için kullanılır.
  • inherit: Bir özelliğin üst öğeden miras almasını sağlar.

Filtreler (Filters):

  • filter: Bir elementin görünümünü değiştirmek için kullanılır.

Bu özellikler, modern web tasarımında sıkça kullanılan ve web sayfalarının tasarımını daha etkileyici hale getiren bazı temel CSS özellikleridir. Ancak, her projenin gereksinimleri farklı olduğu için, doğru özellikleri seçmek ve kullanmak önemlidir.

/* style.css */


 

/* Font ayarları */

body {

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.5;

    color: #333;

    background-color: black;

  }

 

  /* Bağlantıların varsayılan durumu */

  a {

    color: #007bff;

    text-decoration: none;

  }

 

  /* Bağlantının üzerine gelindiğindeki durumu */

  a:hover {

    text-decoration: underline;

  }

 

  /* Sayfa container'ının genel stil ayarları */

  .container {

    max-width: 100%;

    margin: 0 auto;

    padding: 0 20px;

  }

 

  /* Başlık stilleri */

  h1, h2, h3, h4, h5, h6 {

    margin-top: 0;

    margin-bottom: 20px;

  }

 

  /* Ana menü */

  nav ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

  }

 

  nav ul li {

    display: inline-block;

    margin-right: 20px;

  }

 

  nav ul li a {

    color: #007bff;

    text-decoration: none;

  }

/* hover durumu için yeni bir stil belirleme */

nav ul li a:hover {

    color: #FFA500; /* koyu turuncu renk */

    font-weight: bold; /* kalın yazı tipi */

  }

 

 

  /* Footer stilleri */

  footer {

    background-color: #49484b;

    padding: 20px;

    text-align: center;

  }

 



Bu Konu İçin Video Hazırlanıyor.. Diğer Konular İçin Bakabilirsiniz
5955 Görüntülenme
2024-02-16

Kalan Karakter 100

Bu Ders İçin 2 Yorum Yapılmıştır

Profile
ahm... diyor ki ...

Elinize sağlık

2024-02-18 15:28:26

Profile
ali... diyor ki ...

Elinize sağlık

2024-02-18 15:01:26