CSS nasıl eklenir

İçindekiler

Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini buna göre biçimlendirir. stil sayfasındaki bilgiler.

CSS Eklemenin Üç Yolu

Stil sayfası eklemenin üç yolu vardır:

Harici CSS
Dahili CSS
Satır içi CSS

Harici CSS

Bir ile harici stil sayfasını değiştirerek bir web sitesinin tamamının görünümünü değiştirebilirsiniz. sadece bir dosya!

Her HTML sayfası, içindeki harici stil sayfası dosyasına bir referans içermelidir öğesi, başlık bölümünün içindedir.

Örnek

Dış stiller, bir HTML sayfasının <head> bölümünün içindeki öğesinde tanımlanır:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Harici bir stil sayfası herhangi bir metin düzenleyicide yazılabilir ve .css uzantısıyla kaydedilmelidir.

Harici .css dosyası herhangi bir HTML etiketi içermemelidir.

"mystyle.css" dosyası şu şekilde görünür:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

Not: Özellik değeri (20) ile birim arasına boşluk eklemeyin (px):

Yanlış (boşluk):

margin-left: 20 px;

Doğru (boşluk yok):

margin-left: 20px;

Dahili CSS

Tek bir HTML sayfasının benzersiz bir stili varsa, dahili bir stil sayfası kullanılabilir.

Dahili stil, başlığın içindeki <style> öğesinin içinde tanımlanır bölüm.

Örnek

Dahili stiller, bir HTML sayfasının <head> bölümündeki <style> öğesinde tanımlanır:

 <!DOCTYPE html>
<html>
<head>
<style>
body {
  
  background-color: linen;
}
h1 {
  color: maroon;
  
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a 
  heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Satır içi CSS

Tek bir öğeye benzersiz bir stil uygulamak için satır içi stil kullanılabilir.

Satır içi stilleri kullanmak için stil özelliğini ilgili öğeye ekleyin. style niteliği herhangi bir CSS özelliğini içerebilir.

Örnek

Satır içi stiller ilgili dosyanın "style" özelliğinde tanımlanır. eleman:

 <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This 
  is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

  </body>
</html>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

İpucu: Satır içi stil, stil sayfasının birçok avantajını kaybeder (karıştırma yoluyla) sunumlu içerik). Bu yöntemi dikkatli kullanın.

Çoklu Stil Sayfaları

Farklı stil sayfalarında aynı seçici (öğe) için bazı özellikler tanımlanmışsa, son okunan stil sayfasındaki değer kullanılacaktır.

Harici stil sayfasının <h1> öğesi için aşağıdaki stile sahip olduğunu varsayalım:

h1
{
  color: navy;
}

Ardından, dahili stil sayfasının da <h1> öğesi için aşağıdaki stile sahip olduğunu varsayalım:

h1
{
  color: orange;   
}

Örnek

Dahili stil, harici stil sayfasına bağlantıdan sonra tanımlanırsa, <h1> öğeleri "turuncu":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Örnek

Ancak, dahili stil harici stil sayfasına bağlantıdan önce tanımlanmışsa, <h1> öğeleri "Donanma":

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Basamaklı Sipariş

Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılacak?

Bir sayfadaki tüm stiller yeni bir "sanal" stile "aşamalı" olacaktır Bir numaranın en yüksek önceliğe sahip olduğu aşağıdaki kurallara göre sayfa:

Satır içi stil (bir HTML öğesinin içinde)
Harici ve dahili stil sayfaları (baş kısmında)
Tarayıcı varsayılanı

Dolayısıyla, satır içi stil en yüksek önceliğe sahiptir ve harici ve dahili stiller ve tarayıcı varsayılanları.

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>