СSS касиеттери

Стильдік əр түрлі анықтаулар жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару кезінде кітаптар соңында берілетін анықтамаларды пайдалану қажет. Стильдегі оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:

• қаріп (шрифт);

• түстер;

• мəтін;

• өрістер мен жақтаулар (поля и рамки);

• сыртқы түрлері.

font-family қаріп түрі (шрифт типі)

Бұл стильдік қасиет шрифтің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын көрсетеді: serif – шығыңқы шрифт, sans-serif – жұмыр шрифт, monospace – ені бірдей қаріп, Гарнитура — бір қаріп символдарының сызылымдары жиыны

Мəтін үшін letter-spacing

Əріптер арасындағы аралықты қосымша анықтау үшін керек. line-height Жолдар аралығын тағайындайды. Абсолюттік биіктікті берсе де болады (14pt), жолтаралығын (1.4) немесе жол биіктігінің пайызымен де (200%) көрсетіледі. Мысалы, жоларалық екі интервал: line-height: 2 немесе line-height: 200%. normal сөзімен де берсе болады.

Өрістер мен жақтаулар (Поля и рамки)

border-style Элементті қоршап тұратын жақтау сызықтардың түрін анықтайды. Мынадай мəндер бар: none – жақтау жоқ (по умочанию);solid – сызық жақтау;double – қоссызық жақтау;groove – «ойық» жақтау;ridge – «дөңес» жақтау;inset – «түсіңкі» элемент;outset – «шығыңқы» элемент.border-color Жақтау сызығының түсін анықтайды. Бұл қасиетborder-style берілсе ғана жұмыс істейді.

XML-құжат құрып оған CSS файлды қосыңыз.

<?xml-stylesheet href="style.css" type="text/css"?>

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet href="rss_style.css" type="text/css"?>

<description>Latest news</description>

<docs>http://blogs.law.harvard.edu/tech/rss</docs>

</channel>

</rss>

38.JavaScript тілі. Құжат құрып түсіндіру

JavaScript – браузерге түсінікті программалау тілі.

Браузер бұл тілдегі командаларды орындай алады,

яғни оның ішкі интерпретаторы бар.

JavaScript программасы скрипт немесе сценарий

деп аталады, ол HTML-программасы ішінде орналаса

береді не жеке файлға да жазылады. Ондай файлды да

браузер оқып алады (арнайы команда бойынша).

JavaScript коды HTML тілін толықтырып, оны

көрнекі етеді. JavaScript тілі арқылы гипермəтіндер

жаңа мүмкіндіктерге ие болады.

JavaScript тілін Netscape пен Sun Microsystems фирма-

лары бірлесе отырып жасаған, ол интерактивті HTML

құжаттар құру үшін қолданылады.

Скриптер екі <script>...</script> тəгтері арасына орналасады. Əдетте олар төмендегідей болып

жазылады.

<script

language=JavaScript>

<! --

...

JavaScript кодтары

...

//-->

</script>

...

JavaScript тілінсүйемел-

дей алмайтын браузерлерге

арналған мəліметтер

...

</NOSCRIPT>

Мысалы

<HTML>

<HEAD>

<TITLE>Проверкабраузера</TITLE>

</HEAD>

<BODY bgcolor=white text=black link=blue

alink=red vlink=purple>

<Н1>Проверка браузера</Н1><HR>

<!--

alert("Ваш браузер поддерживает язык JavaScript!");

//-->

</SCRIPT>

<H2>Предупреждение</H2>

<P>

Ваш браузер не поддерживает JavaScript. документ будет показан неверно, возможныЭстооотб-

щения об ошибках.

<Р> Версия документа без скриптов расположена <А href=doc1.htm> Здесь </A>.

</NOSCRIPT>

<Р>

Для возврата к основному тексту нажмите кнопку <ЕМ>Назад</ЕМ> браузера. на инструментальной панели

</BODY>

</HTML>

alert ақпараттық

терезесі

39.Гипперсілтеме бойынша ауысу қалай орындаладыГиперсілтеме- интернеттегі бір сайт бетінен кез-келген интернет бет парағына сілтей алады. Сілтемені құрғанда басқа бетке сілтеуге нақты бет адресін (http://www.site.com/page.html) қолдану қажет. Егер сайт парағына сілтеме құрылса, URL қолдануы тиіс (page.html, catalog/page.html). HTML-да мəтіннің бір фрагментінен екіншісіне ауысу үшін

<A HREF="[ауысу адресі]"> мəтіннің белгіленген фрагменті </A >

тəгінің көмегімен орындалады. [ауысу адресі] параметрінің орнына аргументтердің бірнеше түрін қолдануға болады. Ең қарапайымы – ауысатын HTML-құжаттың атын беру. Мысалы:

<A HREF="pr2.htm"> Мазмұн </A>

Бұл мысал HTML-құжатта Мазмұн белгіленген фрагмент пайда болады, оған тышқан курсорын апарып басқанда келесі терезеде pr.htm. құжаты ашылады.

<HTML> <HEAD> <TІTLE> 2 мысал</TІTLE> </HEAD>

<BODY>

<H1>Байланыстыру </H1>

<P> Сілтеудің көмегімен басқа файлдарға көшуге болады (мысалы

<A HREF="pr.htm">осы рұсқаудың мазмұны </A>).</P>

<P>Файылдарды түсіруге болады (мысалы,

бұл Mіcrosoft Word 2.0 форматындағы нұсқау</A>) FTP. бойынша</P>

<P>Тұтынушыға поштамен мəлімет жіберуге мүмкіндік бар (мысалы,

<A HREF=@maіlto^nc@іname/com@> jcs yұcқfelsң fdnjhsyf <|A>)/<|P>

</BODY>

</HTML> Қолданушы Tab мезегіш пернесін басқанда гиперсілтемеге ең кіші оң мәні бар индекс ығысады. Егер бірнеше гиперсілтемеде бірдей индекстер кезіксе, онда мәтінде ең жоғарғы тұрған бірінші таңдалады. TABINDEX атрибутын басқа да графикалық бейнелерге т.б қолдануға болатынын айта кетуге болады.

40.XSD мәліметтер схемасын құрып, құжат құрылымын сипаттаңыз. <?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">

<xs:element name="малиметтер">

<xs:complexType>

<xs:sequence maxOccurs="unbounded">

<xs:element name="ақын">

<xs:complexType>

<xs:sequence>

<xs:element name="АқынныңПоэмалары"/>

<xs:element name="ШығарылғанЖылдары"/>

</xs:sequence>

</xs:complexType></xs:element>

</xs:sequence>

</xs:complexType></xs:element>

</xs:schema>

құжат құрылымына сипаттама: <xs:element name="АқынныңПоэмалары"/>

<xs:element name="ШығарылғанЖылдары"/>

Бұл тегтер арқылы біз кестенің екі бағаннан туратынын айтып отырмыз.Ал осы мысалда ақын поэмалар тізімі бір бағанға,ал сол поэмалардың шығарылған жылдары бөлек бір бағанға шығару арқылы XSD нәтижесінде біз кесте көре аламыз. Түсірілетін деректердің құрылымы және форматы XSD сызбада жазылады.

41. Сырғымалы жолдар және кестелер, суреттер мен мультимедялық файлдарды парақтарда жүктеу

HTML-құжатқа суреттер қосу: HTML-құжаттың сурет қойылатын жеріне тəгті жазып, сол жердегі файл аты сурет атына (URL-ына) алмастырылуы керек.

<ІMG SRC=”файл аты”> нақты файл үшін <ІMG SRC=”dog1,gif”>

<HTML> <HEAD> <TITLE> ІMG тəгін қолдану</TITLE> </HEAD>

<BODY>

<P> <IMG SRC="kz.jpg"> Бұл мəтін суреттен кейін орналасады.

<P> Бұл мəтін <IMG SRC="kz.jpg"> суретпен бөлінген.

<P> Мұнда сурет мəтіннен кейін пайда болады. <IMG SRC="kz.jpg">

</BODY> </HTML>

Төмендегі мысалда, жоғарыда айтынған үш түрлі туралау түрлері қолданылған, үш суреті бар HTML құжаты келтірілген.

<HTML> <HEAD> <TITLE> ІMG тəгінде ALІGN атрибутын қолдану </TITLE>

</HEAD>

Бұл мəтін суреттің жоғарғы жағында орналасады.

Бұл мəтін суреттің ортасында орналасады.

Бұл мəтін суреттің төменгі жағында тұрады.

</BODY>

</HTML>

Сырғымалы жолдарды жəне тізімдерді ұйымдастыру: <MARQUEE> жəне </MARQUEE> тəгтері броузер терезесінде жолдың бір шетінен екінші шетіне жылжып отыратын “сырғымалы жол” жасайды жəне оның мынадай параметрлері болады:

<MARQUEE [ALІGN=”alіgn’] [BEHAVІOR=’behavіor”] [BGCOLOR= #rrggbb]

[DІRECTІON=”dіrectіon”] [HEІGHT=”іnteger”] [HSPACE=”іnteger”]

[LOOP=”іnteger”] [SCROLLAMOUNT=”іnteger”] [SCROLLDELLAY=”іnteger”]

[VSPACE=”іnteger”] [WІDTH=”іnteger”]> Кез келген мəтін </MARQUEE>

Осылардың бірсыпыраларының мағыналары мен жазылу түрі төмендегідей болып келед

<HTML> <HEAD> <TІTLE> 3-1 мысал </TІTLE> </HEAD>

<H2> Сырғымалы жолдар </H2> <HR>

<H3> <MARQUEE BGCOLOR= ”yellow” DІRECTІON = ”RІGHT”

SCROLLAMOUNT = ”10” SCROLLDELAY=”200” WІDTH=”90%”>

Бұл бірінші сырғымалы жол

</MARQUEE>

<P> <MARQUEE BGCOLOR= ”Green” DІRECTІON = ”LEFT”

HEІGHT=30 SCROLLAMOUNT=”10” SCROLLDELAY=”100” WІDTH=”90%”>

Бұл екінші сырғымалы жол </MARQUEE> </H3> <HR>

<H3> <MARQUEE BGCOLOR= ”white” BEHAVIOR=alternate

SCROLLAMOUNT = ”10” SCROLLDELAY=”200” WІDTH=”90%”>

Бұл үшінші сырғымалы жол

</MARQUEE>

</CENTER> </BODY>

</HTML>

Мультимедиялық мүмкіндіктерді сүйемелдей алмайтын басқа броузерлер үшін <NOEMBED> элементі көрсетіледі де, оның ашылу жəне жабылу тəгтері арасында түсініктеме мəтін жазылады.

Мысалдар:

тəгі nature.wav музыкалық файлын фон ретінде тыңдауға мүмкіндік береді. Құжатқа PDF (Adobe Portable Document Format) форматындағы JS.PDF файлын енгізу үшін мынадай жолды жазу керек:

Web-құжатты көру барысында өзіңіз ұнататын əнді тыңдап отырғыңыз келсе, мұнан басқа да <BGSOUND> тəгін төмендегідей түрде жазып пайдалануға болады:

Мысалы, “Ақбақай.mp3” əуендік файлын 3 рет қайталап тыңдау үшін, мынадай жол енгізілуі тиіс:

Егер бір əуен шексіз түрде қайталанып айтылғанын қаласаңыз, соңғы атрибут LOOP=INFINITE деп жазылуы қажет. Əрине, əуен орнына жасалған web-сайт жайлы түсініктеме мəтін немесе оны қалай түрлендіруге болатыны жайлы кеңестерді де тыңдауға болатыны түсінікті шығар.

Əуенді web-құжат ашылғанда, бірден тыңдамай, өзіңіз қалаған сəтте ғана іске қосу үшін, дыбыстық файлға суреттік файлдарды шығару кезіндегі сияқты төмендегідей түрде гиперсілтеме жасау керек.

Мұнда экранға “өлең” атты гиперсілтеме шығып тұрады, соны тышқанмен шерткен кезде ғана əн ойнала бастайды.

42. Каскадты стильдік таблицалар деген не?

CSS (Cascading Style Sheets - Каскадты стильдік кестелерi) - бұл ресiмдеу және HTMLның қалыптауының ережелерiнiң табандатқан құжат үшiн HTML элементтерiнiң қасиетiн анықтауға мүмкiндiк беретiн беттерi бар жиын. HTMLның тегтерi де дұрыстау.CSS - W3Cтiң консорциумымен Webнiң стандарттары ортақ атау алған технологиялардың кең спектрiнің бiрі. 1990-шi жылдарда Webны стандарттап, бағдарламашылар және веб-дизайнер бойынша сайттар жобалар қандай болса да қажеттiлiк бiр ережелер жасауға жайма-шуақтанды. Осылай HTML 4.01 және XHTML, және CSSтың стандарты тiлдер пайда болды.Басында 1990-шi - әр түрлi браузерлер беттердiң вебтi бейнесi үшiн өз стильi болды. HTML мәлiметтiң ресiмдеуi бойынша қажеттiк барлық бар болған сол кездегi жаңадан дамыған қанағаттандырулар болды, сондықтан CSS кең тарай алмады.Стильдiң каскадты кестелерi терминін 1994 жылдағы Хокон Виум ұсыныс жасаған. Ол Берт пен бiрге CSSты жетiлдiре бастады. Объекттiң мiнездеме сипаттамасын өзгерту үшін бірнеше алмастырылулар енгізу жеткiлiктi. Құжатқа CSSтың қосуын төрт әдiсі бар:
Байланыстыру – стиль кестесi беттердiң HTMLның кез келген санына қосуға болатын жеке файлда орналасады. Егер сiз бiрнеше беттер үшiн бiр стильді қолдануды ойласаңыз, онда сiз жеке файлдағы <LINK>стилін сипаттай аласыз. Стильдi файлдың қосулары үшiн iшiнде <HEAD>тегі орналасқан команданы қолданылады. <LINK REL=STYLESHEET TYPE="text/css" HREF="URL"> Алғашқы екi қасиеттер бетте CSSты қолданылатын браузерге көрсетедi. Соңғы қасиеттiң мәнi - беттiң стильсi жазған (жолымен, абсолюттi немесе салыстырмалы) файл аты.
Енгiзу – стиль кестесі құжат HTML дың iшiнде тiкелей орналасады.. Егер сiзге тек қана бiр бет үшiн стиль беруi керек болса, онда сiз стильнiң сипаттамасы құжаттың денесiне, HEADтың басында ендiре аласыз, тегтердiң арасындағы және.. <STYLE TYPE="text/css"> и </STYLE>. Құжаттың тегтерiнде салу - беттiң жеке элементтерiнiң ресiмдеуiн анықтауға мүмкiндiк беред. Мысалы, сiз бұл элемент STYLEның қасиетiндегi бөлек таңдаулы элементтiң тегін бере аласыз. Бейне код color:red SPAN STYLE="background-color:yellowсары фондағы font-variant:small-caps" Қызыл мәтiн, бас әрiптермен. сары фондағы Қызыл мәтiн, бас әрiптермен кiшкентай. Импорттау – стиль кестесі сервер орналасқан құжатқа салуға мүмкiндiк бередi.
Тегте стильлердiң кестесi стильлердiң сыртқы кестесiн importi қасиетi арқылы импорттауға болады: @(styles.css) import: url; Ол өңге ережелердiң тапсырмасының алдында басында стилдi блок немесе стильлердiң ұластырылатын кестесi тапсырма беру ушін керек. Importтiң қасиетiнiң мәнi стильлердiң кестенiң файлының URLсы болып табылады.
CSS - белгi тiлдi қолданып жазылған құжаттың кескiн-келбетiнiң үстiрт сипаттама тiлi. Мысалы, вебтiң кескiн-келбетiнiң сипаттама, ресiмдеуiн құралды көбiнесе қолданылады - HTMLның белгiсi тiлдiң көмегiнен және XHTML жазылған беттер, бiрақ сонымен бiрге кез келген XMLге қолданыла алады - SVGға құжаттарға немесе XUL.
CSSтың жасалуы мақсат. CSS бұл веб-беттердi түстер, шрифттердiң тапсырмасы, сырт пiшiнiнiң ұсынысының тағы басқа тұрғыларының жеке блоктерiнiң орналастырылуы үшiн веб-беттi жасаушылармен қолданылады. CSSтың өңдеудің түпкi мақсаты- бұл веб-беттi сырт пiшiнiнiң сипаттамасынан логикалық құрылымның сипаттамасының бөлiнуi болып табылады. Мұндай бөлiну құжаттың ашықтығын үлкейтуге, үлкен иiлгiштiктi және оның ұсынысын басқаруды мүмкiндiктi беруге, сонымен бiрге күрделiлiк және қайталанғыштық құрылымдық iшiндегi кiшiрейте алады. Бұдан басқа, CSS әр түрлi стильлерде немесе қорытынды әдiстерi ылғи бiр құжат, (пердеден арнайы дауыс браузерi немесе оқуды бағдарламамен) дауыспен сондай экрандық ұсыныс, баспа ұсынысы, оқуды ұсынуға мүмкiндiк бередi. CSSтың өздiк ережелерiнде болады. CSSтың қалып болатын жеке файлдарда да, олар сырт пiшiндерi суреттейтiн құжаттың өзi веб-ге де бұл стильлердiң кестелерi орналаса алады. Демек, Мәндер, CSSтың қалыбы бойынша - бұл кәдiмгi мәтiндiк файл. Файлда.css оған CSSтың ережесi және түсiнiктердiң тiзiмiнен басқа ештеңе болмайды.) Бұл стильлердiң кестелерi қосуға, төрт әр түрлi әдiстермен құжат ол түсiндiрiп жазылатын веб-ге ендiре алады: стильдiң кестесi қашан жеке файлда болганда гана ол арқылы құжатқа веб-ге қоса алады <link>, <head> и </head>. тегтердiң арасындағы бұл құжат орналасқан. Бұл кестенiң барлық ережелерi құжат бойы жұмыс iстейдi; <head>..... <link rel="stylesheet" type="text/css" href="style.css"> </head> Стильдiң кестесiнен CSSтың әрбiр ережесiн құжатқа CSSтың кестесiнiң қосуы бiрiншi үш жағдайларындағы CSSтың құрастыруының ережелерi екi негiзгi бөлiгi болады - хабарлау селектор және блок. Сол ереженiң бiр бөлiк орналасқан селектор құжаттың бiр бөлiгiнде ережеге таралатынын анықтайды. Хабарлауларды блок оң ереженiң бiр бөлiгiнде орналасады. Ол фигуралы жақшада жайғастырылады, және өз кезегiнде айырық «;» хабарлаулар бiр немесе бірнешеден тұрады. Әрбiр хабарлау CSSтың қасиетiнiң тiркесi және айырық мәндер болады:». Селекторлар бiр жолда үтiр арқылы топтала алады. Қасиет олардың әрқайсыларына қолданылады.
1.селектор, селектор
2.қасиет: мән;
3.қасиет: мән;
4.қасиет: мән;
}
CSSтың ережесiнiң элементтер селекторлары бола алады
font-family: Garamond, serif p}
класстардың селекторларымен;
.color: red note background: yellow font-weight: bold}
идентификаторлардың селекторларымен;
#margin: 0 paragraph1}
атрибуттардың селекторларымен;
font-weight:bold ["Http://www.somesite.com" href=] a}
(контекстiк селекторлармен) нәсiлдердiң селекторларымен;
color: red div paragraph1 p.note}
iшкi элементтердiң селекторларымен;
color: green bның noteның сомы}
бикелiгi элементтердiң селекторларымен;
font-size: 24pt h1 + p}
класстардың селекторларымен;
a:color:yellow active}
жалған элементтердiң селекторларымен.
p::font-size: 32px first-letter}
CSS қа сонымен бiрге құжатта кездесетiн кез келген элемент таңбалаушы деп аталатын әмбебап селектор бар болады. Мысалы, color:red *}. кез келген селектордың алдында таңбаға шарт қою мүмкiн идентификатор баламалы өрнек нәтижеде алу таңбаға шарт қою мүмкiн.first..} және *.first..} ылғи бiр мағыналарды алады. CSS HTMLның құжаттарына мұрагер болудың қағидасы CSSтың элементтер үшiн жариялалған қасиеттерi - нәсiлдермен элементтермен мұра ететiндiгiнде. Табиғи, мысалы, егер CSSтың құралдарының параграфы үшiн шеңбер тегі берiлсе, Бiрақ CSS те барлық қасиет мұра емес, онда p осы тегте болатын бiр де бiр тегпен мұра етпегенiнде емес, CSSтың құралдарының p ның параграфы үшiн color:greenның шрифтының түсi берiлген, онда бұл қасиеттер әрбiр элементпен мұра ете параграф болатын. Демек, каскадтауды қағида HTMLның қандай болса да элементiне қашан бiр ережеден CSSтары сәйкестiгiне бiр уақытта орнатылған бұл ережелердiң мәндерiнiң дауында болғанда жағдайда ғана қолданылады p {font-family: Garamond, serif; } h2 {font-size: 110 %; color: red; background: white;} note {color: red; background: yellow; font-weight: bold;} p#paragraph1 { margin: 0;} a:hover {text-decoration: none;} #news p { color: blue;} [type="button"] { background-color: green;} Кемшiлiктер:
Сағындыр әр түрлi браузерлердегi беттеудi бейне ылғи бiр осы CSSтарды түсiндiрiп бередi.
Iс жүзiнде жиi кездесетiн қажеттiлiк бiр CSSтер – файл ғана емес, күрделi және сүйiктi әдiспен стильдiң бiртұтас файлдарының қолдануын оңайлықты кейде жоқ қылады және редакциялау,тестілеудi уақытты едәуiр ұзартатын CSSтың селекторларымен байланатын.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:

1 2 3

Ремонт посудомоечных машин своими руками

Показатели тесноты корреляционной связи для многофакторной корреляционно-регрессионной модели

Дифференциальное уравнение гармонических колебаний и его решение

Календарный (паспортный) и биологический возраст, их соотношения, критерии определения биологического возраста на разных этапах онтогенеза

Угловая скорость и угловое ускорение

Система охраны труда и безопасности в медицинских организациях

Самый сильный аргумент, почему эволюция человека не могла быть