Bugün size HTML ve CSS kullanarak bir web sitesinde kalın harflerle kelimelerin nasıl yazılacağını anlatacağım. Bu tasarım, bir sayfada belirli bilgileri vurgulamanız gerektiğinde kullanılır. Üstelik sadece başlıklardan değil, metindeki basit kelimelerden, ifadelerden de bahsediyoruz. Bu oldukça basit bir şekilde uygulanmaktadır.
Belirli bir metni kalın olarak vurgulamak için özel HTML etiketleri kullanılır - ve ... Örneğin aşağıdaki kod:
| Düz metin. küçük resim. Güçlü kalın metin. |
Düz metin.
küçük resim.
Güçlü kalın metin.
Çıktı aşağıdaki resmi verir:
Son iki seçenek görsel olarak aynı görünüyor, ancak birbirlerinden biraz farklılar. Etiket bir kelimenin basit üslupsal cesurluğunu belirtirken belirli bir anlamsal "gelişmiş" (önemli) anlam ekler. Yani, son satır sadece kalın metin değil, bazı önemli bilgilerdir. Prensip olarak, arama motorları için tam olarak kullanılması önerilir. .
Stilleri kullanarak kalın metni HTML'de de görebilirsiniz:
Kalın metin örneği.
ile örnek metin gözü pek kelime.
Site bunu şöyle gösteriyor:
Kalın HTML kodu düzgün çalışsa da çalışmamalıdır. Tüm tasarım stilleri bir CSS dosyasında oluşturulmalıdır. Bu nedenle, yukarıdaki örnekte, etiketler için yapmanız gerekiyordu
VE uygun sınıfı belirtin ve ardından görünümünü stil sayfasına yazın. Bunlar kodlama kurallarıdır. Bu nedenle, HTML'de kalın için etiketi kullanın .
Kalın CSS metni
CSS'yi kalın yapmak için font-weight özelliği kullanılır. Yardımı ile metin parçasının "doygunluğu" belirtilir. Değerler 100 ile 900 arasında değişebilir, ancak en sık kullanılanları şunlardır:
- kalın (kalın) - varsayılan olarak 700;
- normal - varsayılan olarak 400.
Ayrıca, üst öğeye bağlı olarak yazı tipini sırasıyla daha fazla veya daha az kalın olarak değiştiren daha kalın ve daha açık değerler için seçenekler de vardır.
CSS'de kalın metin ayarlamak için, şu veya bu öğeye bir stil ayarlamanız gerekir, örneğin:
ile düz metin yağlı akıntı merkezinde.
güçlü (yazı tipi ağırlığı: kalın;)
Burada bana söylenen küçük bir nüansı not etmek istiyorum - eğer bir element için yeni bir sınıf yaratırsanız, o zaman az çok "anlaşılabilir bir isim" kullanmanız tavsiye edilir. Örneğin, yukarıdaki örnekte, class = "my-bold-font" stili, class = "new-font" stilinden daha mantıklı görünüyor, çünkü amacını kısmen anlayabilirsiniz. Bu, gelecekte düzeninize bakacak ve kullanacak olanlar için bir artı.
Bir sonraki yazıda, bulmayı başardığım bazı ilginç kalın yazı tiplerinden bahsedeceğim.
Html'de yazı tipi boyutu önemli bir rol oynar. Kullanıcının dikkatini web sitesi sayfasında yayınlanan önemli bilgilere çekmenizi sağlar. Harflerin sadece boyutu değil, aynı zamanda rengi, kalınlığı ve hatta ailesi de önemlidir.
Html yazı tipleriyle tarama yaparken etiketler ve nitelikler
Köprü metni dili, yazı tipleriyle çalışmak için geniş bir araç setine sahiptir. Sonuçta, html'nin ana görevi metin biçimlendirmesidir.
HTML dilinin yaratılmasının nedeni, tarayıcılarda metin biçimlendirme kurallarının görüntülenmesi sorunuydu.
Html'deki yazı tipleriyle çalışmak için kullanılan etiketleri ve özelliklerini düşünün. Asıl olan etikettir ... Özniteliklerinin değerlerini kullanarak yazı tipinin çeşitli özelliklerini ayarlayabilirsiniz:
- renk - metnin rengini ayarlar;
- boyut - geleneksel birimlerde yazı tipi boyutu.
1'den 7'ye kadar olan pozitif öznitelik değerleri desteklenir.
- face - etiketin içinde kullanılacak metnin yazı tipi ailesini ayarlamak için kullanılır ... Virgülle ayrılmış birkaç değer aynı anda desteklenir.
Yalnızca eşleştirilmiş yazı tipi etiketinin bölümleri arasındaki metin biçimlendirilir. Metnin geri kalanı standart varsayılan yazı tipinde görüntülenir.
Ayrıca html'de yalnızca bir biçimlendirme kuralı belirten bir dizi eşleştirilmiş etiket vardır. Bunlar şunları içerir:
- - html'de kalın yazı tipini ayarlar. Etiket eylem öncekine benzer;
- - boyut varsayılandan daha büyük;
- - daha küçük yazı tipi boyutu;
- - italik metin. benzer etiket ;
- - altı çizili metin;
- üstü çizildi;- - metni yalnızca küçük harfle göster;
- - büyük harfle.
düz metin
küçük resim
küçük resim
Normalden daha fazla
normalden daha az
italik
italik
altı çizili
Üstü çizildi
Stil Özelliği Yetenekleri
Tanımlanan etiketlere ek olarak, html'de yazı tipini değiştirmenin birkaç yolu daha vardır. Bunlardan biri, genel stil özniteliğinin kullanılmasıdır. Özelliklerinin değerlerini kullanarak yazı tipi görüntüleme stilini ayarlayabilirsiniz:
1) font-family - özellik, font ailesini ayarlar. Birkaç değerin numaralandırılması mümkündür.
Önceki aile kullanıcının işletim sisteminde yüklü değilse, html'deki yazı tipinin bir sonraki değere değiştirilmesi gerçekleşir..
Sözdizimi yazma:
yazı tipi ailesi: yazı tipi adı [, yazı tipi adı [, ...]]
2) yazı tipi boyutu - boyut 1'den 7'ye ayarlanır. Bu, html'deki yazı tipini artırmanın ana yollarından biridir.
Sözdizimi yazma:
yazı tipi boyutu: mutlak boyut | göreceli boyut | değer | faiz | miras
Yazı tipi boyutu da ayarlanabilir:
- piksel olarak;
- Mutlak değerde ( xx-küçük, x-küçük, küçük, orta, büyük);
- Yüzde olarak;
- Nokta olarak (pt).
Yazı tipi boyutu: 7
Yazı tipi boyutu: 24px
Yazı tipi boyutu: x-large
Yazı tipi boyutu: %200
Yazı tipi boyutu: 24pt
3) yazı tipi stili - yazı tipini yazma stilini ayarlar. Sözdizimi:
yazı tipi stili: normal | italik | eğik | miras
Değerler:
- normal - normal yazım;
- italik - italik
- eğik - sağa eğik yazı tipi;
- devral - ana öğenin yazımını devralır.
Bu özelliği kullanarak html'de yazı tipinin nasıl değiştirileceğine bir örnek:
yazı tipi stili: devral
yazı tipi stili: italik
yazı tipi stili: normal
yazı tipi stili: eğik
4) yazı tipi değişkeni - tüm büyük harfleri büyük harfe dönüştürür. Sözdizimi:
yazı tipi değişkeni: normal | küçük kapaklar | miras
Bu özellik ile html'de yazı tipinin nasıl değiştirileceğine bir örnek:
yazı tipi değişkeni: devral
yazı tipi değişkeni: normal
yazı tipi değişkeni: küçük büyük harfler
5) yazı tipi ağırlığı - metnin yazı kalınlığını (doygunluk) ayarlamanıza olanak tanır. Sözdizimi:
yazı tipi ağırlığı: kalın | daha kalın | daha hafif | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Değerler:
- kalın - html kalın yazı tipini ayarlar;
- daha kalın - normale göre daha şişman;
- daha hafif - normale göre daha az doymuş;
- normal - normal yazım;
- 100-900 - yazı tipi kalınlığını sayısal eşdeğerde ayarlar.
yazı tipi ağırlığı: kalın
yazı tipi ağırlığı: daha kalın
yazı tipi ağırlığı: daha hafif
yazı tipi ağırlığı: normal
yazı tipi ağırlığı: 900
yazı tipi ağırlığı: 100
Yazı tipi özelliği ve html yazı tipi rengi
Yazı tipi başka bir kapsayıcı özelliğidir. Dahili olarak, yazı tiplerini değiştirmek için tasarlanmış çeşitli özelliklerin değerlerini birleştirdi. Yazı tipi sözdizimi şöyledir:
yazı tipi: yazı tipi boyutu yazı tipi ailesi | miras
Ayrıca, değer, çeşitli kontrollerdeki yazılarda sistem tarafından kullanılan yazı tiplerine ayarlanabilir:
- başlık - düğmeler için;
- simge - simgeler için;
- menü - menü;
- mesaj kutusu - iletişim kutuları için;
- küçük resim yazısı - küçük kontroller için
- durum çubuğu - durum çubuğu yazı tipi.
yazı tipi: simge
yazı tipi: başlık
yazı tipi: menü
yazı tipi: mesaj kutusu
küçük resim yazısı
yazı tipi: durum çubuğu
yazı tipi: italik 50 piksel kalın "Times New Roman", Times, serif
Yazı tipinin rengini html'de ayarlamak için color özelliğini kullanabilirsiniz. Hem anahtar kelime hem de rgb biçimini kullanarak rengi ayarlamanıza olanak tanır. Ve ayrıca onaltılık bir kod şeklinde.
Merhaba sevgili blog okuyucuları! Bu makale üzerinde durulacak metin biçimlendirme etiketleri... Kalın veya italik metin en iyi örnektir. Ayrıca bazı etiketlerin sitenin dahili optimizasyonu üzerindeki etkisini ve bunların yazım kurallarını da ele alacağız. Bununla ilgili makaleyi okuyabilirsiniz. Bu arada, benzer metin tasarım öğelerini birçok metin düzenleyicide, örneğin Word'de bulabilirsiniz.
Etiketler 2 türe ayrılır: blok ve satır içi etiketler. İlkini kullanırken, metnin bir bölümünün içeriğini (satırlar, tek tek parçalar veya kelimeler), ikincisi ise değiştirebilirsiniz. Bu makalede inceleyeceğimiz biçimlendirme etiketleri ağırlıklı olarak küçük harflidir.
Etiketleri yazma kuralları ve sırası
Başlangıç ve bitiş etiketlerinin ne olduğunu zaten biliyorsunuz. Değilse, bu materyalin en başındaki makaleyi okuyun. Kısacası, iki tür etiket vardır: tek etiketler (örneğin, yeni bir satıra kaydırma) ve kapsayıcı (eşleştirilmiş). Bu nedenle, tüm metin biçimlendirme etiketleri eşleştirilmiş... Bu, herhangi bir öğenin bir başlangıç ve bitiş etiketine sahip olduğu ve seçimin bunların arasına yerleştirilmesi gerektiği anlamına gelir. Örneğin, bir ifadenin doğru seçimi şöyle görünür: Seçili snippet
Tarayıcı bu parçayı işlediğinde aşağıdaki metni göreceksiniz: Seçilen snippet. Bu arada, tüm etiketler RSS beslemesinde () görüntülenmez.
Etiketleri yazarken ana şey onları kapalı tutmaktır. Aksi takdirde, sayfadaki tüm metinler kalın olacaktır (etiketli örnekte ). Ancak, belirli bir parçayı aynı anda hem italik hem de kalın olarak vurgulamanız gereken zamanlar vardır. Ancak bu eylemi gerçekleştiren bir etiket yoktur. Bu durumdan çıkmanın tek bir yolu var: aynı anda iki etiket kullanmak. Bunları hangi sırayla kullanmak önemli değil. Bu nedenle, metni aşağıdaki gibi etiketlerle yazarak:
Seçili snippet
veya bunun gibi:
Seçili snippet
yine de alacaksın Seçili snippet italik ve aynı zamanda kalın harflerle. Bununla birlikte, ilk seçeneği kullanmak tercih edilir, çünkü başlangıçta tek ve doğru olan buydu. Ayrıca, ayarlara bağlı olarak her tarayıcının etiketleri farklı şekilde () işleyebileceğini unutmayın. Şimdi biçimlendirme etiketlerinin kendilerine geçelim.
Kalın ve İtalik Metin - Etiketler , , ve
En Popüler Metin Biçimlendirme Etiketleri - Vurgulama gözü pek ve italik olarak... Genellikle bir parçaya önem vermek için kullanılırlar. İlk durum, yararlı bilgiler veya anahtar kelimeler içeren bir parçayı vurgulamaya hizmet eder. İtalik, kalın metinle aynı amaçlar için kullanılır, ancak bilgiler daha az önemlidir, çünkü italikler gövde metninin arka planında kalın metne göre daha az görünür.Önce düşünün kalın yazı... Bu eylem için kullanılan iki etiket vardır - ve ... Görünüşte hiçbir fark yoktur. Her ne kadar herhangi bir tarayıcının her bir öğeyi farklı şekilde yorumlayabildiği göz önüne alındığında, farklılıkları görebilirsiniz. Etiketlerdeki metin böyle görünüyor ve tarayıcı tarafından önceden işlenmiş biçimde:
Güçlü etiketlerdeki metin
b etiketlerindeki metin
Ve işte sayfanın kaynak kodunda bu iki satır nasıl görünüyor:
Güçlü etiketlerdeki metin b etiketlerindeki metin
durumunda da aynı durumu gözlemleyebiliriz. italik etiketler ve ... İki örnek arasındaki farkları bulmaya çalışın:
em etiketlerindeki metin
Etiketlerdeki metin I
Ve işte kaynak kodu:
em etiketlerindeki metin Etiketlerdeki metin I
Bu nedenle, kalın ve italik olarak kabul edilen etiketler aslında farklı değildir, ancak o zaman neden örneğin varsa ? Sonuçta, ikincisi yalnızca bir karakter içerir (parantezleri saymaz) ve bu nedenle yazması daha kolaydır. Ve mesele şu ki, etiketler ve etkilemek. Anahtar kelimeleri bu etiketlerle çevrelerseniz, web sitesinin tanıtımı üzerinde faydalı bir etkisi olacaktır.Asıl mesele aşırıya kaçmamaktır - etikette maksimum metin %5 kalın metin olmalıdır. ve etikette aynı miktarda italik .
Metinde sadece bir anı vurgulamak istiyorsanız, etiketi kullanın. veya ... Genel olarak, arama motorlarının da bu etiketlerdeki metni daha önemli olarak gördüğünü düşünüyorum. dahili optimizasyon hala daha az etkiye sahipler ve .
Eğik çizgi metin etiketleri - , ve
Şimdi, metin stilinde bir özellik kullanan birkaç etikete bakalım. Bildiğiniz en ünlü metin editörü etiket
veya altını çizin. Bu etiketin sıralama üzerinde hiçbir etkisi yoktur (bildiğim kadarıyla), ancak bazı metinleri vurgulamaya ve ona odaklanmaya yardımcı olacaktır. Bu etiketi kullanmanın bir örneğini hemen yukarıda verdim. Amaca benzer iki etiket daha var - ve ... Her ikisi de üstü çizili metin işlevi görür. Bu etiketi herhangi bir durumda kullanabilirsiniz: bir belgeyi (veya daha doğrusu bir bölümünü) güncellerseniz, eskisinin üzerini çizebilir ve yeni bir tane ekleyebilirsiniz; materyalin konusundan sapan bir şey yazacaksanız; ahlaki ve etik standartlara uymayan bir şey.
Bu iki etiket arasındaki farklar yalnızca yazı, bunun sonucunda ilkini kullanmak tercih edilir, çünkü ilk olarak, yazmak daha uygundur ve ikincisi, sayfanızda daha az HTML kodu olacak ve arama motorları buna bayılacak.
Etiket ve nitelikler - metnin yazı tipi parametreleri
Şimdi öznitelikleri olmadan kullanılmayan bir etikete bakalım. Bununla, belirli bir metin parçası için parametreler ayarlayabilirsiniz. Genel olarak, artık (basamaklı stil sayfaları) kullanılması tercih edilir, çünkü sayfanın tüm HTML kodunu büyük ölçüde kısaltabilirler. Yani, aynı etikete bakalım . Onun için her şey var üç nitelik:
- yüz- yazı tipinin kendisi. Örneğin, Arial, Courier veya Verdana. Birkaç tane sıralayabilirsiniz, tk. tüm kullanıcıların geniş bir yazı tipi seti yoktur ve yüz özniteliğine birkaç tane yazarak, tarayıcı hangisini kullanacağını veya daha doğrusu sistemde hangisinin mevcut olduğunu seçebilecektir;
- boy- metnin boyutunu belirten bir özellik. Hem keyfi birimlerde hem de piksellerde ifade edilebilir;
- renk- metin rengi. Bu özellik hem HTML renk kodlarında hem de kelimelerde kullanılabilir. İlki #FFFFFF biçimindedir (burada F, A'dan F'ye kadar herhangi bir sayı veya harftir) ve ikincisi basit sözcüklerle yazılmıştır (örneğin, kırmızı kırmızıdır).
Etiketteki metin böyle görünüyor her özniteliği kullanarak:
Bu metnin boyutu 6 pikseldir
Bu metin kırmızı Bu metin Arial yazı tipindedir Bu metin kırmızı ve 5pxVe işte yazılı kodu işledikten sonra göreceğiniz şey: 
Bloklu metin tasarım öğeleri - üstbilgiler -, paragraf
, paragraf
Son olarak hemen hemen her belgede kullanılan blok elemanlarına bakacağız. Bunlar başlık ve paragraf etiketleridir. İlkini düşünelim. 6 tür başlık vardır ve her birinin kendi etiketi vardır. Her türün yalnızca kendi seri numarası vardır ve etiketler kullanılarak kaydedilir.
, ,..., ... İşlendiğinde tüm başlıklar şöyle görünür:
... İşlendiğinde tüm başlıklar şöyle görünür:
Kelime başlığından sonraki sayı, etiketteki sayıyla eşleşir
Şimdi paragraf vurgulama etiketi hakkında konuşalım.
Bu etiketin işlevi, metni diğer benzer metinlerden boş bir satırla ayırmaktır. Bir belgenin kaynak koduna bakarsanız, aşağıdakileri görebilirsiniz:
Yeşil kutularda bir paragraf, kırmızı kutularda başka bir paragraf vardır. Ve bu kod tarayıcı tarafından işlendikten sonra şöyle görünür (ok boş bir satırı gösterir):
Sonuç olarak, bir paragrafın diğerinden oldukça belirgin bir şekilde ayrıldığını elde ederiz, bu yararlıdır - okuma daha uygun hale gelir.
Bu yüzden makale hakkında belge biçimlendirme etiketleri... Bu materyalde tarif ettiğimden çok daha fazlası var. Sadece bazıları hakkında çok şey söylemeniz gerekiyor, bunun sonucunda onlara tam bir inceleme içeren ayrı makaleler ayrılacak.!
Yazı tipinin ağırlığı, CSS özelliği kullanılarak belirlenir. yazı tipi ağırlığı, aşağıdaki değerleri alabilir:
- daha hafif- daha hafif
- normal- normal
- gözü pek- gözü pek
- daha cesur- daha cesur
- 100..900 - 100, en ince yazı tipine karşılık gelir; 900 - en şişman
Bağlanmak yazı stili(yazı tipi stili) italik yazmak için kullanılır ve aşağıdaki anlamları alabilir:
- italik- italik, metnin kenarları yuvarlatılmış
- normal- normal
- eğik- italik
Bağlanmak yazı tipi değişkeni(yazı tipi) küçük büyük harflerle yazmak için kullanılır ve aşağıdaki anlamları alabilir:
- normal- normal
- büyük harfler- küçük büyük harfler
Kalın, italik ve küçük büyük harflere ek olarak, birkaç popüler stil daha vardır: alt çizgi ve madde işaretleri.
Bağlanmak metin-dekorasyon(metin dekorasyonu) metnin altını çizmeye yarar ve aşağıdaki değerleri alabilir:
- goz kirpmak- titreyen metin (IE tarafından desteklenmez)
- hat boyunca- üstü çizili metin
- Yok- değişiklik yapmadan
- üst çizgi- metnin üstündeki satır
- altını çizmek- altı çizili metin
Bağlanmak metin dönüştürme(metin dönüştürme) küçük büyük harflerle çalışmak için kullanılır ve aşağıdaki değerleri alabilir:
- büyük harf kullanmak- tüm kelimeler büyük harfle başlar
- küçük harf- tüm metin küçük harflerle yazılır
- Yok- değişiklik yapmadan
- büyük harf- tüm metin büyük harflerle yazılır
kullanım örneği yazı tipi ağırlığı, yazı stili, metin-dekorasyon, metin dönüştürme: Örnek # 9
Sayfanın HTML kodu:
başlıksız
"Rusya'nın altın yüzüğü"(antik Zalesye'de), eski Rus şehirleri ağını içeren bir turist rotası: Sergiev Posad, Pereslavl-Zalessky, Büyük Rostov, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy, Uglich. Zalesye adı öncelikle coğrafidir, Kiev Rus ile ilgili olarak “ormanın ötesinde” olan her şey anlamına geliyordu.
Tarihi şehirlerden geçen turist rotası (1970'in başından beri faaliyette), beş bölgenin topraklarından geçiyor - Moskova, Yaroslavl, Kostroma, Ivanovskaya, Vladimirskaya. Bu toprakların antik kentlerinin kendi kaderleri, geçmişleri var. Doğumlarının ilk günlerinden günümüze kadar olan tarihsel gelişimlerinde zorlu bir yol kat ettiler. Bu uzun yolculukta geri dönüşü olmayan çok şey kaybedildi. Kayıtsızlık ve ihmal, Kalyazin, Mologa, Uglich şehirleri gibi benzersiz binaların kısmen veya tamamen tahrip olmasına yol açar. Uglich hidroelektrik santralinin inşası sırasında, 15-17. yüzyılların eşsiz anıtlarına sahip antik Pokrovsky Manastırı havaya uçtu ve su altına girdi. Uglich'teki kiliselerin yarısı yıkıldı, manastırların çitleri söküldü, bu da topluluk bütünlüğünü bozdu. Restoratörlerin çabalarıyla, onarılamaz bir şekilde kaybolmuş gibi görünen düzinelerce antik mimari nesne, acil durumdan kurtarıldı ve yıkımdan kurtarıldı. Orijinal haliyle hayata döndürüldü: Uglich'teki Diriliş Manastırı'nın (1674-77) mimari topluluğu, Nerl'deki Şefaat Kilisesi (12. yüzyıl), Dmitrievsky Katedrali (12. yüzyıl) ve Vladimir'in Altın Kapısı, St. George Katedral (12. yüzyıl) Yuryev-Polsky, antik Suzdal anıtları, tüm şehir içindeki tarihi binaları restore etmek için kapsamlı çalışmaların yapıldığı şehir müzesi. Kostroma ve Suzdal'daki Ahşap Mimari Müzelerinin tüm mimari kompleksleri yeniden oluşturuldu. Bütün bunlar, Rus Topraklarının korunan bölgelerine dokunan insan elinin kreasyonlarıdır.
