10 of 01
შექმნა CSS სტილის ფურცელი
ანალოგიურად, ჩვენ შევქმენით ცალკე ტექსტური ფაილი HTML- ისთვის, თქვენ შექმნით ტექსტს CSS- ისთვის. თუ საჭიროა ვიზუალური ამ პროცესისთვის, იხილეთ პირველი გაკვეთილი. აქ არის ნაბიჯები, რათა შეიქმნას თქვენი CSS სტილის ფურცელი Notepad:
- არჩევა ფაილი> ახალი Notepad მისაღებად ცარიელი ფანჯარა
- გადავარჩინოთ ფაილი, როგორც CSS ფაილის დაჭერით
- მიჰყევი ჩემს MyWebsite folder თქვენს მყარ დისკზე
- შეცვალეთ "შენახვა როგორც ტიპი:" "ყველა ფაილი"
- მიუთითეთ თქვენი ფაილი "styles.css" (დატოვონ quotes) და დააჭირეთ შენახვა
10 of 02
ბმული CSS სტილი Sheet თქვენს HTML
მას შემდეგ, რაც თქვენი ვებ-გვერდის სტილის ფურცელი გაქვთ, მას უნდა დაუკავშირდით ვებ-გვერდს. ამისათვის გამოიყენეთ ბმული ტეგი. მოათავსეთ შემდეგი ბმული ტეგირება თქვენს pets.htm დოკუმენტის
ტეგებში ნებისმიერ ადგილას:10 of 03
შეასწორეთ გვერდი მარჟები
როდესაც თქვენ ვწერ XHTML სხვადასხვა ბრაუზერები, ერთი რამ თქვენ შეისწავლით ის არის, რომ ისინი ყველა როგორც ჩანს, სხვადასხვა ზღვარი და წესები, თუ როგორ ისინი არიან რამ. საუკეთესო გზა დარწმუნებული უნდა იყოს, რომ თქვენი საიტი გამოიყურება იგივე ბრაუზერში არის არ დაუშვას რამ, როგორიცაა მინდვრები რომ ბრაუზერი არჩევანი.
მე მირჩევნია, ჩემი გვერდები ზედა მარცხენა კუთხეში დაიწყოთ, დამატებითი ტექსტის გარეშე ან დამატებითი მარკირების გარეშე. მაშინაც კი, თუ მე ვაპირებ pad შინაარსი, მე მითითებული ზღვარი ნულოვანი ისე, რომ მე დაწყებული იგივე ცარიელი ფურცლიდან. ამისათვის დაამატეთ თქვენი styles.css დოკუმენტის შემდეგ:
html, სხეული {
ზღვარი: 0px;
padding: 0px;
საზღვარი: 0px;
მარცხნივ: 0px;
დაბრუნება: 0px;
}
10 of 10
გვერდის შრიფტის შეცვლა
შრიფტი ხშირად არის პირველი, რაც თქვენ გსურთ შეცვალოთ ვებ გვერდზე. ვებ გვერდის ნაგულისხმები შრიფტი შეიძლება იყოს მახინჯი და რეალურად ვებ ბრაუზერია, ასე რომ, თუ შრიფტის განსაზღვრა არ მოგეწონათ, ნამდვილად არ იციან თქვენი გვერდი ასე გამოიყურება.
როგორც წესი, თქვენ შეცვლით შრიფტით, ან ზოგჯერ მთლიანად დოკუმენტზე. ამ საიტზე ჩვენ განსაზღვრავს შრიფტის სათაური და პუნქტი დონეზე. დაამატეთ თქვენი styles.css დოკუმენტის შემდეგ:
p, li {
შრიფტი: 1 ემილი, ჰელვეტიკა, სან-სერფი;
}
h1 {
შრიფტი: 2 სმიტი, ჰელვეტიკა, სან-სერფი;
}
h2 {
შრიფტი: 1.5 სმარტი, ჰელვეტიკა, სან-სერფი
}
h3 {
შრიფტი: 1.25 სმიტი, ჰელვეტიკა, სან-სერფი;
}
მე 1-ში დავიწყე პუნქტებითა და სიის ელემენტებისთვის ჩემი ბაზის ზომა და შემდეგ გამოყენებული იყო ჩემი სათაურების ზომა. მე არ ველით, გამოიყენოთ სათაური უფრო ღრმა ვიდრე H4, მაგრამ თუ თქვენ აპირებთ თქვენ გვინდა სტილი ასევე.
10 of 05
შენი ბმულების შექმნა უფრო საინტერესოა
ბმულების ნაგულისხმევი ფერები ლურჯი და იისფერია, რომლებიც განკუთვნილია არაპროპორციულად და ეწვივნენ კავშირებს. მიუხედავად იმისა, რომ ეს არის სტანდარტული, შეიძლება არ შეესაბამება ფერადი სქემა თქვენს გვერდებზე, მოდით შევცვალოთ იგი. თქვენი styles.css ფაილი, დაამატეთ შემდეგი:
ბმული {
შრიფტის ოჯახი: Arial, Helvetica, sans-serif;
ფერი: # FF9900;
ტექსტური გაფორმება: ხაზგასმა;
}
a: ეწვია {
ფერი: # FFCC66;
}
a: hover {
ფონზე: #FFFFCC;
შრიფტის წონა: თამამი;
}
მე შევქმნა სამი ბმული სტილის: a: ბმული როგორც default, a: ეწვია, როდესაც ის ეწვია, მე შეცვლის ფერი, და: hover. ერთად: hover მაქვს ბმული მიიღოს ფონის ფერი და წავიდეთ თამამი ხაზს ვუსვამთ, რომ ეს ბმული უნდა დაწკაპავთ.
10 of 06
სტილის ნავიგაციის სექცია
მას შემდეგ, რაც ჩვენ ვდებთ სანავიგაციო (id = "nav") განყოფილებას პირველი HTML- ში, მოდით სტილი გავაკეთოთ პირველი. ჩვენ უნდა მივუთითოთ, თუ რამდენად ფართო უნდა იყოს და უფრო ფართო ზღვარი სწორ მხარეს გადააჭარბოს ისე, რომ მთავარ ტექსტს არ შეეწინააღმდეგება მის წინააღმდეგ. საზღვართან მეც დავამატე.
სანიშნეს CSS თქვენი styles.css დოკუმენტი:
#nav {
სიგანე: 225px;
ზღვარი-მარჯვენა: 15px;
საზღვარი: საშუალო მყარი # 000000;
}
#nav li {
სიის სტილი: არა;
}
.footer {
შრიფტის ზომა: .75;
ნათელია: ორივე;
სიგანე: 100%;
ტექსტის გასწორება: ცენტრი;
}
სიის სტილის ქონება ქმნის ჩამონათვალს ნავიგაციის განყოფილებაში, არ უნდა ჰქონდეს ტყვიები ან ნომრები, და. ფუტურის სტილები საავტორო სექციაში უნდა იყოს პატარა და ორიენტირებული სექციაში.
07-დან 10-მდე
ძირითადი განყოფილების პოზიციონირება
თქვენი ძირითადი განყოფილების პოზიციონირება აბსოლუტურ პოზიციებთან ერთად შეგიძლიათ დარწმუნებული იყოთ, რომ ის დარჩება ზუსტად სადაც გსურთ დარჩენა თქვენს ვებ გვერდზე. მე მივიღე 800px ფართო მატარებლით დიდი მონიტორები, მაგრამ თუ თქვენ გაქვთ პატარა მონიტორზე, დაგვჭირდება, რომ ეს ვიწრო.
მოათავსეთ შემდეგი თქვენი styles.css დოკუმენტი:
#main {
სიგანე: 800px;
დაბრუნება: 0px;
პოზიცია: აბსოლუტური;
მარცხნივ: 250px;
}
10 of 08
შენი პარაგრაფების შექმნა
მას შემდეგ, რაც მე უკვე შევქმენი პუნქტი შრიფტის ზემოთ, მე მინდოდა, რომ თითოეულ პარაგრაფს ცოტა ზედმეტი "დარტყმა" მიეღო, მე გავაკეთე ეს საზღვრის დასამთავრებლად, რომელიც უფრო მეტ პარაგრაფს ასახავს, ვიდრე მხოლოდ სურათი.
მოათავსეთ შემდეგი თქვენი styles.css დოკუმენტი:
.topline {
სასაზღვრო: სქელი მყარი # FFCC00;
}
გადავწყვიტე ამის გაკეთება, როგორც კლასში "ტოპინი", ვიდრე მხოლოდ ამ ყველა პუნქტს განსაზღვრავს. ამ გზით, თუ გადაწყვეტთ, მე მინდა, რომ პარაგრაფი არ მქონდეს ზემოთ ყვითელი ხაზის გარეშე, მე უბრალოდ დატოვონ კლასში = "ტოპინი" პუნქტში და არ ექნება ზედა საზღვარი.
10 of 09
სტილის სურათები
სურათებს, როგორც წესი, აქვს საზღვარი მათზე, ეს არ არის ყოველთვის ხილული, თუ სურათი არ არის ბმული, მაგრამ მე მიყვარს კლასში ჩემი CSS სტილის შიგნით, რომელიც ავტომატურად გამორთულია საზღვართან. ამ სტილისტისათვის, მე შევქმენი "nobder" კლასის, და ყველაზე მეტად გამოსახულებები დოკუმენტის ნაწილია ამ კლასში.
ამ სურათების სხვა სპეციალური ნაწილია მათი ადგილმდებარეობის გვერდზე. მინდოდა, რომ ისინი იყვნენ ნაწილი პარაგრაფის გარეშე ისინი იყენებდნენ ცხრილების გამოყენებას, რათა მათ გაერთონ. მარტივი გზა ამისათვის გამოიყენოს float CSS ქონება.
მოათავსეთ შემდეგი თქვენი styles.css დოკუმენტი:
#main img {
float: მარცხენა;
ზღვარი-მარჯვნივ: 5px;
ზღვარი-ქვედა: 15px;
}
.noborder {
საზღვარი: 0px არცერთი;
}
როგორც ხედავთ, სურათებზე დადგენილი ზღვარი თვისებებია, რათა დარწმუნდნენ, რომ ისინი არ გაანადგურებენ იმ ნაკვეთზე, რომლებიც პარაგრაფების გვერდით არიან.
10 of 10
ახლა შეხედე შენი დასრულებული გვერდი
ერთხელ თქვენ გადაარჩინა თქვენი CSS შეგიძლიათ განაახლეთ pets.htm გვერდი თქვენს ბრაუზერში. შენი გვერდი უნდა გამოიყურებოდეს მსგავსი სურათის ამ სურათზე ნაჩვენები, სურათების გვერდით და ნავიგაცია განთავსებული სწორად გვერდზე მარცხენა მხარეს.
დაიცავით იგივე ნაბიჯები ამ საიტის ყველა შიდა გვერდისთვის. გინდათ ერთი გვერდი თქვენს გვერდზე ნავიგაციის ყველა გვერდზე.