Halimclskn
cssders2
Ders 2: CSS Nasıl çalışır?
Bu derste size ilk stil yapmak öğreneceksiniz. Bu temel CSS modeli hakkında bilmek alacak ve hangi kodları bir HTML belgesine CSS kullanmak için gereklidir.
Cascading Style Sheets (CSS) kullanılan birçok özelliği HTML benzemektedir. Düzeni için HTML kullanmak için kullanılır Böylece eğer, büyük olasılıkla kodları birçok tanıyacaktır. Bize somut bir örneğe bakalım.
Temel CSS sözdizimi
Diyelim ki bir web sayfasının arka plan olarak güzel bir kırmızı renk istiyorsunuz:
Kullanarak HTML biz bunu böyle yapmış olabilir:
<body bgcolor="#FF0000">
Ile CSS aynı sonucun bu gibi elde edilebilir:
body {background-color: # FF0000;}
Bildiğiniz gibi, kodları HTML ve CSS için daha fazla veya daha az aynıdır. Yukarıdaki örnekte de temel CSS modelini göstermektedir:
Ama nereye CSS kodu koymak? Bu şimdi üzerinden gidecek tam olarak ne olduğunu.
Bir HTML belgesi için CSS uygulamak
Eğer bir HTML belgesi için CSS uygulayabilirsiniz üç yolu vardır. Bu yöntemler tüm aşağıda özetlenmiştir. Biz üçüncü yöntem yani dış odaklanmak öneririz.
Yöntem 1: In-line (style niteliği)
HTML CSS uygulamak için bir yolu HTML özniteliği kullanılarak bir stil . Kırmızı bir arka plan rengi ile yukarıdaki örnekte dayanarak, bu gibi uygulanabilir:
<html> <head> <title> Örnek </ title> </ head> <body style="color: #FF0000;"> <p> Bu bir kırmızı sayfası </ p> </ body> </ html>
Yöntem 2: İç (etiket stili)
Başka bir yol HTML etiketini kullanarak CSS kodları eklemektir <style> . Bu gibi, örneğin:
<html> <head> <title> Örnek </ title> <style type="text/css"> body {background-color: # FF0000;} </ style> </ head> <body> Bu <p> kırmızı bir sayfa </ p> </ body> </ html>
Yöntem 3: Harici (bir stil sayfası için link)
Önerilen yöntem, sözde bir dış stil sayfasına link etmektir. Bu eğitimde boyunca hepimizin örneklerde bu yöntemi kullanır.
Harici bir stil sayfası sadece uzantılı bir metin dosyasıdır . css . Başka bir dosya gibi, web sunucusu veya sabit disk üzerinde stil yerleştirebilirsiniz.
Örneğin, stil sayfanıza adlandırıldığını söyleyelim style.css ve adlı bir klasörde bulunan tarzı . Bu durum, bu gibi gösterilebilir:
Hüner HTML belgesi (default.htm) gelen stil sayfası (style.css) bir bağlantı oluşturmaktır. Böyle bir bağlantı HTML kod satırı ile oluşturulabilir:
<Link rel = "stylesheet" type = "text / css" href = "style / style.css" />
Bizim stil yolunu özniteliği kullanılarak belirtilir Bildirimi nasıl href .
Kod satırı arasındaki HTML kodu yani başlık bölümünde takılmalıdır <head> ve </ head> etiketleri. : Bu gibi
<html> <head> <title> Belgem </ title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </ head> <body> ...
Bu bağlantı HTML dosyasını görüntülerken bu CSS dosyasından düzenini kullanmak gerektiğini tarayıcı söyler.
gerçekten akıllı bir şey birkaç HTML belgeleri aynı stil sayfasına bağlı edilebilir. Diğer bir deyişle, bir çok dosya CSS HTML belgelerinin yerleşimini kontrol etmek için kullanılabilir.
Bu teknik, bir sürü iş kaydedebilirsiniz. Eğer, örneğin, 100 sayfadan oluşan bir web sitesinin arka plan rengini değiştirmek istiyorsanız, bir stil sayfası elle her 100 HTML belgelerini değiştirmek zorunda kaydedebilirsiniz. CSS kullanarak, değişikliği sadece merkezi stil sayfasında bir kod değiştirerek birkaç saniye içinde yapılabilir.
Kullanıcı sadece uygulamaya öğrendiklerini koysunlar.
Kendiniz deneyin
Not Defteri'ni açın (veya kullanmak ne olursa olsun, metin editörü) ve iki dosya oluşturun - bir HTML dosyası ve bir CSS dosyası - aşağıdaki içeriği:
default.htm
<html> <head> <title> Belgem </ title> <link rel="stylesheet" type="text/css" href="style.css" /> </ head> <body> <h1> Benim ilk Stil </ h1> </ body> </ html>
style.css
body { background-color: # FF0000; }
Şimdi aynı klasörde iki dosya yerleştirin. (Sırasıyla ". Htm" ve ". Css") doğru uzantıları olan dosyaları kaydetmeyi unutmayın
Açın default.htm tarayıcınız ile ve sayfa kırmızı bir arka planı var nasıl. Tebrikler! Size ilk stil yapmış!
Için acele sonraki dersimizde biz CSS özellikleri bir göz nereye götüreceğini.
