5.1 рдЯреИрдЧ рдХреА рд╢реИрд▓реА рд╡рд┐рд╢реЗрд╖рддрд╛
рдФрд░ HTML рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреБрдЫ рдФрд░ рдЙрдкрдпреЛрдЧреА рдмрд╛рддреЗрдВред рдЬреИрд╕реЗ-рдЬреИрд╕реЗ рд╡реЗрдм рдиреЗ рд▓реЛрдХрдкреНрд░рд┐рдпрддрд╛ рд╣рд╛рд╕рд┐рд▓ рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд┐рдпрд╛, рд╡реИрд╕реЗ-рд╡реИрд╕реЗ рд╡реЗрдм рдкреЗрдЬреЛрдВ рдХреЛ рдЦреВрдмрд╕реВрд░рддреА рд╕реЗ рдпрд╛ рдмрд╣реБрдд рдЦреВрдмрд╕реВрд░рддреА рд╕реЗ рдбрд┐рдЬрд╛рдЗрди рдХрд░рдиреЗ рдХреА рдорд╛рдВрдЧ рдмрдврд╝рдиреЗ рд▓рдЧреАред рдХреЗ рдкреНрд░рдпреЛрдЧ рд╕реЗ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рджреВрд░ рд╣реЛ рдЧрдИ style
ред
рдЗрд╕ рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рд╕рд╛рдорд╛рдиреНрдп рд░реВрдк рдореЗрдВ рдирд┐рдореНрди рдкреНрд░рд╛рд░реВрдк рд╣реИ:
<tag style="name=value;name2=value2;nameN=valueN">
рд╡рд┐рд╢реЗрд╖рддрд╛ рдорд╛рди, style
рдПрдХ рдЕрд░реНрдзрд╡рд┐рд░рд╛рдо рджреНрд╡рд╛рд░рд╛ рдЕрд▓рдЧ рдХрд┐рдпрд╛ рдЧрдпрд╛, рдЙрди рд╕рднреА "рд╢реИрд▓рд┐рдпреЛрдВ" рдХреЛ рд╕реВрдЪреАрдмрджреНрдз рдХрд░рддрд╛ рд╣реИ рдЬрд┐рдиреНрд╣реЗрдВ рдЯреИрдЧ рдкрд░ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред
рдорд╛рди рд▓реАрдЬрд┐рдП рдХрд┐ рдЖрдк рдПрдХ рдЫрд╡рд┐ рдХреЛ рдПрдХ рд╡рд░реНрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ 100*100
рдФрд░ рдЗрд╕реЗ рдЖрдзрд╛ рдкрд╛рд░рджрд░реНрд╢реА рднреА рдмрдирд╛рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рдЗрд╕рдореЗрдВ рд╡рд┐рд╢реЗрд╖ рд╢реИрд▓рд┐рдпрд╛рдБ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ:
- рдЪреМрдбрд╝рд╛рдИ = 100 рдкреАрдПрдХреНрд╕;
- рдКрдВрдЪрд╛рдИ = 100 рдкреАрдПрдХреНрд╕;
- рдЕрдкрд╛рд░рджрд░реНрд╢рд┐рддрд╛ = 0.5;
рддрдм рдЗрд╕ рдЫрд╡рд┐ рд╡рд╛рд▓рд╛ HTML рдХреЛрдб рдЗрд╕ рддрд░рд╣ рджрд┐рдЦреЗрдЧрд╛:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рд╣рдЬрд╛рд░реЛрдВ рдирд╣реАрдВ рддреЛ рд╕реИрдХрдбрд╝реЛрдВ рд╣реИрдВред рдФрд░ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдбреЗрд╡рд▓рдкрд░реНрд╕ рд▓рдЧрд╛рддрд╛рд░ рдирдП рд▓реЗрдХрд░ рдЖ рд░рд╣реЗ рд╣реИрдВред рдпрд╣ рдЕрдЪреНрдЫрд╛ рд╣реИ рдХрд┐ рдЖрдк рдЬрд╛рд╡рд╛ рдбреЗрд╡рд▓рдкрд░ рдмрдирдиреЗ рдХреЗ рд▓рд┐рдП рдкрдврд╝ рд░рд╣реЗ рд╣реИрдВ, рд╡реЗрдм рдбрд┐рдЬрд╝рд╛рдЗрдирд░ рдирд╣реАрдВ :)
5.2 рд▓реЛрдХрдкреНрд░рд┐рдп рд╕реАрдПрд╕рдПрд╕ рд╢реИрд▓рд┐рдпрд╛рдБ
рдпрд╣ рд╕рдВрднрд╛рд╡рдирд╛ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдк рдЕрдкрдиреЗ рдЬреАрд╡рди рдореЗрдВ рдмрд╣реБрдд рд╕рд╛рд░реЗ HTML рдХреЛрдб рд▓рд┐рдЦреЗрдВрдЧреЗ рдпрд╛ рдЗрд╕рдХреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВрдЧреЗ, рд▓реЗрдХрд┐рди рдХреБрдЫ рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдЖрдк API
. рдЗрд╕рд▓рд┐рдП, рдмреБрдирд┐рдпрд╛рджреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдЬрд╛рдирдирд╛ HTML
рдорджрджрдЧрд╛рд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред
рдмреИрдХрдПрдВрдб рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЗ рд▓рд┐рдП рдиреАрдЪреЗ 10 рд╕рдмрд╕реЗ рдЖрдо рд╣реИрдВ:
# | рдирд╛рдо | рдЙрджрд╛рд╣рд░рдг | рд╡рд┐рд╡рд░рдг |
---|---|---|---|
1 | рдЪреМрдбрд╝рд╛рдИ | рдЪреМрдбрд╝рд╛рдИ: 100 рдкреАрдПрдХреНрд╕ | рдкрд┐рдХреНрд╕реЗрд▓ рдореЗрдВ рддрддреНрд╡ рдХреА рдЪреМрдбрд╝рд╛рдИ |
2 | рдКрдВрдЪрд╛рдИ | рдКрдБрдЪрд╛рдИ: 50% | рдкреНрд░рддрд┐рд╢рдд рдХреЗ рд░реВрдк рдореЗрдВ рддрддреНрд╡ рдХреА рдКрдВрдЪрд╛рдИ (рдорд╛рддрд╛-рдкрд┐рддрд╛ рдХреА рдЪреМрдбрд╝рд╛рдИ рдХрд╛) |
3 | рджрд┐рдЦрд╛рдирд╛ | рдХреБрдЫ рднреА рдбрд┐рд╕реНрдкреНрд▓реЗ рдордд рдХрд░реЛ | рдкреНрд░рджрд░реНрд╢рди рддрддреНрд╡ (рддрддреНрд╡ рдкреНрд░рджрд░реНрд╢рд┐рдд рди рдХрд░реЗрдВ) |
4 | рджреГрд╢реНрдпрддрд╛ | рджреГрд╢реНрдпрддрд╛: рдЫрд┐рдкрд╛ рд╣реБрдЖ | рддрддреНрд╡ рджреГрд╢реНрдпрддрд╛ (рддрддреНрд╡ рдЫрд┐рдкрд╛ рд╣реБрдЖ рд╣реИ, рд▓реЗрдХрд┐рди рдЗрд╕рдХреЗ рд▓рд┐рдП рд╕реНрдерд╛рди рдЖрд░рдХреНрд╖рд┐рдд рд╣реИ) |
5 | рд░рдВрдЧ | рд▓рд╛рд▓ рд░рдВрдЧ; | рдкрд╛рда рдХрд╛ рд░рдВрдЧ |
6 | рдкреГрд╖реНрдарднреВрдорд┐ рдХрд╛ рд░рдВрдЧ | рдкреГрд╖реНрдарднреВрдорд┐ рдХрд╛ рд░рдВрдЧ: рдзреБрдЖрдВ | рдкреГрд╖реНрдарднреВрдорд┐ рдХрд╛ рд░рдВрдЧ |
7 | рд╕реАрдорд╛ | рдмреЙрд░реНрдбрд░: 1px рд╕реЙрд▓рд┐рдб рдмреНрд▓реИрдХ; | рдмреЙрд░реНрдбрд░ (рдЪреМрдбрд╝рд╛рдИ 1px, рд░рдВрдЧ рдХрд╛рд▓рд╛, рдареЛрд╕ рд░реЗрдЦрд╛) |
8 | рдлрд╝реЙрдиреНрдЯ | рдлрд╝реЙрдиреНрдЯ: рдмрд░рд╛рдорджрд╛ 10pt | рдлрд╝реЙрдиреНрдЯ: рдмрд░рд╛рдорджрд╛, рдЖрдХрд╛рд░ 10pt |
9 | рдкрд╛рда рд╕рдВрд░реЗрдЦрд┐рдд | рдкрд╛рда-рд╕рдВрд░реЗрдЦрдг: рдХреЗрдВрджреНрд░; | рдкрд╛рда рд╕рдВрд░реЗрдЦрдг рдХреНрд╖реИрддрд┐рдЬ рд░реВрдк рд╕реЗ |
10 | рдЕрдВрддрд░ | рдорд╛рд░реНрдЬрд┐рди: 2 рдкреАрдПрдХреНрд╕ | рддрддреНрд╡ рдХреЗ рдмрд╛рд╣рд░ рдЧрджреНрджреА |
рдЖрдкрдХреЛ рдЗрди рдЯреИрдЧреНрд╕ рдХреЛ рдпрд╛рдж рд░рдЦрдиреЗ рдХреА рдЬрд░реВрд░рдд рдирд╣реАрдВ рд╣реИ, рд╕рдм рдХреБрдЫ рдЗрдВрдЯрд░рдиреЗрдЯ рдкрд░ рд╣реИред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдкреНрд░рддреНрдпреЗрдХ "рд╢реИрд▓реА" рдХреЗ рдкрд╛рд╕ рдорд╛рдиреНрдп рдореВрд▓реНрдпреЛрдВ рдХрд╛ рдЕрдкрдирд╛ рд╕реЗрдЯ рд╣реИ рдФрд░ рдореВрд▓реНрдп рдХрд╛ рд╡рд░реНрдгрди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕рдХрд╛ рдЕрдкрдирд╛ рдкреНрд░рд╛рд░реВрдк рд╣реИред border
рдХрдо рд╕реЗ рдХрдо рдпрд╛ рджреЗрдЦреЗрдВ font
ред