ev > excel > Üfüqi bir css xəttini necə etmək olar. Blokları css ilə necə düzləşdirmək olar? Html-də necə xətt çəkmək olar


Üfüqi bir css xəttini necə etmək olar. Blokları css ilə necə düzləşdirmək olar? Html-də necə xətt çəkmək olar




Tapşırıq

Səhifədə üfüqi bir xətt çəkin.

Həll

Üfüqi xətlər bir mətn blokunu digərindən ayırmaq üçün yaxşıdır. Yuxarıda və aşağıda üfüqi xətləri olan kiçik mətn normal mətndən daha çox oxucunun diqqətini çəkir.

Bir etiket ilə

üfüqi bir xətt çəkə bilərsiniz, görünüşü istifadə olunan atributlardan, həmçinin brauzerdən asılıdır. Teq blok elementlərinə aiddir, ona görə də xətt həmişə yeni sətirdən başlayır və ondan sonra bütün elementlər növbəti sətirdə göstərilir. Bir çox etiket atributları ilə
bu etiket vasitəsilə yaradılan xətti idarə etmək asandır. Üslubların gücünü də birləşdirsəniz, sənədə xətt əlavə etmək sadə bir işə çevrilir.

Defolt xətt

boz və həcm effekti ilə göstərilir. Bu tip xətt həmişə saytın dizaynına uyğun gəlmir, buna görə tərtibatçıların üslublar vasitəsilə xəttin rəngini və digər parametrlərini dəyişdirmək istəyi başa düşüləndir. Bununla belə, brauzerlərdə bu məsələyə qeyri-müəyyən yanaşmalar var, buna görə bir anda bir neçə üslub xüsusiyyətlərindən istifadə etməli olacaqsınız. Xüsusilə, Internet Explorer-in köhnə versiyaları xətt rəngi üçün rəng xassəsindən, digər brauzerlər isə fon rəngindən istifadə edir. Ancaq bu, hamısı deyil, sıfırdan başqa xəttin qalınlığını (hündürlük xassəsini) təyin etməyi unutmayın və sərhəd xassəsini heç biri olaraq təyin edərək xəttin ətrafındakı çərçivəni çıxarın. Saat seçicisi üçün bütün xüsusiyyətləri bir araya gətirərək, biz məşhur brauzerlər üçün universal həll əldə edirik (nümunə 1).

Misal 1. Üfüqi xətt

HTML5 CSS 2.1 IE Cr Op Sa Fx

Üfüqi xətt rəngi

Mətn sətri

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Rəngli üfüqi xətt

Belə görünür ki, niyə dörd üsula ehtiyac ola bilər? Axı, demək olar ki, hər bir insan vərdiş etdiyi bir üsuldan istifadə edir. Məsələn, Shift və tire düyməsini bir neçə dəfə basdım və üfüqi bir xətt belə çıxdı.

Bəs bu, nöqtəli xəttlə nəticələnsə, ancaq möhkəm bir xəttə ehtiyacınız olarsa nə olacaq?
- Çox güman ki, klaviaturada Shift düyməsi nasazdır. Burada kömək etmək üçün bir neçə başqa yol var.

3.
4.
5.

Bəlkə də Word-də sətir düzəltməyin ən tanış yolu klaviaturada bir neçə düymədən istifadə etməkdir.

I Klaviaturadan istifadə edərək nazik, qalın, ikiqat, nöqtəli xətt

Aşağıda ingilis tərtibatı olan, lakin rus dilində tərtibat olmadan klaviaturanın rəsmi təsviri verilmişdir, lakin bunun əhəmiyyəti yoxdur, çünki bizi yalnız üç düymə maraqlandırır: Shift, tire və Enter.

düyü. 1. Klaviaturada üç düymə: Word-də davamlı üfüqi xətt üçün Shift, tire və Enter

Bu üç düymə ilə Word-də davamlı üfüqi xətt çəkə bilərsiniz: kəsikli və ya bərk, nazik və ya qalın, uzun və ya qısa.

1) Word redaktorunda “-” (tire) düyməsini bir neçə dəfə basdığınız zaman istənilən uzunluqda nöqtəli xətt alırıq.

Etmək nazik səhifənin bütün eni üçün uzun xətt:

  • Klaviaturada "tire" düyməsini tapırıq ("sıfır" düyməsinin sağında, Şəkil 1-də yaşıl çərçivədə).
  • Word-də yeni (!) Sətirdən bu düyməni bir neçə dəfə basın: -
  • Və sonra "Enter" () düyməsini basın. Bir neçə çap edilmiş tire qəflətən səhifənin bütün eni boyunca davamlı üfüqi nazik xəttə çevriləcək.

2) Shift və "-" (tire) düymələrini eyni vaxtda basdığınız zaman tire DEYİL, alt xətt _________ çap olunur. Beləliklə, sənədin istənilən yerində ixtiyari uzunluqda davamlı bir xətt çəkə bilərsiniz.

düyü. 2. Word-də nazik və qalın üfüqi xətt

İndi çap edirik qalın səhifənin bütün eni boyunca üfüqi xətt:

  • Yenə eyni tire düyməsini, həmçinin Shift düyməsini (istədiyiniz kimi sola və ya sağa) tapırıq. Shift düyməsini basıb saxlayın və buraxmayın.
  • İndi isə yeni (!) Xəttdən tire üzərinə bir neçə dəfə klikləyin (məsələn, 3-4 dəfə) (Shift-i buraxmadan): ___. Shift-i buraxın.
  • İndi Enter düyməsini basın. Qalın üfüqi möhkəm bir xətt görəcəksiniz.

Bəzi nəticələri cədvəl şəklində ümumiləşdirək:

(Böyütmək üçün klikləyin) Klaviaturadan istifadə edərək Word-də xətlər

­­­­­­­­­­­­­­­­­­­­­

II Cədvəldən istifadə edərək Word-də sətir

Yalnız yuxarı və ya alt haşiyənin rəngləndiyi (görünəcək) və cədvəlin digər üç tərəfinin rənglənməmiş haşiyələrə malik olduğu (görünməz olacaq) bir hüceyrədən (1x1) ibarət bir cədvəldən istifadə edərək üfüqi xətt əldə edilə bilər. .

Kursoru xəttin olması lazım olan yerə qoyuruq. Word-ün yuxarı menyusunda vurun:

  • Daxil edin (Şəkil 3-də 1),
  • Cədvəl (Şəkil 3-də 2),
  • Bir hüceyrə (şəkil 3-də 3).

düyü. 3. Word-də 1x1 cədvəli necə daxil etmək olar (bir xanadan)

Nəticə bir böyük hüceyrədən ibarət bir cədvəldir (1x1):

Sərhədləri çıxarmaq üçün üç tərəfdən 1x1 cədvəlində qalır. Bunun üçün

  • "Ev" sekmesine keçin (Şəkil 4-də 1),
  • "Şrift"in yanında "Paraqraf" və haşiyələri tapırıq (Şəkil 4-də 2),
  • "Sərhədsiz" (Şəkil 4-də 3) düyməsinə klikləməklə bütün sərhədləri silin;
  • "Yuxarı haşiyə" və ya "Aşağı sərhəd" seçin (Şəkil 4-də 4).

düyü. 4. Word cədvəlində sərhəd seçimini necə silmək olar (sərhədləri görünməz etmək)

Bunu videoda (məqalənin sonunda) açıq şəkildə göstərirəm.

Yeri gəlmişkən, Şek. 3 daha asan bir yol olduğunu göstərir. Kursoru Word-də xəttin əvvəlinə qoyub "Üfüqi Xətt" düyməsini sıxa bilərsiniz (Şəkil 4-də 5):

III Rəsmlə Word-də sətir

Insert (Şəkil 5-də 1) - Formalar (Şəkil 5-də 2) Word-də üfüqi xətt əldə etməyin başqa bir yoludur.

Xətti ciddi şəkildə üfüqi etmək üçün Shift düyməsini basıb saxlayın və eyni zamanda xətti çəkin.

düyü. 5. Word proqramında xətt necə çəkilir

IV Ekran klaviaturasından istifadə edərək Word-də Xətt

Ekran klaviaturasını tapmaq üçün Axtarışda "ekran klaviaturası" ifadəsini, Windows 7 və Windows 8 üçün daha ətraflı məlumat daxil edirik.

Windows 10 üçün Axtarış çubuğuna "ekran klaviaturası" yazmaqla ekran klaviaturasını da tapa bilərsiniz.

düyü. 6. Ekran klaviaturası

Adi klaviatura ilə ilk versiyada olduğu kimi eyni şəkildə üfüqi bir xətt yaradacağıq. Ekran klaviaturasında sizə üç düymə lazımdır: tire, Shift və Enter.

1 Tire və Daxil edin

Word-də yeni sətirdən tire üzərində bir neçə dəfə (Şəkil 6-da 1) vurun və Enter düyməsini basın. İncə bir üfüqi xətt alacaqsınız.

2 Shift, tire və Enter

Word-də yeni sətirdən əvvəlcə Shift (Şəkil 6-da 2), sonra Dash (Şəkil 6-da 1) düyməsini basın. Altından xətt çəkin. Beləliklə, daha 2 dəfə təkrarlayın və sonra Enter düyməsini basın. Nəticədə qalın bir üfüqi xətt görəcəyik.

Bütün oxuculara salamlar. Zaman zaman ustalar HTML və ya CSS-dən istifadə edərək üfüqi və ya şaquli xəttin necə çəkiləcəyi problemi ilə üzləşirlər. Bu gün sizə danışacağım şey budur.

CSS-də xətlər

Xətt düzəltməyin bir neçə yolu var. Belə üsullardan biri CSS-dən istifadə etməkdir. Daha doğrusu, Sərhədin köməyi ilə. Bir nümunəyə baxaq.

Və nəticə budur.

Css ilə üfüqi və şaquli xətt.

CSS-də xətlər Border operatorundan istifadə etməklə çəkilə bilər. Əgər siz sadəcə olaraq sabit haşiyə eni olan düzbucaqlı istəyirsinizsə, onda siz sadəcə olaraq bu operatordan istifadə edib ona dəyər verə bilərsiniz. Məsələn sərhəd: 5px bərk #000000; qutunun haşiyələrinin qara rəngdə 5 piksel enində olması demək olacaq.

Bununla belə, bütün sərhədləri deyil, yalnız bəzilərini təyin etməlisinizsə, o zaman hansı sərhədlərin lazım olduğunu və hər birinin hansı dəyərə sahib olacağını dəqiq göstərməlisiniz. Bunlar operatorlardır:

  • border-top - yuxarı haşiyənin dəyərini təyin edir
  • border-bottom - alt haşiyənin dəyərini təyin edir
  • border-left - sol sərhədin qiymətini təyin edir
  • border-right - sağ sərhədin qiymətini təyin edir.

HTML-də şaquli və üfüqi xətt

Siz həmçinin HTML-nin özündə xətlər yarada bilərsiniz. Bunun üçün hr etiketindən istifadə edə bilərsiniz.

Bu halda, bir piksel yüksək və tam eni olan üfüqi bir xətt çəkiləcəkdir.

Amma bu tag, bəzi dəyərlər təyin edə bilərsiniz.

  • Genişlik– xəttin eni dəyərini təyin edir.
  • rəng- xəttin rəngini təyin edir.
  • Hizalayın- sola, mərkəzə, sağa düzülməni təyin edir
  • ölçüsü– xəttin qalınlığının dəyərini piksellə təyin edir.

Hr etiketindən istifadə edərək şaquli xətt də təyin edə bilərsiniz. Ancaq bu vəziyyətdə, yenidən üslublara müraciət etməli olacaqsınız.

Bu halda, hündürlüyü yüz piksel, qalınlığı bir piksel və beş piksel girintili şaquli xətt çəkiləcək.

Nəticə.

Yaxşı, indi şaquli və üfüqi bir xətt qura biləcəyinizi bilirsiniz. Xətlər həm HTML istifadə edərək adi saytlarda, həm də WordPress kimi CMS-dən istifadə edən saytda quraşdırıla bilər, lakin bu halda HTML rejiminə keçməli olacaqsınız.

Yaxşı, daha çox sualınız varsa, şərhlərdə soruşun.

HTML səhifəsi yaratarkən üslub mühüm rol oynayır. Xüsusilə müxtəlif simvollar və dekorativ dizayn haqqında danışarkən: bu kiçik şeylər səhifənizin "dilini" daha əlçatan və aydın etməyə kömək edir, həmçinin onun qavrayışını və görünüşünü əhəmiyyətli dərəcədə dəyişdirir. Ən vacib dizayn elementlərindən biri üfüqi xəttdir və daha sonra onunla necə işləməyi və html-də üfüqi xəttin necə qurulmasını daha ətraflı öyrənəcəyik.

Üfüqi xətt nədir və nə üçün lazımdır

Html-də üfüqi xətt bir sıra funksiyaları yerinə yetirən səhifə dizayn elementidir:

  1. dekorativ. Səhifəyə cəlbedicilik əlavə etməyə kömək edir.
  2. Bölünmə. Müxtəlif mənalı məlumatların effektiv şəkildə ayrılmasına kömək edir.
  3. Vurğulamaq və ya vurğulamaq. Səhifə ziyarətçilərinin diqqətini zəruri və ən vacib məlumatlara cəlb edəcəkdir.

Bir sıra funksiyaları həyata keçirmək üçün ən əlçatan üsul hesab edilən üfüqi xəttdir. Yaratmaq çox sadədir və zahirən çox sərfəli görünür. Html koduna sadə dəyişikliklər etməklə siz aşağıdakıları idarə edə bilərsiniz:

  • uzunluq;
  • eni;
  • rəng xüsusiyyətləri;
  • bir və ya digər kənarda hizalama.

Qeyd etmək lazımdır ki, üfüqi xətt blok elementlərinə aiddir. Bu o deməkdir ki, o, səhifədə yeni sətir tutur və ondan sonrakı mətn aşağıda olacaq.

HTML-də üfüqi xəttin yaradılması

Üçbucaqlı mötərizədə sadə bir etiket - hr istifadə edərək bir xətt təyin edə bilərsiniz. Bu, "Üfüqi Qayda" üçün qısadır və klassik xarici parametrləri təyin edir. O, bir çox digərlərindən onunla fərqlənir ki, o, bağlanma etiketinə ehtiyac duymur və müstəqil mövcud ola bilir. Etiketdəki əlavə dəyərlərdən istifadə edərək elementin xarici xüsusiyyətlərini dəyişə bilərsiniz:

  1. Uzunluq. Əgər xəttin uzunluğunun bütün səhifəni əhatə etməsini istəmirsinizsə, o zaman istədiyiniz ölçüsü piksel və ya faizlə təyin edə bilərsiniz. Bu, etiketdəki əlavə "en" sözünün və dırnaq içərisində "=" işarəsindən sonra göstərilən uzunluğun ədədi göstəricisinin köməyi ilə həyata keçirilir.

Bu belə görünür. Məsələn, 100 piksel uzunluğa ehtiyacımız varsa, aşağıdakı etiketi təyin edirik: hr width="100"

  1. hizalanma. Hizalama sol və ya sağ kənarlarda, həmçinin mərkəzdə mümkündür. Bu xassə yalnız genişlik parametrini artıq təyin etmisinizsə qüvvəyə minir, çünki səhifə boyu xətti düzülmək mümkün deyil. Alignment üçün "align" etiketində əlavə bir atribut təyin edirik və ona istiqamət əlavə edirik: mərkəz - mərkəz üçün, sol - sol və sağ üçün - sağ düzülmə üçün.

Bu vəziyyətdə bitmiş etiket bu kimi görünəcəkdir. Məsələn, 150 piksel uzunluğunda üfüqi xətt üçün mərkəz düzülməsini təyin etməliyiksə, o zaman hazır teq belə görünəcək: hr align="center" width="150".

Qeyd edək ki, atribut genişlik metrikasından asılı olsa da, hizalanma üçün metrik olan "align" 1-ə təyin edilib.

  1. Genişlik. İsteğe bağlı olaraq qalın və ya nazik alt xətt yaradaraq eni də təyin edə bilərsiniz. Bu meyar heç bir şeydən asılı deyil və uzunluq və ya düzülməni təyin etmədən müstəqil olaraq istifadə edilə bilər. Bunun üçün etiketdəki size atributundan və piksellərdə istədiyiniz genişliyə bərabər rəqəmsal dəyərdən istifadə edirik. Nömrə size atributundan və "=" simvolundan sonra dırnaq içərisində göstərilir.

Beləliklə, 15 piksel enində bir xətt yaratmaq istəyiriksə, aşağıdakı teq yaratmalıyıq: hr size="15".

  1. Rəng. O, həmçinin müstəqil göstərici kimi təyin edilir. Onu dəyişdirmək üçün rəng atributundan kod şəklində və ya ingilis dilində rəngin adı ilə birlikdə istifadə olunur. Rəng "=" simvolundan sonra dırnaq içərisində göstərilir.

Beləliklə, standart ağ xətt üçün etiket iki şəkildə yazıla bilər: hr color="#FFFFFF" və ya hr color="white"

Qara rəng #000000 kodundan istifadə etməklə yaradıla bilər.

  1. Kənara qoy kölgə. Əgər sizə kölgə olmayan element lazımdırsa, o zaman etiketdə noshade atributundan istifadə edilməlidir. Tək və ya digər elementlərlə birlikdə istifadə edilə bilər. Ondan istifadə edən standart xətt üçün etiket belə görünəcək: hr noshade

Video ilə üfüqi bir xətt yaradın

Və məlumatı daha vizual formatda əldə etmək istəyirsinizsə, üfüqi bir xətt ilə işləmək imkanlarını ətraflı təsvir edən aşağıdakı videoya baxın.

Üfüqi xəttin tələb olunan ölçülərini təyin edərək, saytın səhifələrini məlumatların strukturlaşdırılmış və vizual olaraq yaxşı formalaşdığı şəkildə təşkil edə bilərsiniz. Bu, ziyarətçilərin təqdim olunan məlumatları qavramasını və saytınızı digərlərindən fərqləndirməsini asanlaşdırır.

Hamıya salam! Bu gün sizə html istifadə edərək üfüqi xəttin necə çəkiləcəyini söyləyəcəyəm.

Əslində, üfüqi bir xətt çəkmək ehtiyacı olduqca tez-tez yaranır, məsələn, mətnin bir hissəsini digərindən ayırmaq lazım olduqda.

css ilə üfüqi və şaquli xətlər

Bunu css ilə edə bilərsiniz. Bunun üçün div teqindən istifadə edərək mətnin lazımi hissəsini bloka əlavə edirəm, sonra style.css faylına və ya birbaşa html koduna border-top istifadə edərək yuxarı və ya alt haşiyə üçün bu blokun xassələrini yazırıq. və sərhəd-alt. Budur bir nümunə:

şaquli html xətti

Css ilə üfüqi xətt.

Bu halda, mən onu birbaşa html kodundan css ilə tərtib etdim və üst haşiyəni möhkəm xətt, alt haşiyəni isə nöqtəli xətt etdim.

Səhifədə belə görünəcək:

Css ilə üfüqi xətt.

Bu metodun üstünlükləri var:

  • Demək olar ki, istənilən növ xətti təyin etməyə imkan verən geniş parametrlər;
  • Həm üfüqi, həm də şaquli xətlər yarada bilərsiniz. Şaquli xətlər etmək üçün sərhəd-yuxarı sərhəd-sol və sərhəd-aşağı sərhəd-sağ olaraq dəyişdirməlisiniz.

Dezavantajlara kodun nisbi həcmliliyi daxildir.

Ancaq məlum oldu ki, html-dən istifadə edərək mətnə ​​üfüqi xətt daxil edə bilərsiniz. Eyni zamanda, css-ə dırmaşmaq belə lazım deyil. Bunun üçün etiket istifadə olunur.

.

html etiketi ilə üfüqi xətt

Bu etiketin ilk xüsusiyyəti onun qoşalaşmış son etiketinin olmamasıdır. Bu etiketlər arasında html kodunun istənilən yerində istifadə edilə bilər Və.

Bu etiket aşağıdakı atributlara malikdir:

  • Genişlik- üfüqi xəttimizin uzunluğunu piksel və ya faizlə müəyyən edir;
  • rəng– xəttin rəngini müəyyən edir;
  • Hizalayın– xəttin düzülməsini sağ kənara - sağa, sol kənara - sola, mərkəzə - mərkəzə təyin edir;
  • ölçüsü– piksellə xəttin qalınlığı.

Budur bir nümunə html kodu.