என்பதன் CSS ஐ: கண்ணோட்டம், தேர்வு, பயன்பாடு

நிச்சயமாக அவை அனைத்துமே அனுபவமிக்க இணைய வடிவமைப்பாளர்கள் என்பதன் பயன்படுத்த. எந்த விதிவிலக்குகள் உள்ளன. இந்தச் செயல்பாட்டை வெற்றி விரும்பினால், இந்த திட்டங்கள் பற்றி மறக்க வேண்டாம். முதல் பார்வையில், அவர்கள் ஒரு புதிய அமைதியான திகில் ஏற்படுத்தலாம் - அது நிரலாக்க ஐப் போலவே இருக்கும்! உண்மையில், உங்களைப் பற்றி ஒரு நாளும் CSS ஐ என்பதன் அனைத்து அம்சங்களையும் சமாளிக்க, மற்றும் நீங்கள் முயற்சி செய்தால், மணி பின்னர் ஒரு ஜோடி. எதிர்காலத்தில், இது மிகுந்த அளவில் உங்கள் வாழ்க்கையில் எளிமைப்படுத்த வேண்டும்.

எப்படி CSS ஐ என்பதன் செய்தார்

சிறந்த இந்த தொழில்நுட்பத்தின் பண்புகள் புரிந்து கொள்வதற்கு, சுருக்கமாக வலை பக்கங்களில் காட்சி வழங்கல் வரலாற்றில் ஆய்ந்தறிந்து.

மட்டுமே இணையத்தின் பாரிய பயன்படுத்த தொடங்கியுள்ளது போது, எந்த பாணி தாள்கள் இல்லை. ஆவணங்கள் நிறைவேற்றுவது உலாவியில் முழுமையாக நம்பியிருந்தன. அவர்கள் ஒவ்வொருவரும் குறிப்பிட்ட குறிச்சொற்களை சிகிச்சை பயன்படுத்தப்பட்டு வருகின்றன தங்கள் சொந்த பாணியை இருந்தது. அதன்படி, பக்கங்கள் இதில் உலாவி அவற்றை திறக்க பொருட்டு பொறுத்து வெவ்வேறு பாருங்கள். விளைவாக - குழப்பம், குழப்பம், உருவாக்குனருக்கான பிரச்சினைகள்.

1994 ஆம் ஆண்டில், நார்வேஜியன் விஞ்ஞானி ஹாகான் பொய், HTML ஆவண தனித்தனியாக பக்கங்களை தோற்றத்தை பயன்படுத்த முடியும் என்று ஒரு நடை தாள் உருவாக்கப்பட்டது. உடனடியாக நிறைவு வெளியே அமைக்க யார் W3C, என்ற கருத்தாக்கத்தை priglanulas உறுப்பினர்கள். ஒரு சில ஆண்டுகள் கழித்து அவர் CSS ஐ விவரக்குறிப்பு ஒரு முதல் பதிப்பு வெளியிட்டது. பின்னர் அவள் தொடர்ந்து, மேம்படுத்தப்பட்ட நிறைவு செய்யப்பட்டு ... ஆனால் கருத்து அனைவரும் ஒரே இருந்தார்: ஒவ்வொரு பாணி சில பண்புகளை அமைப்பதற்கு.

CSS ஐ அட்டவணைகள் பயன்படுத்தி எப்போதும் சிக்கல் வருகிறது. உதாரணமாக, வலை வடிவமைப்பாளர்கள் அடிக்கடி வகைப்படுத்தல் மற்றும் குழுவாக்குவதன் அம்சங்கள் சிக்கல்களைக் கொண்டிருந்தன, பரம்பரை மிகவும் எளிது அல்ல.

பின்னர் இரண்டு ஆயிரத்தில் வந்தது. அடையாளங்களை பெருகிய நெகிழ்வான மற்றும் மாறும் பணி பாணியை இருக்க வேண்டியது அவசியம் ஆகிறது தொழில்முறை முன் இறுதியில் டெவலப்பர்கள், ஈடுபட தொடங்கினார் உள்ளன. காலத் தேவையினால் CSS ஐ முன்னொட்டுகளைக் வாய்ப்பு கூட இல்லாத மற்றும் ஆதரவு உலாவியின் புதிய திறன்களை கண்காணிப்பு. பின்னர், ஜாவா, மற்றும் ரூபி நிபுணர்கள் கீழே வணிக, ஒரு என்பதன் உருவாக்குவதில் கிடைத்தது - CSS க்கான மேற்கட்டுமானம், புதிய அம்சங்கள் அது சேர்க்கப்படும்.

தொடங்குபவர்கள் ஐந்து CSS: என்பதன் அம்சங்கள்

அவர்கள் பல செயல்பாடுகளை வேண்டும்:

• உலாவி முன்னொட்டுகள் மற்றும் காக்கி ஒருமுகப்படுத்தி;

• தொடரியல் எளிமைப்படுத்த;

• பிழைகள் இல்லாமல் உள்ளமை தேர்வாளர்கள் வேலை வாய்ப்பு கொடுக்க;

• தர்க்கம் ஸ்டைலிங் மேம்படுத்த.

சுருக்கமாக: என்பதன் CSS ஐ நிரலாக்க தர்க்கம் திறன்களை சேர்க்கிறது. மாறிகள், செயல்பாடுகள், hagfish, சுழற்சிகள் நிலைமைகள்: இப்போது, ஸ்டைலிங் பாணியை வழக்கமான பட்டியலில் மற்றும் ஒரு சில எளிய உத்திகள் மற்றும் அணுகுமுறையால் நடைபெறுவதில்லை. கூடுதலாக, திறன் கணிதம் பயன்படுத்த.

இந்த நிரல்களும் பிரபலம் பார்த்து, W3C, படிப்படியாக CSS குறியீடு அவற்றை சாத்தியம் அளிக்கத் துவங்கியுள்ளன. உதாரணமாக, விவரக்குறிப்பு பல உலாவிகளில் ஆதரிக்கிறார்கள் அங்கு கணித் () செயல்பாடு, எனவே. விரைவில் அது மாறிகள் அமைக்க மற்றும் ஒரு hagfish உருவாக்க இயலும் என்று எதிர்பார்க்கப்படுகிறது. எனினும், இந்த ஏற்கனவே இங்கே தொலைவான எதிர்காலத்தில் நிகழும், preprocessors மற்றும் ஏற்கனவே நன்றாக வேலை.

பிரபலமான preprocessors CSS ஐ. sass

2007 ல் வடிவமைக்கப்பட்டது. முதலில் ஒரு கூறு Haml - ஒரு டெம்ப்ளேட் HTML. CSS உறுப்புகள் க்கான புதிய அம்சங்கள் ரூபி ஆன் ரெயில்ஸ், எல்லா இடங்களிலும் அது பரவ ஆரம்பித்தன எந்த மகிழ்ந்தார் டெவலப்பர்கள் கட்டுப்படுத்த. Sass இப்போது எந்த என்பதன் உள்ள சேர்க்கப்பட்டுள்ள அம்சங்களைத் ஒரு பெரிய எண்: மாறிகள், தேர்வாளர்கள் காரணமாக உட்பொதித்தலை, hagfish (பின்னர், எனினும், இந்த வாதங்கள் சேர்க்க முடியாது).

Sass உள்ள அறிவித்தார் மாறிகள்

மாறிகள் $ அடையாளம் ஈடுபடப்போவதாக அறிவித்துக் கொண்டது. "$ BorderSolid: 1px திட சிவப்பு;" உதாரணமாக அவர்கள் தமது சொத்துக்களை மற்றும் பெட்டிகள், பராமரிக்க முடியும். இந்த உதாரணத்தில், நாம் borderSolid எனப்படும் ஒரு மாறுபடும் அறிவித்தார் மற்றும் அது 1px திட சிவப்பு மதிக்கின்றோம் சேமிக்கப்படும். இப்போது CSS இல் நாம் 1px ஒரு சிவப்பு எல்லை அகலம் உருவாக்க வேண்டும் என்றால், வெறுமனே சொத்து பெயர் பிறகு மாறி குறிக்கிறது. மாறிகள் அறிவித்த பிறகு மாற்ற முடியாது. பல உள்ளமைக்கப்பட்ட செயல்பாடுகளை உள்ளன. உதாரணமாக, $ redcolor # FF5050 ஒரு மதிப்பு ஒரு மாறி அறிவிக்க. ப {நிறம்: இப்போது, எந்த உறுப்பு பண்புகளில் CSS குறியீடு உள்ள, எழுத்துரு வண்ணம் அமைக்க அதை பயன்படுத்த $ redColor; }. நீங்கள் நிறம் கொண்டு சோதனை செய்ய விரும்புகிறீர்களா? செயல்பாடு அடர்த்தி பயன்படுத்தவும் அல்லது பாரத்தை. இது செய்யப்படுகிறது: ப {நிறம்: இருட்டாக்கிவிடும் ($ redColor, 20%); }. இதன் விளைவாக, நிறம் redColor 20% இலகுவான இருக்கும்.

Sass பல செயல்பாடுகளை உள்ளமைக்கப்பட்ட. அறிய - குறைந்தபட்சம் அவற்றை வாசிக்க வொர்த், ஆனால் நல்ல.

காணப்படுகிறது

முன்னதாக, காணப்படுகிறது குறிக்க ஒரு நீண்ட மற்றும் சங்கடமான வடிவமைப்பு பயன்படுத்த வேண்டியிருந்தது. நாங்கள் ப இது ஒரு கிராம, என்று நினைத்து, அதில் சிறிது சிறிதாக அமைக்க நீட்டம். span ஐந்து, மஞ்சள் - - கிராம, நாம் ப, சிவப்பு வண்ணத்தை அமைக்க வேண்டும் இளஞ்சிவப்பு. ஒரு பொதுவான CSS இல் பின்வருமாறு அது செய்யப்பட வேண்டும்:

கிராம {

நிறம்: சிவப்பு;

}

கிராம ப {

நிறம்: மஞ்சள்;

}

கிராம ப நீட்டம் {

நிறம்: இளஞ்சிவப்பு;

}

CSS ஐ என்பதன் அனைத்து எளிதாக மிகவும் கச்சிதமாகவும் ஆகிறது:

கிராம {

நிறம்: சிவப்பு;

ப {

நிறம்: மஞ்சள்;

.span {

நிறம்: இளஞ்சிவப்பு;

}

}

}

கூறுகள் உண்மையில் "முதலீடு" ஒருவரையொருவர்.

என்பதன் கட்டளைகளை

@ இறக்குமதி கட்டளைகளை பயன்படுத்தி கோப்புகளை இறக்குமதி செய்யலாம். உதாரணமாக, நாம் எழுத்துருக்களுக்காக பாணியை அறிவிக்கிறது என்று fonts.sass கோப்பு வேண்டும். முக்கிய கோப்பு style.sass இணைக்கவும்: @ இறக்குமதி 'எழுத்துருக்கள்'. முடிந்தது! மாறாக பாணிகளை ஒரு ஒற்றை பெரிய கோப்பு நாங்கள் தேவையான பண்புகள் விரைவான மற்றும் எளிதாக அணுக பயன்படுத்த முடியும் என்று ஒரு சில வேண்டும்.

hagfish

மிக சுவாரஸ்யமான கருத்துக்கள் ஒன்று. அது பண்புகள் ஒரு தொகுப்பு கேட்க ஒரு வரி அனுமதிக்கிறது. பின்வருமாறு இயக்குகிறது:

@mixin largeFont {

எழுத்துரு குடும்ப: 'டைம்ஸ் நியூ ரோமன்';

எழுத்துரு அளவு: 64px;

வரிசை உயரம்: 80px;

எழுத்துரு-எடை: தைரியமான;

}

Hagfish, பக்கத்தில் உறுப்பு பொருந்தும் உத்தரவு @include பயன்படுத்த. உதாரணமாக, நாம் H1 தலைப்பு அதை விண்ணப்பிக்க வேண்டும். H1 {@include: நாம் பின்வரும் அமைப்பு உள்ளது largeFont; }

hagfish அனைத்து பண்புகள் ஒரு H1 உறுப்பு ஒதுக்கப்படும்.

என்பதன் குறைவான

தொடரியல் Sass நிரலாக்க நினைவு கூர்ந்தார். நீங்கள் ஒரு விருப்பத்தை தேடும் என்றால் என்று குறைவான பார்க்க, CSS ஐ படிக்கும் ஆரம்ப பொருத்தமாக இருக்கும். அது 2009 ம் ஆண்டு உருவாக்கப்பட்டது. முக்கிய அம்சம் - நிரலாக்க Imposer மிகவும் அறிமுகமில்லாத CSS ஐ இயல்பு தொடரியல் ஆதரவு, அது சுலபமாக கற்றுக்கொள்வதற்காக இருக்கும்.

மாறிகள் @ சின்னமாக பயன்படுத்தி அரசு அறிவித்துள்ளது. உதாரணமாக: @fontSize: 14px;. Sass அதே கொள்கைகளை காணப்படுகிறது படைப்புகள். .largeFont () {எழுத்துரு குடும்ப: பின்வருமாறு Hagfish தெரிவிக்கப்பட வேண்டும் என்பதைத் 'டைம்ஸ் நியூ ரோமன்'; எழுத்துரு அளவு: 64px; வரிசை உயரம்: 80px; எழுத்துரு-எடை: தைரியமான; }. தேர்ந்தெடுத்த உறுப்பு பண்புகள் புதிதாக உருவாக்கப்பட்ட hagfish சேர்க்க - அது என்பதன் கட்டளைகளை பயன்படுத்த வேண்டிய அவசியமில்லை இணைக்க. உதாரணமாக: H1 {.largeFont; }.

ஸ்டைலஸ்

மற்றொரு என்பதன். உலக ஜேட், எக்ஸ்பிரஸ் மற்றும் மற்ற பயனுள்ள பொருட்கள் கொடுத்த ஒரே ஆசிரியர் மூலம் 2011 ல் உருவாக்கப்பட்டது.

மாறிகள் இரண்டு வழிகளில் அறிவித்தார் முடியும் - அல்லது வெளிப்படையாகவோ அல்லது மறைமுகமாக. உதாரணமாக: எழுத்துரு = 'டைம்ஸ் நியூ ரோமன்'; - ஒரு உள்ளார்ந்த விருப்பம். ஆனால் $ எழுத்துரு = 'டைம்ஸ் நியூ ரோமன்' - தெளிவான. Hagfish அறிவித்தார் மற்றும் மறைமுகமாக இணைக்கப்பட்டுள்ளது. redColor () நிறம் சிவப்பு: தொடரியல் பின்வருமாறு இருக்கிறது. இப்போது நாம் உதாரணமாக, உருப்படி சேர்க்க முடியும்: H1 redColor ();.

முதல் பார்வையில் மீது ஸ்டைலஸ் அது புரியாது தோன்றலாம். எங்கே "பூர்வீக" அடைப்புக்குறிக்குள் மற்றும் அரைப்புள்ளிகள் உள்ளது? ஆனால் அது அவரு அவசியம், அனைத்து மிகவும் தெளிவாக. எனினும், நினைவில் இந்த என்பதன் நீண்ட கால வளர்ச்சி நீங்கள் கிளாசிக் CSS தொடரியல் பயன்படுத்த "கவர" முடியும் என்று. "தூய்மையான" பாணி வேலை கொண்ட போது இந்த சில நேரங்களில் பிரச்சினைகள் ஏற்படுகிறது.

என்ன என்பதன் தேர்வு?

உண்மையில், அது ... அது ஒரு விஷயமே இல்லை. அனைத்து பதிப்புகள் வெறும் ஒவ்வொரு தொடரியல் வெவ்வேறு அதே அம்சங்கள் பற்றி வழங்குகின்றன. நாம் பின்வருமாறு தொடர பரிந்துரைக்கிறோம்:

• நீங்கள் என்றால் - புரோகிராமர் மற்றும், பாணிகளை இருவரும் குறியீடு வேலை Sass பயன்படுத்த வேண்டும்;
• நீங்கள் என்றால் - ஒரு குறியாக்கியில், மரபு வழி அமைப்பை போல பாணிகளை வேலை குறைவான கவனம் செலுத்த வேண்டும்;
• நீங்கள் உச்சநிலை எளிமையை என்றால் கூட, ஸ்டைலஸ் பயன்படுத்த.

இன்னும் வளர்ச்சி எளிமைப்படுத்த முடியும் என்று சுவாரஸ்யமான நூலகங்களின் ஒரு முடிவில்லாத அனைத்து வேறுபாடுகளையும். பல உள்ளமைக்கப்பட்ட அம்சங்கள் ஒரு சக்திவாய்ந்த கருவி - SASS பரிந்துரைக்கப்படுகிறது பயனர்கள் திசைகாட்டி கவனம் செலுத்த. உதாரணமாக, நீங்கள் அதை நிறுவ பிறகு நீங்கள் விற்பனையாளர் பதிப்பு முன்னொட்டு பற்றி கவலைப்பட வேண்டிய கட்டாயம் ஏற்படாது. எளிதாக்குகிறது கட்டங்கள் வேலை. மலர்கள், உருவங்களுக்கு வேலை கருவிகள் உள்ளன. ஒரு வரம்பு முன்பே hagfish அறிவித்தது. இந்த கருவியை நாட்கள் ஒரு ஜோடி கொடுங்கள் - இவ்வாறு நீங்கள் எதிர்காலத்தில் நேரத்தையும் முயற்சியையும் நிறைய சேமிக்கும்.