Web Lec 5

CSS
F.ITM202 Вэб зохиомж

Лекц №5
А.Түвшинбаяр (Доктор, Ph.D)

Modifying List Elements
Анхдагч байдлаар, эрэмблэгдээгүй жагсаалт (<ul>) нь bullets
хэлбэрээр, эрэмбэлэгдсэн жагсаалт (<ol>) HTML дээр
тоогоор харагдана.
CSS ашиглан жагсаалтын зүйлс хэрхэн харагдахыг өөрчилж
болно:
Properties: list-style, list-style-type, list-style-image, list-style-
position
Утга:
Modifying List Elements
disc, circle, square, decimal, decimal-leading-zero, lower-roman,
upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin,
upper-latin, hebrew, armenian, georgian, cjk-ideographic,
hiragana, katakana, hiragana-iroha, katakana-iroha, none,
url("graphic.gif")
▪ Examples:
ul { list-style: disc; }
ol { list-style: upper-roman;}
li { list-style: url("blackball.gif");}
ul li { list-style-position: inside;}
The Box Model
Хөтөч нь хуудсан дээр объект зурахдаа үүнийг "bounding box
- хязгаарлах хайрцаг" гэж нэрлэгддэг үл үзэгдэх тэгш өнцөгт
орон зайд байрлуулдаг.
Та хайрцгийн margins - захын хэмжээ, feel, look, padding,
border - хүрээ, агуулгыг зааж өгч болно.
Internet Explorer нь CSS box хэв маягийг бусад ихэнх вэб
хөтчөөс өөрөөр тайлбарладаг.
The Box Model
ID нь "box" гэсэн HTML элементийн шинж чанарт утга
оноохын тулд дараах зүйлийг бичнэ.
Эх код
#box { property: value; }
The Box Model
CSS1-д width - өргөн шинж чанарыг элементийн агуулгыг
хүрээлж буй хязгаарлах хайрцагны зүүн ба баруун ирмэгийн
хоорондох зай гэж тодорхойлдог.
Үүний нэгэн адил, height - өндөр шинж чанарыг CSS-д
хязгаарлах хайрцагны дээд ба доод ирмэгийн хоорондох зай
гэж тодорхойлдог.
Гэсэн хэдий ч Internet Explorer-д өргөн ба өндрийн шинж
чанарууд нь элементийн хязгаарлах хайрцгийг хүрээлсэн
хүрээ болон дүүргэгч бүсийг агуулдаг.
The Box Model: IE vs. CSS
CSS Standard Internet Explorer

Pseudo-elements and Pseudo-classes
Стандарт HTML-д байхгүй онцгой нөхцөл байдлыг
шийдвэрлэхийн тулд псевдо-элементүүд ба псевдо-класс гэж
нэрлэгддэг хоёр тусгай бүлэгийг CSS-д ашигладаг.
Жишээлбэл: стандарт HTML-ийн дагуу догол мөрний эхний
үсэг эсвэл мөрийн харагдах байдал, мэдрэмжийг автоматаар
өөрчлөх арга байхгүй. Гэхдээ псевдо элемент :first-letter-ийг
ашигласнаар та түүнд нөлөөлөх хэв маягийг тодорхойлж
болно:
p:first-letter { font-size: 200%; color:red;}
Стандарт HTML-д хулганы хөдөлгөөнийг зохицуулах
механизм байдаггүй. Гэхдээ CSS-ийн тусламжтайгаар псевдо
ангиллын :hover-ийг холбоосын хэв маягийг өөрчлөхөд
ашиглаж болно. Энэ жишээн дээр хулгана холбоосууд дээр
гүйлгэн ирэх бүрт холбоосын өнгийг улаан болгож, доогуур
зураасыг арилгахын тулд a:hover-ийг ашигладаг
▪ a:hover {color: #ff0000; text-decoration: none;)

Холбоосын хэв маягийг өөрчлөхийн тулд псевдо ангиллыг
ашиглана :link
Зочилсон холбоосын хэв маягийг өөрчлөхийн тулд псевдо
ангиллыг ашиглана :visited.
a:link {color: #00f; font-weight: bold;)

a:visited {color: purple; border: groove;}
Positioning
CSS-ийг ашигласнаар "байршил тогтоох positioning" аргыг
ашиглан элементүүдийг яг хуудсан дээр байрлуулж болно.
Байршлыг X тэнхлэг ба Y тэнхлэгээр тодорхойлно. Дэлгэц
дээрх тодорхой цэгийг зааж өгөхийн тулд та тухайн цэгийн X
ба Y координатыг ашиглаж болно.
CSS-д байрлалыг тодорхойлох хэд хэдэн арга байдаг:
absolute, relative, fixed, inherit, static.
Хамгийн түгээмэл хэрэглэгддэг гурван нь absolute, relative,
fixed.
Absolute Positioning Example
Холбоосын хэв маягийг өөрчлөхийн тулд псевдо ангиллыг
ашиглана :link
Зочилсон холбоосын хэв маягийг өөрчлөхийн тулд псевдо
ангиллыг ашиглана :visited.
a:link {color: #00f; font-weight: bold;)

a:visited {color: purple; border: groove;}
Relative Positioning Example
Relative Positioning Example
Fixed Positioning – code view
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ultrices, nibh ac
rhoncus fermentum, orci sem dapibus nisi, sed tincidunt lectus lectus at augue. In
consectetuer vehicula enim. In hac habitasse platea dictumst. Donec a nisl vitae tortor
tristique viverra. Sed at lorem a ante lobortis molestie. Nulla ullamcorper urna
accumsan diam. Aliquam non eros. Pellentesque egestas ultricies enim. Aenean lobortis.
Nulla interdum commodo turpis. Sed ut mi id elit vehicula sollicitudin. Sed lobortis,
ligula sit amet euismod egestas, mi ante iaculis nunc, ut rhoncus magna lectus ac arcu.
In hac habitasse platea dictumst. Proin quis ligula vitae quam pharetra adipiscing.
Pellentesque tincidunt suscipit nibh. Ut fermentum suscipit justo. </p>
<p>Fusce purus lectus, ultricies nec, aliquam at, facilisis id, arcu. Vestibulum quis mi
vel massa porta hendrerit. Nulla ullamcorper ligula nec lectus. Quisque tempor, augue
in molestie gravida, eros arcu luctus tortor, eu dignissim diam urna sed urna. Ut
dictum ultrices lacus. In hac habitasse platea dictumst. Suspendisse sed purus blandit
metus ultricies suscipit. Proin diam justo, consequat id, rhoncus eget, facilisis ut,
lacus. Vivamus dignissim dui in justo. Suspendisse elit. Nam nulla tortor, fringilla
sed, faucibus quis, ullamcorper a, leo. Fusce blandit condimentum turpis. Pellentesque
vel odio et odio suscipit egestas. Nullam ullamcorper sagittis ipsum. Maecenas
fringilla malesuada pede. Duis ut quam. </p>
</div>
<div id="links">
<p>This area is fixed and will never move. It's good for things like navigation bars.</p>
<ul>
<li><a href="page1.html">Page 1</a></li>
</ul>
</div></body></html>
Layers and the “Bounding Box”
Хөтөч нь хуудсан дээр объект зурахдаа үүнийг "хязгаарлах
хайрцаг bounding box" гэж нэрлэгддэг үл үзэгдэх тэгш
өнцөгт орон зайд байрлуулдаг. Xуудасны хайрцгийн байршлыг
яг таг тохируулах эсвэл хуудасны бусад объектоос офсет
хийх боломжтой. Өмнөх слайдуудад дурдсанчлан хайрцагны
хэмжээг зааж өгч болно.
Layers and the “Bounding Box”
CSS-ийн тусламжтайгаар эдгээр хайрцгийг давхар болгон
давхарлан байрлуулж болно. Х болон У тэнхлэгийн дагуу
хэвтээ ба босоо байрлал, Z тэнхлэгийн дагуу давхаргын
байрлал үүснэ.
Z тэнхлэгийг CSS загварын z-index ашиглан тохируулсан
бөгөөд энэ нь аль давхарга бусдын дээр гарч ирэхийг зааж
өгөх боломжийг олгодог. Z-index өндөр эсвэл доогуур
тохируулснаар объект нь стек дээр дээш доош хөдөлж болно.
Z-index өндөр байх тусам "дээд талд" байна.
Layering Example 1
Layering Example 1
Layering Example 2
Layering Example 2
Float
Хэрэв бусад контентын эргэн тойронд агуулгыг (жишээ нь
зургийн эргэн тойронд байгаа текст гэх мэт) хүрээлэх-wrap
хүсвэл float шинж чанарыг ашиглаж болно.
float шинж чанар нь элементийг хязгаарлах хайрцагны аль
талд нь зэрэгцүүлж, нөгөө контент нь түүнийг тойрон
эргэлдэхийг тодорхойлдог.
Float Example 1 – float: right
Float Example 1 – float: right
example
Source Code 4
color: #FFFFFF; /* Set font color to white using Hexadecimal
value */
Source Code 5
color: #FFF; /* Set font color to white using short Hexadecimal
value */
Source Code 6
color: white; /* Set font color to white using named value */
example
Source Code 7
color: rgb(255,255,255); /* Set font color to white using an RGB
value */
Source Code 8
color: var(--white-color); /* Set font color to white using a CSS
variable */
example
Өгөгдмөл контент хайрцагны загварыг ашиглах үед 4 тал тус
бүр дээр 1px хүрээ нэмсэн тул өргөн ба өндөр нь тал бүр
дээр 2 пикселээр нэмэгдсэн.
example
дээр ээр нэмэгдсэн.
example
border болон padding хоёулаа байх үед бодит физик өргөн нь
334px x 134px болдог. Энэ нь анхны хэмжээсээс 34
пикселээр их байна (1px x 2 + 16px x 2 = 34px).
example
padding-box утга нь агуулгын хайрцгийн дотор талд
дэвсгэрийг тавьдаг. Одоо анхны хэмжээсүүд хадгалагдан
үлдсэн боловч агуулга нь зөөлөвчтэй хэвээр байна.
example
Энд хүрээний анхны утгыг дарж бичнэ: өмнөх жишээнээс
хүрээ хүртэл 1px solid саарал: 16px болон padding: 16px
элементийн анхны өргөн ба өндрийг тал бүр дээр нэмэлт
32px пикселээр дүүргэж, нийт 64px нэмнэ. элементийн
хэмжээс бүрт.
example
example
example
CSS-д margin box байдаггүй, учир нь тодорхойлолтоор
margin нь контентыг тойрсон орон зайг үргэлж илэрхийлдэг.
example
Нэг HTML элемент нь нүдэнд харагдахаас хамаагүй их зүйл
байдаг.
Reference
▪ A List Apart – articles on practical issues and suggestions for working with CSS correctly
http://www.alistapart.com/topics/code/css
▪ Example XHTML Pages, with and without the CSS Style Sheet:
http://techbriefings.stanford.edu/web_standards/example1.html http://techbriefings.stanford.edu/
web_standards/example2.html http://techbriefings.stanford.edu/web_standards/example.css
▪ The CSS Zen Garden shows some of the most advanced uses of CSS: http://www.csszengarden.com/
▪ CSS in the real world: ajc.com's 'News Break': http://www.holovaty.com/blog/archive/2002/09/28/2340
▪ Microsoft's CSS Information: http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
▪ Microsoft's Style Sheet Demonstrations: http://www.microsoft.com/typography/css/gallery/extract1.htm
http://www.microsoft.com/typography/css/gallery/slide1.htm
▪ W3C Style Examples
http://www.w3.org/Style/Examples/007
▪ W3C CSS 2.1 Specifications:
http://www.w3.org/TR/CSS21/
▪ W3Schools CSS Tutorial:
http://www.w3schools.com/css
▪ W3Schools CSS Reference:
http://www.w3schools.com/css/css_reference.asp
▪ Webmonkey’s Cascading Style Sheet Guide:
http://www.webmonkey.com/reference/stylesheet_guide/
▪ Brian Wilson’s Cascading Style Sheet Reference Guide: http://www.blooberry.com/indexdot/css/index.html
▪ CSS Visual Dictionary
Анхаарал хандуулсан
та бүхэнд баярлалаа
Асуулт?
Цахим шуудан:
tuvshinbayar@must.edu.mn

Web Lec 5

Uploaded by

Copyright:

Available Formats

You might also like

Web Lec 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lec 5

Uploaded by

Copyright:

Available Formats

CSS

F.ITM202 Вэб зохиомж

А.Түвшинбаяр (Доктор, Ph.D)

CSS Standard Internet Explorer

▪ a:hover {color: #ff0000; text-decoration: none;)

a:link {color: #00f; font-weight: bold;)

a:link {color: #00f; font-weight: bold;)

You might also like