Lecture 3. css

2012-9-17

МУИС – МТС – КМТТ

Дэд проф, Док. Б. Сувдаа

Интернэт Технологийн Үндэс

Лекц – 3. CSS – ийн тухай

Агуулга

• CSS – ийн тухай

• CSS – ийг хэрэглэх 3 арга

• Inline

• Embedded style

• External style sheet

• ID ба Class-тай ажиллах

CSS – ийн тухай

• Cascaded Style Sheet (CSS) гэдэг нь HTML документийг

хэлбэржүүлэх боломж

• Хэлбэржүүлэлтийг нэг удаа тодорхойлж өгөөд олон

хуудсыг хэлбэржүүлэх

• Гадаад стайлууд нь ажил их хөнгөвчилдөг

• Гадаад стайлууд нь css файлд хадгалагддаг

CSS – ийн бичлэгийн дүрэм

• CSS syntax-ийн дүрэм нь 2 үндсэн хэсгээс тогтоно. (1

selector, 1 ба түүнээс дээш declarations)

• Жишээ нь:

body

{ background-color:#d0e4fe; }

h1

{ color:orange;

text-align:center; }

p

{ font-family:"Times New Roman";

font-size:20px; }

CSS-ийн давуу талууд

• Хугацаа хэмнэнэ

• Өөрчлөхөд хялбар

• Тогтонги байдлыг хангана (бүх p ижил хэлбэржилттэй)

• Бүх хэлбэржүүлэлтийг хянаж удирдах боломжтой

• JavaScript-ийг style-тай хамт хэрэглээд => DHTML

• Вэб хуудасны өөрчлөлтийг нэгэн зэрэг хийх боломжтой

Нэг хэлбэржүүлэлтийг олон

хуудсанд хэрэглэх

CSS хэрэгдэх 3 арга

• Inline styles

– HTML файлын таг бүр дотор

стайлуудыг оруулж өгөх

– Үүнийг вэб дэх нэг хэсгийг

хэлбэржүүлэхэд л хэрэглэнэ.


– <h1 style=“color: red; font-family: sans-

sarif”>IU</h1>


• Embedded буюу дотоод стайлууд:

– HTML файлыг бүхэлд нь хэлбэржүүлэхэд хэрэглэгддэг

– Вэб дэх тодорхой элементүүдийг хэлбэржүүлэхэд хэрэглэнэ.


– <style>

• h1 {color:red; font-family:sans-serif}

– </style>


Эмбэддэд стайлыг үүсгэх

<head>

<title>Embedded Example</title>

<style> (default is “text/css”)

Стайл тодорхойлолт

</style>

</head>

• Стайл тодорхойлолт:

– Selector {attribute1:value1;

attribute2:value2; …}


Эмбэддэд стайлыг үүсгэх <!DOCTYPE html>

<html>

<head>

<style type="text/css">

body

{ background-color:#d0e4fe; }

h1

{ color:orange;

text-align:center; }

p

{ font-family:"Times New Roman";

font-size:20px; }

</style>

</head>

<body>

<h1>CSS example!</h1>

<p>This is a paragraph.</p>

</body>

</html>


Эмбэддэд стайлыг үүсгэх <!DOCTYPE html>

<html>

<head>


h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

</style>

</head>

<body>

<h1>This is heading 1</h1>




<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>

</body>

</html>

CSS хэрэгдэх 3 арга Эмбэддэд стайлыг үүсгэх

<!DOCTYPE html>

<html>

<head>


a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

</style>

</head>

<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS

definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order

to be effective.</p>

</body>

</html>


• Гадаад стайл хуудас

– Стайлуудыг тодорхойлсон гадаад текст

файлд бичигддэг

– Бүх вэб хуудсыг хэлбэржүүлэхийн тулд стайл


– h1, h2, h3, h4, h5, h6 {color: red; font-family:

sans-serif}

– a .css нэртэй хадгална.

Гадаад CSS файл үүсгэх

• Notepad дээр шинэ хоосон документ

нээх

• Стайл тодорхойлолтуудыг бичих

– h1 {color:red; font-family:sans-serif;}

• <style> тагийг бүү оруул

• Документаа filename.css нэртэй

хадгал.

CSS файлыг холбох

• HTML файл нээ

• <head> ба </head> хооронд

– <link href=URL rel=“relation_type” type=“link_type”> -ийг нэм.

• URL нь css файл

• Relation_type=“stylesheet”

• Link_type=“text/css”

• Энэ файлаа хаагаад ба .css файлтай нэг фолдерт хадгал.

IDs ба Class-ийг хэрэглэх

• Зарим зүйлсийг хооронд нь ялгахын тулд id-ийг

хэрэглэдэг. Жишээ нь р-ийг бусдаас нь ялгах.

• Id selector нь HTML элементийн id attribute-ийг

хэрэглэдэг ба энэ нь #- ийг хэрэглэнэ.

– Paragraph- ийг “head” гэж үзэх:

<p id=“head”>… </p>

IDs ба Class-ийг хэрэглэх

Жишээ нь р-ийг бусдаас нь ялгах. <!DOCTYPE html>

<html>

<head>


#para1

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

Class-тай ажиллах

• HTML ба XHTML нь id бүрийг нэгэн утгатай

байхыг шаарддаг учраас документад id-ийн утга

зөвхөн ганц удаа хэрэглэгдэнэ.

• Тиймээс class attribute – ийг ашиглан нийтлэг id-

нуудыг элементүүдийн группыг үүсгэж болно. <element class=“class”> … </element>

Class selector нь “.” – ээр тэмдэглэнэ.

Класст стайл хэрэглэсэн жишээ


<!DOCTYPE html>

<html>

<head>


.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">Center-aligned heading</h1>

<p class="center">Center-aligned paragraph.</p>

</body>

</html>


<!DOCTYPE html>

<html>

<head>


p.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">This heading will not be

affected</h1>

<p class="center">This paragraph will be

center-aligned.</p>

</body>

</html>


<!DOCTYPE html>

<html>

<head>


p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

</style>

</head>

<body>

<p class="uppercase">This is some text.</p>

<p class="lowercase">This is some text.</p>

<p class="capitalize">This is some text.</p>

</body>

</html>


<!DOCTYPE html>

<html>

<head>


div.ex

{width:220px;

padding:10px;

border:5px solid gray;

margin:0px;}

</style>

</head>

<body>

<img src="250px.gif" width="250" height="1" /><br /><br />

<div class="ex">The line above is 250px wide.<br />

The total width of this element is also 250px.</div>

<p><b>Important:</b> This example will not display correctly

in IE8 and earlier

versions!<br />

However, we will solve that problem in the next example.</p>

</body>

</html>


<html>

<head>


p.one

{border-style:solid;

border-color:red;}

p.two

{border-style:solid;

border-color:#98bf21;}

</style>

</head>

<body>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p><b>Note:</b> The "border-color" property does not work if

it is used alone. Use the "border-style" property to set the

borders first.</p>

</body>

</html>


<!DOCTYPE html>

<html>

<head>


p

{color:blue;

text-align:center;}

.marked

{background-color:red;}

.marked p

{color:white;}

</style>

</head>

<body>

<p>This is a blue, center-aligned paragraph.</p>

<div class="marked">

<p>This p element should not be blue.</p>

</div>

<p>p elements inside a "marked" classed element keeps the

alignment style, but has a different text color.</p>

</body>

</html>

Форм хэлбэржүүлэх Жишээ нь:

<!DOCTYPE html>

<html>

<head>

<style>

input[type="text"]

{width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;}

input[type="button"]

{width:120px;

margin-left:35px;

display:block;}

</style>

</head>

<body>

<form name="input" action="" method="get">

Firstname:<input type="text" name="Name" value="Peter"

size="20">

Lastname:<input type="text" name="Name" value="Griffin"

size="20">

<input type="button" value="Example Button">

</form>

</body>

</html>

Цэс үүсгэх Жишээ нь:

<!DOCTYPE html>

<html>

<head>


ul{list-style-type:none;

margin:0;

padding:0;}

a:link,a:visited{display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;}

a:hover,a:active{background-color:#7A991A;}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Лавлах материал

• Линкүүд:

– http://www.w3schools.com/

– http://www.deitel.com/Books/InternetWebSc

ripting/InternetWorldWideWebHowtoProgra

m4e/tabid/2048/Default.aspx

• Хайлт хийх түлхүүр үгүүд:

– CSS

http://www.w3schools.com/

http://www.deitel.com/Books/InternetWebScripting/InternetWorldWideWebHowtoProgram4e/tabid/2048/Default.aspx



Асуулт ?

Technology

Lecture 3. css