тиімді жұмыс істегісі келетіндер бірдей кодтарды қайта-қайта терудің қажеті жоқтығын түсінген болатын шығар. Тегті бірінші әріпке дайындағаннан кейін, код компьютер буферіне көшіріледі да содан кейін әр бір бірінші әріптін орнына қойылады. Енді әріптердің өзін және қалған мәтінді қою ғана қалды.
кестелер стиліне жаңа ереже енгіземіз: .first {color: "#777777"}сақтаймыз және нәтижені тексереміз. Одан кейін бәрі оңай. Енді рамканы қалай жасау керектігімен танысамыз.
Шегара(border)
Әр бір блоктық белгілеу элементінде шекра болады. Шекарадан шегіністер есептелінеді(margin және padding). Қалқымалы блок шекра шегінде оны мәтін бөліп тұрады.
Шекара блогын сипаттау үшін, келесі атрибуттар қолданылады:
border-width – шекара блогының ені.
border-color – шекара блогының түсі.
border-style – шекара блогының сызық типі.
Келесідей мәндерге ие бола алады: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Сызықтардың түрін осы айтылғандарды ағылшын тілінен аудару арқылы түсінуге болады.
Internet Explorer шекараны көрсеткенде міндетті түрде оның типін анықтау қажет, әйтпесе ол бейнеленбейді! Атрибуттардың бұлай жазылуы мүмкін тек шекараның барлық блоктарының характиристикасы бірдей болса. Бірақтан оларды барлықтары үшін бөлек-бөлек беруге болады, бірақ оны барлық браузерлер қолдамайды. Мысалы:
border-top-width: 1pt – блоектың жоғарғы шекарасының ені 1 пункке тең.
border-right-color: red – блоктың оң жақ шекарасы қызыл түсті.
border-bottom-style: solid – блоктың төменгі шекарасы біртегіс.
енді өзіңіздің нәтижеңізді 7.2 және 7.4.:.first {color: "#777777"}
h1 { border-width: 1pt; border-right-width: 2pt; border-bottom-width: 2pt; border-color: #000000; border-style: solid; background: #CCCCCC} суреттегі нәтижемен салыстырыңыз. Негізінен түгелімен сәйкеспеуі де мүмкін, өйткені фонға қандай сүр түсті және жоғарғы шекараны қандай арлықта алу керктігі көрсетілмеген.
Тек көрсетілген параметрлерді салсытырыңыздар.
7.4 суретте 1pt барлық шекарасының ендері көрсетілген, одан кейін оң және төменгі шекараға раналған 2 pt ені көрсетілген. Осылайша жазба біршама қысқартылады. Кім тезірақ жұмыс істегенді ұнататын болса, атрибуттарды қысқартылған түрде жазуына болады. Мысалы, шекараның жоғарғы сызығын сипаттау үшін, келесідей жазба типі қолданылады:
p { border-top:1pt solid #CCCCCC; }
тег {атрибут: ширина_линии тип_линии цвет_линии}
3.6. Блоктың мәтінмен бұрмалануы.
Біз IMG бейнелен тегіне графиканы оқып үйренгенде теңестіру атрибутын сол жақ бойынша берген болатынбыз align=left, ол бейнені мәтін оң жағымен жүргіп тұрды. Дәл солай керсінше де болды. Қойылған жерінен картинканың мәтінмен жылжуы қарапайым орналастыру мәтіндік құжатынан ерекшелігі, картинканың вертикалды шекарасынан мәтіннің бір емес бірнеше жолдары орналасады.
Аналогтық түрде DIV блокты мәтініне де жылжымалықты орналастыруға болады, бірақтан LEFT және RIGHT мәндерін FLOAT атрибутына меншіктеу керек, ол қалқымал блокты анықтайды. Ол үшін styles.css файылына келесі ережені жазу керек: div {float: right}.
бұл қасиет![]() және тегті ALIGN атрибутына аналогты болып келеді, бірақтан ол кез-келген HTML –элементіне қолданыла береді. Енді сіз өзіңіздің веб-бетінізді қызықты әрі әдемі етіп құрааласыз. 2 бөлімде сіз өзініздің веб-бетіңізге өзініздің суретінізді немесе оның орнына уақытша қойдыңыз (файл vizitka-family.htm). суретті DIV блогына қою арқылы құжатты өзгертініз. Блокты қалқымалы ылыңыз.
сізге өзгерту аз болып көрінуі мүмкін. Бірақ сіз фонды және көлемді кез-келген етіп құра аласыз, сөйтіп картинканы рамкадағыдай ете аласыз. 7.5 суреттен қараңыз. Екіншіден біз осы блокты беттің кез-келген жеріне қалай қоюға болатынын үйренеміз.
3.7. Позицияландыру
Браузер терезесінің жұмыс үстел өрісіне сол пикселді өзгетпестен ақпарат блогын орналастыруға қалай қарар едіңіз. Оңтайлы қара едіңіз. Осыған орай тууға тиіс
сұрақ туындайды: беттің авторы компаненттерін орналастыратын координаттар жүйесі қалай құрастырылған. CSS моделіндегі координаттар жүйесі безендіруден ерекшелінеді. Координата басы терезенің сол жақ жоғарғы бөлігінде орналасады. Х координатасы солдан оңға қарай өседі, ал у координатасы – жоғарыдан төмен қарай. Блоктың жағдайын анықтайтын қасиетті қарастырамыз. POSITION тегі браузерге тегтің құрамын қай терезеге орналастыру керктігін көрсетеді. Үш мәнді қолдана аламды: ABSOLUTE, STATIC, RELATIVE.
TOP және LEFT атрибуттары берілген коордианаталар жүйесіндегі сол жақ бұрыш блогында у және х координаталын анықтайды. Мәндері ұзындықпен, (px, pt), браузер терезесінің енінің пайыздық мөлшері арқылы берілуі мүмкін.
Ең соңыда жағымдысы. Алдынғы бөлімнен сіздерге біршама таныс Z-INDEX атрибуты бар. Ол блоктармен бірін-бірін жабуды береді. Егер блоктар жабылатын болса, онда үстінен Z-INDEX үлкен мәнге ие элементі бейнеленетін болады. Бұл параметр кез-келген оң және теріс мәнді сандармен беріле береді. Блоктарды жабу туралы әңгіме болғанда оларды қабаттар деп атау оңай болады. Бұл осы элементтерге арналған кеңінен таралған атаудың бірі.3.7.4. тапсырма. DIV блокын кез келген экранда горизонталь бойынша орналасуын беріңіз егер оның блогының ені экраннан 20% қашықтықтаекені белгілі болса. Қарап тұрсаңыз қиын сияқты бірақ бастауыш класстың оқушысына арифметикалық тапсырма берген сияқты. DIV блогының басынан орталығына дейінгі қашықтық10%. Онда блок басы келесідей координатаға ие болуы керек LEFT экраннан 40%. CSS ережесі келесідей болады: div {position: absolute; width=20%; left:40%;}
7.3.5.тапсырма. "Мы" сөзіне ранап көленке құрыңыз. Мәтінің көленкесі беттен анық ерекшеленіп тұрады. CSS пайда болғанға дейін интернетте көленке құрудың амалы ол графиканы қолдану болды. Енді ондай қажеттілік жоқ. Кесте стилінде үш класс құрыңыз:TITLE, TEXT және SHADOW. Біріншіне кез келген жерге сыйуы үшін сәйкес координаталар бойынша берініз. Қалған екеуін – обсалюттік координата бойынша , бір-біріне сәйкес нақты жылжыта алу үшін:
.title {position: relative; font-size: 120px}
.text {position:absolute;top:5px;left:5px;color:#ff0000;z-index:2}
.shadow {position:absolute;top:7px;left:3px;color:#990000;z-index:1}
веб-бетте мәтін қабатын немесе көленке қабатын құрамына қосатын тақырыпнама қабатын құрыңыз:
Мы
Мы
Достарыңызбен бөлісу: |
