Alıştırma - CSS ile HTML'nize stil ekleme

  • 10 dakika

Basamaklı Stil Sayfaları (CSS), sayfanızın nasıl görüneceğini belirtmenize olanak sağlar. Temel fikir, HTML sayfalarınızda kullandığınız öğeler için stilin ne olması gerektiğini tanımlamaktır. HTML öğeleri içeriğinizi tanımlarken, CSS stilleri bu içeriğin nasıl görüneceğini tanımlar.

Örneğin, yuvarlatılmış köşeler uygulayabilir veya bir öğeye gradyan arka plan ekleyebilir ya da css kullanarak köprülerin bunlarla etkileşim kurarken nasıl görüneceğini ve yanıt vereceğini belirtebilirsiniz. Gelişmiş sayfa düzenleri ve animasyon efektleri de gerçekleştirebilirsiniz.

Stilleri belirli öğelere, belirli bir türün tüm öğelerine uygulayabilir veya sınıfları kullanarak birçok farklı öğeye stil uygulayabilirsiniz.

Bu alıştırmada, HTML sayfa öğelerine CSS stilleri uygulayacak ve açık ve koyu temalarınızı tanımlamak için bazı CSS kodları ekleyebilirsiniz. Ardından sonuçları tarayıcınızın geliştirici araçlarında kontrol edebilirsiniz.

Dış CSS

HTML hakkında önceki ünitede, HTML'den bir dış CSS dosyasına bağlanmıştınız.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Dış CSS'nin avantajlarından biri, aynı CSS dosyasına birden çok HTML sayfası bağlanabilmesidir. CSS'de değişiklik yaparsanız, stiliniz her sayfa için güncelleştirilir. Sayfa içeriğiniz için bir HTML dosyası, stil oluşturmak için bir CSS dosyası ve etkileşim için bir JavaScript dosyası kullandığınızda, buna endişelerin ayrılması denir.

Daha önce açıklandığı gibi, CSS'yi doğrudan IÇ CSS olarak adlandırılan HTML'de de yazabilirsiniz. Temel bir web sitesi için bile, HTML sayfasının hızla karmaşık hale gelebileceği kadar çok CSS kuralı vardır. Birden fazla sayfayla aynı CSS genellikle yinelenir ve yönetilmesi zor olur.

CSS kuralları

CSS kuralları, HTML öğelerine stilleri uygulama yöntemidir. CSS kuralları, stillerin uygulanması gereken öğeyi (veya öğeleri) ifade etmek için kullanılan bir seçiciye sahiptir.

Visual Studio Code'da dosyayı açın main.css ve aşağıdakileri girin:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Bu kod parçacığı iki kural içerir. Her kuralda:

  • Seçici. body ve ul iki kuralın seçicileridir ve stillerin hangi öğelere uygulanacağını seçmek için kullanılır.
  • Açılış küme ayracı ({).
  • Seçili öğelerin nasıl görünmesi gerektiğini belirleyen stil bildirimlerinin listesi.
  • Kapanış küme ayracı (}).

Örneğin, ul seçici sayfadaki HTML öğesini seçerek <ul> stil uygular. bildirimidir font-family: helveticave stilin ne olması gerektiğini belirler. Özellik adı , font-familydeğeri ise şeklindedirhelvetica.

Daha sonra gördüğünüz gibi, öğeler için kendi özel adlarınızı tanımlayabilirsiniz.

Seçiciler

Kimlik ve sınıf seçicileri, HTML'nizdeki özel öznitelik adlarına stiller uygulamanıza olanak verir. Bir öğeye stil eklemek için kimlik kullanırken, birden çok öğeyi stil olarak kullanmak için sınıfları kullanırsınız.

  1. Aşağıdaki kodu kopyalayın ve CSS dosyanıza ekleyin. Daha önce eklediğiniz seçicinin kapanış küme ayracından ul sonra yapıştırın.

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    Yukarıdaki kod, öğeleri seçmek için özel öznitelikler kullanan son iki kuralla birlikte üç CSS kuralı içerir: .list ve #msg.

    • .list bir sınıf seçicidir. için bir class öznitelik kümesi list içeren her HTML öğesi, bu seçicide tanımlanan stilleri alır.

    • #msg bir kimlik seçicidir. Özniteliği ayarlı id HTML öğesimsg, bu seçici içinde tanımlanan stilleri alır.

    Seçicileriniz için kullandığınız adlar, HTML'de tanımladığınız adlarla eşleşdikleri sürece rastgele olabilir.

  2. Windows'ta Control+S veya macOS üzerinde Command+S'yi seçerek çalışmanızı kaydedin.

Tarayıcıda görüntüleme

  1. Visual Studio Code kullanarak önizleme yapmak için Gezgin'de dosyaya index.html sağ tıklayın ve ardından Varsayılan Tarayıcıda Aç'ı seçin.

    Önemli

    Dosyayı yeni düzenlemiş main.css olsanız bile, değişikliklerin önizlemesini görüntülemek için dosyayı seçmeniz index.html gerekir.

    Web sayfası varsayılan tarayıcınızda açılır.

    Yazı tipi stillerinin uygulandığı web sitesinin ekran görüntüsü.

Yazı tipi stilleri görmeyi beklediğiniz gibi mi? öğesine uygulanan stillerin <body> öğesinde nasıl devralındığı <h1> ilginçtir. için <h1>hiçbir şey tanımlamadık, ancak yine de üzerinde <body>tanımlanan yazı tipini aldı. Üst öğelerden alt öğelerine bu devralma mekanizması, CSS'nin önemli yönlerinden biridir. Ancak, <li> öğelerin farklı bir yazı tipi vardır. <li> öğesi, bir stil tanımladığınız öğenin alt <body> öğesi olduğundan<li>, öğelerinin stili için ayarlanan <ul> stili geçersiz kılar.

Visual Studio Code'da Varsayılan Tarayıcıda Aç'ı kullandığınızda, her seferinde tarayıcıda yeni bir sekme açılır. Yeni bir sekme açmamak için, bunun yerine web sitenizi içeren sekmeyi yeniden yükleyebilirsiniz.

Sekmeyi yeniden yüklemek için yenileme klavye kısayolu olan F5 tuşuna basın veya Windows veya Linux'ta Ctrl+R ve Mac'te Command+R tuşlarına basın.

Açık tema ekleme

Ardından, web siteniz için renk teması desteği ekleyin. Onaltılık renk kodları kullanarak açık renkli bir tema tanımlayarak başlayın.

  1. CSS dosyanıza ()main.css dosyasının sonuna aşağıdaki kodu ekleyin.

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    Bu örnekte, #000000 yazı tipi rengi için siyah ve #00FF00 arka plan rengi için yeşil belirtir.

  2. HTML dosyanızda (index.html ), öğesini sınıf adıyla <body>güncelleştirinlight-theme. Şimdi, açık tema için sınıf seçici stilleri doğru şekilde uygular.

    <body class="light-theme">

Tarayıcıda görüntüleme

  • Visual Studio Code kullanarak önizleme yapmak için öğesine sağ tıklayın index.html, ardından Varsayılan Tarayıcıda Aç'ı seçin veya F5 tuşuna basarak önceki sekmeyi yeniden yükleyin.

    Yeşil arka plan kullanan açık temanın göründüğüne dikkat edin.

    Web sitesinin ışık teması uygulanmış ekran görüntüsü.

Uygulanan CSS'yi görüntüleme

  1. Tarayıcı görünümünde Geliştirici Araçları'nı açın.

    Sayfaya sağ tıklayın ve İncele'yi seçin veya F12 veya Ctrl+Shift+I kısayolunu seçin.

  2. Öğeler sekmesini seçin ve Öğeler sekmesinin içindeki Stiller sekmesini seçin (varsayılan olarak seçili olmalıdır).

  3. Çeşitli HTML öğelerinin üzerine gelin ve birkaç öğeyi seçtiğinizde, geliştirici araçlarının Stiller sekmesinde bunlara hangi stillerin uygulandığını nasıl görüntülediğine dikkat edin.

  4. <body> öğesini seçin. Uygulanana light-theme dikkat edin.

  5. Sıralanmamış liste <ul> öğesini seçin. öğesinin stilini font-family: helvetica;geçersiz kılan özel stiline <body> dikkat edin.

Web sitesinin açık temasının uygulandığı ve yanında HTML ve CSS kodunun yer aldığı Öğeler panelini gösteren Geliştirici Araçları'nın ekran görüntüsü.

Geliştirici Araçları'nda CSS stillerini görüntüleme hakkında daha fazla bilgi edinmek için CSS'yi görüntülemeye ve değiştirmeye başlama makalesine bakın.

Koyu tema ekleme

Koyu tema için, web sayfasında tema değiştirmeyi etkinleştirebileceğiniz bir sonraki üniteye hazırlık olarak altyapıyı ayarlayacaksınız.

CSS'nize koyu tema desteği eklemek için aşağıdaki adımları kullanın.

  1. CSS dosyanızda (main.css ), dosyanın başındaki sayfa köküne bazı sabitler ekleyin.

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

    Seçici, :root HTML sayfasındaki öğeyi <html> temsil eder. Bu tür bir görev için en iyi yöntem, bir CSS kuralında seçici ile :root bir dizi genel CSS değişkeni tanımlamaktır. Bu örnekte üç renk değişkeni tanımlamışsınızdır. Artık bu değişkenleri diğer CSS kurallarında kullanabilirsiniz.

  2. CSS dosyasının sonunda, kuralı güncelleştirmek ve seçiciyi eklemek light-theme için aşağıdaki kodla değiştirindark-theme.

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

    Önceki kodda, arka plan ve yazı tipi rengi belirten ve bgolmak üzere iki yeni değişken fontColor tanımlamıştınız. Bu değişkenler, özellik değerlerini seçicinizde var daha önce belirtilen değişkenlere ayarlamak için anahtar sözcüğünü kullanır:root.

  3. Ardından CSS dosyanızda geçerli body seçiciyi aşağıdaki kodla değiştirin.

    body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

    Bu örnekte, ve body özelliklerini ayarlamak background için seçiciyi color kullanırsınız ve web sayfasında görünen öğelerin tümü öğesinin içinde <body> olduğundan, üzerinde <body>ayarlanan renkleri devralırlar.

  4. CSS dosyanızda, ve #msg seçicileriyle aynı ul yazı tipini de öğesinden <body>devralmaları için ile kuralları kaldırın.

  5. Control+S veya Command+S tuşlarına basarak dosyanızı kaydetmeyi unutmayın.

    CSS dosyanız (main.css) şimdi şu örnekteki gibi görünmelidir:

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

  6. Koyu temayı görüntülemek için dosyayı index.html açın ve sınıf özniteliğindeki <body> varsayılan temayı koyu temayla (dark-theme ) el ile düzenleyin. Dosyayı kaydedin ve sayfayı tarayıcıda yeniden yükleyin.

    Koyu tema uygulanmış web sitesinin ve yanında Geliştirici Araçları'nın yer aldığı ekran görüntüsü.

  7. Varsayılanı <body> açık temaya geri döndürmek için sınıf özniteliğini düzenleyin.

Sonraki ünitede etkileşim sağlamak ve temaların değiştirilmesini desteklemek için JavaScript kullanacaksınız.

Tema eklemek için GitHub Copilot kullanma

Yeni bir tema eklemek üzere CSS oluşturmak için IDE'nizde GitHub Copilot'ı kullanabilirsiniz. gereksinimlerinize göre HTML öğelerinin stillerini tanımlamak üzere özellikleri belirtmek üzere istemi özelleştirebilirsiniz.

Aşağıdaki metinde Copilot Sohbeti için örnek bir istem gösterilmektedir:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot yapay zeka ile desteklendiğinden sürprizler ve hatalar mümkündür. Daha fazla bilgi için Sıkça Sorulan Sorular'a bakın.

Visual Studio Code'da GitHub Copilot hakkında daha fazla bilgi edinin.