CSS = Stiller ve Renkler
CSS ile HTML Styling
CSS Basamaklı Stil Sayfaları açılımı
Şekillendirme 3 şekilde HTML öğelerine eklenebilir:
- Inline - HTML öğeleri bir stil özelliğini kullanarak
- Dahili - Bir kullanarak <style> HTML elemanı <head> bölümüne
- Dış - Bir veya daha fazla harici CSS dosyalarını kullanarak
stil eklemek için en yaygın yolu, ayrı CSS dosyalarına stillerini tutmaktır. o bunu kendiniz denemek için göstermek için daha kolay ve daha kolay olduğu için, bu eğitimde, biz, iç stil kullanın.
Bizim CSS hakkında çok daha fazla bilgi edinebilirsiniz CSS Öğreticisi .
Inline Şekillendirme (Inline CSS)
Satır içi stil tek bir HTML öğesine benzersiz bir stil uygulamak için kullanılır:
Satır içi stil kullanan style özelliğini.
Bu örnek metin rengini değiştirir <h1> maviye elemanı:
İç Şekillendirme (Internal CSS)
İç stil bir HTML sayfası için bir stil tanımlamak için kullanılır.
İç stil tanımlanır <head> HTML sayfasının bölümünde bir dahilinde <style> elemanı:
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Kendin dene " Dış Şekillendirme (External CSS)
Harici bir stil sayfası birçok sayfa için stil tanımlamak için kullanılır.
Harici stil sayfasındaki ile, bir dosya değiştirerek bütün bir web sitesinin görünümünü değiştirebilirsiniz!
Harici stil sayfasını kullanmak için, kendisine bir bağlantı eklemek <head> bölümüne eklenir:
Örnek
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Kendin dene " Harici bir stil sayfası herhangi bir metin editörü yazılabilir. dosya herhangi html etiketlerini içermemelidir. Stil sayfası dosyası ile kaydedilmiş olması gerekir .css uzantısı.
İşte "nasıl styles.css " görünür:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Yazı
CSS color özelliği HTML öğesi için kullanılacak metin rengini tanımlar.
CSS font-family özelliği HTML öğesi için kullanılacak yazı tipini tanımlar.
CSS font-size özelliği HTML öğesi için kullanılacak metin boyutunu tanımlar.
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Kendin dene " CSS Kutu Modeli
Eğer onu göremiyorum bile her HTML öğesi, çevresinde bir kutusu vardır.
CSS border özelliği, bir HTML öğesi etrafında gözle görülür bir sınır tanımlar:
CSS padding tesiste dolgu tanımlar (space) sınır içinde:
CSS margin tesiste marjı tanımlar (space) sınırında dışında:
Kullanım Yukarıdaki CSS örnekleri px piksel boyutları tanımlamak için kullanılır.
id Özellik
Kullanım CSS üzerindeki tüm örnekler genel bir şekilde HTML öğeleri stil.
özel bir element için özel bir stil tanımlamak için, ilk öğeye bir id özelliğini ekleyin:
<p id="p01">I am different</p>
Daha sonra belirli olan öğe için bir stil tanımlamak id :
class Özellik
Özel bir türü için bir stil tanımlamak için ( class ) elementlerin, bir ekleme class elemana niteliğini:
<p class="error">I am different</p>
Şimdi belirli sınıfla elementler için farklı bir stil tanımlayabilirsiniz:
Kullanım id bir adrese single eleman. Kullanım class ele groups elementlerin.
Bölüm özeti
- HTML kullanın style satır içi stil özniteliğini
- HTML kullan <style> elemanı iç CSS tanımlamak için
- HTML'yikullanın <link> elemanı harici bir CSS dosyası başvurmak için
- HTML'yikullanın <head> eleman saklamak için <style> ve <link> elemanlar
- CSS kullanın color metin renkleri mülkü
- CSS kullanın font-family metin yazı tipleri için özellik
- CSS kullanın font-size metin boyutları için özellik
- CSS kullanın border görünür eleman sınırları için özellik
- CSS kullanın padding sınırları içindeki alanı için özellik
- CSS kullanın margin sınırına dışında alanı için özellik
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»
HTML Stili Etiketler
| Etiket | Açıklama |
|---|---|
| <style> | bir HTML belgesi stil bilgilerini tanımlar |
| <link> | Bir belge ve harici kaynak arasında bir bağlantı tanımlar |