Егер HTMLді үйдің кірпіштерден тұратын қаңқасына теңесек, онда CSS ті сол кірпіштерді үйлесімді түрде қалап, оларды біріктіріп тұрған цемент қоспасына теңеуге болады.Екеуінің бірі болмаса сайт та болмайды.
Сонымен, CSS деген не және CSS деген HTML мен қалай байланысады.
CSS дегеніміз ағылшынша Cascading Style Sheets , яғни қазақша стилдік каскад таблицалары деп аталады.
Біз HTML ге арналған сабақтан аздап болса да web парақшаны қалай жасауға болатынын көрдік.Ол көрген тәсіліміз тек бер жағы ғана.Бізге ол парақшаның ешкімнің сайт парақшасына ұқсамайтын өзгеше болғанын қалаймыз, яғни оны әрлендіруіміз керек.Міне осы әрлендіруді жасайтын сол CSS.
HTML ді кірпішпен қаланып, төрт қабырғасы тұрғызылып және төбесі жабылған үйге ұқсатуға болады.Ал сол үйдің ішін сырлап, еденін төсеп, мебельдерін қойып дегендей т.б. әрекеттер жасайтын осы CSS.
HTML ге қарағанда CSS тің синтаксисі күрделірек.
Себебі, HTML дің бірнеше тегтерінің қалай пайдалану керектігін ұғып алған соң еш қиналмастан парақша бетін жаза беруіңізге болады.Ал CSS стилді белгілеу деп аталады яғни нюанстары көбірек, оның әр сипаттамасын біліп қана қоймай оны қай жерде қалай қолдануға болатынын да үйреніп алу керек.
Бұл стильді белгі тілі екі бөліктен құралады:
1. Селектор-меткалардан.
2. Осы селекторларға қолданылатын ережелерден.
Яғни бұл ереже бойынша сіздің документіңіздң (парақшаңыздың) ішіндегі р абзацының әріптері қызыл түске, ал артқы жағы (фоны) жасыл түске боялуы керек.
Сонымен, HTML тілімен бірге CSS ті қолданудың үш түрі бар.
Енді осылардың әр қайсысына жеке-жеке тоқталып өтейін.Ескерту:
Төмендегі кодтардың бәрі Notepad++ редакторында жазылған, оны компьютерге орнатудың түк қиындығы жоқ.Мен оны қалай орнату керектігіне тоқталып өткенмін, ол туралы барлық мағлұматты сілтеме арқылы таба аласыз.
1. Тікелей HTML тегінің ішінде "style" атрибутын орналастыру арқылы:
Редактор бетіне төмендегі HTML парақшасының кодын көшіріп алыңдар.
Ішінде р тегінде CSS ережесі орнатылған.
Түсінікті болу үшін айтып өтейін:background-фон дегенді білдіреді, #00ff00-жасыл түстің коды, color-бояу түсі, red-қызыл түс.
Енді осы файлға "testcss2.html" деген ат беріп, оны локальдық серверіміз Денверге арналған "\servers\home\localhost\www\testphp" папкаға сақтап болған соң, оны қалаған браузеріңіздің адрес теретін жолында localhost/testphp/testcss2.html деп шақырамыз .
Ол html файлды Денвер арқылы емес, жай түртіп жіберіп те нәтижесін көруге болады.Бірақ, сіз егер PHP скрипт тілін үйренгіңіз келсе, онда Денверде жұмыс істеу сізге дағдыға айналуы керек.Сондықтан, тест файлдарды осы локальдық серверде шақырғанымыз дұрыс деп санаймын.Егер Денверді пайдаланғыңыз келмесе, онда ол файлды папкасында екі рет түртіп жіберіп қарай беріңіз.
Нәтижесі төмендегідей болып шықты.
2. Web парақшаның шапкасында, яғни <head>арасына</head> "style" елементі арқылы:
CSS ті бейнелеудің екінші түрі жазылған төмендегі HTML парақшасының кодын тағы да Notepad ке көшіріп жазып алыңыздар.
3. CSS стильдер кодын осы парақ шапкасында <link> арқылы сипатталып, жүктелетін бөлек файлға жазып қою арқылы:
CSS ті қолданудың үшінші түрінде CSS ережелерін басқа файлға жазамыз.Мен оны testcss2.css деп жаздым да сол қалған файлдар салынған папкаға сақтап қойдым.Сіз де солай жасаңыз.
Енді оны HTML парақшамның жоғары жағындағы <head>аралығына link арқылы сипаттап жазамын.</head>
Енді осы html файлды ашамын, сонда мынадай нәтижесі бар HTML парақшам шығады.
Бұл жерде айта кететін жағдай былай:
CSS ті HTML де қолданудың алдыңғы екі түрі көп қолданылмайды, бірақ білген абзал-олар көбіне сайтыңызды тексеру кезінде кейде почтаны қолдану кезінде қолдана аласыз.Ал сайттарда қолданылатыны, негізінде үшінші түрі.
