Хэвлэл мэдээллийн сайн дизайн нь амжилттай вэбсайтын чухал хэсэг юм. CSS нь танд бий болгосон вэб хуудсууд дээр текстийн гадаад төрхийг хянах чадварыг агуулдаг. Үүнд таны ашиглаж буй фонтуудын өнгийг өөрчлөх чадвар орно.
Фонтын өнгийг гадаад хэв маягийн хуудас , дотоод загварын хуудас ашиглан өөрчилж болно, эсвэл HTML баримт дотор inline хэлбэрийг ашиглан өөрчилж болно. Шилдэг туршлага нь таны CSS стильд зориулж гадаад стилийн хуудас ашиглах ёстойг заадаг. Документийн "толгой" хэсэгт бичсэн хэв маягийн дотоод загварын хуудас нь ерөнхийдөө жижиг, нэг хуудастай сайтуудад ашиглагддаг. Хэдэн жилийн өмнө бидний хийсэн "фонт" тэмдэглэгээнүүдтэй ижил байх тул тойм хэлбэрээс зайлсхийх хэрэгтэй. Тэдгээрийн загвар нь үсгийн хэв маягийг удирдахад маш хэцүү болгодог тул та тэдгээрийг өөрчилсөн хэв маягийн жишээн дээр өөрчлөх хэрэгтэй болно.
Энэ нийтлэлд та фонтын өнгийг хэрхэн солихыг сурахын тулд гаднах загварын хуудас болон догол маягийн загварт ашигладаг загварыг ашиглана. Та
tag гэх мэт текстийг хүрээлсэн дурын шошгоны үсгийн өнгийг өөрчлөхийн тулд ижил загварын шинж чанарыг ашиглаж болно.Фонтын өнгөийг өөрчлөхийн тулд стилийг нэмэх
Энэ жишээний хувьд та хуудасныхаа тэмдэглэгээ болон HTML документод тусдаа HTML файлтай байх хэрэгтэй. HTML баримт нь хэд хэдэн элементүүдийг үүсгэх магадлалтай. Энэ өгүүллийн зорилгын төлөө бид анхаарч байгаа зүйл бол зүйлийн элемент юм.
Энд гадаад стилийн хуудсыг ашиглан догол маягийн текстийн үсгийн өнгөийг яаж өөрчлөх вэ.
Өнгөний утгыг өнгөт түлхүүр үг, RGB өнгөт дугаар, эсвэл арван зургаат өнгөт илэрхийлж болно.
- Загварын таг дахь загварын шинж чанарыг нэмэх:
- p {}
- Өнгөний өмчийг хэв маягаар байрлуул. Энэ өмчийн дараах цэгийг байрлуул:
- p {color:}
- Дараа нь эд хөрөнгийн дараа таны өнгөний үнэ цэнийг нэмнэ. Энэ утгыг хагас цэгээр төгссөн эсэхийг шалгаарай:
- p {color: black;}
Таны хуудсан дахь догол мөрүүд нь хар өнгөтэй болно.
Энэ жишээ нь өнгөт түлхүүр үг - "хар". Энэ бол CSS дээр өнгө нэмэх нэг арга юм, гэхдээ энэ нь маш хязгаарлагдмал юм. Эдгээр хоёр өнгө нь маш тодорхой учраас "хар", "цагаан" гэсэн түлхүүр үг хэрэглэх нь энгийн бөгөөд хэрэв та "улаан", "цэнхэр", эсвэл "ногоон" гэсэн түлхүүр үгсийг ашигладаг бол яах вэ? Та улаан, хөх, ногоон өнгийн сүүдэрлэхэд яг ямар байх вэ? Та яг ямар өнгөт сүүдэртэй болохыг түлхүүр үгээр тодорхойлж чадахгүй. Тиймээс арван зургаатын утгыг өнгөт түлхүүр үгсийн оронд ашигладаг.
p {color: # 000000; }
Энэ CSS-ийн загвар нь таны үсгийн өнгөийг хараар харуулах болно. Учир нь # #000000-ийн гекс код нь хар өнгөтэй байна. Тэр ч байтугай энэ hex-ийн утгатай түргэн бичгийг ашиглаж, үүнийг яг л # 000 гэж бичээд та үүнтэй ижил зүйлийг авах болно.
Өмнө дурьдсанчлан, Hex нь хар, цагаан биш өнгө хэрэгтэй үед өнгө нь сайн ажилладаг. Жишээ нь:
p {color: # 2f5687; }
Энэ графикийн утга нь догол мөрийг хөх өнгөөр тохируулах боловч "цэнхэр" гэсэн түлхүүр үгнээс ялгаатай нь энэ Hex код нь танд маш тодорхой цэнхэр өнгийн сүүдэр тавих боломж олгоно - дизайнер нь интерфэйсийг энэ вэбсайт. Энэ тохиолдолд өнгө нь дунд зэргийн, шифер шиг цэнхэр байх болно.
Эцэст нь, та үсгийн өнгийг сонгохдоо RGBA өнгөний утгыг ашиглаж болно. RGCA нь орчин үеийн бүх хөтчүүд дээр дэмжигддэг тул та эдгээр утгыг веб хөтөч дээр дэмжигдэхгүй гэсэн санаа зоволтгүй, гэхдээ та бас хялбар уналт үүсгэж болно.
p {color: rgba (47,86,135,1); }
Энэ RGBA үнэ нь өмнө нь заасан цэнхэр өнгийн өнгөний адил байна. Эхний 3 утгууд нь Улаан, Ногоон, Цэнхэр утгуудыг тавьсан бөгөөд эцсийн тоо нь альфа тохиргоо юм. Энэ нь "1" гэсэн утгатай, энэ нь 100% гэсэн үг бөгөөд энэ өнгө нь ил тод биш байх болно. Хэрэв та үүнийг аравтын тоогоор .85 гэж тэмдэглэвэл 85% -ийн тунгалаг байдал болон өнгө нь ил тод байх болно.
Хэрэв та өнгөний утгыг bulletproof хийхийг хүсч байгаа бол үүнийг хийх болно:
p {
өнгө: # 2f5687;
Өнгө: rgba (47,86,135,1);
}
Энэ синтакс эхлээд Hex кодыг тохируулна. Дараа нь RGBA дугаартай утгыг дарж бичнэ. Энэ нь RGBA-ыг дэмждэггүй хуучин хөтөч нь эхний утгыг авч хоёр дахь удаагаа үл тоомсорлодог гэсэн үг юм. Орчин үеийн хөтөчүүд CSS каскад дахь хоёр дахь хувилбарыг ашиглах болно.