CSS-èéã õýðõýí àøèãëàõ, CSS Background
CSS Text, CSS Font, CSS Border, CSS Outline
CSS Margin, CSS Padding, CSS List, CSS Table
CSS ãýæ þó âý?
• CSS ãýäýã íü Cascading Style Sheets ¿ãèéí òîâ÷ëîë
• HTML ýëåìåíò¿¿äèéã õýðõýí õàðóóëàõ ñòàéëóóä
• Ñòàéëóóä íü Style Sheet ¿¿äýýñ á¿ðäýíý
• Ñòàéë íü HTML 4.0 ýýñ ýõëýõ àøèãëàãäàæ èðñýí
• Ãàäààä Style Sheet-¿¿ä íü CSS ôàéëóóä þì
Ä¿ðýì áóþó áè÷ëýã
CSS áè÷ëýã íü 3 õýñãýýñ á¿ðäýíý: ñîíãîã÷, øèíæ ÷àíàð áà óòãà:
Ñîíãîã÷ {øèíæ ÷àíàð: óòãà}
Ñîíãîã÷ íü ýíãèéí HTML ýëåìåíò áîëîí tag – ààð íýðëýãäñýí áàéæ áîëíî. Øèíæ ÷àíàð áîëîí óòãà íü óòãà îëãîõ öýãýýð òóñãààðëàãäñàí áàéõ áà òýäãýýð íü {} õààëòàíä áàéíà.
body {color: black}
Ñàíàìæ: Õýðýâ óòãà íü 2 áóþó ò¿¿íýýñ òîîíû ¿ãýýñ á¿òñýí áîë äàâõàð êîâè÷êà /“/ ààð íýýæ õààíà:
p {font-family: "sans serif"}
Ñàíàìæ: Õýðýâ íýã ñîíãîã÷ äîòîð 2 áóþó ò¿¿íýýñ äýýø òîîíû øèíæ ÷àíàð áîëîí óòãóóäûã îðóóëæ áàéãàà áîë öýã òàñëàëààð òóñãààðëàõ õýðýãòýé.
p {text-align:center; color:red}
Òóõàéí íýã ñîíãîã÷ äîòîð îëîí òîîíû øèíæ ÷àíàð áè÷èæ áàéãàà òîõèîëäîëä á¿õ øèíæ ÷àíàðûã íýã ìºðºíä áè÷âýë øèíæ ÷àíàðóóäûã õàðàõ áîëîí ººð÷ëºõºä õÿëáàð áàéõ ¿¿äíýýñ øèíæ ÷àíàð á¿ðýýð íýã ìºðºíä õàðóóëàõ íü èë¿¿ òîõèðîìæòîé áàéäàã:
P
{
text-align: center;
color: black;
font-family: arial
}
Á¿ëýãëýõ
Òà õýä õýäýí ñîíãîã÷èéã á¿ëýãëýõ áîëîìæòîé. Èíãýæ á¿ëýãëýõäýý òà ñîíãîã÷óóäûã òàñëàëààð òóñãààðëàæ áè÷íý. Æèøýý íü äîîðõ æèøýýí äýýð á¿õ header ýëåìåíòèéí ºíãèéã íîãîîí áîëãîæ áàéíà:
h1,h2,h3,h4,h5,h6
{
color: green
}
Êëàññ ñîíãîã÷
Íýã òºðëèéí HTML ýëåìåíò¿¿äèéí ñòàéëûã ººð ººð ñîíãîã÷îîð òîäîðõîéëîõûí òóëä êëààñ ñîíãîã÷èéã àøèãëàäàã.
Äîîðõ æèøýýí äýýð p ýëåìåíòèéã ººð ººð ñîíãîã÷îîð òîäîðõîéëñîí áàéãààã õàðæ áàéíà. p.right êëàññ ñîíãî÷ íü ð ýëåìåíòèéí òåêñòèéã áàðóóí õýñýãð¿¿ íü øàõàæ áàéðóóëæ áàéãàà áîë p.center êëàññ ñîíãîã÷ íü ãîëëóóëæ õàðóóëíà:
p.right {text-align: right}
p.center {text-align: center}
Äýýðõ 2 êëàññûí HTML document äýýð äàðààõ áàéäëààð àøèãëàíà:
This paragraph will be right-aligned.
This paragraph will be center-aligned.
Ñàíàìæ: Õýðýâ ýëåìåíòýä 2 áóþó ò¿¿íýýñ äýýø òîîíû êëàññ àøèãëàõ ãýæ áàéãàà áîë äàðààõ áàéäëààð áè÷íý:
This is a paragraph.
Äýýðõ æèøýýí äýýð "center" áîëîí "bold" êëàññóóäûã àøèãëàñàí áàéíà.
Òà òóõàéí áè÷ñàí êëàññàà çºâõºí òóõàéí ýëåìåíòýä áèø îëîí òºðëèéí ýëåìåíòýä àøèãëàõ õýðýãòýé áîë òà êëàññûí íýðýý öýãýýð ýõë¿¿ëýí áè÷èõýä ë õàíãàëòòàé. Íýã ¸ñîíäîî ýëåìåíòèéí íýðèéã áè÷èõã¿é áîë á¿õ ýëåìåíòýä àøèãëàæ áîëíî ãýñýí ¿ã:
.center {text-align: center}
Äîîðõ æèøýýí äýýð òóõàéí êëàññûã àøèãëàñàí áàéíà:
This heading will be center-aligned
This paragraph will also be center-aligned.
Êëàññûí íýðèéã òîîãîîð ýõë¿¿ëæ áîëîõã¿é.
Ýëåìåíòèéí àòðèáóòààð õàðãàëçóóëàí ñòàéë íýìýõ
Äîîðõ æèøýýí äýýð input ýëåìåíòèéí type àòðèáóòèéí óòãà íü text áàéãàà ¿åä ñòàéë íýìýõ áîë äàðààõ áàéäëààð áè÷íý:
input[type="text"] {background-color: blue}
Id ñîíãîã÷
Òà òóõàéí HTML ýëåìåíòèéí Id-ààð õàðàëçóóëàí ñòàéë íýìýõäýý äàðààõ áàéäëààð áè÷íý. Id ñîíãîã÷ íü # òýìäýãòýýð ýõýëíý.
Äàðààõ æèøýý íü green ãýñýí íýðòýé Id ñîíãîã÷.
#green {color: green}
Òóõàéí ýëåìåíä ë àøèãëàõ Id ñîíãîã÷èéã äàðààõ áàéäëààð áè÷íý. P ýëåìåíòýä ë àøèãëàíà.
p#para1
{
text-align: center;
color: red
}
Id íü òîîãîîð ýõýëæ áîëîõã¿é.
CSS - ä òàéëáàð áè÷èõ
CSS ôàéëä ººð áóñàä êîäóóäûí àäèë òàéëáàð áè÷èõ áîëîìæòîé áàéäàã. Òàéëáàð àøèãëàõíààð òà ººðèéí áè÷ñýí css ôàéëàà çàñàõàä õÿëáàð áîëíî. Òàéëáàð íü “/*” –ààð ýõýëæ “*/”-ààð äóóñíà:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
Style Sheet îðóóëàõ
Style Sheet – èéã ¿íäñýíäýý 2 àíãèëíà. Ãàäààä áîëîí äîòîîä Style Sheet.
Ãàäààä Style Sheet
Ãàäààä style sheet íü îëîí õóóäñàí äýýð àøèãëàõ áîëîìæòîé. Ò¿¿íèéã àøèãëàñíààð õóóäàñ çàñâàð õèéõ øààðäëàãà ãàðâàë çºâõºí òóõàéí ôàéëûã ë ººð÷ëºõºä õàíãàëòòàé. Style Sheet-èéã îðóóëàõäàà òàã äîòîð òàã àøèãëàí îðóóëíà:
href="mystyle.css" />
Ãàäààä style sheet-èéã ÿìàðò text editor äýýð çàñâàðëàõ áîëîìæòîé áàéäàã áà Style Sheet íü .css òºðºëòàé ôàéë áàéíà.
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Äîòîîä style sheet
Äîòîîä style sheet-èéã çºâõºí òóõàéí íýã õóóäñàí äýýð àøèãëàíà. Ò¿¿íèéã áè÷èõäýý òàã äîòîð
Íýã ìºð style sheet
Íýã ìºð style sheet ãýäýã íü á¿õ øèíæ ÷àíàð áîëîí óòãóóä íü íýã ìºðºíä áè÷èãääýã. Áà ò¿¿íèéã àøèãëàõäàà òóõàéí ýëåìåíòèéí style àòðèáóò äîòîð áè÷èãäýõ áà øèíæ ÷àíàð áîëîí óòãóóäààñ á¿ðäýíý. Øèíæ ÷àíàð áîëîí óòãóóä íü öýã òàñëàëààð òóñãààðëàãäàíà:
This is a paragraph
Îëîí ìºð Style Sheets
Îëîí ìºð style sheet ãýäýã íü øèíæ ÷àíàð áîëîí óòãóóä íü òóñ òóñäàà ìºðºíä áàéíà.
h3
{
color: red;
text-align: left;
font-size: 8pt
}
CSS Background øèíæ ÷àíàðóóä
CSS background øèíæ ÷àíàðóóä íü òàíä ýëåìåíòèéí ñóóðü õýñãèéí óäèðäàõ áîëîìæ îëãîíî.
Òóõàéí øèíæ ÷àíàðûã äýìæäýã âýá áðîóçåð: IE: Internet Explorer, F: Firefox, N: Netscape.
Øèíæ ÷àíàð Òàéëáàð Óòãóóä IE F N W3C
background
Òóñ øèíæ ÷àíàðààð áóñàä á¿õ øèíæ ÷àíàðóóäûã óäèðäàõ áîëîìæòîé. background-color
background-image
background-repeat background-attachment background-position 4 1 6 1
background-attachment
Ñóóðü õýñãèéí çóðãèéã ÿàæ õàðóóëàõ scroll
fixed 4 1 6 1
background-color
Ýëåìåíòèéí ñóóðü õýñãèéí ºí㺠òîäîðõîéëîõ color-rgb
color-hex
color-name
transparent 4 1 4 1
background-image
Ñóóðü õýñýãò çóðàã òîäîðõîéëîõ url(URL)
none 4 1 4 1
background-position
Ñóóðü õýñýãò çóðàã îðóóëàõ áàéðëàë. top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos 4 1 6 1
background-repeat
Ñóóðü õýñýãò çóðàã áàéðëóóëàõäàà äàâòàæ õàðóóëàõ ýñýõ, ÿàæ äàâòàõ repeat
repeat-x
repeat-y
no-repeat 4 1 4 1
CSS Text øèíæ ÷àíàð
CSS text øèíæ ÷àíàð íü òåêñòèéí õàðàãäàõ áàéäëûã óäèðäàõ áîëîìæ îëãîíî. Ýíý íü ºí㺠ººð÷ëºõ, òýìäýãò¿¿äèéí õîîðîíäûí çàéã èõýñãýõ áîëîí áàãàñãàõ, òåêñòûí áàéðëàëûã òîäîðõîéëîõ çýðýã áîëîìæòîé.
Øèíæ ÷àíàð Òàéëáàð Óòãóóä IE F N W3C
color
Òåêñòèéí ºí㺠color 3 1 4 1
direction
Òåêñòèéí çààâàð ltr
rtl 6 1 6 2
line-height
Øóãàìûí ºðãºí normal
number
length
% 4 1 4 1
letter-spacing
Òýìäýãò¿¿äèéí õîîðîíäûí çàéã ºñãºõ áîëîí áàãàñãàõ normal
length 4 1 6 1
text-align
Òåêñòèéí áàéðëàë left
right
center
justify 4 1 4 1
text-decoration
Òåêñòèéí õýëáýðæ¿¿ëýëò none
underline
overline
line-through
blink 4 1 4 1
text-indent
Indents the first line of text in an element length
% 4 1 4 1
text-shadow Òåêñòèéí ä¿ðñæ¿¿ëýëò none
color
length
text-transform
Controls the letters in an element none
capitalize
uppercase
lowercase 4 1 4 1
unicode-bidi normal
embed
bidi-override 5 2
white-space
Sets how white space inside an element is handled normal
pre
nowrap 5 1 4 1
word-spacing
¿ã õîîðîíäûí çàé normal
length 6 1 6 1
CSS Font Properties
The CSS font properties allow you to change the font family, boldness, size, and the style of a text.
Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.
Øèíæ ÷àíàð Òàéëáàð Óòãóóä IE F N W3C
font
A shorthand property for setting all of the properties for a font in one declaration font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar 4 1 4 1
font-family
A prioritized list of font family names and/or generic family names for an element family-name
generic-family 3 1 4 1
font-size
Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
% 3 1 4 1
font-size-adjust
Specifies an aspect value for an element that will preserve the x-height of the first-choice font none
number - - - 2
font-stretch
Condenses or expands the current font-family normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded - - - 2
font-style
Sets the style of the font normal
italic
oblique 4 1 4 1
font-variant
Displays text in a small-caps font or a normal font normal
small-caps 4 1 6 1
font-weight
Sets the weight of a font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900 4 1 4 1
CSS Border Properties
The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
Property Description Values IE F N W3C
border
A shorthand property for setting all of the properties for the four borders in one declaration border-width
border-style
border-color 4 1 4 1
border-bottom
A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width
border-style
border-color 4 1 6 1
border-bottom-color
Sets the color of the bottom border border-color 4 1 6 2
border-bottom-style
Sets the style of the bottom border border-style 4 1 6 2
border-bottom-width
Sets the width of the bottom border thin
medium
thick
length 4 1 4 1
border-color
Sets the color of the four borders, can have from one to four colors color 4 1 6 1
border-left
A shorthand property for setting all of the properties for the left border in one declaration border-left-width
border-style
border-color 4 1 6 1
border-left-color
Sets the color of the left border border-color 4 1 6 2
border-left-style
Sets the style of the left border border-style 4 1 6 2
border-left-width
Sets the width of the left border thin
medium
thick
length 4 1 4 1
border-right
A shorthand property for setting all of the properties for the right border in one declaration border-right-width
border-style
border-color 4 1 6 1
border-right-color
Sets the color of the right border border-color 4 1 6 2
border-right-style
Sets the style of the right border border-style 4 1 6 2
border-right-width
Sets the width of the right border thin
medium
thick
length 4 1 4 1
border-style
Sets the style of the four borders, can have from one to four styles none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 4 1 6 1
border-top
A shorthand property for setting all of the properties for the top border in one declaration border-top-width
border-style
border-color 4 1 6 1
border-top-color
Sets the color of the top border border-color 4 1 6 2
border-top-style
Sets the style of the top border border-style 4 1 6 2
border-top-width
Sets the width of the top border thin
medium
thick
length 4 1 4 1
border-width
A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin
medium
thick
length 4 1 4 1
