გაკვეთილი 7. ტექსტისა და ფონის ფერები HTML-ში.

თარიღი: 2008-12-05

როგორ დავაყენოთ ფონის და ტექსტის ფერი ვებ გვერდზე?

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

დააყენეთ ტექსტის ფერი

IN HTML ფერიტექსტი, შრიფტი, ფონი და სხვა ელემენტები შეიძლება დაყენდეს ორი გზით:

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

კომენტარები ამ სტატიაზე (გაკვეთილი):

ანდრეი! რა შესანიშნავი საიტი გაქვთ! უკვე მეორე კვირაა რეგულარულად ვიყენებ: ვსწავლობ თქვენს გაკვეთილებს და ვიდეო გაკვეთილებს; ვკითხულობ თქვენს ლიტერატურას და ჩამოვტვირთავ პროგრამებს; მე ვდგამ ჩემს პირველ ნაბიჯებს ვებ პროგრამირებაში! და რაც მთავარია, მე შემიძლია ეს!!! მაგრამ მე საერთოდ არ ვარ ფიზიკოსი, არამედ ლირიკოსი! და ვინც ეწვევა ჩემს ლიტერატურულ ვებსაიტს, შეიძლება დარწმუნდეს ამაში: "POEMS BY OLEG GUZ" ჩემი დეტალები: ელფოსტა: STIH [ელფოსტა დაცულია]ვებგვერდი: http://sites.google.com/site/stihiolegguz/

ყურადღებით შეამოწმეთ კოდი

ვცადე ფონის ფერის შეცვლა და არ გამომდის! როგორ შევცვალოთ ფონის ფერი?

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

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

ძირითადი ინსტრუმენტები ვებ გვერდების ფონის დასაყენებლად

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

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

ასე რომ, ფონის სურათის დაყენება html ერთეულის საშუალებით უბრალოდ დაწერეთ შემდეგი კოდი: ...

და სიტყვების ნაცვლად „ფაილის მისამართი“ ჩადეთ სურათისკენ მიმავალი გზა.

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

Მაგალითად, ...

, ჩვენ დავაყენეთ შავი ფონი ჩვენს საიტზე.

ფერები css-ში და html-ში მითითებულია ან ინგლისური სიტყვით (მაგალითად, წითელი) ან სპეციალური კოდი, რომელიც შედგება # ნიშნისგან და მის შემდეგ ექვსი სიმბოლოსგან (მაგალითად, #FFDAB9).

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

ფონი, როგორც თვისება კასკადური სტილის ფურცლებში

მითითებულია ან ში ცალკე ფაილი css სტილებით, ან ელემენტში

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

პატივისცემით, რომან ჩუეშოვი

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

შესაძლებელია თუ არა HTML-ის გამოყენება ფონის დასაყენებლად?

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

შესაბამისად, ჩვენ გამოვიყენებთ Cascading Style Sheets (CSS). ფონის დაყენების ბევრად მეტი შესაძლებლობაა. დღეს ჩვენ განვიხილავთ ყველაზე ძირითადს.

როგორ დავაყენოთ ფონი css-ის გამოყენებით?

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

მას შემდეგ რაც გადაწყვეტთ სელექტორს, თქვენ უნდა დაწეროთ თავად ქონების დასახელება. ფონის ფერის დასაყენებლად (კერძოდ მყარი ფერი და არა გრადიენტი ან სურათი), გამოიყენეთ ფონის ფერის თვისება. ამის შემდეგ თქვენ უნდა დააყენოთ ორწერტილი და დაწეროთ თავად ფერი. ეს შეიძლება გაკეთდეს სხვადასხვა გზით. მაგალითად, საკვანძო სიტყვების, hex კოდის, rgb, rgba, hsl ფორმატების გამოყენებით. ნებისმიერი მეთოდი გამოდგება.

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

სხეული (ფონის ფერი: #D4E6B3;)

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

სურათი ფონის სახით

სურათად გამოვიყენებ პატარა ხატულას. html ენა:

მოდით შევქმნათ ცარიელი ბლოკი იდენტიფიკატორით:

< div id = "bg" > < / div >

მოდით მივცეთ მას აშკარა ზომები და ფონი:

#bg (სიგანე: 400 პიქსელი; სიმაღლე: 250 პიქსელი; ფონის სურათი: url (html.png); )

#ბგ( სიგანე: 400px; სიმაღლე: 250px; ფონი - სურათი: url (html. png);

ამ კოდიდან ხედავთ, რომ მე გამოვიყენე ახალი თვისება - background-image. იგი განკუთვნილია სპეციალურად სურათის ჩასართავად, როგორც HTML ელემენტის ფონი. ვნახოთ რა მოხდა:

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

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

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

Repeat – ნაგულისხმევი მნიშვნელობა, სურათი მეორდება ორივე მხრიდან;

Repeat-x – მეორდება მხოლოდ x ღერძზე;

Repeat-y – მეორდება მხოლოდ y ღერძის გასწვრივ;

No-repeat – საერთოდ არ მეორდება;

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

ფონი-გამეორება: გამეორება-x;

ფონი - გამეორება: გამეორება - x;

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

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

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

ფონის პოზიცია

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

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

ფონის პოზიცია: მარჯვენა ზედა;

ფონი - პოზიცია: მარჯვენა ზედა;

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

ფონის პოზიცია: 50% 50%;

ფონის პოზიცია: 50% 50%;

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

და ბოლოს, თქვენ შეგიძლიათ მიუთითოთ პოზიცია პიქსელებში. ყველაფერი იგივეა, მხოლოდ %-ის ნაცვლად იქნება px. ზოგიერთ შემთხვევაში, ასეთი პოზიციონირება შეიძლება საჭირო გახდეს.

სხარტი აღნიშვნა

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

ფონი: #333 url(bg.jpg) გამეორების გარეშე 50% 50%;

ფონი: #333 url(bg.jpg) გამეორების გარეშე 50% 50%;

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

ფონის სურათის ზომის კონტროლი

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

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

ასე რომ, ჩემი სურათი ახლა მთელ ადგილს იკავებს ბლოკში, მაგრამ მე მივცემ მას ფონის ზომას:

ფონის ზომა: 80% 50%;

ფონის ზომა: 80% 50%;

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

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

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

Contain – ადიდებს მას ისე, რომ გამოსახულება მთლიანად ჯდება ბლოკში მისი მაქსიმალური ზომით.

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

ასევე უნდა გესმოდეთ, რომ სურათის გაჭიმვამ შეიძლება გამოიწვიოს მისი ხარისხის გაუარესება. შემიძლია მაგალითი მოვიყვანო განლაგების დიზაინერების ცხოვრებიდან და რეალური პრაქტიკიდან. ყველამ იცის და ესმის, რომ დესკტოპისთვის დიზაინის შექმნისას საჭიროა საიტის ადაპტირება ძირითადი მონიტორის სიგანეზე: 1280, 1366, 1920. თუ ფონის სურათს იღებთ, ვთქვათ, 1280-ზე 200-ზე და არ აძლევთ მას. ფონის ზომა, შემდეგ ეკრანები უფრო დიდი სიგანით გამოჩნდება ცარიელი ადგილი, სურათი ბოლომდე არ შეავსებს სიგანეს.

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

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

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

გამჭვირვალე ფონი css-ის გამოყენებით

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

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

როგორც ადრე ვთქვი, CSS-ში ფერების დაყენების მრავალი ფორმატია. ერთ-ერთი მათგანია rgb, საკმაოდ ცნობილი ფორმატი მათთვის, ვინც მუშაობს გრაფიკული რედაქტორები. ასე წერია: rgb(17, 255, 34);

ფრჩხილებში პირველი მნიშვნელობა არის წითელი, შემდეგ მწვანე, შემდეგ ლურჯი გაჯერება. მნიშვნელობა შეიძლება იყოს რიცხვითი 0-დან 255-მდე. შესაბამისად, rgba ფორმატი არ განსხვავდება, დამატებულია მხოლოდ ერთი პარამეტრი - ალფა არხი. მნიშვნელობა შეიძლება იყოს 0-დან 1-მდე, სადაც 0 არის სრული გამჭვირვალობა.

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

მოდით გავხსნათ ჩვენი index.html, რედაქტირებისთვის: Მოვახერხე!!!

და მოდით ცოტა შევცვალოთ, დავამატოთ ატრიბუტები: text="#000000" bgcolor="#ffffff"> მე გავაკეთე!!!

ატრიბუტიარის ტეგის პარამეტრი, რომელიც ჩასმულია ტეგში „წყვილის“ სახით (პარამეტრის სახელი + პარამეტრის მნიშვნელობა).
ჩასმულია ტეგის ატრიბუტის მნიშვნელობები:
1) text=#000000 ბრჭყალების გარეშე;
2) text="#000000" in ცალკეული ციტატები;
3) text="#000000" ორმაგ ბრჭყალებში.
რომელიმე ეს ვარიანტი სწორია, მაგრამ თუ კოდექსის ეთიკას აინტერესებთ, უმჯობესია გამოიყენოთ ორმაგი ციტატები, როგორც ჩემს ზემოთ მოცემულ მაგალითში.

ატრიბუტი "ტექსტი"აკონტროლებს ტექსტის ფერს მთელ გვერდზე და "bgcolor"აკონტროლებს გვერდის ფონის ფერს.

ახლა მე გთავაზობთ ვისაუბროთ ფერებზე HTML დოკუმენტებისთვის. ფერი დაყენებულია:
1) ტექსტი = "ოქრო"- სიტყვები ინგლისურად, მაგალითად: ოქრო (ოქროსფერი), წითელი (წითელი), მწვანე (მწვანე) და ასე შემდეგ...
მაგრამ ფერი შეიძლება შედგებოდეს მხოლოდ ერთი სიტყვისგან, მაგალითად "წითელი", მაგრამ თუ დაწერთ "მწვანე-წითელს", ბრაუზერი ვერ გაიგებს მას და უბრალოდ უგულებელყოფს მას.
2) text="#000000" - ფერის სქემა RBG (წითელი მწვანე ლურჯი). "#" ეს სიმბოლო მიუთითებს, რომ ეს არის ფერის რიცხვი, პირველი ორი სიმბოლო (ჩემს მაგალითში ნული) გვეუბნება, რამდენი "წითელი" ფერი ავიღეთ, მეორე მწვანეა და ბოლო ორი ლურჯი.
თითოეული ფერი მითითებულია 00-დან FF-მდე (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), მაგალითად #000000-შავი, #ffffff-თეთრი, #ff0000-წითელი, # 00ff00- მწვანე #0000ff-ლურჯი

საიტის ბონუსის სახით, გირჩევთ ჩამოტვირთოთ ფერთა პალიტრა (2კბ), რომელიც ნაჩვენებია ზემოთ მოცემულ სურათზე. თქვენ უნდა ამოშალოთ არქივი და გაუშვათ ფაილი ფერი.html, შემდეგ დიდ ველზე მოათავსეთ მაუსის ინდიკატორი თქვენთვის სასურველ ფერზე, რომელიც გამოჩნდება პატარა ფანჯარაში და თუ ამ დროს დააჭერთ მაუსს, მარჯვენა პატარა ფანჯარაში გამოჩნდება ფერის კოდი.

ახლა დავუბრუნდეთ ჩვენს ფაილს index.htmlდა შეინახეთ როგორც tsvet.html, ახლა ვნახოთ რა მოხდა. როგორი იყო და როგორი დარჩა? და თქვენ აბსოლუტურად მართალი ხართ, რადგან თეთრი არის ფონისთვის, ხოლო შავი ტექსტისთვის არის ნაგულისხმევი ფერი. განსხვავება რომ შევამჩნიოთ, შევცვალოთ ატრიბუტის მნიშვნელობები:

text=ოქრო" bgcolor="#0900b8"> მე გავაკეთე!!!

შევინახოთ და ვუყუროთ (იხსნება ახალ ჩანართში)

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

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

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

COLOR თვისება

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

• ფერის სახელი (მწვანე, შავი, წითელი...);
• თექვსმეტობითი ფერის კოდი (008000, 000000, FF0000...);
• ათობითი ფერის კოდი RGB-ში (ფერი: rgb (40, 175, 250));

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

როგორც უკვე აღვნიშნე, თქვენ შეგიძლიათ დააყენოთ ფერი თითქმის ყველა ელემენტისთვის, ეს შეიძლება იყოს (H1... H6), (strong, em) და თუნდაც მთელი რიცხვები (p) და ცხრილის საზღვრებიც კი, მაგრამ ამაზე მოგვიანებით.

მოდით შევხედოთ CSS-ის გამოყენებით ტექსტის ფერის დაყენების მაგალითს:

h1 (ფერი: ლურჯი)

ამ მაგალითში ვებგვერდის პირველი დონის ყველა სათაური ლურჯი იქნება:

ძლიერი (ფერი: წითელი)

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

შეგიძლიათ დაწეროთ ასე:

h1, p, ძლიერი (ფერი: მწვანე)

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

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

class = "ლურჯი" > ამ კლასის სათაურის ფერი იქნება ლურჯი

CSS სტილის ფურცელში, ამ შემთხვევაში, ჩვენ ვწერთ წესს, სადაც ამომრჩეველი იქნება H1 ელემენტი და წერტილის მეშვეობით ( . ) კლასის სახელი:

h1.ლურჯი (ფერი: ლურჯი)

HTML დოკუმენტებში ასევე გამოიყენება სელექტორები იდენტიფიკატორის მიხედვით, ისინი განისაზღვრება ატრიბუტით id. იდენტიფიკატორი უფრო მნიშვნელოვანი ან პრიორიტეტული ატრიბუტია, ვიდრე კლასი. და თუ კლასიც და იდენტიფიკატორიც მითითებულია ელემენტისთვის HTML კოდში, მაშინ გამოყენებული იქნება იდენტიფიკატორის სტილი. იდენტიფიკატორი მითითებულია ჰეშის ნიშნით ( # ). HTML კოდში იდენტიფიკატორის გამოსაყენებლად, თქვენ უნდა დაწეროთ:

id = "ლურჯი" > ამ ID-ის სათაურის ფერი ლურჯი იქნება

სტილის ფურცელში თავის მხრივ:

h1#ლურჯი (ფერი: ლურჯი)

BACKGROUND-COLOR თვისება

ეს თვისება საშუალებას გაძლევთ დააყენოთ ფონის ფერი მთლიანად გვერდისთვის, აბზაცისთვის, ბმულისთვის ან, ზოგადად, ნებისმიერი HTML ელემენტისთვის. ამისათვის ქონების ღირებულება განსაზღვრავს ფერს ან მნიშვნელობას გამჭვირვალე(გამჭვირვალე). გვერდის ფონის კოდი იწერება:

სხეული (ფონის ფერი: აკვა)

ამ შემთხვევაში გვერდის ფონი ფირუზისფერი იქნება და სათაურის ფონის მისაცემად ვწერთ:

h1 (ფონის ფერი: ყვითელი)

ჩვენ ვიღებთ ყვითელ ფონს პირველი დონის სათაურებისთვის.

ფერი და ფონი CSS-ში

Background-REPEAT თვისება

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

• გაიმეორეთ- გამოსახულება მეორდება ვერტიკალურად და ჰორიზონტალურად;
• გამეორება-x- სურათი მეორდება მხოლოდ ჰორიზონტალურად;
• გამეორება-y- გამოსახულება მეორდება მხოლოდ ვერტიკალურად;
• არ გამეორება- სურათი არ მეორდება.

კოდი ასე იწერება:

p(
ფონის სურათი: url( სურათის ფაილის მისამართი) ;
ფონი-გამეორება: გამეორება-x
}

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

BACKGROUND-ATTACHMENT ქონება

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

სხეული (
ფონის სურათი: url( სურათის ფაილის მისამართი) ;
background-repeat : repeat-x ;
ფონი-დანართი: დაფიქსირებულია
}

ამ შემთხვევაში ფონის სურათი უმოძრაოდ დარჩება.

BACKGROUND-POSITION საკუთრება

ეს თვისება გამოიყენება გამოსახულების პოზიციონირებისთვის . მნიშვნელობები მითითებულია პროცენტებში (%), სიგრძის ერთეულებში (სმ, px), საკვანძო სიტყვებით:

• ვერტიკალურად:
• ზედა- სურათის ზედა ნაწილი გასწორებულია გვერდის ან ბლოკის ზედა კიდეზე;
• ცენტრი
• ქვედა- სურათის ქვედა ნაწილი გასწორებულია გვერდის ან ბლოკის ქვედა კიდეზე.
• ჰორიზონტალურად:
• დატოვა- სურათის მარცხენა კიდე გასწორებულია გვერდის ან ბლოკის მარცხენა კიდეზე;
• ცენტრი- სურათის ცენტრი გასწორებულია გვერდის ან ბლოკის ცენტრში;
• უფლება- სურათის მარჯვენა კიდე გასწორებულია გვერდის ან ბლოკის მარჯვენა კიდეზე.

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

სხეული (
ფონის სურათი: url( სურათის ფაილის მისამართი) ;
ფონის პოზიცია: 0% 0%
}

სხეული (
ფონის სურათი: url( სურათის ფაილის მისამართი) ;
ფონის პოზიცია: 10 პიქსელი 25 სმ
}

სხეული (
ფონის სურათი: url( სურათის ფაილის მისამართი) ;
ფონის პოზიცია: ზედა ცენტრი
}