CSS ձեռնարկ — Դաս 1 — CSS ոճերի միացում
Ես չեմ բացատրելու, թե ինչի համար է CSS-ը ծառայող: Եթե բացել եք այս ձեռնարկը, նշանակում է՝ ցանկանում եք սովորել այն: Ապրեմ ասել, որ CSS-ի հնարավորությունները շատ լայն են և թույլ են տալիս համալիր մառկետներ сверстать ցանկացած դժվարության: CSS-ի կիրառմամբ պետք է հրաժարվել size
, color
, bgcolor
, align
եւ այլ HTML կարգավորիչներից, որոնք խանգարում են CSS-ին:
Գոնե երեք եղանակ կա CSS-ը HTML ֆայլին միացնելու: Նախ՝ ամենապարզը, հետո՝ երկրորդ, և առավել ճիշտ երրորդ եղանակը:
CSS-ը տեգի ներսում (<element style="...">)
CSS կարելի է ավելացնել style պատկանելիքով:
<div style="width: 200px; height: 100px;"> Բլոկ </div>
Այսպիսով, ստեղծում ենք 200×100 պիքսել չափի բլոկ: CSS-ն գրելով style="..." մեջ, շարունակում ենք նույնմիջոց syntax-ին՝
style="փարամետր: արժեք;փարամետր: արժեք;..."
CSS ֆայլի մեջ, HTML-ի <head>
-ում (<style> թեգ)
Այս կերպ մենք թեք CSS-ը տեղադրում ենք HTML ֆայլի վերևում, <head>
-ում՝
<html> <head> <title>CSS ձեռնարկ</title> <style type="text/css"> /* այստեղ գրել CSS */ </style> </head> <body> <p>Ուսումնասիրեք CSS-ը drupalbook.org-ով</p> <p>2-րդ տող. Ուսումնասիրեք CSS drupalbook.org-ով</p> </body> </html>
օրինակ CSS կոդ.
<html> <head> <title>CSS ձեռնարկ</title> <style type="text/css"> body { background: #eeeeee; /* էջի ֆոնը */ font-size: 14px; /* տառաչափի չափը */ } p { color: #ff0000; /* տեքստի գույնը */ } </style> </head> <body> <p>Ուսումնասիրեք CSS drupalbook.org-ով</p> <p>2-րդ տող. Ուսումնասիրեք CSS drupalbook.org-ով</p> </body> </html>
CSS առանձին ֆայլում (<link> թեգ)
Սա լավագույն եղանակն է, որը թույլ է տալիս ամբողջությամբ բաժանել CSS-ը HTML-ից: Չարժի լցնել CSS-ը HTML-ի մեջ՝ փոխարենը պետք է առանձին ֆայլ ստեղծել և միացնել նրան---
<html> <head> <title>CSS ձեռնարկ</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p>Ուսումնասիրեք CSS drupalbook.org-ով</p> <p>2-րդ տող. Ուսումնասիրեք CSS drupalbook.org-ով</p> </body> </html>
link թեգի այլատրիբուտները՝
type="text/css"
— CSS տեսակը,rel="stylesheet"
— արտահայտում է, որ սա ոճային թերթիկ է,media="all"
— կիրառվում է բոլոր սարքավորումների համար,href="style.css"
— CSS ֆայլի ուղին (հարաբերական).
Եղանակը պետք է լինի այսպիսին. ստեղծեք style.css
ֆայլ HTML-ի կողքին և դրեք CSS կոդը.
body { background: #eeeeee; /* էջի ֆոնը */ font-size: 14px; /* տառաչափի չափը */ } p { color: #ff0000; /* տեքստի գույնը */ }
Պահպանեք ֆայլերը և թարմացրեք զննիչը: Այժմ CSS-ը միացված է առանձին ֆայլով և պատրաստ ենք հաջորդ պարապմունքին՝ ավելի խորքային CSS ուսումնասիրությանը: