CSS: қаріп түсі, стильдер, фон, өлшемі

Бағдарламалау - бұл айна: басында сөз болды, ал жауап мүлдем жоқ еді. Және өте тез өзгеру керек болды: алдымен айна, сосын сөз ... Бұл кезде каскадты стильдердің кестелері жақсы, бірақ неге әзірлеуші ақыл-ойы ұзаққа созылды? CSS - бұл компьютерлік бағдарламалардың дәуірінің басталу кезеңдерінің барлығы, бірақ әр түрлі тұрғыдан ғана. Тіпті массивтер қауымдасқан болса да, революция оны жасамады.

Сайт беті - белгілі бір стильдік сыныпқа немесе стиль идентификаторына тағайындалатын HTML белгілеу тегтері. Алғашқы рет бір рет анықталуы мүмкін және кез-келген нәрсеге қажетті деп саналады, екіншісі белгілі бір элементке жатады.

Жалпы стиль сипаттамасының логикасы

Дәстүрлі түрде стиль CSS файлына орналастырылады, бірақ оның стиль атрибутында белгілі бір элементке тағайындалуы мүмкін. JavaScript-ні қолданып, динамикада стиль жасай аласыз. Маңыздылығы, мысалы, CSS арқылы қаріп түсі , оның өлшемі, гарнитура, оның астындағы фон және т.б. сипаттау сияқты емес. Стиль сипаттамасының орны контексте, әдетте, екі идеяның маңызы өте маңызды: кейінірек сипатталған, ол басымдыққа ие және ол элементте сипатталған болса, ол өте маңызды. Соңғысы, жазылғандай, басымдықты айқындайды.

Мәнерді қолданыңыз, мысалы, кейбір қаріп түсі түс өзгертеді, оны кез келген жерде және қалай болғанда да орындауға болады. Мәселе мынада, браузер бұл әрекетке агрегаттағы барлық стильдерді бөлшектеу барысында жауап береді. Ол CPU уақытына қанша жұмсайды?

Ең дұрысы, қаріптің түсі тек бір рет көрсетілуі керек - бұл классика. Бір жұпты қарапайым сипаттау туралы ойлану үшін, содан кейін басқа, және, әрине, мүмкін. Бұл сәнді, бірақ практикалық емес.

Жалпы логиканың мысалы

Бұл өте қарапайым: тек үш элементтің CSS түсімен анықталатын болса, кем дегенде үш ұзақ ойнайтын мәселе аласыз:

# Ele1, # Ele2, # Ele3 {
POSITION: абсолютті;
Сол жақта: 20px;
Жоғарғы: 14px;
Түсі: қызыл;
}

# Ele2, # Ele3 {
Сол жақта: 90px; // CSS координатын көлденеңінен өзгерту
Түсі: сары; // CSS қаріптің түсін өзгерту
}

# Ele3 {
Жоғарғы: 114px; // CSS координатын тігінен өзгертіңіз

Түсі: жасыл; // CSS қаріптің түсін өзгертеді

Фонды-түсі: жарықтандыру; // CSS мәтінін таңдау түсі өзгереді, бірақ бұл # Ele1 және # Ele2 емес; Позиция өзгерді, бірақ ол # Ele2-де өзгеріп, мұнда емес

}

Енді осы үш элементтің бәрі бір жерде анықталғанын және сайт иесінің түсін өзгертуін өзгерткен жағдайда, әзірлеуші түс туралы ғана емес, сондай-ақ сол және жоғарғы ережелер туралы есте сақтап, мәтінді таңдаудың түс өзгерісін ұмытпау керек.

Барлық әзірлеушілер CSS-ді талап етпейді: идентификатордың стилі тек бір элемент үшін, ал көптеген тегтер үшін класс стилі, ал екіншісі тегтер ретінде сын есімдер ретінде көрсетілуі мүмкін:

• Қаріп түсін CSS -тегіColor сыныбы стилінде орнатыңыз;
• Қаріп өлшемін көрсетіңіз - class size15;
• PositionUp позициясын орнатыңыз.

Әрине, идентификаторларды қолдану, әсіресе олар түзетудің бір элементіне жататын кезде, жүз бет элементтерінен әртүрлі комбинацияларда боялған ондық стилінің сыныптарынан жақсы. Бірақ барлығы өз объективті логикасына ие.

Әзірлеуші дұрыс есепке алуды қажет етеді: тіпті егер HTML қаріп түсі болса , CSS қатаң сипаттауды ұсынады, содан кейін сипаттаудың жалпы құрылымының икемділігі оның жұмысы болып табылады.

Жалпы логиканы қолданудың күтілетін нәтижесі

Қазіргі браузерлер көптеген стильдік файлдар мен олардың көлемдеріне тыныш сілтеме жасайды. Дегенмен, атап айтқанда, CSS арқылы жобалау кезінде бүкіл беттің түсі әрқашан ақылға қонымды жеткілікті деп ойлайды. Барлық стиль ережелері «арзан» болып көрінеді. Қарапайым лаконикалық жазба: * {color: white;} - сөзсіз әдемі, бірақ беттің барлық элементтеріне қолданылмайды.

CSS-тің барлық ережелерінен ең маңыздысы:

• Стиль - сынып, содан кейін оның аты «.» Басталады;
• Стиль идентификаторы және оның атауы «#» белгісімен басталады;
• Басқа жағдайларда - бұл тегтің атауы немесе ерекше нәрсе

Стильдерді сипаттау (мұрагерлік, келіспеушіліктер, басымдықтар, позициялар, тәртібі және т.б.) бойынша басқа идеялар қажет болған жағдайда маңызды және қатаң түрде қолданылуы керек.

Браузер сипаттамасында түсінбейтін әрдайым жіберіп алмайды, сондықтан арнайы тосынсыйлар болмайды. Егер бірдеңе дұрыс жерде болмаса немесе CSS-де қаріп түсін орнатпасаңыз, қате стильде болады.

Күтпеген мүмкіндіктер

* {Left: 124px; } Немесе

Ol ol, ol ul, ul ul, ul ol (margin-bottom: 0; }
Img {border: 0; }

Жаңа редакторды тіпті CSS ережелерін қолдануға мәжбүрлеу қиын болса да. Кез-келген сайтты әрдайым дамытуда, тіпті қарапайым CSS синтаксисі де күтпеген проблемаларды ұсынады. Дегенмен, синтаксистің дұрыс қолданылуына күш жұмсаңыз, бірақ JavaScript функционалдығын қолдансаңыз, жаңа күтпеген мүмкіндіктер әрбір элемент үшін бірдейлендірушілерді монотонды жасауды немесе стиль класстарының әртүрлі нұсқаларын ұстануға мүмкіндік береді.

CSS - сілтеме тегінің көмегімен бетке қосылған стильдер парағы ғана емес, немесе стиль тегтері арқылы кірістірілген. Бұл сондай-ақ ұшақта стиль жасау немесе бар болғанды өзгерту мүмкіндігі.

CSS-ні қолданғанда, қаріптің түсі бағдарламаланған түрде жасалуы мүмкін. Сондай-ақ өлшемі, позициясы, шегіністер. Сайт CSS, HTML, PHP немесе JavaScript эффектілерін жыпылықтауда білім беруді мақсат етпейді.

Веб-ресурс ең алдымен белгілі бір жолмен ұсынылатын ақпарат болып табылады. Міне, CSS-ны динамикада беті әлі де серверде болған кезде оны қалай жасауға болатыны туралы призмасы арқылы көруге болады (ол PHP-ны сайтқа кірген кезде әзірлеуші емес, сайтқа келген кезде жасайды), қажетті стиль файлы Белгілі бір мәтінді, ағымдағы мазмұн үшін немесе белгілі бір келушімен көргенде, бет үдерісінде сыныпта немесе ID мәнерінде жасаңыз.

Статикалық динамика

Мазмұнды динамикалық ету үшін күрделі JavaScript кодын жазудың қажеті жоқ және оның дизайны - сәйкес мазмұн. Кейде қол жетімді мүмкіндіктерді дұрыс пайдалану жеткілікті. Атап айтқанда, CSS-ның шрифт түсі статикалық ереже ретінде анықтау арқылы осы жасырын ережені жасырып, басқа (көрінетін) ережені көруге болады.

Мұнда динамика алгоритм талап етпейді:

// тораптағы кіру батырмасын бөлектеңіз
ScfWelcomeOver функциясы () {
Document.getElementById ('scDocxNamePiP'). Style.visibility = 'көрінетін';
}

// сайтқа кіру түймешігін жасырыңыз
ScfWelcomeOut функциясы () {
Document.getElementById ('scDocxNamePiP'). Style.visibility = 'жасырын';
}

CSS өз динамикасының өз нұсқаларын ұсынады: іске қосу сызығы, элементтердің ашықтығы, қабаттасулардың түрлі көріністері, көріністері, түсі жоғалады. CSS-де шрифт түсі ешбір стиль ережесі берілмегендіктен де жасалуы мүмкін.

Динамикалық мазмұн көрсету

Егер догмалар болмаса, онда ешқандай прогресс болмас еді. Күресу үшін ештеңе жоқ. Гипертекст әлемге көптеген догмалар әкелді. Оларға назар аудару және веб-сайттарды прагматикалық және практикалық стильде әзірлеу уақыты келді.

Бастапқыда бет (P) бар, оған контент (K) қойылады, барлық бет тегтері стиль кестесінде (S) сипатталады. PHP немесе Perl арқылы P-бетін серверде жасау, дерекқордан K таңдауы жаңа емес. S мәнерінің парағы S автоматты түрде қосылады. Дегенмен, K өзгеруі мүмкін және көбіне мұндай өзгеріс басқа стильдердің, яғни S +-де, қажеттілігіне әкеледі.

Мысалы, тапсырыс беруші: «Мәскеудің өмірін сипаттайтын сайт, жаңалықтар« ЗАЗ-Завтрак »стилінде,« Лас-Вегас »стиліндегі түнгі дау-дамайдың сипаттамасымен,« ModernTechno »стиліндегі ғылыми-техникалық прогресс туралы мақалалар жазылған болса жақсы көрінеді. Бірақ егер сіз осы үш опцияны S жасайтын болсаңыз, онда клиенттің «Жаңалықтар», «Мерекелер», «Жұмыс», «CSS / HTML» және бонус «Хостесс» мақалаларының жиынтығы болуы идеясы болмайтындығына кепілдік жоқ.

Тағы бір тәсіл - практикалық. Мақаланың санатына қарамай, белгілі бір түсті бояуға болатын әрдайым мазмұн бар. Мұнда осы жерде өте ақылға қонымды ой бар: белгілі бір K-ны алғаннан кейін, серверде тіпті S -ны қалыптастыру үшін және браузер P-ны талап ететін кезде, ол қажетті контентті тиісті түрде жасайды.

JavaScript-нің стилінің динамикасы

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

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

Үшіншіден, ол әзірлеушіге ыңғайлы болатын стилде мазмұнды құруға арналған қондырғының механизмін қамтамасыз етуге мүмкіндік береді. Бұған ешкім ие емес.

Бұл идеяны іске асыру үшін бет жүктелгеннен кейін және оның жұмыс істеу процесінде бірден элемент стилін жасау механизмін енгізу қажет. Қазіргі заманғы сайт AJAX болып табылады немесе басқаша. Бет өрісін қалыптастыру барысында стильдердің қалыптасуын тікелей орындау қиын емес. Бұл қарапайым, қол жетімді және тиімді, себебі мазмұн конструкциямен бірге жүреді.

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

CSS белсенді құрамдас ретінде

Гипертексте көптеген жақсы нәрселер туындады, бірақ табиғи ақпараттың аз ғана бөлігі табысты ресімделді, жоғары сапалы HTML, XML, CSS құжаттарын жасау құралдары мен тәжірибесі пайда болды. Ақпараттың жаңа көлемдерін ресімдеу және бұрын жасалған әрекеттерді өзгерту қиын емес.

CSS-ге қатысты бұл процесс толығымен басқа контексте іске қосылды. JavaScript элементтері мен элементтерінің стильдерін жасау үшін ұшуға мүмкіндік беретін кірістірілген құралдар мұндай мүмкіндікті болжайды және PHP жасаушылар, атап айтқанда, тек HTML парақтарының қалыптасуымен айналысады деп есептейді.

Бірінші және екінші де бағдарламалау мәнерлерін жасауға мүмкіндік береді. Бұл ақпараттық технологиялар саласындағы жаңа бағыт. Стилдер HTML немесе XML-ге қарағанда әлдеқайда ресми нәрсе, ережелер өте қарапайым. Стиль қандай ақпарат болса да, әрдайым ақпаратта болады.

Деректерді өңдеу бағдарламалары әрдайым әлдеқайда бейресми салаларда жұмыс істейді, бірақ CSS тақырыбы өте қарапайым тапсырма, бірақ қандай да бір түрде даму процесіне көзқарасқа түспейді.

Бағдарламалау саласындағы догмалар туралы

Айсберг секілді, догмалар ақпараттық кеңістікті ұзақ уақытқа соза алмайды. Жинақталған тәжірибе тек қана HTML және CSS стандарттарына, онымен жұмыс істеу құралдарына, әзірлеушілердің білімдеріне шоғырланды.

Қарапайым тапсырма - CSS қаріптерін пайдалану үшін өзіңіздің тамаша шешіміңізді таптыңыз. Ережелер, синтаксис, логика және ыңғайлылық шексіз. Бірақ, шын мәнінде, көптеген қаріптер қажет болмаса да, тәжірибе үшін көптеген түстер қажет емес, ал жалпы алғанда, виртуалдандыру мақсатында HTML және CSS-дің барлық жинақталған «күші» мүлдем қажет емес, ситуациялық білім көбеюге көшкен кезде пайда болады және пайда болады Мазмұндан табиғи стильді оқыту тәжірибесі мен құралдары.

Қалай болғанда да, ол мүлдем анық болмауы мүмкін, бірақ процесс қазірдің өзінде жүргізілуде.