HTML5 sözdizimi

Bildiğiniz gibi HTML5'te kurallar gevşetildi. Bu tamamen HTML5'in yaratıcılarının istediği şeydi, böylece web tarayıcılarının nasıl çalıştığını gerçekten taklit edebilirdi. Yani “faaliyet gösteren web siteleri” ile “standartlara uygun web siteleri” arasındaki farkı kısaltmak istiyorlardı. Gelecek bölümde kurallardaki değişikliklere daha detaylı bakacağız.

Elbette tarayıcılar tarafından desteklenen ve HTML5 standardı tarafından kesinlikle desteklenmeyen eski yöntemler de mevcut. Bu yöntemler HTML5 doğrulayıcıda bulunabilir.

gevşetilmiş kurallar

HTML5 işaretlemesine ilk kez aşina olduğumuzda, öğelerin , і Bu işaretleme için zorunlu değildir. HTML5'teki kurallar zayıflatılırsa iş burada bitmeyecek.

Ayrıca, aşağıdaki kelimede olduğu gibi, etiketlerdeki kelimeleri hem büyük hem de küçük harflerle kullanmanıza izin verilir:

U etiketleri vicoristuvati yapabilirsin hem büyük hem de küçük harfler.

Ayrıca boş elemanlarda veya bunun yerine olmayan elemanlarda risk altında olan yaka örgüsünü vikoristik olarak kapatmamak da mümkündür. (Resim),
(Sırayı yetiştirme) veya

popo
Rozrivu
satırlar

HTML5 ayrıca niteliklere ilişkin kuralları da değiştirdi. Niteliklerin anlamlarının artık dikkate alınmasına gerek yoktur, yalnızca akılda dikkate alınması gerekir, böylece gizli sembollere müdahale etmezler (sembolleri adlandırın>, = veya boşluk). Aks alın vikoristanny elemanı bu şekilde:

Değeri olmayan niteliklere de izin verilir. Bu nedenle, XHTML'de bir oran ayarlamak için sözdizimini tekrarlamanız gerekir:

daha sonra HTML5'te, yalnızca bir özellik adı belirterek HTML 4.01 geleneklerinde çalışabilirsiniz:

Ancak özellikle endişe duyanlar, HTML5'e izin verilmeyenler değil, özellikle katı geliştirici olmayanlar, genellikle hem katı hem de rahat kuralları veya aynı belgeyi ihlal edebilirler. Ancak benzer işaretleme XHTML'de de mümkündür. Her iki standartta da zorunlu iyi stil Notlar web tarayıcısında olduğundan tarayıcı size gönderilen her şeyi yakalayacaktır.

Elementlerin Vikoristanny'si , і . Öğede seçilen doğal dil sayfalarını ve öğelerini manuel olarak yerleştirin і Sayfa yerine sayfa hakkındaki bilgileri ayrı ayrı eklemenizi sağlar.

Etiketlerdeki Mali harfleri. Etiketlerde küçük harflerin kullanılması zorunlu değildir ancak bu tür etiketler çok daha geniştir ve girilmesi daha kolaydır (çünkü bir tuşa basmaya gerek yoktur) ), Ve aynı zamanda harika yazarlarla etiketlenmek gibi bir şey de değil.

Niteliklerin anlamını pençelerinize almak. Niteliklerin anlamları bu nedenle dikkate alınır; aksi takdirde izin verilmesi kolay olan hasarı ortadan kaldırmaya yardımcı olur. Pedler olmadan, yanlış bir nitelik değeri karakteri tüm sayfayı yok edebilir.

HTML5 kodunu kontrol etme

HTML5'teki kurallara yeni ve rahatlatıcı bir yaklaşım, bazı web geliştiricilerinin kesinlikle hoşuna gidebilir. Diğerleri için, tarayıcıyla uğraşmadan, sorunsuz çalışan bir şeyin görünümünün arkasında tutarsız, merhamet dolu, uyumanıza yardımcı olmayı amaçlayanların düşüncesi.

Yakshcho vi, başka bir türe gelin, o zaman bilin, aktarım için izhtrument doğru bir şekilde geçildi, Doğrulayıcının adı, HTML5 standartlarını değil kodu yapabilirsiniz, ben Yakshcho tarayıcısıyım ib simgeyle hastalıklı değil kod.

Deyaki z olası sorunlar, Doğrulayıcının zihinde nasıl yakalanacağına ilişkin aşağıdakileri içerir:

zorunlu unsurların sayısı (örneğin, unsur

HTML5 stilindeki tarayıcının canı cehenneme!

XHTML etiketlerinde Büyük edebiyatı vikorize etmek mümkün değildir.

Bu kodu doğrulamak için eski XHTML kurallarını geçip geçmediğini kontrol eden bir XHTML doğrulayıcıya ihtiyacınız vardır. W3C doğrulayıcı bunun için uygun değildir, ancak daha sonra http://validator.nu sitesindeki doğrulayıcıya gidin, burada Ön Ayar listesinde standardı (yani XHTML) belirtmeniz gerekir. Ayrıca, doğrulama kodunu doğrudan metin alanına eklememek için HTTP İçerik Türü konusunda gevşek olun kuralını da ayarlamanız gerekir.

Bu adımları takip ederek bir XHTML belgesi oluşturup kaydedebilirsiniz. Diğer tarayıcılar bu belgeyi orijinal HTML5 tarafıymış gibi ayrıştırmaya devam edecektir çünkü yalnızca bir XML belgesi gibi görünecektir. Böyle bir siteyi görüntülerken ek kurallar olmayacaktır.

Tarayıcıların sayfalarınızı XHTML kurallarına göre oluşturmasını istiyorsanız web sunucunuzu, sayfaları standart text / html türü yerine application / xhtml + xml MIME türü veya application / xml ile sunacak şekilde yapılandırmanız gerekecektir. Konuşmadan önce, XHTML5'i destekleyen tarayıcılar, temel HTML5 kodunu kullanarak bu tür işaretlemeyi farklı şekilde uygular. Sayfayı bir XML belgesi olarak işlemek zorunda kalırlar ve sayfaya girmeden (koddaki değişiklikler yoluyla), tarayıcı belgenin işlenmesini devralır.

Bu ne tür bir visnovok? Amatörlerden ciddi profesyonellere kadar web geliştiricilerinin büyük çoğunluğu için XHTML'nin katı kurallarıyla oynamak hiç kimse için gerekli değildir. Tek dezavantajı, XQuery ve XPath gibi XML araçları kullanılarak işlenmesi gerekenler yerine sayfalar gibi özel çözümlerin geliştirilmesidir.

İsterseniz tarayıcıyı kandırıp XHTML moduna geçmesini sağlayabilirsiniz. Bunu yapmak için dosyayı xhtml veya xht uzantılarıyla yeniden adlandırmanız ve ardından şunu açmanız yeterlidir: sabit disk senin bilgisayarın. Çoğu tarayıcı (Firefox, Chrome ve IE 9 dahil) bu sayfayı MIME XML ayarlarıyla web sunucusundan içe aktarılmış gibi gösterecektir. Sayfada küçük bir hata varsa, tarayıcı genellikle sayfayı (IE 9), XML hatasıyla ilgili bir bildirimi (Firefox) veya başka bir şeyi (Chrome) görüntüler.

DOM yak kısmi filmi

HTML5 ilk kez DOM kavramını tanıttı (Bunu bilmek isterdim ama kısmen değil), Artık HTML belgesi etiketler yerine nesnelerin bir koleksiyonu olarak görüntüleniyor. Bu yüzden HTML5 sözdizimi Uyuyamıyorum. Ancak kodu yazarken bitirebilirsiniz. etiketleme kuralları, HTML 4.01 veya XHTML 1.0'da yüklü olan

HTML 4.01 sözdizimi

İÇİNDE HTML Beşinci versiyondan önce kod yazmanın bir takım kuralları vardı:

1. Serbest mod gevşektir ve bu durum HTML 4.01'de düzeltilmiştir.
   "Http://www.w3.org/TR/html4/loose.dtd">
2. HTML 4.01'de vikorize edilen katı mod
   "Http://www.w3.org/TR/html4/strict.dtd">
3. Çerçevelerle bağlantı kurmaya yönelik sözdizimi hakkında daha fazla bilgi. HTML5'teki çerçevelerin güncelliğini yitirdiği düşünülür, ancak birçok geliştirici bunları hâlâ kullanmaktadır ve bazı çerçeveler, çeşitli web eklentileri geliştirirken daha da kullanışlıdır.

XHTML 1.0 sözdizimi

İÇİNDE XHTML Kodu yazmanın iki kuralı vardı:

1. XHTML 1.0'da tanıtılan geçiş modu
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. XHTML 1.0'da vikorize edilen Suvory katı modu
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 geçerli sözdizimi

HTML5 kullanırken, bir HTML belgesinin başına belge türleri yazma, Filmin daha fazla sözdiziminin aşırı sigortasından vikoristovat be-yak yapabilirsiniz (Kod yazma kuralları) Veya HTML 4.01 ve XHTML 1.0'ı arka arkaya kullanabilirsiniz.

Örneğin, nitelik değerlerini pads niteliği = değer ile çerçevelemeyin (Gevşek mod HTML 4.01 - gevşek), Ale aynı zamanda tekli etiketlere eğik çizgi koyar
(Katı mod xHTML 1.0 - katı).

XHTML (katı), en kısa

Kanıtlanmış HTML düzeni tasarımcıları, HTML5'te kod yazarken vikoryst'e ihtiyaç duyar; XHTML katı sözdizimi, düzen tasarımcısını iyi durumda tutar, rahatlamasına izin vermez ve böylece çalışmasını korur olası aflar kodda. Benzer şekilde, gelişmiş programlamada katı sözdiziminden kaçınmak faydalıdır çünkü katı sözdizimi son derece önemlidir.

HTML HyperText İşaretleme Dili anlamına gelir ( Köprü metni için dil işaretlemesi):

• dil hem insan hem de bilgisayar tarafından okunabileceği anlamına gelir;
• düzen yazdığınız kodun ek anahtar kelimelere dahil olduğu anlamına gelir;
• köprü metni HTTP'nin İnternet'in bir parçası olduğu anlamına gelir.

Her iki durumda da HTML setle birlikte gelir tüzük. Bu kurallar basit tutuldu ve en uç noktalara götürüldü kordonlar, Olayların nerede başlayıp nerede bittiğini bilmek.

Aşağıda HTML'deki bir paragraf örneği verilmiştir:

Tıpkı Tetris gibi, daha az şey öğrendikten sonra ödüller birikir ve başarılar bilinir hale gelir.

İçinde gördüklerin topuk tapınakları < и >isminde Etiketler HTML. Kokular olayların nerede başladığını ve nerede bittiğini gösterir.

Etiketleri söylenmemiş Kozhen algı. Vipadka'mıza<р>anlamına gelir paragraf metin.

Kural olarak kokular çiftler halinde gelir:

• etiketi açar<р>bir paragrafın başlangıcı anlamına gelir;
• etiketi kapatır
  bu son demektir.

Açma ve kapama etiketleri arasındaki farklardan biri, etiket adından önce gelen eğik çizgi /'dir.

Birleştirildiğinde etiketleri ve aradaki her şeyi açar, kapatır ve iptal eder HTML öğesi. Bir satır aslında HTML etiketlerini temsil eden bir HTML öğesidir<р>і

.

Bu sayfaya tarayıcınızda bakarsanız şunu fark edeceksiniz: HTML etiketleri tarayıcıda görüntülenmiyor. Yalnızca bir tarayıcı tarafından okunabilirler, yani ne tür olduğunu bilirsiniz içerik sen yazdın.

HTML yaz

Muhtemelen .txt uzantılı dosyalar gibi basit metin dosyalarıyla karşılaşmışsınızdır. Bu metin dosyasının haline gelmesine izin verin HTML belgesi(Metnin değiştirilmesi), extension.html'yi kullanmanız gerekir.

Bir metin düzenleyici açın, bunun yerine kopyalayıp yapıştırın:

Bu benim ilk web sitem!

Bu dosyayı my-first-webpage.html olarak kaydetmek için tarayıcınızla açmanız yeterlidir; şunu göreceksiniz:

Bu benim ilk web sitem!

• Vikorist, Notepad++ kullanarak metin düzenleyiciyi kullanarak geçit HTML belgeleri;
• vikorist tarayıcısı, Firefox görünümünde vidkritya HTML belgeleri.

Öznitellikler

Nitelikler bu şekilde Dodatkova HTML öğesine bağlı bilgiler. Kokular HTML etiketinin ortasına yazılır. Bu nedenle tarayıcıda da görüntülenmezler.

Örneğin, href özelliği mesajın amacı için kullanılır (etiket tarafından oluşturulur). ):

Firefox'u büyüle

Є Herhangi bir HTML öğesine eklenebilecek 16 HTML özelliği. Tüm kokular rahatsız edici değildir.

Temel olarak bir sınıfa (CSS için kullanılan) ve bir başlığa (imleci bir nesnenin üzerine getirdiğinizde görünen araç ipucu) sahip olacaksınız.

deyaki HTML öğeleri intikam almak obov'yazkoviÖznitellikler. Örneğin, bir görsel eklerken, onun genişlemesini src niteliğini kullanarak belirtmelisiniz:



Meta elementine dikkat edin görüntünün gösterimindeyse, görüntü oluşturulana kadar bir algılama yolu vardır obov'yazkovim.

Yorumlar

Bunu tarayıcının sayfa görüntüsünü bozmadan kodunuza yazarsanız, yazabilirsiniz. yorumlar. Tarayıcı tarafından göz ardı edilecekler ve yalnızca kod yazan kişiler tarafından kullanılabilirler.

Yorum şununla başlıyor: .

Selam Dünya!

kendiliğinden kapanan elemanlar

Bu HTML öğeleri yalnızca aşağıdaki etiketi içerir:




Kapama etiketi bulunmadığı ve dolayısıyla ortasına herhangi bir şey yerleştiremediği için, kendiliğinden kapanan elemanların ek bilgi sağlayan bir takım nitelikleri taşıması gerekir.

Bu, Web sayfanızın HTML standardına göre yazıldığını gösterir.




DOKTİP	betimlemek
HTML5
	Tüm belgeler için.
HTML4.01
"Http://www.w3.org/TR/html4/strict.dtd">	Sıkı HTML sözdizimi.
	Geçişli HTML sözdizimi.
	HTML belgesinin çerçeveleri olacaktır.
XHTML1.0
	Sıkı XHTML sözdizimi.
	Geçişli XHTML sözdizimi.
	XHTML ve çerçevelerle yazılmış belge.
	XHTML mobil profili, cep telefonlarına özel öğeler ekler.
XHTML1.1
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Açık bir anlamı yoktur, sözdizimi aynıdır ve açık kurallara tabidir.

Ayrıca belge türleri aynıdır (HTML ve XHTML için katı ve geçişli). Beslenme ekseni vibrati'nin standardı nedir?

HTML ve XHTML standartları

HTML, Web belgelerini işaretlemek için standart dildir.

HTML 4.01 ve HTML5'te bölümler sayfasının yeni görünümü farklıdır. Yerleşim ve yapı (başlıklar, paragraflar, paragraflar) HTML'de belirtilir. Tasarım (stil, yazı tipleri, renkler) CSS stillerine göre belirlenir.

Örneğin, etiket Hizalama özelliği kullanımdan kaldırıldı.

XHTML - Web belgelerinin ve XML tabanlı yaratımların dil düzeni genişletildi. XHTML standardı, HTML 4.01 ile XHTML arasındaki özelliklerin aktarımıdır.

vimogi XHTML	Bu mümkün değil	gerekli
Tüm suçlu etiketleri kapatılacaktır.
Tüm etiketler, nitelikler ve CSS kontrolleri küçük harfle yazılmalıdır.
Tüm etiket öznitelik değerleri sekmelerde saklanır.
Hiyerarşiye kesinlikle uyulmalıdır: ilk etiket, kalan etiket tarafından kapsanır.	...	...
Bir blok etiketi, bir satır etiketindeki yatırımları içeremez ancak içeremez. (Blok elemanı yandan kaldırıldıktan sonra yeni satırdan oluşturulur. Satır elemanı satır kaydırmayı bozmaz.)	...	...
Boolean nitelikleri genişletilmiş biçimde yazılır.
Obov'yazkovo'nun görüntüsü suçlu ancak açıklama belirtildi

XHTML dilinin avantajları söz diziminin katılığı DEĞİL, farklı etiketler oluşturabilme yeteneğidir.

Ancak 2 Haziran 2009'da World Wide Web Konsorsiyumu (W3C), XHTML kavramı geçersiz olduğundan XHTML 2.0 üzerinde çalıştığını duyurdu. Bir grup programcı HTML5 standardı üzerinde çalışmaya başladı. Ve HTML5 standardı henüz onaylanmamış olsa da web sitelerinin olmadığı zaten yazılıyor.

HTML5'in bitmiş olması kimin umurunda, perküsyon makaralarıyla tanışabilir:

HTML5 standardının resmi sürümüne şu adresten ulaşılabilir: www.w3.org/TR/html5/

Seçimle anlamlı. Başlamak zor: HTML dilini genişletmek istemediğiniz için XHTML standardını vikorize etmek kolay değil.

Üzerinde! DOCTYPE, çerçeve kullanan belgelere yöneliktir, tereddüt etmeyeceğiz: önceki gün.

Şimdi yiyecek: hangi sözdizimini seçmelisiniz - katı mı yoksa geçişli mi?

Katı ve geçişli sözdizimi HTML 4.01

Yeni standarda geçişi kolaylaştırmak için geçiş söz dizimleri oluşturulmuştur. Kaçırılması gereken çok şey var çünkü katı sözdizimi önemlidir.

Burada neler olduğunu daha basit bir şekilde anlayın. Katı söz dizimi ile başlayacağım.

katı sözdizimi

Geçerlilik kontrolü

Frenk ismi renk.

HTML kodunun üzerinde anlaşılan standarda uygunluğuna denir. geçerlilik, Ve geçerliliğin doğrulanması - doğrulama.

Düzen düzeltmelerine uymak için FireFox Html Validator'a bir eklenti yükleyin.

sayfamızı açalım FireFox tarayıcılarında, Ayıyı doğrulayıcı işaretine doğrultalım:

Doğrulayıcı işaretine çift tıklamak ödüllerin listesini açacaktır:




Hadi değiştirelim! Geçiş sözdizimi için DOCTYPE:

geçiş sözdizimi

Geçerlilik kontrolü

Metnin bir kısmının görülmesi gerekiyor Frenk ismi renk.

FireFox'u başlatın. Hiçbir iyilik yok:




Her şey harika. Belki neyden şikayet etmeliyim?

Benim zevkim: Geçerli bir düzen üzerinde çalışmak, ya tamamen HTML 4.01'in sözdizimi ile ya da HTML5'te. Doğrudan nedenlerden dolayı HTML'nin değiştirilmesi gerekiyor ve tasarımın CSS'den yoksun bırakılması gerekiyor. Ayrıca sitenin geçerli bir düzeni varsa ancak herhangi bir tarayıcıda düzgün görüntülenmiyorsa, bu açıkça bir tarayıcı sorunudur. Tarayıcının yeni sürümleri standartla daha uyumlu olacak ve geçerli kodun yorumlanmasından taviz vermeyecektir. Katlama düzeni yanlış uygulanırsa tarayıcının yeni sürümlerinin bozulmayacağının garantisi yoktur.

Geçişli sözdiziminin sadakatinden rahatsız olmayın, sadece standartlara uyun!

Artık geçerli düzen gerekli

Sonsuza kadar acı çekmek ister misin? Küçük düzen kusurları bile genellikle tarayıcılar tarafından otomatik olarak düzeltilir ve site kesinlikle normal şekilde çalışır. Tüm bu dost canlısı, pratik, unutulmaz faydalar ses sistemlerine saygı duyacaktır. Bir günlük etiket ekleyin

- bu sitenin derecelendirmesinde bir eksi.

Zdatnіst ile aynı ses sistemleri Lütfen HTML kodundaki eksiklikleri not edin ve düzenin geçerliliğinin sağlanması önerilir. Ek olarak, kodun geçerliliğini kontrol ederek daha önce fark edilmeyen bir dizi başka ciddi hatayı tespit etmek mümkündür.





İlk bölümde web sitesi tasarımının şunlardan oluşturulduğunu öğrendiniz: CSS konusunda sana yardımcı olacağım. Neyi ve neden çalışmanın gerekli olduğunu daha iyi anlamak için bir örneğe bakalım. HTML'nin süslemesiz siyah beyaz bir yapılandırma çerçevesi olduğunu ve CSS'nin benzersiz bir görüntü oluşturmamıza yardımcı olduğunu anlayın.

Bildiğiniz gibi sağ elini kullanan işçi renklerle, malzemelerle ve ek süslemelerle karşımıza çıktı. Web sayfasında her şey aynı: CSS kurallarının yardımıyla renkler ve girintiler eklenir, yazı tipi stili ve öğe boyutları değiştirilir ve bütün, son stil oluşturulur.

Basit stil sayfası

Temel stil sayfasının neye benzediğine ve hangi öğelerden oluştuğuna bir göz atalım. Bu, tüm etiketler için bir CSS stilidir

Web sayfasında neler var:

Şimdi metni göreceksiniz

Tarayıcıda dış görünüş satırı ne anlama geliyor? Her şey oldukça basit: yazı tipi kalın bir yazı tipi ve renk # 1E824C'dir (onaltılık renk kodu) ve 1em boyutunda görüntülenir (tarayıcıda gerekli olan yazı tipi boyutuyla karşılaştırılabilecek ortak bir birim).




Açıklayıcı bir stil, diğerleri gibi, farklı adlara sahip bir dizi öğeyi içerir. Bunları hatırlayın ki, gelecek bölümleri okuduğunuzda neler olduğunu anlayın.

Seçici Öğretici olarak tarayıcıya stili ne kadar ayarlamak istediğinizi söyleriz. Bizim durumumuzda seçici є p'dir. Blok dilsizdir Bu, seçiciden sonra kıvrımlı kolların () arasında bulunan alanın tamamının adıdır. Stil gücü Bu, uygun biçimlendirme seçeneğini gerektiren bir komuttur (örneğin, yazı tipi ağırlığını, rengini, yazı tipi boyutunu vb. değiştirmek istiyorsunuz). İktidar adından sonra çifte kontrol yapmak gerekir. Artık CSS'nin birçok gücüne aşina olacaksınız. Gücün anlamı Çift kutudan sonra, gücün anlamı, bağımsız olarak kast ettiğiniz şekilde yazılır, böylece bir güç tarzı yaratılır. İktidardakilerin kendi önemlerini belirtmeleri önemlidir.

Örneğin yazı tipi konumu ayarlandı anahtar kelimeler kalın, daha kalın, vb., renk - on altı değer, RGB (A), HSL (A) veya kırmızı, turuncu, beyaz vb. anahtar kelimeler, Yazı tipi boyutu - CSS birimleri (yüzlerce) % , piksel piksel, puan puan, yazı tipi yüksekliği) Veya küçük, orta, büyük vb. sabitlerle. Gücün anlamı işaretlendikten sonra yanına bir nokta konur.



CSS satırların, boşlukların, sekmelerin ve büyük/küçük harf aktarımına duyarlı olmadığından kodunuzu gelecekte okunması ve düzenlenmesi kolay olacak şekilde biçimlendirebilirsiniz. Örneğin yönlendirme kodunu tek satıra yazabiliriz:

P (yazı tipi ağırlığı: kalın; renk: #1E824C; yazı tipi boyutu: 1em;)

İşe yarıyor ama yeni biriyle evlenmek kolay mı? Özellikle CSS kodu çok uzunsa. Elbette boşluklarla ayırmanın zararı olmaz. Bir takım görgü kuralları vardır ve bunları hemen takip ederseniz, gelecekte kendinize "teşekkür ederim" diyeceksiniz.

Çoğu zaman, bir stili tanımlarken, bir seçicinin tüm gücünün tek bir blokta gösterildiği kompakt bir giriş biçimi kullanılır:

P (yazı tipi ağırlığı: kalın; renk: #1E824C; yazı tipi boyutu: 1em;)

Her ne kadar bunu yapmak istesem de, bu giriş şekli hantaldır:

P (yazı tipi ağırlığı: kalın;) p (renk: #1E824C;) p (yazı tipi boyutu: 1em;)

Kodda gezinmeyi kolaylaştırmak için, dış görünüm gücünü yeni bir satıra yazmanız ve gücü değiştirirken tablolamayı veya temizlemeyi değiştirmeniz önerilir. Bazen iki kutu ile gücün anlamları arasında uçurum olabiliyor ama burada hangisinin sizin için en iyi olduğuna karar verebilirsiniz.

Daha fazla netlik sağlamak için yorumları doğrudan CSS'ye ekleyebilirsiniz. Buraya stil sayfalarında gezinmenize yardımcı olacak açıklamalar ve simgeler yazabilirsiniz.

CSS'de yorumlar / * ve * / karakterleri arasına yazılır. Tarayıcıdaki web sayfasında görüntülenmezler ve yalnızca kodda görülebilirler. Perakendeciler ayrıca zaman alan CSS kodu eklemeye yardımcı olmak için yorumları sıklıkla kullanır. Yorumlar şuna benzer:

/ * Gövde metni stili * / p (yazı tipi ağırlığı: kalın; renk: #1E824C; yazı tipi boyutu: 1em;)

Dahili ve harici stil sayfaları

Bir stil sayfası oluşturduğunuzda, onu web sayfasına nasıl ekleyeceğinizi seçebilirsiniz. İki tablo seçeneği vardır - doğrudan sayfaya eklenen dahili olanlar ve .css uzantılı bitişik bir dosyada bulunan ve ek gönderim için sayfaya bağlanan harici olanlar.

Dahili stil sayfaları HTML belgesinde etiketler arasına yazılır. Dış görünümün web sayfasına bir stil sayfası eklemek gereklidir. Sitede yeni bir tasarım gerektiren çok sayıda sayfa bulunduğundan, stil eklemek ve düzenlemek sıkıcı bir iş haline gelir; süreç saatler sürer. Bu nedenle dahili stil sayfaları manuel olmayanlar olarak değerlendirilir.

Dış stil sayfaları büyük ölçüde genişletildi. Tabloyu gerekli tüm web sayfalarına, vikoryst'e ve etikete bağlamanız yeterlidir. C rel özelliği(Bu, sayfa ile dahil edilen dosya arasındaki ilişki anlamına gelir) ve stil sayfası değerleri, yani stil sayfasının dahil edilen dosyada yer aldığı anlamına gelir. href özelliği .css dosyanızın URL'sidir:

Yalnızca bir dosyayı düzenleyerek, kaç sayfada olduğunuza bakılmaksızın tüm sitenin stilini aynı anda değiştirebilirsiniz. Bu, özellikle büyük kaynaklar için çok kullanışlıdır.

Ders: stil sayfası oluşturma

Mevcut stil sayfalarından bazıları en manuel olanlardır ve bir tasarım geliştirirken en yaygın kullanılanlardır; bunları kendimiz oluşturmayı öğreneceğiz. Bu derse ait dosya arşivini bu sayfadan indirebilirsiniz.

Klasörde basit bir sayfa örneği ve bir resim içeren bir HTML belgesi bulacaksınız (bunu derste göreceksiniz). HTML belgesini tarayıcınızda açın. Yan tarafın kesinlikle benzersiz göründüğünü fark edeceksiniz. Daha çekici bir görünüm kazandırmak için ona bir stil yazalım.

Şimdilik çok fazla ayrıntıya girmenize gerek yok, bu da çok fazla kod anlamına geliyor. Artık işin prensibini anlamalısınız. Başlayalım.

CSS'yi HTML'ye bağlama

Başlamak için bilgisayarınızda bir metin düzenleyici açın (not defterine gidin) ve style adında yeni bir dosya oluşturun ve bu dosyayı extension.css ile kaydedin (style.css dosyasını girmelisiniz). Dosyayı istediğiniz HTML belgesiyle aynı klasöre kaydedin.

HTML belgesini bir tarayıcının yanı sıra bir metin düzenleyicide de açın (böylece mevcut sayfa görünümündeki değişiklikleri kolayca inceleyebilirsiniz). Etiketler arasına ekle Saldırgan kod:

Kısaca ne kazandığınız hakkında. Bu kodu bir HTML belgesine ekledikten sonra şunu göreceksiniz:

• Google sunucusundan alınacak Roboto Condensed adlı bir yazı tipi talep etti (Google yazı tipleri hakkında daha sonra bir rapor yayınlayacağız);
• Harici stil sayfamızı style.css (hala boş) bağladık.

Stil CSS yazma

Değişiklikleri HTML belgesine kaydedin ve yeni .css dosyasına gidin. Yan sayfa için bir stil ekleyelim:

Html (üst dolgu: 5 piksel; arka plan resmi: url (arka plan.jpg);)

Paranı sakla. İlk kuralı sen yazdın - etiket yok . İlk güç - dolgu üst - hayvana tarayıcı penceresi ile web sayfası yerine 5 piksel boyutunda erişim ekleyin. Başka bir gücün, arka plan görüntüsünün yardımıyla, tüm sayfanın arka planı için grafik dosyasının yolunu gösteren (HTML belgesiyle aynı klasörde bulunur) görüntüleri bağladınız.

Web sayfasının tarayıcıda açılması güncellendi. Her şey doğru ayarlanmışsa sayfada arka planın görüneceğini ve pencerenin üst kısmı ile metin arasında biraz daha fazla boşluk olacağını fark edeceksiniz.

Gövde (genişlik: %75; dolgu: 40 piksel; kenar boşluğu: 15 piksel otomatik; arka plan rengi: #EBEBEB; kenarlık yarıçapı: 30 piksel;)

Değişiklikleri dosyaya kaydedin. Zaraz vi:

• bunun yerine etiketin alanını ayarlayın tarayıcı penceresinin genişliğinin %75'ine eşdeğerdir;
• alanın her tarafında bir arada 40 piksel erişim sağlandı;
• sayfanın ortasındaki alanı taşıdık, ayrıca hayvan için bir açıklık ve 15 piksellik alt kısım oluşturduk;
• alanın arka plan rengini #EBEBEB olarak ayarlayın;
• 30 piksellik bir yuvarlama yarıçapı belirleyerek dikdörtgen alanı yuvarlattı.

HTML belgesini tekrar güncelleyeceğim. Bu durumda, bağlantı önbelleğine gidin veya kendisiyle ilişkili tüm dosyaların, vikoryst'in ve özel bir tuş kombinasyonunun güncellemelerini içeren sayfayı yeniden yükleyin (örneğin, Chrome için bu Ctrl+F5).

Kenarın ortasında köşeleri yuvarlatılmış dikdörtgen bir alan olduğunu fark edeceksiniz. Bu, CSS dosyasındaki eylemlerinizin sonucudur. Ayrıca tarayıcı penceresini değiştirmeyi deneyebilir ve dikdörtgen alanın genişliğinin boyutunuza göre ayarlandığını öğrenebilirsiniz. Bunun nedeni genişliğin yüzde olarak belirtilmesidir.

Ek CSS kullanarak yazı tipini değiştirme

Metnimizi süslemenin zamanı geldi. Bu kodu stil sayfanıza ekleyin ve değişiklikleri kaydedin:

H1 (renk: #E87E04; yazı tipi boyutu: 2 em; sol kenar boşluğu: 20 piksel; yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif;) h2 (renk: #E87E04; yazı tipi boyutu: 1,7 em; sol kenar boşluğu) : 20 piksel; yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif;) p (renk: #22313F; satır yüksekliği: %150; üst kenar boşluğu: 20 piksel; sol kenar boşluğu: 20 piksel; yazı tipi ailesi: "Roboto Yoğunlaştırılmış") ", sans Serif;)

Bunu yazdıktan sonra h1, h2, p etiketlerinin yazı tipi rengini belirlediniz, boyutlarını belirttiniz, sol kenara 20 piksellik bir kenar boşluğu eklediniz ve ayrıca

Hayvanın erişimini 20 piksele ve telayı satır yüksekliğine ayarladık ( sıra arası aralık metin) standarttan %50 daha fazla. Bundan önce, Roboto Condensed yazı tipini her üç etikete de bağladınız (bunun için en başından itibaren mesajın HTML dosyasında belirtilmesi gerekiyordu).

Tarayıcınızdaki sayfayı güncelleyin ve çalışmanın sonuçlarının keyfini çıkarın. Bu derste bir konuşma daha deneyeceğiz. Bu kodu CSS'ye ekleyin:

Vurgu (yazı tipi ağırlığı: kalın;)

Kendinizi kaydedin ve tarayıcınızdaki sayfayı yenileyin. Geriye kalan paragrafta metnin son kısmındaki yazı tipinin kalın hale geldiğini fark edeceksiniz. Ne olduğunu anlamak için pencereye gidin Metin düzeltici, Hemen HTML dosyasını açtınız. Kalan paragrafa bakın: teklifin bir kısmı etiketin içine alınmış vurgu sınıfı ile. Bu şekilde paragraftaki metnin bir sonraki satırı için bir stil yazdınız. Sınıflar hakkında daha detaylı bilgiyi bir sonraki bölümde bulacaksınız.

Son kesenin içine aşağıdaki tarafı girmeniz gerekir:





Alıştırmanın bir parçası olarak metnin boyutunu değiştirmeyi deneyin.

(Kabul edilebilir, 1,1em) ve ayrıca arasındaki girişi artırın

Ve alanın sol kenarı 10 piksel daha.

Visnovki

Bu bölümde CSS sözdiziminin yanı sıra temel bir stil sayfasının nasıl oluşturulacağı ele alındı. CSS'yi nasıl ekleyeceğinizi biliyor muydunuz? HTML sayfaları, Ayrıca basit stiller yaratmayı da öğrendi. Görünüşe göre bu bölümden hatırlanması gereken ana konuşmalar:

Her neyse CSS stili birkaç unsurdan oluşur: seçici, stil gücü ve gücün değeri.

Tüm güçler ve anlamları, seçiciyi yerleştirdikten sonra iki kıvrık kol () arasındaki ses bloğuna kaydedilir.

İşaretleri saygıyla takip etmek gerekir: iki figürlü kollar(Bloğu başlangıçta açar ve sonunda kapatır). Bu tanıtıcılar olmadan CSS düzgün çalışmaz.

Her zaman güçten sonra çift işaret ve anlamdan sonra çift işaret koymak gerekir.

CSS kodunun netliği ve daha hızlı kullanımı için dış görünüm gücünü yeni bir satıra yazın ve ayrıca boşlukları ve tabloları eksik bırakmayın.