Ֆեյսբուք սոցիալական կայքի արտաքին էջի ծրագրավորում:
Օգտվում ենք HTML/CSS անցած նյութերից:
Հարցերի դեպքում քննարկում ենք անում:
Տեսքը՝
Վերջում սովորողները կոդերն ու արդյունքը ներկայացնում են բլոգում, ուղարկում ինձ:
Ծրագրավորում՝ ճամբարի ընթացքում
Category: WEB ծրագրավորում
ԴԱՍ 20-21
ԱՆԻՄԱՑԻԱ
Ի՞նչ են CSS անիմացիաները:
Անիմացիան թույլ է տալիս տարրը աստիճանաբար փոխվել մի ոճից մյուսը:
Կարող եք փոխել այնքան CSS հատկություն, որը ցանկանում եք, այնքան անգամ, որքան ցանկանում եք:
CSS անիմացիան օգտագործելու համար նախ պետք է նշեք անիմացիայի որոշ հիմնաբառեր:
Keyframes- ը պահպանում է, թե որոշակի ժամանակներում տարրը ինչ ոճեր կունենա:
@Keyframes կանոնը
Երբ @keyframes կանոնի մեջ նշեք CSS ոճերը , որոշակի ժամանակներում անիմացիան աստիճանաբար կփոխվի ներկայիս ոճից նոր ոճի:
Անիմացիայով աշխատելու համար, դուք պետք է անիմացիան կապեք մի տարրի հետ:
Հետևյալ օրինակը «օրինակ» անիմացիան կապում է <div> տարրի հետ: Շարժապատկերը կտևի 4 վայրկյան, և այն <div> էլեմենտի ֆոնային գույնը աստիճանաբար կփոխի «կարմիր» -ից «դեղին».
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
ԴԱՍ 19
Այսօր Հարավային դպրոց գնացինք ընտրության խմբի հետ՝սովորող-սովորեցնող նախագծով: Բաժանվեցինք մի քանի խմբի և 5-րդ դասարանցիներին փոքր պատկերացում տվեցինք ծրագրավորման և մեր ուսումնասիրած նյութի վերաբերյալ:
Ֆոտոշարք՝
ԴԱՍ 17-18
Կատարում ենք առաջադրանքներ, որոնք վերաբերում են CSS բաժնին: Առաջադրանքները W3schools կայքից են: Վերջում քննարկում ենք մեր պատասխանները:
ԴԱՍ 15
CSS(CASCADING STYLE SHEETS)
Margin
•margin-top
•margin-right
•margin-bottom
•margin-left
•margin
Text
•text-transform
•text-decoration
•text-align
•letter-spacing
•line-height
•word-spacing
List
•list-style-type
•list-style-position
•list-style-image
ԴԱՍ 13
CSS(CASCADING STYLE SHEETS)
Background
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
•Background
Padding
•padding-top
•padding-right
•padding-bottom
•padding-left
•padding
Font
•font-family
•font-style
•font-size
•font-weight
•line-height
•word-spacing
Positions
•static
•relative
•fixed
•absolute
Border
•border-width
•border-style
•border-color
•border
ԴԱՍ 13
CSS width and height
Էլեմենտի ամբողջական լայնությունը հաշվվում է հետևյալ կերպ․
Total width = width + left padding + right padding + left border + right border + left margin + right margin
Էլեմենտի ամբողջական բարձրությունը հաշվվում է հետևյալ կերպ․
Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
<!DOCTYPE html>
<html>
<head>
<style>
div{
height : 200px ;
width : 50% ;
background-color : powderblue ;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph </p>
<div> </div>
</body>
</html>
ԴԱՍ 12
CSS Box Model
HTML-ում բոլոր էլեմենտերը կարելի է ընկալել որպես արկղեր(box). CSS-ում “box model” տերմինը օգտագործվում է դիզայնի և էջատման մասին խոսելիս:
Բոքսային մոդելին են պատկանում.
Արտաքին սահմանները (margin)
Էլեմենտի շրջանակը (border)
Ներքին սահմանները (padding)
Բովանդակությունը (content)
CSS Box Model
Content – բավանդակություն, որտեղ տեքստը և պատկերներն են:
Padding – էլեմենտի բովանդակության և սահմանի միջև տարածությունը։ padding-ը թափանցիկ է:
Border – սահման:
Margin– սահմանից դուրս հեռավորություն(մյուս էլեմենտներից):margin-ը թափանցիկ է
ԴԱՍ 11
CSS colors
Հեռուստացույցները և համակարգիչների մոնիտորները ցուցադրում են տարբեր գույներ՝ խառնելով 3 գունային կոմպոնենտ (կարմիր, կանաչ, կապույտ)
CSS-ում գույները հաճախակի նկարագրվում են՝
Գույնի անունով – օրինակ ՝ “red”
RGB արժեքով – օրինակ՝ “rgb(255, 0, 0)”
HEX արժեքով – օրինակ՝ “#ff0000”
RGB(Red, Green, Blue)
Ամեն կոմպոնենտ (կարմիր, կանաչ, և կապույտ) սահմանում է տվյալ գույնի ինտենսիվությունը վերջնական գույնի մեջ։ Ամեն կոմպոնենտ կարող է ստանալ 0-ից մինջև 255 արժեքներ։
16-ական(hexadecimal) կոդավորում
Օրինակ՝ #FF0000 կարմիրն է, որովհետև կարմիր կոմպոնենտը ներկայացված է իր առավելագույն արժեքով (FF),իսկ իսկ մյուս կոմպոնենտները իրենց նվազագույն արժեքներով (00):
ԴԱՍ 10
CSS-ը օգտագործելու 3 եղանակները
External style sheet
External style sheet օգտագործելով կարելի է միանգամից փոխել ամբողջ կայքի ոճերը միայն մեկ ֆայլ խմբագրելով: External style sheet կցելու համար օգտագործվում է <link> էլեմենտը։<link> էլեմենտը տեղադրվում է <head> էլեմենտի ներսում:
<head>
<link rel =”stylesheet” type =”text/css” href =”style.css”>
</head>
CSS ֆայլը պիտի ունենա .css ընդլայնումը:CSS ֆայլի բովանդակությունը․
body{
background-color : lightblue ;
}
h3{
text-align : center ;
color : red ;
}
Internal Style Sheet
Internal Style Sheet օգտագործվում է, երբ էջերից մեկը ունի ոճային առանձնահատկություններ։ Սահմանվում է <style> էլեմենտի ներսում։
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align : center ;
color : red ;
}
p{
font-size : 300% ;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph </p>
</body>
Inline Styles
Inline style-երը օգտագործվում են կոնկրետ էլեմենտին առանձնահատուկ style-եր տալու համար։ Inline ոճավորման համար տվյալ էլեմենտի style ատրիբուտում գրվում են հատկանիշները և դրանց արժեքները։
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<հ1 style=”color:blue; margin-left:30px;”>This is a heading</հ1>
<p>This is a paragraph. </p>
</body>
</html>
Արշակ Մարտիրոսյան 