Css стандарты және стильдер кестесі Стильдердің каскадты кестелері css қызметі css тарихы css негізі
жүктеу/скачать 211,14 Kb.
|
1. 1 css ûçìåò³ 2 css òàðèõû 3 css íåã³ç³ 4 css òåã³ ò ñ
| 7.2.3. тапсырма. Жоғарыда келтірілген материал негізінде мәтінді немесе шрифтті басқару бойынша бірнеше тәжірибелер өткізіңіз.
2.6. Фон Веб – беттерде жазба жазуды үйрендіңіздер. Ол үшін қандайда бір тегкке COLOR атрибутының мәні түс атауы ретінде немесе RGB коды ретінде беріледі. Сөйтіп тег мәтінге қолданылады. HTML- тілін оқығанда сіз фонға түс беруді және фонддық суретті қоюды үйрендіңіз. Ол үшін стиль кестесінің қандай мүмкіндіктер беретінін қарастырайық. Фоның папаметірімен тек блоктық элементке белгі қою арқылы басқаруға болады. Бұндай элемент ретінде барлық бет болуы мүмкін кесте, абзац, тақырыпнама және т.б. мысалы, келесідей стильді шақыратын болсақ: h4 { background-color:black;color:white;} онда төртінші деңгейдің барылқ тақырыпнамалары қара фонда ақ түспен көрінетін болады. Фонның түсі мен мөлдірлігінен басқа енді фондық картинкаларды басқаруға болады. Фондық бейнелермен жұмыс жасау үшін бірнеше атрибуттар бар: background-image – фонға қойылатын бейне адресін береді; background-repeat – экранда бейнені қалай дубляждауға болатынын анықтайды; келесідей мәндерге ие: repeat – бейне екі бағыттада дубляжданады; repeat-x – бейне горизонталь бойынша дубляжданады; repeat-y –бейне вертикаль бойынша дубляжданады; no-repeat – нақты өлшемді бір бейне шығарылады; background-attachment – фонның мінез-құлығын береді, ол фиксирленеді (fixed) немесе картинкамен бірге айналдырылады(scroll) . ос ы қасиеті арқылы жақсы эффект құруға болады; background-position – бастапқы каринканың экранда орнамласуын анықтайды. Мәндері ретінде келесідей командалар болуы мүмкін LEFT, RIGHT, CENTER, пиксельдік немесе пунктік түрдегі координаталар, сонымен қатар пайыздық. Екі координатаныда көрсетуге болады біруін немесе ешқайсысын. Жоқ координата орталықтандыру мәнімен ауыстырылады. Қысқаша түрде фонның барлық қасиеттерін ортақ background атрибутында сипаттауға болады: background: transparent|color url repeat scroll position Мысалдар: p { background: gray url(fon.gif) no-repeat fixed 50% 30px; } body { background-image: http://www.eidos.ru/logo.gif; background-repeat:repeat-x; background?attachment:fixed;} фонда тек бір бейнені пайдалану қандай байлық мүмкіндіктеріне ие! Қаншалықты мүмкіндіктер көп болсада олармен қиянат етуге болмайды. 7.2.4. тапсырма. Екінші бөлімді оқығанда логотип құрып оны vizitka-family.htm файылында веб бетке орналастырғансыз. Логотипті беттің жоғарғы бір бөлігінде бекіту арқылы фондық бейне қылыңыз. Бұл бейнені дубляждалуын және айналдыруын өшіріп тастаңыз. 3. Беттің бөлігіне кестелік стильді қолдану. Егер сіз кесте стилін құрып оны тек құжаттың бір бөлігінде пайдаланғыңыз келсе, сәкес стилге ауыстырғыңыз келген мәтінді екрекшелеудің амалын табуыңыз қажет. Алдыңғы матиралды оқып үйрену рақылы сіз глобальді түрде ойлауды үйренесіз. Тегтердің түрлі комбинацияларын ескере отырып.Кесте стиліне қосылған барлық беттердегі тегтер қасиетін ауыстыра аласыз. Кейде оданда нақтырақ нәрсе қажет. Мысалы, мәтінді түгелдей кіші өлшемді ширифтпен және сұр түсті ету. Әр бір мәтінге барлық атрибуттарды көрсету- тиімді емес. Немесе сіз мәттінің кейбір элементтерін стандартты емес рамкамен белгілегіңіз келсе, бірақ рамка түрін таңдамай кейінге қалдырсаңыз. Кейін осы мәтіннің элеметтерін іздеп тауып атрибуттарын өзгерту қажет болады? Дәл осылай рамка түрін өзгерткіңіз келген жағдайда жасауға боладыма? Енді мүмкін емес. Болашақта біз осындай тапсырмаларды CSS арқылы қалай орындауға болатынын қарастырамыз. 3.1. Классытар Жоғарыда қойлған тапсырма оңай шешіледі. Сіз жаңа класс құрмақсыз. 7.3.1. тапсырмада сіз өзіңіз құруға тырысып көріңіз. styles.css Кесте стиліне жаңа .reverse {color:white;background-color:black;} есте сақтаңыз reverse сөзінің алдындағы нүкте біздің жаңа класс құрып жатқанымызды және оның қасиеттерін анықтап жатқанымызды білдіреді. Класс аталуы HTML- белгі элементінің қандайда бір стандартты атауы болып табылмайды. Ол кез-келген болуы мүмкін, бірақ тек цифрамен әріптен тұруы керек. 1.htm файылында соңғы абзацтың бастапқы тегтары және сілтемелері сипатталған оларды келесідей етіп өзгертіңіз: ...
Сур .7.2. класттарды пайдалануда кейін мкез-келген HTML- тегінде қолдануға болатын тәуелсіз стилдерді құруға мүмкіндік береді. Бір класстың барлық тегтері ақпаратты бірдей көрсететін болады. Мысал ретінде бір классқа бір параграф және гиппермәтіндік сілтеме ал басқасына параграф көрсетілген. Осы тегтардағы барлық ақпарат инверстік түрде мкөрсетілген. «мүмкін» деген сөз , бейне тегіне әріптің өлшем немесе түс қаиеттерін пайдалану – дұрыс емес. Бірегей атауға ие стильді, стилді класс немесе жай класс деп атайды. Оны мүмкін болатын HTML-дің барлық тегтарында пайдалануға болады. Белгі элементін бір классқа орнату үшін, CLASS атрибутын пайдалану қажет. 3.2. Өзінің жеке тегі. Ақпараттардың бір бөлігін класстармен белгілеудің алдыңғы әдісі – күшті! Бірақ біз оларды тек стандартты HTML-тегтарда пайдалануды үйрендік. Веб-шеберге тар! Еркін болғысы келеді. Өзінің жеке HTML-тегін құрғысы келеді. Шынында барлығына жаңа тег құру қиын, сәйкес мекемелер оны ұзақ уақыт тексеріп қабылдайтын болады. Егер шынымен құрғыңыз келсе, мақсатқа жетуде біршама жақындау үшін, және тегтарын пайдаланған ыңғайлы.
3.3. Жолдық элементі. тегінің ешқандай қасиеті жоқ. Ол сіздің тегіңізді құрудың таза беті болып табылады. тегі арқылы мәтіннің барлық бөліктерін белгілеуге болады. CLASS атрибутын қолданған кезде тек осы құжат мәтінінің бөліктеріне кез-келген мәнді бере аласыз. Мысалы:Купание красного коня. Бұл жерде "красного"сөзі SECOND классында белгіленгендей сәйкес түске ие болады. Әрине көрсетілген класстан кез-келген мөлшерде характеристика беруге болады және олардың барлығы сөзде көрінеді. SPAN-ды FONT, I, B, U элементтері алмастыра алады. Осындай сәйкестікке мысал келтірейік: жүктеу/скачать 211,14 Kb. Достарыңызбен бөлісу:
|