Css қызметі css тарихы css негізі 4 css тегі түс

         Компьютерлік дизайнда шрифттарға үнемі үлкен көңіл бөлінген және World Wide Web шектеу болып табылмайды. Алайда орыс тілі үшін бар шрифттердің бар байлығы мен түрлілігі үш шрифтпен шектеледі:

         Әріптерді бейнелеуді басқару үшін құжат авторы шрифтке әсер ететін бірнеше атрибуттар қолданады:

font-family – сызылған шрифттер отбасы (гарнитура);

font-style – түзу сызық немесе курсив;

font-weight – әріптердің "боялғаны" ;

font-size – шрифт өлшемі (кегль).

Кейбір браузерлерде бұл параметрлерді бір ғана font атрибутында орналастыруға болады:

font:bold 12pt sans;

font-weight – шрифттардың бояуын басқару үшін қолдаеылады. Ол 100-ден (ең нәзік) 900-ге (қатты боялған) дейінгі мәндерге ие болуы мүмкін. 400 мәнін normal, ал 700 мәнін bold кілттік сөзімен алмастыруға болады. Сонымен бірге бұл қасиеттердің мәні болып ата-аналық элемент үшін қабылданғанға қарағанда , сәйкес қай шрифт болжамын қолдану керектігін көрсететін lighter және bolder кілттік сөздері де болуы мүмкін.

         Стильдің каскадтың кестелірнде font-size шрифтінің өлшемі алдын жазылған өлшемнің стандартты мәндерін немесе абсолютті өлшем үшін кілттік сөздердің бірін қабылдап алады. Мына кілттік сөздер шрифттердің жоғарылау реті: xx-small, x-small, small, medium, large, x-large, xx-large.

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

         Кегльді орнату кезінде font-size әріптің ұзындығын емес, әріптің өзінен үлкен болатын әріп астының өлшемін білдіретінін есте ұстаған жөн:

p {font-size:12pt} – параграф кеглі 12 пунктке орнатылған

Мәтінді басқару үшін бірнеше атрибуттар:

line-height – мәтін қатарының арасындағы қашықтықты анықтау үшін қатар ұзындығын көрсетеді (абсолютті немесе қатысты бірлікте)

text-align – беттің қатысты шеттерінің мәтіндерін туралауды анықтайды (left, right, center и justify);

text-decoration – мәтінді ерекшелецді: underline (пoдчepкивaниe), overline (нaдчepкивaниe), line-through (зaчepкивaниe), none – ерекшелеу әсерін қайтарады;

text-indent – ұзындық бірлігіндегі бірінші қатардағы жылжытуды құрады (абзацты жылжу, қызыл қатар);

text-transform – тег құрамын түрлендіреді:

capitalize   (жоғарғы регистрдегі әрбір сөздің бірінші әрпін шығарады),

uppercase  (жоғарғы регистрдегінің барлығын шығарады),

lowercase  (төменгі регистрдегінің барлығын шығарады),

none.

Енді сізге ақпаратты қалай дайындағаны жайында ойламасаңыз да болады. Сіз өзіңіз тақырып әріптерін таңдап отыра аласыз. Барлық абзацтар қажетті орынмен жылжытылған болады.

 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: transparent|color url repeat scroll position

Мысалдар:

p { background: gray url(fon.gif) no-repeat fixed 50% 30px; }

фонда тек бір бейнені пайдалану қандай байлық мүмкіндіктеріне ие! Қаншалықты мүмкіндіктер көп болсада олармен қиянат етуге болмайды. 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 файылында  соңғы абзацтың бастапқы тегтары және сілтемелері сипатталған оларды келесідей етіп өзгертіңіз:

...
...алынған нәтижені көріңіз:

Бір класстың барлық тегтері ақпаратты  бірдей көрсететін болады.  Мысал ретінде бір классқа бір параграф және гиппермәтіндік сілтеме ал басқасына параграф көрсетілген. Осы тегтардағы барлық ақпарат инверстік түрде мкөрсетілген. «мүмкін» деген сөз , бейне  тегіне әріптің өлшем немесе түс қаиеттерін пайдалану – дұрыс емес.  Бірегей атауға ие стильді, стилді класс немесе жай класс деп атайды. Оны мүмкін болатын    HTML-дің барлық тегтарында пайдалануға болады. Белгі элементін бір классқа орнату үшін,  CLASS атрибутын пайдалану қажет.

 

3.2. Өзінің жеке тегі.

      Ақпараттардың бір бөлігін класстармен белгілеудің алдыңғы әдісі – күшті! Бірақ біз оларды тек  стандартты  HTML-тегтарда пайдалануды үйрендік. Веб-шеберге тар! Еркін болғысы келеді. Өзінің жеке  HTML-тегін құрғысы келеді. Шынында барлығына жаңа тег құру қиын, сәйкес мекемелер оны ұзақ уақыт тексеріп қабылдайтын болады. Егер шынымен  құрғыңыз келсе, мақсатқа жетуде біршама жақындау үшін, және