Css

CSS Temel – CSS Giriş

  Css    2 Mart 2019
Yorum Yok

Bu eğitim  serisin de, CSS kullanarak web sayfalarına stil ve biçimlendirme bilgileri eklemenin ne kadar kolay olduğunu öğreneceksiniz. Ancak, başlamadan önce, HTML bilginiz olması lazım.

Eğer web geliştirme dünyasına yeni başlıyorsanız , buradan öğrenmeye başlayın »

Peki, en popüler stil sayfası dili ile başlayalım.

HTML Belgelerine CSS Dahil Etmek

CSS’yi bir HTML belgesine üç yolla dahil edebilirsiniz:

  • Satır içi stilleri – style HTML başlangıç ​​etiketindeki niteliği kullanma .
  • Gömülü stiller – <style>Bir belgenin <head> </head> arasında öğeyi kullanma .
  • Dış stil sayfaları – <link> Öğeyi kullanarak, harici bir CSS dosyası çekebilirsiniz.

Bu derste, CSS’yi birer birer eklemek için bu üç yöntemi ele alacağız.

Satır İçi Stilleri

Satır içi stiller, benzersiz stil kurallarını CSS kurallarını doğrudan başlangıç ​​etiketine koyarak bir öğeye uygulamak için kullanılır. Bu style nitelik kullanılarak bir elemana eklenebilir .

Ancak, hepsinin bir satırda olması gerekir, yani burada gösterildiği gibi, noktalı virgülden sonra satır sonu olmaz:

Satır içi stilleri kullanmak genellikle kötü bir uygulama olarak kabul edilir. Stil kuralları doğrudan HTML etiketinin içine gömülü olduğundan, sunumun belgenin içeriğiyle karışmasına neden olur.


Gömülü Stil Sayfaları

Gömülü veya dahili stil sayfaları yalnızca gömüldükleri dokümanı etkiler.

Gömülü stil sayfaları, <style>öğeyi kullanan bir HTML belgesinin <head> bölümünde tanımlanır . <style>Bir HTML belgesinde istediğiniz sayıda öğe tanımlayabilirsiniz, ancak bunlar <head> ve </head>etiketleri arasında görünmelidir. İşte bir örnek:

İpucu:type nitelik <style> ve <link>etiketi (yani type="text/css") stil sayfasının dilini tanımlar. Bu özellik tamamen bilgilendirme amaçlıdır. Bunu ihmal edebilirsiniz, çünkü CSS, HTML5’te standart ve varsayılan stil sayfası dilidir.


Dış Stil Sayfaları

Stil, web sitesinin birçok sayfasına uygulandığında harici bir stil sayfası idealdir.

Harici bir stil sayfası, tüm stil kurallarını sitenizdeki herhangi bir HTML dosyasından bağlayabileceğiniz ayrı bir belgede tutar. Harici stil sayfaları en esnektir çünkü harici bir stil sayfasında yalnızca bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz.

Dış stil sayfalarını iki şekilde ekleyebilirsiniz – bağlama ve içe aktarma ile.

Dış Stil Sayfalarını Bağlama

Bağlamadan önce, bir stil sayfası oluşturmamız gerekir. Favori kod düzenleyicinizi açalım ve yeni bir dosya oluşturalım. Şimdi bu CSS kodunu bu dosyanın içine yazın ve “style.css” olarak kaydedin.

Harici bir stil sayfası, <link>etiket kullanılarak bir HTML belgesine bağlanabilir . <link>Etiketi <head> etiketin içine yazılır bu örnekte görüldüğü gibi, bölüm:

İpucu: Her üç yöntem arasında da, harici stil sayfası kullanmak, HTML belgelerine stilleri tanımlamak ve uygulamak için en iyi yöntemdir. Dış stil sayfalarında açıkça görebileceğiniz gibi, etkilenen HTML dosyası işaretlemede minimum değişiklik gerektirir.

Dış Stil Sayfalarını İçe Aktarma

@import Kural harici stil sayfası yüklenirken başka bir yoludur. @importDeyimi, harici bir stil sayfası yüklemek ve stillerini kullanmak için tarayıcı bildirir.

İki şekilde kullanabilirsiniz. En basit belgenizin başlığı içinde. Diğer CSS kurallarının <style> öğeye hala dahil edilebilir . İşte bir örnek:

Benzer şekilde, @import bir stil sayfasını başka bir stil sayfasının içine almak için de kuralı kullanabilirsiniz .

Not: Tüm @import kurallar stil sayfasının başında yer almalıdır. Stil sayfasında tanımlanan stil kuralları, içe aktarılan stil sayfalarındaki çakışan kuralları geçersiz kılar. Ancak, performans sorunu nedeniyle bir stil sayfasını başka bir stil sayfasına içe aktarmanız önerilmez.

0 okunma

Etiketler : , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.