CSS тегі түс

Жұмыс түрі: Реферат
Тегін: Антиплагиат
Көлемі: 17 бет
Таңдаулыға:

ЕСЕП БЕРУ
Тақырыбы: HTML-де CSS-ті қолдану

Алматы 2020

Мазмұны

Кіріспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..3
1. CSS тарихы.CSS негіздері ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... .5
1.1. HTML-де CSS-ті қолдану технологиялар ... ... ... ... ... .. ... ... ... ... ... ... ... ..8
2. HTML, CSS-ті қолдана отырып web беттер құру ... ... ... ... ... ... ... ... ... 13
Қорытынды ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 20
Пайдаланылған әдебиеттер ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ... ... ... .21

Кіріспе

HTML негізін білу, сіз үшін кішкенен шындықты түсінуге жеткілікті: гипермәтіндік белгі тілдің қажетті элементтерін жазу - автор қалағанындай пайдаланушының бетінде барлық ақпараттың орналасуына кепілдеме бермейтін, өте күрделі және шаршататын жұмыс. Елестетіңіз, өзіңіздің өңдеп отырған веб-бетіңіз браузер терезесінің барлық көлеміне орналастыру керек болған мәтіннің он абзацынан және экранның ортасы бойынша туырлау керек болған бес көркемдеуден тұрады. Бұл дегеніміз, HTML-құжаттың кодында p align="justify"p тегін он рет және бес рет img тегінде align="center" атрибутын көрсетуіңіз керек болады. Егер сізге, осыдан кейін барлық абзацтағы мәтін түрін өзгерту керек болатын болса, мысалы, түсі мен мөлшерін өзгерту, онда мұндай өзгерістерді он рет енгізуге тура келеді. Нәтижесінде жұмыс көлемі, уақыты ұлғаяды және веб-шебер ретіндегі құны да. Сонымен қатар, құжатқа орнатылып жатқан тег көлемі мен нәтижелік файлдың көлемі ұлғайғандықтан, оның серверден жүктелуі де көбейеді. Яғни, бұл дегеніміз, сіз өз сайтыңыздың пайдаланушыларын жоғалтасыз!
HTML-белгілердің мүмкіндіктері шектеулі. Графиканың өлшемін пиксельге дейін нақты көрсетуге болады. HTML-де мәтіндік блоктар өлшемін көрсетуге болмайды: олар үнсіз келісім бойынша шрифтке қатысты өлшемнен шығып, браузермен есептеледі. Беттің авторы пайдаланушының браузер күйге келтірулерін алдын-ала анықтай алмайды, бұл бетте ақпаратты ұсынудың нұсқаларын шектейді. Осы және басқа да мәселелерді шешу үшін W3C консорциумының HTML стандартын өңдеуші-компания бағдарламалаушыларымен жаңа CSS (Cascading Style Sheets - стильдердің каскадты кестелері) стандарты жасалынды. CSS, HTML-ге қарағанда веб-бет алгоритм элементтерін жазуды басқа алгоритмін қолданады. Мәтіндік файлдағы әрбір элементтің қасиетін бір рет көрсету арқылы, кейін сіз осы файлды HTML құжатқа қосып, браузерге веб-беттің әрбір компонентінің мәнін сол жақтан оқыта аласыз. Бұған қоса, сіз осы стильдер жазбасымен жеке файлды түрлі құжаттардың шексіз мөлшеріне қоса аласыз. Бұдан басқа веб-беттерді дайындаудың алдында CSS - тің сөзсіз бір ерекшелігі бар. Өзіңіздің сайтыңыздың немесе бірнеше сайттардың барлық веб-беттердің қандайда бір элементін стилін өзгерту үшін, бір файлдағы кодтің бір қатарын туырлаудың өзі жеткідікті болады. Бұдан басқа, барлық веб-беттер үшін ішкі файлдан берілген стильді оған керемет түр беру үшін, кез-келген нақты веб-беттің ішінен анықтауға болады. Сонымен қатар кез-келген бірлік тегтің стилінде өзгертуге болады.
Стильдің каскадты кестелері - HTML секілді веб-дизайнерге үлкен нақтылық және әсермен бетке элемент қосу және өзгертуге мүмкіндік беретін технология. CSS оқу, HTML оқыған секілді өте жеңіл. Ал негізінен CSS пен жұмыс жасау жеңілірек, себебі мұнда жаңа тегтер енгізбестен, бар тегтер қолданылады. Осы бөлімді оқи отырып, сіз стильдің каскадты кестелері қалай жұмыс жасайтындығын, олардың құрылу негіздерімен танысасыз. Ары қарай сіз осы кестелердің жеке қасиеттерін қолдануды үйренесіз.

CSS тарихы.CSS негіздері

CSS стильдің каскадты кестелері HTML ден кейін, 1997 жылы пайда болды. CSS-тің HTML-мен жұмыс жасағанына қарамастан, ол HTML емес. сонымен қоса, CSS өзімен бар HTML тегтерді анықтай отырып, HTML мүмкіндіктерін кеңейтетін жеке кодты ұсынады. Бұл WWW мәтіндік құжаттарды алмасу тәсілі ретінде, ал HTML осы құжаттар жасалынатын тіл болғандығымен байланысты. Жауынгерлер мен ғылымдар үшін құжаттың көріктілігі емес, оның құрамы қызықтырды. Сондықтан да, HTML-дің алғашқы жобаларында веб-беттерге бейнені қосу әдістері болмаған. Бірақ, уақыт өте келе интернетке басқа да пайдаланушылар келіп, олар өздеріне әсем етіп жасауды талап етті. Осылайша, веб-дизайнерлердіңғ жұмысын жеңілдету мақсатымен жасалынған стильдердің каскадты кестелері пайда болды. қазіргі уақытта CSS1 және CSS2 қабылданған. Үшінші деңгей (CSS3) өңделу үстінде. Алайда, оны шығарғаннан кейін де браузерлер оны бірнеше жылдан кейін ғана қолдана алады. CSS3 - тің алдынғы жобалардан ең негізгі ерекшелігі масштабталатын векторлық графика болып табылады. Яғни, векторлық графиканың барлық мүмкіндіктері енді интернетте де қол жетімді болады. Алайда, стильдер кестесінің бірінші дәрежесі де (CSS1) тамаша мүмкіндіктерді ұсынады.
Стильдердің каскадты кестелері немесе жай стильдер кестесі (CSS - Cascading Style Sheets) - HTML кодтың түрлі фрагменттерін форматтауды жазатын және одан бөлек сақталатын ережелер терісі. Қандай да бір фрагментті форматтауды немесе фрагмент кодының біртипті тобын форматтауды көрсететін ережені стиль деп атайды. Стильдер кестесі CSS ерекше тілінде жазылып, css кеңейтілімге ие ерекше файлдарда сақталынады. Стильдер кестесін өз іс-тәжірибеңізде үйренгеніңіз жөн.
Site-family-dr бумасынмен байланысқан сайтпен жұмыс жасаймыз. Тәжірибе үшін бізге үш бет қажет болады. Блакнотта бос мәтіндік файл жасап, оны styles.css атымен сақтаңыз. Бұл файлда веб-бетті басқару стильдері бойынша барлық командаларды жазып отырамыз. Мұндай файлдың кеңейтілуі әртүрлі болуы мүмкін - txt, htm, html, css және т.б. Алайда өңдеу барысында іздеуге жеңіл болуы үшін css қолдану қабылданған. әрбір тақырыбында үш дәреже (Н1-Н3 тегтері), екі-үш абзац (Р тегі) және гиперсілтемесі (А тегі) бар жанама құрамды екі веб-бет жасаңыз. Тек қана керекті атрибуттарды пайдаланып, қысқаша код жазыңыз. Беттерді 1.htm и 2.htm. файлдарында сақтаңыз.
Егер де мәтінді орыс алфавиттерімен енгізе алмасаңыз, онда HTML құжаттың тақырыбына келесі қатарды енгізіңіз:
meta http-equiv="Content-Type" content="texthtml; charset=windows-1251"

HEAD тегіне құжаттың сыртында орналасқан стильді жазу сілтемесін орналастырыңыз, біздің файлымыз styles.css:
link type="textcss" rel="stylesheet" href="styles.css"
HREF атрибуты стильдерді жазудың сыртқы файлдары үшін адресті береді (URL). Ол абсолютті немесе салыстырмалы болуы мүмкін. Бұл жағдайда біз барлық файлдарды бір бумаға сақтағанбыз, сондықтан адрес ретінде файл атын көрсетуімізге болады. Құжаттың сыртында орналасқан стильді жазу сілтемесі HEAD элементін орналастыратын LINK элементінің көмегімен орындалады.

экран бетінде екі веб-бетті және мәтіндік файл styles.css бірдей ашыңыз. Терезеде барлық ақпараттың орналасуы міндетті емес. мысалы, веб-бет былай көрінуі мүмкін: Қызықты саяхатқа дайынсыздар ма? Алға! Осы екі бет өзіңіздің ұйымыңыз үшін ұзақ уақыт жасаған суперсайтыңыздың бөлігі болсын. Сіз үлкен мақтанышпен сайтыңызды бастығыңызға көрсетіп жатырсыз. Ал ол өз ойынан айнып, беттің басқа түрін қалап отыр, мысалы абзац мәтінінің түсі көктем келгенінің себебімен жасыл болғанын қалайды. сіз ойланып қалдыңыз. Беттегі барлық мәтіннің түсін алмастыру оңай. Алайда бұл жерде тек ғана абзацтарды ғана өзгерту керек. Арине, барлық азбзацтарға COLOR атрибутыменен FONT тегін қоюға болады. Алайда бұл беттері көр болса үлкен және бірбетті жұмыс. Күзде қоңыр, қыста - көк түсті талап етеді. Алайда мұның барлығын веб-шебер жасайды ғой. Алайда бұл қорқынышты жұмыс. Бірақ сіз қорықпаңыз, себебі алдын қарастырғанымыздай, мұны стильдер кестесіндегі кішкене бөлігін өзгерту арқылы жасауға болады.
styles.css файлына келесі кодты теріңіз:
p {color:#00ff00}
Мынаған мән беріңіз, CSS файлына веб-беттің құрылымын анықтаушы ешқандай қосымша тегтерді жазу қажет емес. берілген жағдайда, барлық файл тек қана ұсынылған бір қатар дан тұрады. Файлды сақтап, веб-бет экранын жаңартыңыз. Үлкен күрделі жұмыстың орнына біз бірнеше минутта көптеген беттердің алпеттерін өзгерттік.

CSS тегі түс
CSS-тегі түсті атау (мысалы, blue немесе red) немесе RGB кодтың (мысалы, #87FED3) көмегімен көрсетуге болады. CSS түсінің атаулары HTML дегі атауларымен сай келеді. HTML-ге қарағанда, CSS үшмәнді сан бойынша көрсетуге мүмкіндік береді, бұл жағдайда санның әрбір цифры екіеселенеді. Осылай, #7C5 дегенміз бұл #77CC55.

CSS тегі өлшем
em ( негізгі шрифте әріп ені m)
px (пиксельдердегі өлшем)
in (дюймдар)
cm (caнтимeтpлер)
mm (миллимeтpлер)
pt (172 дюймнің пунактері)
pc (пиктер, он екі пункт)
% (пайыздар; пайыздық мәндер дұрыс, бұрыс ондық бөлшектер болуы мүмкін.)
CSS те барлық қасиеттердің мәні болып normal, medium, bold және басқалары секілді кілттік сөздер болуы мүмкін. Кілтік сөздер регистрге сезімсіз борлып табылады: bold және BOLD - екеуі бір.
Әрбір қасиет, өзінің мәнін ата-аналық элементтен мұрагерлік ету керектігін көрсететін inherit мәнін қабылдайды.
CSS тегі комментарилер
Басқа бағдарламалау тілдеріндегі секілді, CSS-те комментарилер тек ғана сәлемдеседі. Сіз комментарилеріді өз стиліңізде * символынан бастап, * символынан аяқтап, дайындауыңыз керек. Комментарилерді жиірек қолданыңыз, олар сіздің стильдеріңізді болашақта модификациялауы да мүмкін.
HTML барлық элементтерінің стиль жазбаларының жалпы синтаксисі келесідей көрініске ие: элемент {атрибут: мәні}
Мұндай жазбаны ереже, стиль немесе селектор деп атайды.
Элемент атауы ретінде элемент белгісінің атауын, класс атауын және веб-бетегі обьект идентификаторын қолдануға болады. Атрибут көрініп тұрған элементтің қасиетін анықтайды, ал мәні - осы қасиеттің мәні.
Мысалы, 1 теңдеуінің барлық тақырыптарын ақ түске бояу үшін, келесідей жазу керек:
h1 {color: white}
или так:
h1 {color: #FFFFFF}
Көріп отырғаныңыздай, бұл екі қатар h1 және h1 тегтерінің арасында орналасқан мәтін толығымен ақ түске боялатындығын көрсетеді (оналтылық жүйеде оның номері - ffffff).
Алайда, егер де сіз барлық түстермен де осылай болады деп ойласаңыз, қателесесіз! Ақ және қара түстер - абсолютті түсініктер. Бірақ, "green" және "#00ff00" түстерін және басқа да танымал түстерді салыстырып көріңіз.
Бір қасиетті тегті бір жазбаға топтай отырып, бірнеше тегтерге енгізуге болады. Келтірілген мысалда біз тақырыптың барлық үш типі үшін қара түсті орнатамыз:
h1,h2,h3 {color: #000000}
Тег секілді, біз қасиеттерді де топтай аламыз. Бұл үшін осы анықтамаларды қасиет үшін үтір нүктемен бөлу арқылы жақшаға алудың өзі жеткілікті:
h2 {
color: #000000;
font-size: 14pt;
font-family: Monaco
}
Бұл стиль екінші теңдеудің тақырыптары үшін 14 пунктті өлшемді Monaco шрифтті және қара түсті анықтайды. Егер де компьютерде Monaco шрифтіне рұқсат болмаса, онда үнсіз келісім бойынша орнатылған шрифт қолданылады. Мысалда код оны оқу жеңілірек болу үшін бірнеше қатарларға бөлінген. Егер де барлығын бір қатарғ,а жазатын болсақ, әсері өзгеріссіз, сол қалпы қалады. Егер де бір жазбада элементтерді немесе олардың қасиеттерін біріктіретін болса, онда неге барлығын біріктірмеске.

HTML-де CSS-ті қолдану технологиялар

CSS стилінің каскадты кестелері. Тұрғызылған стильдік безендірулер, style атрибуты. Стильдердің сатылы кестелері Жеке бір тэг үшін жазылған стиль. HTML тілінде CSS-ті қолдану технологияларын білу.
Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.
Жұмыстың орындалу реті:
1. Теориялық материалды игеру.
2. Жұмыстың орындалуы.
3. Бақылау сұрақтары.
Әдістемелік нұсқау
CSS - Cascading Style Sheets (Стильдердің сатылы кестелері) -- гипермәтіндік мәліметтер мазмұнын олардың экрандағы бейнелену формасынан бөліп орындауға мүмкіндік беретін құрал болып табылады.
Қазіргі WWW-сайттарын безендіруді стильдердің сатылы кестелерінсіз көзге елестету қиын. Стильдердің сатылы кестелері мынадай мүмкіндіктер береді:
:: WWW-парағын безендіруді оның мазмұнынан бөліп тәуелсіз орындау;
:: Стандартты HTML тілі мүмкіндіктерін түбегейлі түрде кеңейту;
CSS технологиясы, мысалы, объектілерді абсолюттік орналастыру ісін орындай алады, яғни объектілерді экранға нақты координаталар арқылы қажетті орынға шығаруға болады. Мұндағы объектілік модельдің координатасын программада өзгерту экрандағы сол элементтің орнын ауыстыра алады. Олардың ара қашықтықтарын өзімізге ыңғайлы болып табылатын өлшемдердің бірі - мм, см немесе дюйм, пункт арқылы беруге де болады. CSS сценарийлермен қосыла отырып, гипермәтіндік парақтарды кәсіби программаларда жасалған мультимедиялық өнімдерден айнымайтын динамикалық әрі интерактивті деңгейде көрсетуге мүмкіндік береді. Скриптер немесе сценарийлер - гипер-мәтіндерді түрлендіре алатын арнайы программалау тілінде жазылған программалық кодтар. JavaScript - кодтарын HTML- мәтіндеріне енгізе отырып, құжаттарды түрлендіре алатын, көпшілікке арналған тіл. Сценарийлер енгізілген CSS статикалық HTML-тілін динамикалық жаңа күйге келтіретін қосымша мүмкіндіктер жиыны.
:: CSS арқылы HTML-тілінің экрандағы элементтерді бейнелеудің көптеген тәсілдеріне жауапты тәгтер мен олардың атрибуттарын алып тастау жолымен файлдың жалпы көлемін кішірейте аламыз (мысалы, мынадай тәгтер: font, center, в, i, s,
U т. б. ; атрибуттар: align, color, bgcolor, size, width, height, т. с. с.);
:: HTML тілінің тәгтері мен атрибуттарына қарағанда, CSS кестелері сайттың сыртқы түрін басқарудың жеңіл тәсілдерін береді;
:: бір файлдағы стиль сипаттамаларын өзгерту арқылы жүздеген гипермәтіндік парақтардың сыртқы түрлерін бірден өзгерте аламыз.
Стильді бір тәгтің параметрлері ішіне жазуға болады. Ол үшін BODY ішіндегі кез келген тәгке (BODY тәгіне де) STYLE атрибуты қолданылады. Бұларды "инлайндық" стиль кестелері деп атайды.
STYLE атрибуты арқылы
- Жеке тәг стилі;
- Жеке HTML-файлы стилі;
- Бірнеше HTML-файлдарына арналған стиль;
- Аралас стильдерді пайдалану атқарылады.
Жеке бір тәг үшін жазылған стиль
Мысалы, P тәгі арқылы нақты бір азат жол қалай бейнеленетінін былай көрсете аламыз:
Р style="font-size:1.5cm; color:green"
Бұл азат жолқа стильдік анықтау тәсілі қолданылып отыр.
Стиль style атрибутымен берілген. Мұнда браузерге азат жолты көлемі 1.5 сантиметр болатын жасыл әріптермен жазуға нұсқау берілген.
Стильді анықтау мынадай түрде жазылады:
сипаттамасы: шамасы; font-size:1.5cm; color:green;
Әрбір анықтаулар бір-бірінен ; символы арқылы бөлініп жазылады.
Style атрибутын оның ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.