რა მნიშვნელობების მიღება შეუძლია ტექსტის თვისების გასწორებას. CSS თვისებები ტექსტის გაფორმება, ვერტიკალური გასწორება, ტექსტის გასწორება, ტექსტის ამოკვეთა ტექსტის დეკორაციისთვის HTML- ში

მოგესალმებით ბლოგის საიტის ძვირფასო მკითხველს. ამ სტატიაში ჩვენ ვაგრძელებთ CSS სტილის საფუძვლების შესწავლას და html ტექსტის სტილის დასადგენად ვერტიკალურად გასწორებას, ტექსტის გასწორებას, ტექსტის ჩაღრმავებას და ზოგიერთ სხვა მახასიათებელს.

ტექსტის გასწორება CSS- თან

დავიწყოთ სტილის ატრიბუტებით, რომლებიც აკონტროლებენ ტექსტის გაყვანას ბლოკის ელემენტებში. დავიწყოთ text-align თვისებით, რომელიც სინამდვილეში align ატრიბუტის ჩანაცვლებაა (გამოიყენება html ელემენტების შინაარსის გასწორებისთვის, როგორიცაა p პუნქტები).

სტილის თვისება ტექსტის გასწორება ეკითხება ჰორიზონტალური ტექსტის გასწორებადა მხოლოდ ოთხი შესაძლო მნიშვნელობა აქვს:

ამ წესისთვის ხელმისაწვდომი მნიშვნელობები განსაზღვრავს განლაგებას, შესაბამისად: მარცხნივ - მარცხნივ, მარჯვნივ - მარჯვნივ, ცენტრით - ცენტრამდე და გამართლება - გვერდის სიგანეზე (ერთდროულად მარცხნივ და მარჯვნივ სიტყვებს შორის მანძილის გაზრდით). მაგალითად, ამ სტატიაში მოცემული ტექსტი გასწორებულია გვერდის სიგანეზე (თუ შეამჩნევთ, რომ მას საზღვრებიც აქვს მარცხნივ და მარჯვნივ) ტექსტის გასწორების გამოყენებით: გაამართლეთ წესი.

სტანდარტულად, ჰორიზონტალური გასწორება მარცხნივ გასწორებულია, ასე რომ თქვენ არ გჭირდებათ ტექსტის გასწორების სპეციფიკური მითითება: მარცხენა, თუ სხვა ელემენტში მითითებული არ არის სხვა ელემენტებში.

თვისების გამოყენების მაგალითები:

შემდეგი CSS თვისება ტექსტის იდენტური ეკითხება შეკვეთა წითელი ხაზისთვის, მაგალითად, ტექსტისთვის აბზაცის ნიშანში გვ. ეს წესი, ისევე როგორც ტექსტის გასწორება, მხოლოდ ბლოკის ელემენტებზე ვრცელდება. Სინტაქსი:

აქ დაშვებულია აბსოლუტური და ფარდობითი ჩაღრმავების მნიშვნელობები. აბსოლუტური მნიშვნელობები (px - პიქსელი, em, ყოფილი და ა.შ.) შეიძლება მიეთითოს როგორც პლუს, ასევე მინუს ნიშნით. ფარდობითი მნიშვნელობა, როგორც წესი, მოცემულია პროცენტულად (%). ფარდობითი მნიშვნელობა გამოითვლება ტექსტის არეალის სიგანედან. ასე რომ, css წესი ტექსტი-აბზაცის: 50% დაადგენს წითელ ხაზს ტოლი თვით ამ ხაზის სიგრძის ნახევარს. სტანდარტულად, "წითელი ხაზის" აბზაცი არის ნული. მაგალითი:

შემდეგი, მოდით ვნახოთ ვერტიკალური გასწორება - თვისება ვერტიკალური-გასწორება... ეს თვისება უკვე გამოიყენება ყველა html ელემენტისთვის და თითქმის ყველა საშუალებისთვის შინაარსის ელემენტების გასწორება ტექსტთან მათი საწყისი ხაზის მიხედვით. გარდა მაგიდის თეგებისა td და th, რომელშიც მთელი შინაარსი ვერტიკალურად იქნება გასწორებული. Სინტაქსი:

მოდით განვიხილოთ თითოეული მნიშვნელობა უფრო დეტალურად:

საბაზისო - ტექსტის ნაწილის გასწორება მშობლის ელემენტის საწყისთან. ეს არის ნაგულისხმევი;
ქვე - ტექსტის ნაწილი ნაჩვენებია, როგორც მშობელი ელემენტის ქვესაწერად ან ქვესახელად;
super - ტექსტის ნაჭერი ნაჩვენებია როგორც ზედწერილი ან ზედწერილი მშობელი ელემენტისთვის;
top - ტექსტის ნაწილი სწორდება მშობელი ელემენტის ზედა ნაწილთან;
text-top - ფრაგმენტი სწორდება მშობლის ელემენტის ტექსტის ზედა ზღვარზე;
შუა - ტექსტის ფრაგმენტის ცენტრში გასწორება მშობლის ელემენტის ცენტრში;
ქვედა - ტექსტის ნაწილის გასწორება მშობლის ელემენტის ქვედა ნაწილთან;
text-bottom - ფრაგმენტის გასწორება მშობელი ელემენტის ტექსტის ქვედა კიდესთან;

ქვემოთ მოცემულ ფიგურაში ნაჩვენებია ტესტის ფრაგმენტების ქცევა ვერტიკალური გასწორების თვისების სხვადასხვა მნიშვნელობებით Internet Explorer 11-ში:

ზემოთ ჩამოთვლილი მნიშვნელობების გარდა, შეგიძლიათ მიუთითოთ რიცხვითი მნიშვნელობები. მაგალითად, CSS წესის ვერტიკალური-გასწორება: 0 ნიშნავს იმას, რაც ვერტიკალური-გასწორების დაწერა: საბაზისო. ვერტიკალური გასწორება: 10px წესი გადააქვს ტექსტს საბაზისო ხაზიდან 10 პიქსელით. ტექსტის გადასაადგილებლად მნიშვნელობა უნდა იყოს მითითებული მინუსით.

კომპენსაცია შეიძლება მიეთითოს ფარდობით ერთეულებში, როგორიცაა em და ex, ან პროცენტულად.

ცხრილის უჯრედების შინაარსის ვერტიკალურად გასწორების მიზნით გამოიყენეთ შემდეგი მნიშვნელობები:

top - შინაარსის უჯრედის ზედა ნაწილთან გასწორება;
ქვედა - შინაარსის გასწორება უჯრედის ქვედა საზღვარზე;
შუა - უჯრედის ცენტრში გასწორება (ნაგულისხმევად გამოიყენება).

სასურველი შედეგის მისაღწევად, თქვენ ჩვეულებრივ უნდა ჩაატაროთ სხვადასხვა მნიშვნელობები ვერტიკალური გასწორების სტილის თვისებისთვის. მრავალი შესაძლო მნიშვნელობა სხვადასხვა შემთხვევაში იძლევა ძალიან განსხვავებულ შედეგებს.

თეთრი სივრცის და სიტყვის შესაფუთი ვარიანტები ხაზების წყვეტების გასაკონტროლებლად

რიგში შემდეგია თეთრი სივრცის პარამეტრი, რომელიც პასუხისმგებელია html გვერდზე თეთრი სივრცის სიმბოლოების ჩვენებაზე.

როგორც ვიცით, სტანდარტულად, ბრაუზერი აერთიანებს ყველა ზედიზედ თეთრი სივრცის სიმბოლოებს: ინტერვალებს, ხაზების წყვეტებსა და ჩანართებს, ერთ სივრცეში. გამონაკლისი წინასწარი ტეგი, მასში განთავსებული ტექსტი ნაჩვენებია როგორც არის, ყველა ინტერვალით.

თეთრი სივრცის თვისებას აქვს შემდეგი სინტაქსი:

აშკარაა, რომ ნორმალური მნიშვნელობა ნაგულისხმევად გამოიყენება და ტოვებს ყველაფერს, როგორც ზემოთ არის აღწერილი, ყველა ზედიზედ სივრცე გაერთიანებულია ერთში და ხაზების წყვეტები ავტომატურად ხდება.

მნიშვნელობის "პრე" გამოყენება იგივე იქნება, რაც "წინა" ნიშნის გამოყენება. ბრაუზერი გამოაქვეყნებს გვერდს, ნებისმიერი დამატებითი ადგილისა და დეფისის ჩათვლით, როგორც ამას დეველოპერი დაამატებს. თუ ტექსტის სტრიქონი ძალიან გრძელია, დაემატება გადაადგილების ჰორიზონტალური ზოლი.

ახლანდელი მნიშვნელობა ხელს უშლის ბრაუზერს ხაზების შეფუთვაში და ტექსტი ნაჩვენებია ერთ ხაზზე. ერთადერთი, რაც "br" ნიშნის დამატება საშუალებას მოგცემთ გადაიტანოთ ტექსტი ახალ სტრიქონზე.

წინასწარი შეფუთვის მნიშვნელობა ინახავს სივრცის ყველა თანმიმდევრობას და ხაზების წყვეტებს, მაგრამ თუ ხაზი არ ჯდება მითითებულ უბანში, ბრაუზერი ავტომატურად ახვევს ტექსტს ახალ სტრიქონზე.

ხაზის წინასწარი მნიშვნელობა გადააქვს სივრცეები ერთ სივრცეში, ინახება ხაზის არხები და ბრაუზერმა შეიძლება გატეხოს ძალიან გრძელი ხაზები, რათა თავიდან იქნას აცილებული ჰორიზონტალური გადახვევა.

გამოყენების მაგალითი:

განვიხილოთ შემდეგი სიტყვა-შესაფუთი პარამეტრი, რომელიც გეტყვით გადაიტანოთ თუ არა გრძელი სიტყვები, რომლებიც მოცემულ არეალში არ ჯდება. ეს თვისება ხშირად არ გამოიყენება, მაგრამ ზოგჯერ ამის გაკეთება არ შეგიძლიათ:

სიტყვა-შეფუთვა: ნორმალური | სიტყვა-სიტყვა

ნორმალური მნიშვნელობა ეუბნება ბრაუზერს, რომ ტექსტის გაყოფა შესაძლებელია მხოლოდ სივრცეებში და ეს არის ჩვეულებრივი ბრაუზერის ქცევა. სიტყვის წყვეტილი მნიშვნელობა საშუალებას აძლევს ბრაუზერს ჩასვა სიტყვების სტრიქონების წყვეტები. მაგალითი:

ტექსტის ჩრდილის პარამეტრები - ტექსტური ჩრდილის თვისება

CSS3 სტანდარტის სხვადასხვა დეკორაციების მოყვარულთათვის შესაძლებელი გახდა ტექსტისთვის ჩრდილის დაყენება. ტექსტის ჩრდილის თვისების სწორად გამოყენებამ შეიძლება აშკარად გააცოცხლოს ვებ-გვერდი. Სინტაქსი:

მნიშვნელობა არ აუქმებს ტექსტის ჩრდილს და ნაგულისხმევად არის მითითებული.

ჩრდილის ფერი მითითებულია CSS ფორმატის ნებისმიერ ფორმატში და არის არასავალდებულო პარამეტრი. სტანდარტულად, ჩრდილის ფერი იგივეა, რაც ტექსტის ფერი.

ჩრდილის ჰორიზონტალური კომპენსაცია შეიძლება მიეთითოს CSS– ის მხარდაჭერილი ზომის ნებისმიერ ერთეულში. პოზიტიური მნიშვნელობა განათავსებს ჩრდილს ტექსტის მარჯვნივ, ხოლო უარყოფითი მნიშვნელობას მარცხნივ. ნულის მნიშვნელობა აყენებს ჩრდილს ტექსტის პირდაპირ ქვემოთ და მხოლოდ მაშინ არის მნიშვნელოვანი, თუ ჩრდილი ბუნდოვანია.

ჩრდილის ვერტიკალური კომპენსაცია ასევე შეიძლება დაყენდეს ზომის ნებისმიერ ერთეულში, რომელსაც მხარს უჭერს CSS. დადებითი მნიშვნელობა გადააქვს ჩრდილს ტექსტის ქვემოთ, ხოლო უარყოფითი მნიშვნელობა გადააქვს მასზე ზემოთ. ნულის მნიშვნელობა აყენებს ჩრდილს ტექსტის ქვემოთ.

გაზომვის ნებისმიერ ერთეულში და ჩრდილის დაბინდვის რადიუსი... რაც უფრო მაღალია ღირებულება, მით უფრო ფართო ხდება ჩრდილი და მით უფრო გლუვდება იგი. თუ ეს პარამეტრი არ არის მითითებული, ბუნდოვანი მნიშვნელობით ნულოვანია. მას შემდეგ, რაც ანტი-ალიასის ალგორითმი განსხვავებულია სხვადასხვა ბრაუზერისთვის, ჩრდილის გამოჩენა შეიძლება მცირედ განსხვავდებოდეს ბრაუზერის მიხედვით.

მოდული CSS ტექსტი აღწერს CSS ფუნქციებს, რომლებიც აკონტროლებენ საწყისი ტექსტის თარგმნას ფორმატირებულ ტექსტში და ხაზის შეფუთვას. CSS- ის სხვადასხვა თვისებები უზრუნველყოფს კონტროლს საქმის გადაკეთებაზე, სივრცის დამუშავებაზე, ტექსტისა და სტრიქონების დეფლაციის და შეფუთვის წესებზე, გასწორებაზე, ინტერვალზე და ჩაღრმავებაზე.

ტექსტის ძირითადი ერთეული არის სიმბოლო. ამასთან, რადგან წერის სისტემები ყოველთვის ისეთი მარტივი არ არის, როგორც ჩვეულებრივი ინგლისური ანბანი, სინამდვილეში რა სიმბოლოა, დამოკიდებულია იმ კონტექსტზე, რომელშიც ტერმინი გამოიყენება. მაგალითად, კორეულ წერილობით სისტემაში, თითოეული კვადრატული წარმოდგენა syllable (მაგალითად, 한 \u003d han) შეიძლება ჩაითვალოს სიმბოლოდ. ამასთან, კვადრატული სიმბოლო მართლაც შედგება რამდენიმე ასოსგან, თითოეული წარმოადგენს ფონემას (მაგალითად, ㅎ \u003d h, ㅏ \u003d a, n \u003d n) და თითოეული მათგანი ასევე შეიძლება სიმბოლოდ ჩაითვალოს.

1. ტექსტის გარდაქმნა: ტექსტის გარდამქმნელი თვისება

ტექსტის გარდაქმნის თვისება სტილს მისცემს ტექსტს. ეს გავლენას არ ახდენს არსებულ შინაარსზე და არ უნდა იმოქმედოს უბრალო ტექსტის ასლის და ჩასმა ოპერაციის შინაარსზე.

ქონება მემკვიდრეობით გადაეცემა.

Სინტაქსი

ტექსტური გარდაქმნა: არცერთი; ტექსტი-გარდაქმნა: კაპიტალიზაცია; ტექსტი-გარდაქმნა: დიდი; ტექსტური გარდაქმნა: პატარა; ტექსტ-გარდაქმნა: მემკვიდრეობა; ტექსტ-გარდაქმნა: საწყისი;

2. სივრცეების მართვა და ხაზების წყვეტები: თეთრი სივრცის თვისება

თეთრი სივრცის თვისება ამუშავებს ელემენტებს შორის სიტყვებსა და სტრიქონებს შორის შუალედებს.

ქონება მემკვიდრეობით გადაეცემა.

თეთრი სივრცე
ღირებულებები:
ნორმალური	ნაგულისხმევი მნიშვნელობა. სიტყვებს შორის მხოლოდ ერთი სივრცეა ჩასმული, დამატებითი სივრცეები განადგურდება. ტექსტი შეფუთულია მხოლოდ საჭიროების შემთხვევაში.
ახლახანს	ხელს უშლის ხაზის წყვეტებს, გარდა გამოყენებისას .
წინა	ტექსტში სივრცეები არ არის იგნორირებული, ბრაუზერი აჩვენებს დამატებით ადგილებს და ხაზების წყვეტებს.
წინასწარ შეფუთვა	ინახავს ადგილებს ტექსტში, საჭიროების შემთხვევაში სტრიქონების შესვენებით.
წინასწარი ხაზი	ხსნის დამატებით ადგილებს, გარდა შემთხვევებისა .
შესვენების სივრცეები	ქცევა იდენტურია წინასწარი შეფუთვისგან, გარდა იმ შემთხვევისა, როდესაც: არასასურველი თავისუფალი სივრცის ნებისმიერი თანმიმდევრობა ყოველთვის იკავებს ადგილს, ხაზის ბოლოს ჩათვლით; ხაზების წყვეტები არსებობს თითოეული არა-მოსახსნელი სივრცის შემდეგ, მათ შორის სივრცეებს \u200b\u200bშორის.
საწყისი
მემკვიდრეობით მიღება

Სინტაქსი

თეთრი სივრცე: ნორმალური; თეთრი სივრცე: ახლახანს; თეთრი სივრცე: pre; თეთრი სივრცე: წინასწარ შეფუთვა; თეთრი სივრცე: წინა ხაზი; თეთრი სივრცე: ბრეიკ-სივრცეები; თეთრი სივრცე: მემკვიდრეობა; თეთრი სივრცე: საწყისი;

3. ჩანართების დაყენება: ჩანართის ზომის თვისება

ჩანართის ზომის თვისება გამოიყენება Tab გასაღებით მიღებული ჩაღრმავების ოდენობის შესაცვლელად. თვისების მნიშვნელობები იგნორირებულია, როდესაც თეთრი სივრცის თვისების სამი ხაზის წინა, ნორმალური ან ახლანდელი მნიშვნელობებიდან ერთი დგინდება.

მუშაობს მხოლოდ ელემენტებზე და <pre>ბლოკის დანარჩენი ელემენტებისათვის მნიშვნელობა ყოველთვის იქნება ერთი. სიგრძის ერთეულებში მითითებული ქონების მნიშვნელობები მხარდაჭერილია მხოლოდ Chrome 42+ - ში.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>ჩანართის ზომა: 0; ჩანართის ზომა: 10px; ჩანართის ზომა: მემკვიდრეობა; ჩანართის ზომა: საწყისი;</p><h3>4. ხაზის წყვეტისა და სიტყვის საზღვრები</h3> <p>როდესაც ხაზის დონის შინაარსი გაყოფილია ხაზებად, ის იყოფა ხაზოვან ბლოკებად. ამ გაყოფას ხაზის წყვეტს უწოდებენ.</p> <p>როდესაც ხაზი წყდება ხაზის აშკარა შესვენების გამო, როგორიცაა ახალი ხაზი ან ტეგი <br> , ბლოკის დაწყება ან დასრულება ხაზის იძულებითი წყვეტაა.</p> <p>თუ სტრიქონი წყდება შინაარსის შეფუთვის გამო, როდესაც ბრაუზერი ქმნის არასავალდებულო ხაზების წყვეტებს შინაარსის შესაფერისად, ეს რბილი შეფუთვაა.</p> <h4>4.1. ასოების დარღვევის წესები: სიტყვის წყვეტის თვისება</h4> <p>Word-break თვისება განსაზღვრავს ასოებს შორის რბილი შეფუთვის შესაძლებლობებს, ე.ი. როდესაც დასაშვებია ტექსტის სტრიქონების გაყოფა. კერძოდ, იგი აკონტროლებს აქვს თუ არა რბილი დეფლაცია მიმდებარე ტიპოგრაფიულ ასოთა ერთეულებს და / ან რიცხვებს შორის. ეს გავლენას არ ახდენს სივრცის მიერ შექმნილი რბილი დეფლაციის შესაძლებლობების მარეგულირებელ წესებზე.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>სიტყვის წყვეტა: ნორმალური; word-break: break-all; word-break: ყველაფრის შენარჩუნება; სიტყვა-შესვენება: მემკვიდრეობა; სიტყვა-შესვენება: საწყისი;</p><h4>4.2. ხაზის წყვეტა: ხაზის შესვენება</h4> <p>ხაზის წყვეტის თვისება განსაზღვრავს წრფის წყვეტის წესებს ელემენტში, კერძოდ, თუ როგორ ურთიერთქმედებს ხაზის წყვეტები პუნქტუაციის ნიშნებთან და სიმბოლოებთან.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <table class="t1"><tr><th colspan="2">ხაზის შესვენება</th> </tr><tr><td>ღირებულებები:</td> <td> </td> </tr><tr><td> ავტო</td> <td>ბრაუზერი განსაზღვრავს ხაზის წყვეტის შეზღუდვების ერთობლიობას, რაც შეიძლება შეიცვალოს ხაზის სიგრძის მიხედვით, მაგალითად, ხაზების წყვეტის წესების ნაკლებად მკაცრი ნაკრების გამოყენება მოკლე ხაზებისთვის. ნაგულისხმევი მნიშვნელობა.</td> </tr><tr><td> ფხვიერი</td> <td>ანაწილებს ტექსტს ხაზების შესაფუთი წესების ნაკლებად შემზღუდველი ნაკრების გამოყენებით. როგორც წესი, გამოიყენება მოკლე ხაზებისთვის, მაგალითად გაზეთებში.</td> </tr><tr><td> ნორმალური</td> <td>ანაწილებს ტექსტს ხაზების შესაფუთი წესების ყველაზე გავრცელებული ნაკრების გამოყენებით.</td> </tr><tr><td> მკაცრი</td> <td>ანადგურებს ტექსტს ხაზების შესვენების მკაცრი ნაკრების გამოყენებით.</td> </tr><tr><td> საწყისი</td> <td>ადგენს ქონების მნიშვნელობას მის ნაგულისხმევ მნიშვნელობას.</td> </tr><tr><td> მემკვიდრეობით მიღება</td> <td>მშობლის ელემენტისგან იღებს მემკვიდრეობით ქონების მნიშვნელობას.</td> </tr></table><p><b>Სინტაქსი</b></p><p>ხაზის წყვეტა: ავტო; ხაზის შესვენება: ფხვიერი; ხაზის შესვენება: ნორმალური; ხაზის შესვენება: მკაცრი; ხაზის წყვეტა: მემკვიდრეობა; ხაზის შესვენება: საწყისი;</p><h4>4.3. დეფისი: დეფისი თვისება</h4> <p>დეფისის თვისება განსაზღვრავს, დაშვებულია თუ არა დეფისს ტექსტის სტრიქონში რბილი დეფისირების შესაძლებლობების შექმნა.</p> <p>Hyphenation კონტროლდება სიტყვის დარღვევით, რომელშიც სიტყვების დარღვევა ჩვეულებრივ არ ხდება აბზაცების განლაგების გასაუმჯობესებლად. როგორც წესი, სიტყვების გაყოფა ხდება სილაბური ან მორფემიული საზღვრების გასწვრივ და განცალკევების ვიზუალური მითითებით (ჩვეულებრივ დეფისის ჩასმით, -). ზოგიერთ შემთხვევაში, დეფისით შეიძლება შეცვალოს სიტყვის მართლწერაც. ნებისმიერ შემთხვევაში, სიტყვის შეფუთვა მხოლოდ გაწევის ეფექტია: მან არ უნდა იმოქმედოს დოკუმენტის შინაარსზე, ტექსტის შერჩევაზე ან ძიებაზე.</p> <p>CSS ტექსტის დონე 3 არ განსაზღვრავს ზუსტი დეფლაციის წესებს, ამიტომ გირჩევთ, აირჩიოთ ხაზის წერტილები, რომლებიც შეესაბამება თქვენს ენას.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <table class="t1"><tr><th colspan="2">დეფისები</th> </tr><tr><td>ღირებულებები:</td> <td> </td> </tr><tr><td> არცერთი</td> <td>სიტყვები არ არის დეფისირებული, მაშინაც კი, თუ ამ სიტყვის სიმბოლოები პირდაპირ განსაზღვრავენ დეფისს.</td> </tr><tr><td> სახელმძღვანელო</td> <td>სიტყვების დეფლაცია ხდება მხოლოდ იმ ადგილებში, სადაც სიტყვის შიგნით არის სიმბოლოები, რომლებიც ნათლად მიუთითებენ სიტყვის დეფლაციის (სპეციალური ხასიათის -) შესაძლებლობაზე. ნაგულისხმევი მნიშვნელობა.</td> </tr><tr><td> ავტო</td> <td>სიტყვები შეიძლება დაიყოს ტიპაჟის შესაძლებლობებად, რაც ავტომატურად განისაზღვრება ენის შესაფერისი დეფისირების რესურსით, გარდა იმ ხაზებისა, რომლებიც პირდაპირ არის მითითებული დეფისით. თქვენ უნდა დააყენოთ თქვენი შინაარსის ენა (მაგალითად, lang HTML ატრიბუტის ან HTTP შინაარსის ენის სათაურის გამოყენებით) ავტომატური სიტყვების სათანადო შეფუთვის მისაღებად.</td> </tr><tr><td> საწყისი</td> <td>ადგენს ქონების მნიშვნელობას მის ნაგულისხმევ მნიშვნელობას.</td> </tr><tr><td> მემკვიდრეობით მიღება</td> <td>მშობლის ელემენტისგან იღებს მემკვიდრეობით ქონების მნიშვნელობას.</td> </tr></table><p><b>Სინტაქსი</b></p> <p>დეფისები: არცერთი; დეფისები: სახელმძღვანელო; დეფისები: ავტო; დეფისები: მემკვიდრეობა; დეფისები: საწყისი;</p><h4>4.4. შეფუთვა-ბლოკის გადავსება: გადახურვა-შეფუთვა / სიტყვა-შეფუთვა</h4> <p>გადავსების გადაფარვის თვისება (ან მისი ამორტიზებული სახელი word-wrap) განსაზღვრავს, შეუძლია თუ არა გაწყვეტილი ხაზის გაწყვეტა გადაუჭრელ წერტილებზე, რათა თავიდან იქნას აცილებული ხაზის ყუთი. მუშაობს, როდესაც თეთრი სივრცის თვისება იძლევა შეფუთვას.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <table class="t1"><tr><th colspan="2">გადავსება-გადატანა, სიტყვის გადატანა</th> </tr><tr><td>ღირებულებები:</td> <td> </td> </tr><tr><td> ნორმალური</td> <td>შეუწყვეტელი ხაზების გაწყვეტა შესაძლებელია მხოლოდ დაშვებულ შესვენების წერტილებში. ნაგულისხმევი მნიშვნელობა.</td> </tr><tr><td> სიტყვის სიტყვა</td> <td> </td> </tr><tr><td> სადმე</td> <td>სიმბოლოების მომიჯნავე თანმიმდევრობა შეიძლება დაირღვეს თვითნებურ წერტილში, თუ სტრიქონში არ არის სხვა მისაღები შესვენების წერტილები. გავლენას ახდენს მხოლოდ ვიზუალურ ჩვენებაზე, ორიგინალ ტექსტზე ზემოქმედების გარეშე. ხაზის წყვეტის წერტილში ახალი ხაზი არ ემატება. თქვენი შინაარსის მინიმალური ზომის გაანგარიშებისას, გათვალისწინებულია რბილი შეფუთვის ვარიანტები.</td> </tr><tr><td> საწყისი</td> <td>ადგენს ქონების მნიშვნელობას მის ნაგულისხმევ მნიშვნელობას.</td> </tr><tr><td> მემკვიდრეობით მიღება</td> <td>მშობლის ელემენტისგან იღებს მემკვიდრეობით ქონების მნიშვნელობას.</td> </tr></table><p><b>Სინტაქსი</b></p><p>გადახურვა-შეფუთვა: ნორმალური; overflow-wrap: სიტყვის სიტყვა; გადახურვა-გადატანა: სადმე; overflow-wrap: მემკვიდრეობით მიღება; გადახურვა-შეფუთვა: საწყისი;</p><h3>5. ხაზების გასწორება და გამართლება</h3> <p>ხაზების გასწორება და გასწორება აკონტროლებს თუ როგორ ნაწილდება შინაგანი შინაარსის სტრიქონის ველში.</p> <h4>5.1. მოკლე შენიშვნა ტექსტის გასწორებისთვის: ტექსტის გასწორების თვისება</h4> <p>ტექსტის ბლოკი არის წრფივი ბლოკების კრებული. ტექსტის გასწორების თვისება განსაზღვრავს ტექსტის გასწორება და ტექსტის გასწორება ბოლო თვისებებს და აღწერს ხაზის დონის ყუთების ხაზის ყუთში დაწყებული და დასასრულის მხარეების შესაბამისობას. Justify-all ან match-მშობლის გარდა სხვა მნიშვნელობებს ენიჭება text-align-all და გადატვირთვის ტექსტში align-last ავტოზე.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <table class="t1"><tr><th colspan="2">ტექსტის გასწორება</th> </tr><tr><td>ღირებულებები:</td> <td> </td> </tr><tr><td> დაწყება</td> <td>ხაზის დონის შინაარსი გასწორებულია ხაზის ყუთის საწყისი ზღვარზე. ნაგულისხმევი მნიშვნელობა.</td> </tr><tr><td> დასასრული</td> <td>ხაზის დონის შინაარსი გასწორებულია ხაზის ყუთის უკანა მხარეს.</td> </tr><tr><td> მარცხენა</td> <td>ხაზის დონის შინაარსი გასწორებულია ხაზის ყუთის ხაზის მარცხნივ. ვერტიკალური წერის სისტემებში, ეს იქნება ფიზიკური ზედა ან ქვედა, ტექსტის ორიენტაციის მიხედვით.</td> </tr><tr><td> მართალი</td> <td>ხაზის დონის შინაარსი სწორდება სწორი ხაზის ყუთის ხაზზე. ვერტიკალური წერის სისტემებში ეს იქნება ფიზიკური ზედა ან ქვედა, ტექსტის ორიენტაციის მიხედვით.</td> </tr><tr><td> ცენტრი</td> <td>ხაზის დონის შინაარსი ორიენტირებულია სტრიქონების ველში.</td> </tr><tr><td> ამართლებს</td> <td>ტექსტი გასწორებულია შინაგანი ყუთის სიგანეზე, რათა ზუსტად შეავსოს ხაზის ველი, მოირგო მშობლის ელემენტის მარცხენა და მარჯვენა კიდეები. თუ ტექსტში გასწორება-ბოლოში სხვა რამ არ არის მითითებული, ბოლო სტრიქონი იძულებითი შესვენების ან ბლოკის დასრულებამდე გასწორებულია დასაწყისთან. სივრცე სიტყვებსა და ასოებს შორის განაწილებულია ისე, რომ ყველა სტრიქონის სიგრძე ტოლია. სხვადასხვა ბრაუზერს შეუძლია გაზარდოს როგორც სიტყვებს შორის მანძილი, ასევე ასოებს შორის.</td> </tr><tr><td> გამართლება-ყველა</td> <td>აყენებს ტექსტის გასწორებას და ტექსტის გასწორებას ბოლომდე გასამართლებლად, ასევე გასწორებს ბოლო სტრიქონს.</td> </tr><tr><td> შესატყვისი მშობელი</td> <td>მნიშვნელობა იქცევა ისევე, როგორც მემკვიდრეობა, გარდა იმ შემთხვევისა, რომ მემკვიდრეობითი საწყისი ან საბოლოო მნიშვნელობა ინტერპრეტირდება მიმართულების მნიშვნელობასთან მიმართებაში (ან ორიგინალი შეიცავს ბლოკს, თუ მშობელი არ არსებობს) და შედეგად ხდება მარცხენა ან მარჯვენა გამოთვლილი მნიშვნელობა.</td> </tr><tr><td> მემკვიდრეობით მიღება</td> <td>მშობლის ელემენტისგან იღებს მემკვიდრეობით ქონების მნიშვნელობას.</td> </tr></table><p><b>Სინტაქსი</b></p><p>ტექსტის გასწორება: დაწყება; ტექსტის გასწორება: დასასრული; ტექსტის გასწორება: მარცხენა; ტექსტის გასწორება: მარჯვნივ; ტექსტის გასწორება: ცენტრი; ტექსტის გასწორება: გამართლება; ტექსტის გასწორება: გამართლება-ყველა; ტექსტის გასწორება: მატჩი-მშობელი; ტექსტის გასწორება: მემკვიდრეობა;</p><h4>5.2. ტექსტის ნაგულისხმევი გასწორება: text-align-all თვისება</h4> <p>Text-align-all თვისება არის ტექსტის გასწორების თვისების სტენოგრამა, რომელიც განსაზღვრავს შინაარსის ყველა ხაზის გასწორებას ბლოკის კონტეინერში, გარდა ბოლო სტრიქონებისა, რომლებიც გადაფარებულია ტექსტის გასწორებით-ბოლოთი. იღებს მნიშვნელობებს დაწყების, დასრულების, მარცხნივ, მარჯვნივ, ცენტრში, გასამართლებლად და შესატყვისი მნიშვნელობებით.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>ტექსტის გასწორება: დაწყება; text-align-all: დასრულება; text-align-all: მარცხენა; ტექსტის გასწორება: ყველა; text-align-all: ცენტრი; text-align-all: გამართლება; text-align-all: მატჩი-მშობელი; text-align-all: მემკვიდრეობა;</p><h4>5.3. ბოლო სტრიქონის გასწორება: text-align- ბოლო თვისება</h4> <p>ტექსტის გასწორება-ბოლო თვისება აღწერს, თუ როგორ არის გასწორებული ბლოკის ან სტრიქონის ბოლო ხაზი უშუალოდ ხაზის იძულებითი წყვეტის წინ.</p> <p>თუ ავტომატურად არის დაყენებული, შესაბამის სტრიქონზე შინაარსი შეესაბამება ტექსტის გასწორებას, თუ არ არის მითითებული ტექსტის გასწორება, ამ შემთხვევაში იგი გასწორებულია ბლოკის დასაწყისში. ყველა სხვა მნიშვნელობა განიმარტება, როგორც ეს აღწერილია ტექსტის გასწორებისთვის.</p> <p>მნიშვნელობებია ავტომატური, დაწყება, დასრულება, მარცხნივ, მარჯვნივ, ცენტრში, გამართლება და შესატყვისი მშობელი.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>ტექსტის გასწორება-ბოლო: ავტო; text-align-last: დაწყება; text-align-last: დასრულება; text-align-last: მარცხენა; text-align-last: მარჯვნივ; text-align-last: ცენტრი; ტექსტის გასწორება-ბოლო: გამართლება; text-align-last: მატჩი-მშობელი;</p><h3>6. ხარვეზები</h3> <p>CSS საშუალებას გაძლევთ გააკონტროლოთ სიტყვებსა და ტიპოგრაფიულ სიმბოლოებს შორის ინტერვალი, სიტყვათაშორისი და ასოთაშორისი თვისებების გამოყენებით.</p> <h4>6.1. სიტყვებს შორის დაშორება: სიტყვათაშორისი თვისება</h4> <p>სიტყვათაშორისი თვისება განსაზღვრავს სიტყვებს შორის დამატებით ინტერვალს. <br> ადგენს სიტყვებს შორის ინტერვალს. შესაძლებელია დადებითი და უარყოფითი მნიშვნელობების გამოყენება. უარყოფითი მნიშვნელობით, სიტყვებს შეიძლება გადაფარონ.</p> <p>სიტყვების შუალედის მნიშვნელობაზე გავლენას ახდენს ტექსტის გასწორების თვისება, როდესაც ტექსტი გამართლებულია.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>სიტყვების დაშორება: ნორმალური; სიტყვების შუალედი: 1px; სიტყვების შუალედი: 0.2em; სიტყვების შუალედი: 50%; სიტყვების დაშორება: მემკვიდრეობა; სიტყვების შუალედი: საწყისი;</p><h4>6.2. თვალთვალი: ასოთაშორისი თვისება</h4> <p>ასოთაშორისი თვისება განსაზღვრავს დამატებით დაშორებას ან თვალთვალს მიმდებარე ტიპოგრაფიულ სიმბოლოებს შორის. ასოთა შუალედი შეავსებს და სიტყვათაშორისებს. არსებული განლაგების წესებიდან გამომდინარე, მომხმარებლების აგენტებს შეუძლიათ ტექსტის გასწორების მიზნით ტიპოგრაფიული პერსონაჟის ერთეულებს შორის კიდევ უფრო გაზარდონ ან შეამცირონ.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>ასოთა დაშორება: ნორმალური; ასოთაშორისი მანძილი: 0,1 em; ასოთაშორისი ინტერვალი: 2px; ასოთაშორისი დაშორება: მემკვიდრეობით მიღება; ასო-ინტერვალი: საწყისი;</p><h3>7. პირველი სტრიქონის აბზაცი: ტექსტი-აბზაცის თვისება</h3> <p>Text-indent თვისება განსაზღვრავს ჩაღრმავებას, რომელიც გამოიყენება ბლოკში შინაგანი შინაარსის ხაზებზე. შევსება განიხილება, როგორც ზღვარი, რომელიც გამოიყენება ხაზის ყუთის საწყის ზღვარზე. <br> თუ ბლოკის ელემენტის პირველ სტრიქონში არის გამოსახულება, მაშინ ის გადავა დანარჩენ ტექსტთან ერთად.</p> <p>ქონება მემკვიდრეობით გადაეცემა.</p> <p><b>Სინტაქსი</b></p><p>ტექსტი-აბზაცი: 5 მმ; text-indent: 20px; ტექსტი-აბზაცი: 5%; text-indent: 2em თითოეული სტრიქონი; text-indent: 2em ჩამოკიდებული; text-indent: მემკვიდრეობა; ტექსტი-აბზაცი: საწყისი;</p> <p>ადგენს ტექსტის ბლოკის ბოლო სტრიქის გასწორებას.</p><h2>მოკლე ინფორმაცია</h2><h2>დანიშნულებები</h2><table><tbody><tr><th> </th><th>აღწერა</th><th style="width: 130px">მაგალითი</th> </tr><tr><td><тип> </td><td>მიუთითებს მნიშვნელობის ტიპზე.</td><td><размер> </td> </tr><tr><td>A&& B</td><td>მნიშვნელობები უნდა აისახოს ნაჩვენები თანმიმდევრობით.</td><td><размер> && <цвет> </td> </tr><tr><td>ა | ბ</td><td>მიუთითებს, რომ შემოთავაზებული მნიშვნელობებიდან მხოლოდ ერთი უნდა იყოს შერჩეული (A ან B).</td><td>ნორმალური | მცირე ზომის კაპები</td> </tr><tr><td>ა || ბ</td><td>თითოეული მნიშვნელობის გამოყენება შესაძლებელია ცალკეული ან სხვებთან ერთად ნებისმიერი თანმიმდევრობით.</td><td>სიგანე || ითვლიან</td> </tr><tr><td> </td><td>ჯგუფების მნიშვნელობები.</td><td>[მოსავალი || ჯვარი]</td> </tr><tr><td>* </td><td>გაიმეორეთ ნულოვანი ან მეტი ჯერ.</td><td>[,<время>]* </td> </tr><tr><td>+ </td><td>გაიმეორეთ ერთი ან მეტი ჯერ.</td><td><число>+ </td> </tr><tr><td>? </td><td>მითითებული ტიპი, სიტყვა ან ჯგუფი არასავალდებულოა.</td><td>ჩასმული?</td> </tr><tr><td>(A, B)</td><td>გაიმეორეთ მინიმუმ A, მაგრამ არა უმეტეს B ჯერ.</td><td><радиус>{1,4} </td> </tr><tr><td># </td><td>გაიმეორეთ ერთი ან მეტი ჯერ, მძიმით გამოყოფილი.</td><td><время># </td> </tr></tbody></table>× <h2>ღირებულებები</h2><p>auto ემთხვევა ტექსტის გასწორების თვისებით განსაზღვრულ გასწორებას, გარდა გამართლებული მნიშვნელობისა. მისთვის გასწორება დაწყების მსგავსი იქნება. start ხაზი გასწორებულია ბლოკის საწყის ზღვარზე, რომელიც შეიძლება შეიცვალოს ტექსტის მიმართულების მიხედვით (მარცხნიდან მარჯვნივ ან მარჯვნივ მარცხნივ). ბოლო სტრიქონი გასწორებულია ბლოკის ბოლო კიდეზე, ის განისაზღვრება ტექსტის მიმართულებით. მარცხენა ხაზი მარცხნივ გასწორებულია. მარჯვენა ხაზი სწორხაზოვანია. ცენტრი ხაზი ორიენტირებულია. justify სიმები გამართლებულია. თუ ბოლო სტრიქონში მხოლოდ ერთი სიტყვაა, მაშინ ის დარჩება გამართლებული.</p><p>სხვადასხვა მნიშვნელობის გავლენა ტექსტის პოზიციაზე ნაჩვენებია ცხრილში. 1</p><table class="data"> ტაბ. 1. ტექსტის გასწორების ბოლო მნიშვნელობების ეფექტი <tr><th>მნიშვნელობა</th><th>გასწორება</th><th>ტექსტის ტიპი</th> </tr><tr><td class="sel">მარცხენა</td><td>მარცხნივ გასწორებული</td><td> </td> </tr><tr><td class="sel"> მართალი</td><td>მარჯვენა ზღვარი</td><td><img src='https://i2.wp.com/webref.ru/assets/images/css/css_text-align-last_2.png' height="127" width="161" loading=lazy></td> </tr><tr><td class="sel">ცენტრი</td><td>ცენტრი</td><td><img src='https://i0.wp.com/webref.ru/assets/images/css/css_text-align-last_3.png' height="127" width="161" loading=lazy></td> </tr><tr><td class="sel">ამართლებს</td><td>სიგანეზე</td><td><img src='https://i0.wp.com/webref.ru/assets/images/css/css_text-align-last_4.png' height="127" width="161" loading=lazy></td> </tr></table><h2>ქვიშის ყუთი</h2><p>ვინი პუხი ყოველთვის არ გამოირჩეოდა მცირედი სიგრილით, განსაკუთრებით დილის თერთმეტ საათზე, რადგან ამ დროს საუზმე უკვე დიდი ხანია დასრულებული იყო და ვახშამი არც კი უფიქრია. და, რა თქმა უნდა, ის საშინლად ბედნიერი იყო, როდესაც კურდღელმა თასები და თეფშები ამოიღო.</p><p>div (ტექსტის გასწორება-ბოლო: დაწყება;)</p><h2>მაგალითი</h2><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ტექსტის გასწორება-ბოლო</title> <style> div { width: 300px; text-align: justify; text-align-last: justify; } </style> </head> <body> <div> მთების გადაკვეთისას დაეყრდენით ხეობას; პოზიციონირება სიმაღლეზე, იმისდა მიხედვით, თუ სად არის მზიანი მხარე. ბორცვზე მდგარ მოწინააღმდეგესთან ბრძოლისას, პირდაპირ ნუ ახვალთ ზემოთ. ეს არის მთაში ჯარის განლაგება.</div> <script type="text/javascript">  </script><br> <br> </body> </html></p><h2>ობიექტის მოდელი</h2><p><i>Საგანი</i>.სტილი. ტექსტი AlignLast</p><h2>შენიშვნა</h2><p>Internet Explorer და Edge მხარს არ უჭერენ დაწყების და დასრულების მნიშვნელობებს.</p><p>Firefox 49 ვერსია მხარს უჭერს -moz-text-align- ბოლო თვისებას.</p><h2>სპეციფიკაცია</h2><p>თითოეული სპეციფიკაცია გადის დამტკიცების რამდენიმე ეტაპს.</p><ul><li>რეკომენდაცია - ამ სპეციფიკაციას მხარს უჭერს W3C და რეკომენდირებულია როგორც სტანდარტი.</li><li>კანდიდატის რეკომენდაცია ( <span>შესაძლო რეკომენდაცია</span>) - სტანდარტის პასუხისმგებელი ჯგუფი დარწმუნებულია, რომ იგი შეესაბამება მის მიზნებს, მაგრამ სტანდარტის დანერგვისთვის საჭიროა დეველოპერული საზოგადოების დახმარება.</li><li>შემოთავაზებული რეკომენდაცია ( <span>შემოთავაზებული რეკომენდაცია</span>) - ამ ეტაპზე დოკუმენტი წარედგინება W3C მრჩეველთა საბჭოს საბოლოო დასამტკიცებლად.</li><li>სამუშაო პროექტი - პროექტის უფრო სრულყოფილი ვარიანტი, საზოგადოების განხილვის განხილვისა და გადასინჯვის შემდეგ.</li><li>რედაქტორის მონახაზი ( <span>სარედაქციო პროექტი</span>) - სტანდარტის სტანდარტული ვერსია პროექტის რედაქტორების მიერ რედაქტირების შემდეგ.</li><li>პროექტი ( <span>დაზუსტების პროექტი</span>) სტანდარტის პირველი პროექტია.</li> </ul>× <p><b>HTML ტეგები განსაზღვრავს ტექსტის გასწორებას, ჩაღრმავებას</b></p> <p><b>დასაბუთებული ტექსტი, რომელიც გამოიყენება ტიპოგრაფიაში</b></p> <p>ქვემოთ მოყვანილი მაგალითი გვიჩვენებს, თუ როგორ ხდება გასწორება <b>ტექსტი სიგანეზე</b> გვერდები:</p> <table class="t_align" cellspacing="2"><tr><th> გასწორება \u003d "მარცხენა"</th> <th> გასწორება \u003d "მარჯვნივ"</th> </tr><tr><td> </td> <td><p>მომსახურების სექტორში დასაქმებულთა რაოდენობა და ინფორმაციის გავრცელება ყოველდღე იზრდება. თუ მეურნეობა და ქარხანა გასული საუკუნეების სიმბოლო იყო, მაშინ ამჟამინდელი XXI საუკუნის სიმბოლოა ოფისი, რომელიც აღჭურვილია კომპიუტერებით, რომელსაც აქვს ინფორმაციის ნაკადის წვდომა.</p> </td> </tr><tr><th> გასწორება \u003d "გამართლება"</th> <th> გასწორება \u003d "ცენტრი"</th> </tr><tr><td><p>მომსახურების სექტორში დასაქმებულთა რაოდენობა და ინფორმაციის გავრცელება ყოველდღე იზრდება. თუ მეურნეობა და ქარხანა გასული საუკუნეების სიმბოლო იყო, მაშინ ამჟამინდელი XXI საუკუნის სიმბოლოა ოფისი, რომელიც აღჭურვილია კომპიუტერებით, რომელსაც აქვს ინფორმაციის ნაკადის წვდომა.</p> </td> <td><p>მომსახურების სექტორში დასაქმებულთა რაოდენობა და ინფორმაციის გავრცელება ყოველდღე იზრდება. თუ მეურნეობა და ქარხანა გასული საუკუნეების სიმბოლო იყო, მაშინ ამჟამინდელი XXI საუკუნის სიმბოლოა ოფისი, რომელიც აღჭურვილია კომპიუტერებით, რომელსაც აქვს ინფორმაციის ნაკადის წვდომა.</p> </td> </tr></table><p>გამართლებული მნიშვნელობა უზრუნველყოფს ერთგვაროვნებას <b>ტექსტის მარჯვენა და მარცხენა გასწორება</b>, ე.ი. <b>სიგანეში</b>... ბეჭდვაში ეს მეთოდი ფართოდ გამოიყენება.</p> <h2>ტექსტის გასწორება HTML ცენტრში და სიგანეზე</h2> <p><b>ტექსტის გასწორება HTML- ში, ტექსტი მარჯვნივ</b>:</p> <p>შედეგი:</p> <p>ატრიბუტები და ღირებულებები</p> <ul><li>align \u003d "მარცხენა" - განსაზღვრავს <i>ტექსტის გასწორება მარცხნივ</i> (ნაგულისხმევი).</li> <li>გასწორება \u003d "ცენტრი" - <i>ტექსტს სწორდება ცენტრში</i>.</li> <li>გასწორება \u003d "მარჯვნივ" - <i>ტექსტს სწორდება მარჯვნივ</i>.</li> </ul><h2>გასწორება | HTML ტექსტის აბზაცი</h2> <p><b>HTML ტექსტი და მისი ჩაღრმავება გვერდის მარცხნივ</b></p> <p>ჩვენ ვაწარმოებთ <b>აბზაცის ტექსტი</b> მარცხნივ ორი \u200b\u200bგზით:</p> <p>შედეგი:</p> <p><img src='https://i0.wp.com/ab-w.net/images/501pr.png' width="100%" loading=lazy></p> <p>ახალ ფანჯარაში ნახვა</p> <p>მოგესალმებით ბლოგის საიტის ძვირფასო მკითხველს. დღეს ჩვენ ვაგრძელებთ შესწავლას და შემდეგ რიგრიგობით გვაქვს თვისებები ტექსტის გაფორმება, ვერტიკალური გასწორება, ტექსტის გასწორება, ტექსტის ჩაღრმავება და მრავალი სხვა, რაც ხელს უწყობს Html კოდში ტექსტების გარეგნობას.</p><p>ბოლო სტატიაში ჩვენ გავეცანით თვისებებს, რომლებიც მიზნად ისახავს შრიფტების იერსახეზე მორგებას.</p><p>კარგად და კიდევ უფრო ადრე, ჩვენ დეტალურად განვიხილეთ ყველა ტიპი, გავიგეთ, თუ როგორ შეიძლება მათი დაჯგუფება და რა პრიორიტეტებს უყენებს ბრაუზერი მათი ინტერპრეტაციის დროს. მართალია, ეს ყველაფერი დაყოფილი იყო რამდენიმე სტატიად, ამიტომ, რომ არ დაიბნა, გირჩევთ შეისწავლოთ მასალები მოცემული თანმიმდევრობით.</p><h2>ტექსტის გაფორმება, ტექსტის გასწორება, ტექსტის შეკვეთა CSS– ში</h2><p>როგორ ვიმუშაოთ ტექსტთან Css- ში? ლოგიკურია ვივარაუდოთ, რომ ამ მიზნით სპეციალურად შემუშავებული წესებია. დავიწყოთ text-align- ით, რომელიც სინამდვილეში align ატრიბუტის ჩანაცვლებაა (იგი გამოყენებული იყო შინაარსის გასწორებისთვის, როგორიცაა P აბზაცები ან სათაურები).</p><p>მას მხოლოდ ოთხი შესაძლო მნიშვნელობა აქვს:</p><p>მნიშვნელობა იგივე რჩება, როგორც ადრე იყო. <b>ტექსტის გასწორება</b> არის ხაზების ჰორიზონტალური გასწორება. ეს წესი ვრცელდება მხოლოდ ბლოკის ელემენტებზე (აბზაცები, სათაურები და ა.შ.), ე.ი. ის ტეგები, რომლებშიც შეიძლება გამოჩნდეს მრავალი ხაზი. რადგან რადგან მხოლოდ ერთი რიგის შინაგანი ელემენტები შეიძლება არსებობდეს, მათში ტექსტის გასწორების გამოყენებას განსაკუთრებული აზრი არ აქვს.</p><p>აშკარაა, რომ ამ წესის მნიშვნელობები ნიშნავს გასწორებას, შესაბამისად: მარცხნივ (მარცხნივ), მარჯვნივ (მარჯვნივ), ცენტრში (ცენტრში) და გვერდის სიგანეზე (გაამართლეთ - ერთდროულად მარცხნივ და მარჯვნივ სიტყვებს შორის მანძილის გაზრდით) ... თავისთავად ცხადია, რომ Justify მნიშვნელობა უნდა იქნას გამოყენებული ელემენტებისთვის, სულ მცირე, რამდენიმე სტრიქონის ტექსტით, წინააღმდეგ შემთხვევაში, ამას თვალსაჩინო ეფექტი არ ექნება.</p><p>მაგალითად, მე წინა აბზაცი სიგანეზე გავამართლე (ხედავთ, რომ მას საზღვრებიც აქვს მარცხნივ და მარჯვნივ):</p><p>ტექსტის გასწორება: გამართლება;</p><p>სტანდარტულად, ტექსტი ჰორიზონტალურად გასწორებულია მარცხნივ, ე.ი. თქვენ არ გჭირდებათ ტექსტის გასწორების დაწერა: დატოვეთ კონკრეტულად, თუ, რა თქმა უნდა, ადრე არ მიუთითეთ სხვა გასწორება. სხვათა შორის, ეს აბზაცი ისევ ცენტრში (ცენტრში) მოვათავსე ვიზუალური მაგალითისთვის, მაგრამ, ვფიქრობ, ყველაფერი გასაგებია.</p><p>შემდეგი css წესი <b>ტექსტი-აბზაცი</b> საშუალებას გაძლევთ დააყენოთ წითელი ხაზი, მაგალითად, ტექსტისთვის აბზაცის ნიშანში P. წითელი ხაზის ჩაღრმავება შეიძლება განისაზღვროს მნიშვნელობის მითითებით (პლუს ნიშნით ან მინუს ნიშნით, გამოყენებით) ან პროცენტული მაჩვენებლების გამოყენებით:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/text-indent.png' height="66" width="282" loading=lazy></p><p>რისგან გამოიანგარიშება ტექსტი-აბზაცში? ფართობის სიგანედან, რომელიც გამოყოფილია ტექსტისთვის. იმ CSS წესის ტექსტი-აბზაცის ზომა: 50% დანიშნავს წითელ ხაზს იგივე ხაზის სიგრძის ნახევარს. ეს პუნქტი მხოლოდ ასეთი წესის მაგალითია.</p><p>ან შეგიძლიათ, მაგალითად, წითელი ხაზისთვის უარყოფითი მნიშვნელობის დაყენება ტექსტის აბზაცში და შემდეგ მივიღებთ დაახლოებით იმას, რასაც ამ აბზაცში ხედავთ. ამის მისაღწევად, მე დავწერე შემდეგი CSS წესი აბზაცის ტეგისთვის P:</p><p>ტექსტი-აბზაცი: -1em;</p><p>ისე, ტექსტი-აბზაცის (სტანდარტული წითელი ხაზის დასადგენად) საერთო გამოყენება შეიძლება ასე გამოიყურებოდეს: text-indent: 40px; (სხვათა შორის, ამ აბზაცს ეხება). ეს წესი, ისევე როგორც ადრე განხილული ტექსტის გასწორება, <b>ვრცელდება მხოლოდ ბლოკის ელემენტებზე</b>, ე.ი. სადაც შეიძლება მრავალი სტრიქონი გამოჩნდეს (აბზაცები, სათაურები და ა.შ.).</p><p>ასე რომ, ახლა მოდით გავეცნოთ <b>ტექსტ-დეკორაცია</b> (დიზაინი ჰორიზონტალური ხაზის გამოყენებით), რომელიც უკვე გამოიყენება ყველა Html ელემენტზე (როგორც ხაზოვანი, ასევე ბლოკი).</p><p>მას მხოლოდ ოთხი მნიშვნელობა შეიძლება ჰქონდეს:</p><p>იმ შეიძლება გამოყენებულ იქნას ტექსტის გაფორმებით: ხაზგასმული, ხაზოვანი ან ხაზგასმული ან საერთოდ არ გამოიყენოთ. მაგალითად, ზოგიერთ Html ელემენტს უკვე აქვს ჰორიზონტალური ხაზი (მაგალითად, ისინი ხაზგასმულია).</p><p>აქედან გამომდინარე, ხაზგასმით სხვა რამის ხაზგასმა (ჰიპერბმულების გარდა) არ არის კარგი, რადგან მომხმარებლების ქვეცნობიერ გონებაში წერია, რომ მას შემდეგ, რაც ხაზს უსვამენ (და ასევე ხაზს უსვამენ ფერს), ეს ნიშნავს, რომ აქ შეგიძლიათ დააჭიროთ. ნორმალური ტექსტის ხაზგასმით ხაზგასმით, თქვენ შეცდომაში შეიყვანთ მომხმარებელი და შემდეგ იმედგაცრუებული ხართ თქვენი რესურსით (ფიქრობდა ის, მაგრამ აღმოჩნდა, რომ ...).</p><p>Css ტექსტის დეკორაციის წესის გამოყენების ნიუანსია ის, რომ თქვენ შეგიძლიათ დაწეროთ ერთდროულად სამი (ან ორი) მნიშვნელობა ნებისმიერი Html ელემენტისთვის (არ გამოტოვოთ არცერთი) და შედეგად მიიღებთ <span>ხაზგასმული-ხაზგასმული-ხაზოვანი ტექსტის ფრაგმენტი</span> (ჟღერს მაგრად და გამოიყურება, არა?):</p><p>ტექსტის გაფორმება: ხაზგასმული ხაზის ხაზგასმა;</p><p>ტექსტის გაფორმების მნიშვნელობები უნდა იყოს დაწერილი (თუ გსურთ ერთდროულად გამოიყენოთ რამდენიმე მათგანი) <b>გამოყოფილია სივრცული ხასიათით</b>.</p><h2>ვერტიკალური გასწორება - ვერტიკალური გასწორება</h2><p>შემდეგი გვაქვს ვერტიკალური გასწორება - ვერტიკალური-გასწორება. Html კოდის თითქმის ყველა ელემენტისთვის ეს ნიშნავს შინაგანი ელემენტების გასწორებას ტექსტთან მათი საწყისი ხაზის მიხედვით. მართალია, ამისათვის ეს ცოტათი განსხვავებულია - ამ უჯრედებში არსებული მთელი შინაარსი ვერტიკალურად იქნება გასწორებული.</p><p>Css- სთვის ვერტიკალური გასწორების წესს შეუძლია გამოიყენოს შემდეგი მნიშვნელობები:</p><p>მწკრივები სტანდარტულად გასწორებულია საბაზისო ხაზთან. ნახე, მივმართე <span>ტექსტის ამ ნაწილზე შრიფტის გაზრდა</span> და ეს ორი ცალი გასწორებულია ფუძის (ქვედა) ხაზთან. და ვერტიკალური გასწორება ვერტიკალური-გასწორებით ზუსტად გამიზნულია ხაზების გასწორების შეცვლისთვის.</p><p>მაგალითად, თუ მე დავწერ ვერტიკალურ-გასწორებას: საბაზისო ხაზის იმავე გაფართოებული ნაწილისთვის, მაშინ არანაირი ცვლილება არ მოხდება, რადგან საწყისი მნიშვნელობა გამოიყენება ნაგულისხმევი css წესისთვის.</p><p>სხვათა შორის, რიცხვები შეიძლება გამოყენებულ იქნას როგორც მნიშვნელობები მისთვის, და წარწერა vertical-align: 0 ნიშნავს იგივე, რაც ვერტიკალური-align: საწყისი, ე.ი. საწყისი მნიშვნელობა ნულის ტოლია. ამიტომ, თუ გვინდა მიუთითოთ ვერტიკალური გასწორების რაიმე ცვლა, მაშინ ეს ცვლა მითითებული იქნება საბაზისო (ან ნულის) მიმართებაში.</p><p>თქვენ შეგიძლიათ დაწეროთ ასე:</p><p>ვერტიკალურად გასწორება: 10px;</p><p>და ჩვენ ვიღებთ <span>ფრაგმენტის ცვლა გაფართოებული შრიფტით ზემოთ</span> საწყისი წერტილიდან 10 პიქსელი. თუ დავწერთ უარყოფით მნიშვნელობას:</p><p>ვერტიკალურად გასწორება: -10 პიქსელი;</p><p>შემდეგ მივიღებთ <span>ფრაგმენტის გადაადგილება ქვემოთ</span> საწყისი ხაზის მიხედვით. მაგალითები გვიჩვენებს, რომ ცვლის გამო, ხაზის სიმაღლე გაიზარდა ისე, რომ ტექსტი მასში ჯდება მომიჯნავე სტრიქონში მოხვედრის გარეშე. ცვლა ასევე შეიძლება განისაზღვროს Em- სა და Ex- ში, ასევე პროცენტულად, რომელიც დაითვლება ამ ელემენტის ხაზის სიმაღლიდან (გახსოვდეთ, რომ ბოლო სტატიაში ვისწავლეთ მისი დაყენება).</p><p>ცხრილის უჯრედების შინაარსის ვერტიკალურად გასწორების მიზნით, უნდა გამოიყენოთ ზედა და ქვედა მნიშვნელობები, რომ შინაარსი გასწორდეს უჯრედის ზედა და ქვედა ნაწილში (შესაბამისად, მაგიდის უჯრაში შუა რიცხვები გამოიყენება ნაგულისხმევი ვერტიკალური გასწორების მნიშვნელობად).</p><p>შრიფტის ელემენტებისთვის შეგიძლიათ გამოიყენოთ ტექსტის ზედა, ტექსტის ქვედა, შუა. მოდით მივმართოთ მაგალითად <span>ტექსტის ეს ნაწილი</span> მნიშვნელობა:</p><p>ვერტიკალურად გასწორება: შუა;</p><p>რა მოხდა ამის შედეგად? გაფართოებული ფრაგმენტის შუა ხაზი გასწორებულია ნორმალური ტექსტის საბაზისო ხაზთან, ე.ი. მივიღეთ ვერტიკალური ცენტრალური ხაზის გასწორება. ტექსტის ზედა და ტექსტური ფონისთვის ყველაფერი იგივე იქნება. ეს არის ტექსტის ზედა ნაწილი და ასევე ტექსტის ქვედა მხარე.</p><p>ვერტიკალური გასწორების ქვე და სუპერ თვისების Css მნიშვნელობები შეესაბამება ქვე- და ზედწერილს, რომელიც შედგა სუფთა Html ფორმატში (ვიზუალური დიზაინისთვის CSS თვისებების გამოყენებამდე).</p><h2>ტექსტის გარდაქმნა, ასოთა შუალედი, სიტყვების დაშორება და თეთრი სივრცე</h2><p>არცერთი არ არის ნაგულისხმევად გამოყენებული და ნიშნავს, რომ ტექსტში სიმბოლოები არანაირად არ შეიცვლება - როგორც Html– ში წერია, ისინი გამოჩნდება. ტექსტის გარდაქმნის დიდი მნიშვნელობა გადააქცევს ფრაგმენტის ყველა ასოს დიდზე ( <span>მაგალითი მოცემულია ამ წინადადებაში</span>, სადაც გამოყენებული იყო წესი ტექსტის გარდაქმნა: დიდი დიდი, ხოლო ასოები თავდაპირველად იწერებოდა მცირე ასოებით).</p><p>Css ტექსტის გარდაქმნის წესისთვის პატარა მნიშვნელობა საშუალებას მოგცემთ ფრაგმენტის ყველა სიმბოლო გადააკეთოთ პატარაზე, ხოლო კაპიტალიზაციის მნიშვნელობა გახდის სიტყვის დიდი ასოების ყველა პირველ ასოს ( <span>მაგალითი ამ წინადადებაში</span> - ტექსტი-გარდაქმნა: კაპიტალიზაცია). იმ ტექსტის გარდაქმნის საშუალებით შეგიძლიათ გააკეთოთ ყველაფერი უბრალო ტექსტით, შემდეგ კი მარტივად დააბრუნოთ ყველაფერი.</p><p>ამიტომ, თუ, მაგალითად, თქვენ გაქვთ ამოცანა, რომ ყველა სათაური დაწეროთ მხოლოდ დიდი ასოებით, შემდეგ დაწერეთ ისინი Html– ით, როგორც წესი, და გადაიტანეთ CSS– ით დიდი ტექსტის გამოყენებით: დიდი. შემდეგ, თუ გადაწყვეტთ შეცვალოთ რამე უკან, მაშინ საკმარისია შეიტანოთ მხოლოდ მცირედი ცვლილებები სტილში და არა თქვენს საიტზე განთავსებული 1000000 სათაურის შინაარსში.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/letter-spacing.png' height="91" width="358" loading=lazy></p><p>ნაგულისხმევად, ასოთა ინტერვალი და სიტყვების დაშორებაც ნორმალურია, ან ეს იგივეა, რაც ნულოვანი (ანუ სიმბოლოებსა და სიტყვებს შორის მანძილი არანაირად არ იცვლება). ამ წესებში მანძილის ცვლილების სიდიდე შეიძლება მიეთითოს მხოლოდ პიქსელებში, Em ან Ex, მაგრამ არა პროცენტულად.</p><p>ამასთან, შეგიძლიათ გამოიყენოთ როგორც პოზიტიური (სიმბოლოების ან სიტყვების იშვიათობა), ასევე უარყოფითი მნიშვნელობები (სიმბოლოების ან სიტყვების კონვერგენცია). მაგალითად, შეგიძლიათ <span>"მოსწონს ეს, რომ ამ ფრაზაში სიმბოლოები იშვიათი იყოს"</span> შემდეგი Css წესის გამოყენებით:</p><p>ასოთა დაშორება: 0.4em;</p><p>ან შეიძლება <span>"მოსწონს ეს, რომ ამ ფრაზაში სიმბოლოები დააკავშიროს"</span> მეშვეობით:</p><p>ასოთა დაშორება: -1 პიქსელი;</p><p>იგივე შეიძლება ითქვას სიტყვების შუალედის შესახებ, მხოლოდ იმ განსხვავებით, რომ სიტყვებს შორის მანძილი შეიცვლება, <span>როგორც, მაგალითად, ამ ფრაზაში, ამ CSS კონსტრუქციის გამოყენებით</span>:</p><p>სიტყვების ინტერვალი: 4em;</p><p>ანალოგიურად, სიტყვების ინტერვალში შეიძლება გამოყენებულ იქნეს უარყოფითი მნიშვნელობები სიტყვებს შორის მანძილის შესამცირებლად.</p><p>დღეს, და CSS- ის ბოლო წესი, რომელიც საშუალებას გაძლევთ ტექსტი გარკვეული ფორმით ჩამოაყალიბოთ Html კოდში, არის <b>თეთრი სივრცე</b>... იგი პასუხისმგებელია ვებსაიტზე თეთრი სივრცის სიმბოლოების ჩვენებაზე, რაც მოხდა Html კოდის წერისას.</p><p>როგორც გახსოვთ სტატიიდან, ბრაუზერი, კოდის ანალიზისას, აერთიანებს ყველა ადგილს, ხაზის წყვეტებსა და ჩანართებს ერთ სივრცეში და ახორციელებს ხაზების წყვეტებს ვებგვერდზე ზუსტად კოდის სივრცეში.</p><p>ასე რომ, თეთრ ადგილს შეუძლია სამიდან სამიდან ერთი მიიღოს:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/white-space.png' width="100%" loading=lazy></p><p>ნათელია, რომ ნაგულისხმევი მნიშვნელობა ნორმალურია და ამ შემთხვევაში ყველაფერი ნაჩვენებია ისე, როგორც ზემოთ აღვწერე. მაგრამ Pre მნიშვნელობის გამოყენებისას მივიღებთ სრულ ანალოგს გამოყენების, ე.ი. ვებგვერდზე, ტექსტი გამოჩნდება ყველა იმ სივრცის ზედმეტი სიმბოლოებით, რომლებიც მოხდა კოდის დაწერის დროს, და ბრაუზერი ვერ შეძლებს მათზე გადარიცხვების განხორციელებას.</p><p>კარგად, და მნიშვნელობა <b>ახლახანს</b> უბრალოდ ხელს შეუშლის ბრაუზერის შეფუთვას თეთრ სივრცეში, რომელსაც იპოვის თეთრი სივრცის შიგნით: nowrap CSS ნაწყვეტი. ასევე შეგიძლიათ სცადოთ როგორ მუშაობს ეს მარტივი Html ფაილის შექმნით და ტექსტური ნაწილის თანდართვით ასეთ თეგებში:</p><p> <div style="white-space:pre;">სატესტო ტექსტის ფრაგმენტი</div> </p><p>Წარმატებას გისურვებ! ნახავთ მალე ბლოგის საიტის გვერდებზე</p><h3></h3><p>შეიძლება დაგაინტერესოთ</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/list-style.jpg' width="100%" loading=lazy><span>სიის სტილი (ტიპი, სურათი, პოზიცია) - CSS წესები Html კოდში სიების გარეგნობის პერსონალურად მოსაწყობად</span> <br><img src='https://i1.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/z-index-cursor.jpg' width="100%" loading=lazy><span>პოზიციონირება Z- ინდექსისა და CSS კურსორის წესით მაუსის კურსორის შესაცვლელად</span> <br><img src='https://i1.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/padding-margin-border.jpg' width="100%" loading=lazy><span>Padding, Margin და Border - ჩვენ ვადგენთ შიდა და გარე მინდვრებს CSS– ში, ასევე საზღვრებს ყველა მხარისთვის (ზედა, ქვედა, მარცხნივ, მარჯვნივ)</span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/uroki-css.jpg' width="100%" loading=lazy><span>რისთვის არის CSS, როგორ დავაკავშიროთ კასკადური სტილის ფურცლები Html დოკუმენტთან და ამ ენის სინტაქსის საფუძვლები</span> <br><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/float-clear.jpg' width="100%" loading=lazy><span>მოძრავი და გასაგები CSS– ში - ბლოკის განლაგების ინსტრუმენტები</span> <br><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/css.jpg' width="100%" loading=lazy><span>CSS - რა არის ეს, როგორ უკავშირდება კასკადური სტილის ფურცლები html კოდს Style და Link- ის გამოყენებით</span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/razmery-nasledovanie-css.jpg' width="100%" loading=lazy><span>განზომილების ერთეულები (Pixels, Em და Ex) და CSS წესების მემკვიდრეობა</span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/css-selektory.jpg' width="100%" loading=lazy><span>თანამედროვე CSS– ში ნიშნის, კლასის, ID– ს და ზოგადი ამომრჩეველთა, აგრეთვე ატრიბუტების ამორჩევა</span> <br><img src='https://i1.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/position-css.jpg' width="100%" loading=lazy><span>პოზიცია (აბსოლუტური, ფარდობითი და ფიქსირებული) - CSS– ში Html ელემენტების პოზიციონირების გზები (წესები მარცხნივ, მარჯვნივ, ზედა და ქვედა)</span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/background-color.jpg' width="100%" loading=lazy><span>ფონი CSS- ში (ფერი, პოზიცია, სურათი, განმეორება, დანართი) - ყველაფერი Html ელემენტების ფონის ფერის ან ფონის სურათის დასაყენებლად.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="dsperelink"> <div class="read-analog"> <style> </style> <style> #perelink-horizontal { vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 192px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img { width: 192px; height: 192px; margin-bottom: 10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/samsung-galaxy-j5-harakteristiki-razmer-matricy-obzor-samsung-galaxy-j5-2016-sm-j510fn-novoi.html"> <img src="/uploads/364026a86b88ecb3a9cb0987483cf1c5.jpg" height="192" width="192" loading=lazy> <span>Samsung Galaxy J5 (2016) SM-J510FN– \u200b\u200bის მიმოხილვა, საშუალო დიაპაზონის სელფის ფონის ახალი ვერსია</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/samsung-galaxy-j5-harakteristiki-razmer-matricy-obzor-samsung-galaxy-j5-2016-sm-j510fn-novoi.html"> <img src="/uploads/364026a86b88ecb3a9cb0987483cf1c5.jpg" height="192" width="192" loading=lazy> <span>Samsung Galaxy J5 (2016) SM-J510FN– \u200b\u200bის მიმოხილვა, საშუალო დიაპაზონის სელფის ფონის ახალი ვერსია</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/galaxy-s9-cvet-kakoi-vybrat-chernyi-fioletovyi-sinii-ili-seryi-vse-cveta.html"> <img src="/uploads/679b4f32b7d3d0a7b43b46354f002388.jpg" height="192" width="192" loading=lazy> <span>Galaxy S9 კორპუსის ყველა ფერი - რომელი უნდა აირჩიოთ?</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/galaxy-s9-cvet-kakoi-vybrat-chernyi-fioletovyi-sinii-ili-seryi-vse-cveta.html"> <img src="/uploads/679b4f32b7d3d0a7b43b46354f002388.jpg" height="192" width="192" loading=lazy> <span>Galaxy S9 კორპუსის ყველა ფერი - რომელი უნდა აირჩიოთ?</span> </a> </div> </div> </div> </div> </div> </article> </div> </section> <aside class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="mainnavbar side-box clear"> <div id="nav_menu-2" class="side-box_b"> <div class="menu-sidenav-container"> <ul id="menu-sidenav" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/total/">გენერალი</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/hard-drive/">HDD</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/different/">Miscellanea</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/windows/">ვინდოუსი</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/apple/">ვაშლი</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/android/">ანდროიდი</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/browsers/">ბრაუზერები</a> </li> </ul> </div> </div> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">ტოპ 5:</span> <ul class="textw_a clear"> <li><a href="https://olympsb.ru/ka/planshety-s-vysokim-razresheniem-ekrana-planshety-planshetnye-kompyutery.html">ტაბლეტები (პლანშეტური კომპიუტერი)</a></li> <li><a href="https://olympsb.ru/ka/planshety-s-vysokim-razresheniem-ekrana-planshety-planshetnye-kompyutery.html">ტაბლეტები (პლანშეტური კომპიუტერი)</a></li> <li><a href="https://olympsb.ru/ka/instrukciya-obsluzhivaniya-htc-one-m8-instrukciya-obsluzhivaniya-htc.html">HTC One M8 მომხმარებლის სახელმძღვანელო ასევე ღირს მობილური ტელეფონის მიმოხილვების ნახვა</a></li> <li><a href="https://olympsb.ru/ka/instrukciya-obsluzhivaniya-htc-one-m8-instrukciya-obsluzhivaniya-htc.html">HTC One M8 მომხმარებლის სახელმძღვანელო ასევე ღირს მობილური ტელეფონის მიმოხილვების ნახვა</a></li> <li><a href="https://olympsb.ru/ka/kogda-vyidet-samsung-galaxy-a7-obzor-samsung-galaxy-a7-2017-ne-boitsya-vody-i-ekonomii-s-health.html">Samsung Galaxy A7 (2017) მიმოხილვა: არ ეშინია წყლის და ეკონომიურობის</a></li> </ul> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">უახლესი მასალები:</span> <ul> <li> <a href="https://olympsb.ru/ka/kogda-vyidet-samsung-galaxy-a7-obzor-samsung-galaxy-a7-2017-ne-boitsya-vody-i-ekonomii-s-health.html" >Samsung Galaxy A7 (2017) მიმოხილვა: არ ეშინია წყლის და ეკონომიურობის</a> </li> <li> <a href="https://olympsb.ru/ka/instrukciya-po-ekspluatacii-huawei-mediapad-t3-10.html" >მომხმარებლის სახელმძღვანელო Huawei mediapad t3 10</a> </li> <li> <a href="https://olympsb.ru/ka/instrukciya-po-ekspluatacii-huawei-mediapad-t3-10.html" >მომხმარებლის სახელმძღვანელო Huawei mediapad t3 10</a> </li> <li> <a href="https://olympsb.ru/ka/telefony-ldzhi-na-2-sim-karty.html" >ტელეფონები lji 2 სიმ ბარათისთვის</a> </li> <li> <a href="https://olympsb.ru/ka/telefony-ldzhi-na-2-sim-karty.html" >ტელეფონები lji 2 სიმ ბარათისთვის</a> </li> </ul> </div> <div class="side-box clear"> <div id="rexuta2" style="height:800px;width:240px;" align="center"></div> </div> </aside> </section> <div class="footer"> <div id="footer_mainnav" class="mainnav collapse navbar-collapse col-xs-12 col-sm-12"> <ul id="menu-mainnav-1" class="nav navbar-nav navi"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/flash-drives/">ფლეშ დრაივები</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/total/">გენერალი</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/hard-drive/">HDD</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/different/">Miscellanea</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/windows/">ვინდოუსი</a></li> </ul> </div> <div class="twobl-footer col-xs-12 col-sm-12"> <div class="onef col-xs-12 col-sm-3"> <div class="fool2og log-m_h1"> <img src='/public/logo.png' loading=lazy> </div> <div class="decksite"></div> </div> <div class="twof col-xs-12 col-sm-2"> <ul id="menu-foonav" class="twonavig"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/apple/">ვაშლი</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/android/">ანდროიდი</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/browsers/">ბრაუზერები</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/flash-drives/">ფლეშ დრაივები</a></li> </ul> </div> <div class="treef col-xs-12 col-sm-4"> <ul class="f-post"> <li><a href="https://olympsb.ru/ka/obzor-smartfona-lg-optimus-l5-chetyre-nedorogih-dyuima-obzor-smartfona-lg.html">LG Optimus L5 სმარტფონის მიმოხილვა: ოთხი იაფი დიუმი ⇡ ენერგიის შესახებ</a></li> <li><a href="https://olympsb.ru/ka/obzor-smartfona-lg-optimus-l5-chetyre-nedorogih-dyuima-obzor-smartfona-lg.html">LG Optimus L5 სმარტფონის მიმოხილვა: ოთხი იაფი დიუმი ⇡ ენერგიის შესახებ</a></li> <li><a href="https://olympsb.ru/ka/smartfon-huawei-honor-8-lite-belyi-dizain-razmery-upravlyayushchie-elementy.html">დიზაინი, ზომები, კონტროლი</a></li> <li><a href="https://olympsb.ru/ka/smartfon-huawei-honor-8-lite-belyi-dizain-razmery-upravlyayushchie-elementy.html">დიზაინი, ზომები, კონტროლი</a></li> </ul> </div> <div class="fourf col-xs-12 col-sm-3"> <div class="buth"> <a class="butt-faq buttorang" href="" title="კონტაქტები">კონტაქტები</a> </div> <p class="continfo">კომპიუტერი დაეხმარება Olympus- ს</div> </div> <div class="tree-footer col-xs-12 col-sm-12 clear"> © 2020. olympsb.ru. კომპიუტერი დაეხმარება Olympus- ს.</div> </div> <script src="https://olympsb.ru/wp-content/themes/vsepropechen/js/bootstrap.min.js"></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.83'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.7.6'></script> <div style="display:none"> <div id="text-3" class="conter-metr"> <div class="textwidget"> </script> </div> </div> </div> <div id="top-link"> <a href="https://olympsb.ru/ka/#top"></a> </div> <script type="text/javascript">  </script><br> <br> </body> </html> </div>