Bir stili oluşturma ve uygulama

Önemli : Bu makale makine çevisidir. Bkz. yasal uyarı. Bu makalenin İngilizce sürümüne buradan ulaşabilirsiniz.

Stil, biçimlendirme, basamaklı stil sayfası (CSS) tanımlanmış olan özellikleri kümesidir. Bir metin (karakterleri tek tek veya tüm paragrafları) dahil olmak üzere'de Web sayfasına, içerik grafikler, Katmanlar, tablo stilleri uygulayın ve tüm Web sayfasının gövde metnine çift. Stilleri, bunları kullanmak istediğiniz her zaman özelliklerini ayarlama zorunda kalmadan, özellikleri ve değerleri kümesi verimli bir şekilde yeniden olanak sağlar.

CSS stillerini bunları yerel stili kurallarını geçersiz sürece, HTML öğelerine genel stil kurallarını uygulamak anlamda basamaklı. Genel olarak, yerel stil kuralları genel stil kuralları üzerinde önceliklidir. Örneğin, bir Web sayfasındaki bir iç CSS tanımlanmış stil içinde Dış CSS tanımlı bir stil geçersiz kılar. Benzer şekilde, Web sayfasındaki tek bir HTML öğesi içinde CSS tanımlanan satır içi iç veya Dış CSS Web sayfasının aynı öğe için tanımlanan herhangi bir stillerini geçersiz kılar. Yerel stilleri bile uygulandığında yerel CSS stil kuralları contradicted olmasanız genel stil kuralları kısımlarını HTML öğeleri uygulayın.

Bu makalede

Stilleri türleri

Stil oluşturma

Stil uygulama

Stilleri türleri

Dış veya iç CSS içinde bulunduğu bir stil sınıf, öğe veya kimliği tabanlı olabilir. Stil sol küme ayracı ({}) ve sağ küme ayracı (}) arasında görünen özellik bildirimleri oluşan bir blok arkasından bir seçici oluşur kendi kural kümesine göre tanımlanır. Her stil türünü başka bir stil türlerinden kendi Seçici tarafından ayrılır; sınıf tabanlı stil seçicisini nokta (.) önündeki; sayı işareti (#) bir kimlik tabanlı stil seçicisini önündeki; ve H1 öğesi gibi bir HTML öğesi yalnızca bir öğe tabanlı stil seçicisini oluşur.

Sınıf tabanlı stiller

Sınıf tabanlı stillerin bir Web sayfasındaki bir veya daha fazla öğe üzerinde kullanmak istediğiniz özellikler kümesine tanımlamak için kullanın. Stilini değiştirmek isterseniz, değişiklikleri ayarlama ve stil üzerine uyguladığınız her öğe otomatik olarak yansıtır stilin kuralı düzenleyebilirsiniz.

Aşağıdaki örnekte, "Giriş" stili 's Seçici olduğu ve "yazı tipi boyutu: küçük" ikinci bir özellik bildirimi ve ardından bir özellik bildirimi olur.

Bir kural için bir sınıf tabanlı Stil kümesini örneği

.introduction {font-size: small; color: white}

Sınıf tabanlı stili uygulanmış < p > Etiket için bir örneği

<p class="introduction">

Öğe tabanlı stiller

Öğe tabanlı stillerin tüm geçtiği yerlerde bir Web sayfasında kullanmak için belirli bir HTML öğesi istediğiniz özellikleri kümesi tanımlamak için kullanın. Örneğin, Web sayfanıza bir kenar boşluğu tüm paragrafları (< p > etiketler tarafından çevrelenen içeriği) çevresinde 25 piksel oluşturmak için p öğenin kendi seçici olarak kullanır ve kenar boşluğu özellikleri için bildirimleri içeren bir öğe tabanlı stili aşağıda gösterildiği gibi oluşturun.

Bir kural için bir öğe tabanlı stil kümesi örneği

p { margin-left: 25px; margin-right: 25px }

Kimlik tabanlı stillerin

Tek bir öğe veya diğer içeriklerin tümü bir veya birden çok Web sayfalarında ayırmak istediğiniz öğeleri bloğunu özelliklerini kümesi tanımlamak istediğiniz zaman bir kimlik tabanlı stili kullanın. Kimlik tabanlı bir stili tek bir HTML öğesi Web sayfasına stil istediğinizde kullanın.

Bir kural için bir kimlik tabanlı stil kümesi örneği

#footer {background-color: #CCCCCC; margin: 15px}

Kimlik tabanlı stili için < p > Etiket uygulanmış bir örneği

<p id="footer">

Satır içi stiller

Satır içi stil kümesi özelliklerini tek bir öğe veya öğeleri öbeğini Web sayfasına tanımlamak istediğiniz ve bu stilini yeniden kullanmak istemiyorsanız kullanın. Kimliği, öğe ve sınıf tabanlı stiller farklı olarak, özelliklerini ya da merkez bölümünde bir Web sayfasının (iç CSS) veya harici bir CSS dosyası özelliklerini tanımlanır satır içi stiller (ya da satır içi CSS) doğrudan stili kullanmak istediğiniz HTML öğesinde tanımlanır.

Bir kural için bir satır içi stil kümesi örneği

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Sayfanın Başı

Stil oluşturma

Sıfırdan veya mevcut bir stili kopyalayarak yeni stiller oluşturabilirsiniz. Her iki durumda da, Yeni stil iletişim kutusu Seçici türü, özellikleri ve stil içerecek stil sayfası gibi yeni stilinizi hakkında her şeyi tanımlayan olanak sağlar. Yeni bir satır içi stil oluşturmak istediğinizde, CSS özellikleri görev bölmesini de kullanabilirsiniz. Hızla oluşturma ve stil için tüm özellikleri ayarlamadan sayfanıza yeni bir stil uygulamak istediğinizde, Stil araç çubuğunu da kullanabilirsiniz.

Yeni stil iletişim kutusunu kullanarak bir stili oluşturma

  1. Aşağıdakilerden birini yapın:

    • Dış CSS'ye stil eklemek için .css dosyası açın.

    • Bir iç CSS'ye stil eklemek için Web sayfasını açın.

    • Satır içi stil eklemek için Web sayfasını açın ve sonra istediğiniz stil üzerine içeriği seçin.

  2. Aşağıdakilerden birini yapın:

    • Yeni bir stil oluşturmak için    Yeni stil aşağıdaki konumlardan birini tıklatın: Stil Uygula görev bölmesini veya Stilleri Yönet görev bölmesi, Stil araç çubuğunu veya Biçim menüsü.

    • Mevcut bir stili kopyalamak için    Aşağıdakilerden birini yapın:

      • Stil Uygula Görev Bölmesi'nde, kopyalamak için görüntülenen aşağı oku tıklatın, istediğiniz stili ve sonra Yeni stil Kopyalaüzerine gelin.

      • Stilleri Yönet görev bölmesini veya CSS özellikleri görev bölmesi, kopyalamak istediğiniz stili sağ tıklatın ve sonra Yeni stil Kopyala' yı seçin.

  3. Yeni stil iletişim kutusunda aşağıdakileri yapın:

Bunu kullanın

Bunu yapmak için

Seçici

  • Sınıf seçici kullanmak için nokta (.) ardından benzersiz bir ad yazın.

  • Kimlik seçici kullanmak için ardından benzersiz bir ad sayı işareti (#) yazın.

    Not : Karmaşık bir seçici oluşturmadığınız sürece sınıf ve kimliği Seçici adlar boşluk içeremez.

  • Bir öğe Seçici kullanmak için ya da HTML öğenin adını yazın veya Seçici açılan kutusunu tıklatın ve bir öğe adı seçin.

  • Satır içi Seçici kullanmak için satır içi stilseçin.

  • Karmaşık bir seçici oluşturmak için Seçici yazın.

Tanımlayın

Aşağıdakilerden birini seçin:

  • Geçerli sayfayı geçerli Web sayfasındaki iç CSS yeni stil ekler.

  • Yeni stil sayfası yeni stil için yeni bir boş Dış CSS ekler.

  • Varolan stil sayfası , belirttiğiniz varolan Dış CSS için yeni stil ekler.

Belge Seçimi yeni stil uygulama

Geçerli Web sayfasını geçerli seçimde stili uygulayın.

URL

Varolan stil sayfası içinde tanımlaiçinde seçtiyseniz, .css dosyası URL'sini girin.

Kategori

Aşağıdakilerden herhangi birini seçin ve sonra görünen Özellikleri iletişim kutusunda sağa ayarlayın:

İpucu : Kategori listesinde görünen kategorileri kalın içeren özellikleri ayarlayın.

  • Yazı tipi boyutu, ağırlık, düzenleme ve renk gibi yazı tipi özelliklerini ayarlar.

  • Blok satır yüksekliği, metin hizalama, metin girinti ve metin aralığı ayarlar.

  • Arka plan arka plan rengi ve arka plan resmi özelliklerini ayarlar.

  • Kenarlık kenarlık ve özelliklerini ayarlar.

  • Kutusu kutusu ve blok düzeyi öğeler doldurmayı ve kenar boşluğu özelliklerini ayarlar.

  • Konum boyutları ve kutusu ve blok düzeyi öğeler konumunu ayarlar.

  • Düzen görünürlük kayan ve davranışı, kırpma ve diğer düzen özellikleri kutusu ve blok düzeyi öğeler kaydırma ayarlar.

  • Liste türü, konum ve görüntü gibi liste öğelerinin özelliklerini ayarlar.

  • Tablo aralığı, Düzen ve kenarlık özellikleri dahil, tablo ilgili öğeler özelliklerini ayarlar.

Not : Ayrıca bir stil bir CSS diğerine kopyalayabilirsiniz. Stilleri Yönet görev bölmesinde, bu stili ya da adını veya listede belirli bir noktaya CSS hedef stilleri için kopyalamak istediğiniz CSS içeren CSS stili sürükleyin.

CSS özellikleri görev bölmesini kullanarak satır içi stil oluşturma

  1. Tasarım görünümünde veya Web sayfanıza kod görünümü satır içi stil eklemek istediğiniz içeriği seçin.

  2. CSS özellikleri görev bölmesinde, Uygulanmış kuralları' nın altında satır içi stil uygulamak veya "(kuralların uygulandığı)" görüntülenirse, Uygulanmış kuralları' nın altında herhangi bir yeri sağ tıklatın, istediğiniz seçicisini sağ tıklatın ve ardından kısayol menüsünde Yeni satır içi stil ' ı tıklatın.

  3. CSS özellikleri' nin altında istediğiniz özellikleri ayarlayın.

Yeni bir tanımlanmamış stili oluşturma ve uygulama

Stillerinizi oluşturabilir ve bunları öğelere uygulanır ve sonra stilleri daha sonra tanımlayın. Örneğin, sayfanıza görünümünü oluşturmak için bir Tasarımcısı ile çalışmak isterseniz, tanımlanmamış stilleri sayfanızda öğelere uygulanır sonra stilleri daha sonra tanımlamak için Tasarımcısı ile başarılı.

  1. Tasarım görünümünde veya kod görünümünde, Web sayfanıza bir stili uygulamak istediğiniz öğeyi seçin.

  2. Oluşturma ve tüm özellikleri stili araç çubuğunda, sınıf ya da kimliği kutusuna tanımlamadan yeni bir stil uygulamak için yeni stil için benzersiz bir ad yazın.

Sayfanın Başı

Stil uygulama

Sınıf tabanlı veya kimlik tabanlı stiller, iç ve dış basamaklı stil sayfaları (CSS) uygulamak için Stil Uygula görev bölmesini, Stilleri Yönet görev bölmesini veya Stil araç çubuğunu kullanın. Stil Uygula görev bölmesini Stilleri Yönet görev bölmesi ve Stil araç bir stili uygulamak için sınırlı sırasında seçimi, birden çok stil uygulamanızı sağlar. Stil araç hızla adlandırın ve sayfanıza yeni tanımlanmamış stilleri uygulama olanak tanır.

Bu stilleri türünü otomatik olarak uygulanır çünkü kendi ilişkili bir öğeye bir Web sayfası boyunca seçicisini (öğe tabanlı stillerin) bir öğe kullanan stilleri uygulamak gerekmez. Stil Uygula görev bölmesini öğe tabanlı stillerin Bağlamsal seçicileraltında listeler ve birlikte Stilleri Yönet görev bölmesi stili kişinin adının yanındaki mavi bir noktalı görüntüler. Stil araç öğe tabanlı stillerin listelemiyor.

  1. Tasarım görünümünde veya kod görünümünde, Web sayfanıza bir stili uygulamak istediğiniz öğeyi seçin.

  2. Aşağıdakilerden birini yapın:

    • Birden çok var olan stilleri uygulamak için    Stil Uygula görev bölmesinde, istediğiniz her stiline tıklatırken CTRL tuşuna basın.

    • Tek mevcut bir stili uygulamak için    Aşağıdakilerden birini yapın:

      • Stil Uygula görev bölmesinde, istediğiniz sınıf veya kimliği stilini tıklatın.

      • Stil araç çubuğunda, sınıf veya kimliği açılan kutusunda, istediğiniz stili tıklatın.

      • Stilleri Yönet görev bölmesinde ve ardından kısayol menüsünde Uygulama stilini tıklatın sınıf veya kimliği stili sağ tıkatın.

    • Oluşturma ve tüm özellikleri tanımlama olmadan yeni bir stil uygulamak için    Stil araç çubuğunda, sınıf ya da kimliği kutusuna yeni stil için benzersiz bir ad yazın.

Sayfanın Başı

Not : Makine Çevirisi Yasal Uyarısı: Bu makale, insan müdahalesi olmadan bir bilgisayar sistemi tarafından çevrilmiştir. Microsoft bu makine çevirilerini İngilizce bilmeyen kullanıcıların Microsoft ürünleri, hizmetleri ve teknolojileriyle ilgili içeriklerden yararlanmasına yardımcı olmak için sunar. Bu makale makine çevirisi olduğundan sözcük, cümle dizilimi ve gramer hataları içerebilir.

Yeteneklerinizi geliştirin
Eğitimleri keşfedin
Yeni özellikleri ilk olarak siz edinin
Office Insider Programına Katılın

Bu bilgi yararlı oldu mu?

Görüşleriniz için teşekkür ederiz!

Geri bildiriminiz için teşekkürler! Office destek temsilcilerimizden biriyle görüşmeniz yararlı olabilir.

×