Source

மறுதொடக்கம்

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

அணுகுமுறை

மறுதொடக்கம் இயல்பாக்கத்தின் மீது உருவாக்குகிறது, உறுப்பு தேர்வாளர்களை மட்டுமே பயன்படுத்தி ஓரளவு கருத்துடைய பாணிகளுடன் பல HTML கூறுகளை வழங்குகிறது. கூடுதல் ஸ்டைலிங் வகுப்புகளுடன் மட்டுமே செய்யப்படுகிறது. எடுத்துக்காட்டாக, <table>எளிமையான அடிப்படைக்கு சில ஸ்டைல்களை மறுதொடக்கம் செய்து பின்னர் .table, .table-bordered, மற்றும் பலவற்றை வழங்குகிறோம்.

மறுதொடக்கத்தில் எதை மீற வேண்டும் என்பதைத் தேர்ந்தெடுப்பதற்கான எங்களின் வழிகாட்டுதல்கள் மற்றும் காரணங்கள் இங்கே:

அளவிடக்கூடிய கூறு இடைவெளிக்கு remsக்குப் பதிலாக s ஐப் பயன்படுத்த சில உலாவி இயல்புநிலை மதிப்புகளைப் புதுப்பிக்கவும் .em
தவிர்க்கவும் margin-top. செங்குத்து விளிம்புகள் சரிந்து, எதிர்பாராத முடிவுகளைத் தரும். மிக முக்கியமாக, ஒற்றை திசையானது marginஎளிமையான மன மாதிரி.
சாதன அளவுகள் முழுவதும் எளிதாக அளவிடுவதற்கு, தொகுதி உறுப்புகள் remsக்கு margins ஐப் பயன்படுத்த வேண்டும்.
முடிந்தவரை பயன்படுத்தி , தொடர்புடைய சொத்துக்களின் அறிவிப்புகளை fontகுறைந்தபட்சமாக வைத்திருங்கள்.inherit

பக்க இயல்புநிலைகள்

சிறந்த பக்க அளவிலான இயல்புநிலைகளை வழங்க, <html>மற்றும் உறுப்புகள் புதுப்பிக்கப்படுகின்றன. <body>மேலும் குறிப்பாக:

உலகளாவிய box-sizingரீதியில் ஒவ்வொரு தனிமத்தின் மீதும் அமைக்கப்பட்டுள்ளது- உட்பட *::beforeமற்றும் *::after. border-boxதிணிப்பு அல்லது பார்டர் காரணமாக உறுப்புகளின் அறிவிக்கப்பட்ட அகலம் ஒருபோதும் மீறப்படாமல் இருப்பதை இது உறுதி செய்கிறது.
- இல் எந்த அடிப்படையும் font-sizeஅறிவிக்கப்படவில்லை <html>, ஆனால் 16pxகருதப்படுகிறது (உலாவி இயல்புநிலை). பயனர் விருப்பங்களுக்கு மதிப்பளித்து மேலும் அணுகக்கூடிய அணுகுமுறையை உறுதி செய்யும் போது மீடியா வினவல்கள் வழியாக எளிதான பதிலளிக்கக்கூடிய வகை-அளவிடுதலுக்காகப் பயன்படுத்தப்படுகிறது font-size: 1rem.<body>
<body>ஒரு உலகளாவிய font-family, line-heightமற்றும் text-align. எழுத்துரு முரண்பாடுகளைத் தடுக்க சில வடிவ உறுப்புகளால் இது பின்னர் பெறப்படுகிறது.
பாதுகாப்பிற்காக, <body>ஒரு அறிவிக்கப்பட்ட background-color, இயல்புநிலை #fff.

சொந்த எழுத்துரு அடுக்கு

இயல்புநிலை வலை எழுத்துருக்கள் (Helvetica Neue, Helvetica மற்றும் Arial) பூட்ஸ்டார்ப் 4 இல் கைவிடப்பட்டு, ஒவ்வொரு சாதனம் மற்றும் OS இல் உள்ள உரை ரெண்டரிங்கிற்கான "நேட்டிவ் ஃபாண்ட் ஸ்டாக்" மூலம் மாற்றப்பட்டது. இந்த ஸ்மாஷிங் இதழ் கட்டுரையில் சொந்த எழுத்துரு அடுக்குகள் பற்றி மேலும் படிக்கவும் .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

இது பூட்ஸ்டார்ப் முழுவதும் உலகளாவிய ரீதியில் தானாகப் font-familyபயன்படுத்தப்படுகிறது . பூட்ஸ்டார்ப்பைப் புதுப்பித்து <body>மீண்டும் தொகுக்கவும்.font-family$font-family-base

தலைப்புகள் மற்றும் பத்திகள்

அனைத்து தலைப்பு கூறுகளும்—எ.கா., <h1>—மற்றும் <p>அவை margin-topஅகற்றப்படுவதற்கு மீட்டமைக்கப்படும். எளிதான இடைவெளிக்காக தலைப்புகள் margin-bottom: .5remமற்றும் பத்திகள் சேர்க்கப்பட்டுள்ளன .margin-bottom: 1rem

தலைப்பு	உதாரணமாக
`<h1></h1>`	h1. பூட்ஸ்ட்ராப் தலைப்பு
`<h2></h2>`	h2. பூட்ஸ்ட்ராப் தலைப்பு
`<h3></h3>`	h3. பூட்ஸ்ட்ராப் தலைப்பு
`<h4></h4>`	h4. பூட்ஸ்ட்ராப் தலைப்பு
`<h5></h5>`	h5. பூட்ஸ்ட்ராப் தலைப்பு
`<h6></h6>`	h6. பூட்ஸ்ட்ராப் தலைப்பு

பட்டியல்கள்

அனைத்து பட்டியல்களும்- <ul>, <ol>, மற்றும் <dl>-அவை margin-topநீக்கப்பட்டவை மற்றும் a margin-bottom: 1rem. உள்ளமைக்கப்பட்ட பட்டியல்கள் இல்லை margin-bottom.

லோரெம் இப்சம் டோலர் சிட் அமெட்
Consectetur adipiscing elit
முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
நுல்ல வோழுட்பட் அழிகம் வேலிட்
- Phasellus iaculis neque
- புருஸ் சோடேல்ஸ் அல்ட்ரிசிஸ்
- வெஸ்டிபுலம் லாரீட் போர்டிட்டர் செம்
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
இப்போது நான் உட்கார்ந்து இருக்கிறேன்
Eget porttitor lorem

லோரெம் இப்சம் டோலர் சிட் அமெட்
Consectetur adipiscing elit
முழு எண் மோலஸ்டி லோரெம் மற்றும் மாசா
ப்ரீடியம் நிஸ்ல் அலிக்வெட்டில் வசதி
நுல்ல வோழுட்பட் அழிகம் வேலிட்
Faucibus porta lacus fringilla vel
இப்போது நான் உட்கார்ந்து இருக்கிறேன்
Eget porttitor lorem

எளிமையான ஸ்டைலிங், தெளிவான படிநிலை மற்றும் சிறந்த இடைவெளி ஆகியவற்றிற்கு, விளக்கப் பட்டியல்கள் புதுப்பிக்கப்பட்டுள்ளன margin. க்கு <dd>மீட்டமைத்து சேர்க்கவும் . கள் தடித்தவை .margin-left0margin-bottom: .5rem<dt>

விளக்க பட்டியல்கள்: விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.
யூயிஸ்மோட்: வெஸ்டிபுலம் ஐடி லிகுலா போர்டா ஃபெலிஸ் யூயிஸ்மோட் செம்பர் எகெட் லாசினியா ஓடியோ செம்.; டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ்.
மலேசுடா போர்டா: Etiam porta sem malesuada Magna mollis euismod.

முன் வடிவமைக்கப்பட்ட உரை

உறுப்பு அகற்றப்பட்டு அதன் அலகுகளைப் பயன்படுத்த <pre>மீட்டமைக்கப்பட்டது .margin-topremmargin-bottom

.உதாரணம்-உறுப்பு {
  விளிம்பு-கீழ்: 1ரெம்;
}

அட்டவணைகள்

அட்டவணைகள் ஸ்டைல் <caption>கள், சரிவு பார்டர்கள், மற்றும் text-alignமுழுவதும் சீரான உறுதி. பார்டர்கள், திணிப்பு மற்றும் பலவற்றிற்கான கூடுதல் மாற்றங்கள் வகுப்பில் வருகின்றன.table .

இது ஒரு எடுத்துக்காட்டு அட்டவணை, இது உள்ளடக்கங்களை விவரிக்க அதன் தலைப்பு.
அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு	அட்டவணை தலைப்பு
அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்
அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்
அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்	அட்டவணை செல்

படிவங்கள்

எளிமையான அடிப்படை பாணிகளுக்காக பல்வேறு வடிவ கூறுகள் மறுதொடக்கம் செய்யப்பட்டுள்ளன. மிகவும் குறிப்பிடத்தக்க சில மாற்றங்கள் இங்கே:

<fieldset>களுக்கு எல்லைகள், திணிப்பு அல்லது விளிம்பு இல்லை, எனவே அவை தனிப்பட்ட உள்ளீடுகள் அல்லது உள்ளீடுகளின் குழுக்களுக்கு ரேப்பர்களாக எளிதாகப் பயன்படுத்தப்படலாம்.
<legend>புலங்கள் போன்ற s, வகைகளின் தலைப்பாகக் காட்டப்படும் வகையில் மறுசீரமைக்கப்பட்டுள்ளன.
<label>கள் பயன்படுத்த display: inline-blockஅனுமதிக்கும் marginவகையில் அமைக்கப்பட்டுள்ளது.
<input>s, <select>s, <textarea>s மற்றும் <button>s ஆகியவை இயல்பாக்கம் மூலம் குறிப்பிடப்படுகின்றன, ஆனால் மறுதொடக்கம் அவற்றின் marginமற்றும் தொகுப்புகளையும் நீக்குகிறது line-height: inherit.
<textarea>கிடைமட்ட மறுஅளவிடல் பெரும்பாலும் பக்க தளவமைப்பை "முறிக்கிறது" என்பதால் கள் செங்குத்தாக மட்டுமே மறுஅளவிடத்தக்கதாக மாற்றியமைக்கப்படுகின்றன.

இந்த மாற்றங்கள் மற்றும் பல, கீழே காட்டப்பட்டுள்ளன.

உதாரண புராணம்

எடுத்துக்காட்டு உள்ளீடு

எடுத்துக்காட்டு தேர்வு

இந்த தேர்வுப்பெட்டியை சரிபார்க்கவும்

விருப்பம் ஒன்று இது மற்றும் அது விருப்பம் இரண்டு என்பது இந்த ஆடம்பரமான படிவக் கட்டுப்பாடுகளின் போர்வையை நிரூபிக்க மிக நீண்டது. விருப்பம் மூன்று முடக்கப்பட்டுள்ளது

எடுத்துக்காட்டு உரைப்பகுதி

உதாரணம் தேதி

எடுத்துக்காட்டு நேரம்

எடுத்துக்காட்டு வெளியீடு 100

மற்ற கூறுகள்

முகவரி

இலிருந்து உலாவி இயல்புநிலையை மீட்டமைக்க <address>உறுப்பு புதுப்பிக்கப்பட்டது font-style. இப்போது மரபுரிமையாகவும் சேர்க்கப்பட்டுள்ளது. கள் அருகிலுள்ள மூதாதையருக்கான தொடர்புத் தகவலை வழங்குவதற்காக (அல்லது முழு வேலை அமைப்பு). உடன் வரிகளை முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும் .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

முழு பெயர்
[email protected]

தொகுதி மேற்கோள்

marginபிளாக்கோட்களில் இயல்புநிலை , எனவே மற்ற உறுப்புகளுடன் மிகவும் சீரானதாக 1em 40pxஅதை மீட்டமைக்கிறோம் .0 0 1rem

லோரெம் இப்சம் டோலர் சிட் அமெட், கன்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்கள் ஒரு முன்னும் பின்னும்.

மூலத் தலைப்பில் பிரபலமான ஒருவர்

இன்லைன் கூறுகள்

உறுப்பு <abbr>பத்தி உரையில் தனித்து நிற்க அடிப்படை ஸ்டைலிங் பெறுகிறது.

Nulla attr vitae elit libero, a pharetra ague.

சுருக்கம்

cursorசுருக்கத்தின் இயல்புநிலை text, எனவே pointerஉறுப்பைக் கிளிக் செய்வதன் மூலம் தொடர்பு கொள்ள முடியும் என்பதைத் தெரிவிக்க அதை மீட்டமைக்கிறோம்.

சில விவரங்கள்

விவரங்கள் பற்றிய கூடுதல் தகவல்.

இன்னும் கூடுதலான விவரங்கள்

விவரங்களைப் பற்றிய கூடுதல் விவரங்கள் இங்கே உள்ளன.

HTML5 `[hidden]`பண்புக்கூறு

HTML5 ஆனது ஒரு புதிய உலகளாவிய பண்புக்கூறை[hidden] சேர்க்கிறது , இது display: noneமுன்னிருப்பாக வடிவமைக்கப்பட்டுள்ளது. PureCSS இலிருந்து ஒரு யோசனையைப் பெறுவது, தற்செயலாக மேலெழுதப்படுவதைத் [hidden] { display: none !important; }தடுக்க உதவுவதன் மூலம் இந்த இயல்புநிலையை மேம்படுத்துகிறோம் . displayIE10 ஆல் பூர்வீகமாக ஆதரிக்கப்படவில்லை என்றாலும் [hidden], எங்கள் CSS இல் உள்ள வெளிப்படையான அறிவிப்பு அந்தச் சிக்கலைச் சமாளிக்கிறது.

<input type="text" hidden>

jQuery இணக்கமின்மை

[hidden]$(...).hide()jQuery மற்றும் $(...).show()முறைகளுடன் இணங்கவில்லை . எனவே, தனிமங்களை [hidden]நிர்வகிப்பதற்கான பிற நுட்பங்களை நாங்கள் தற்போது குறிப்பாக அங்கீகரிக்கவில்லை .display

ஒரு தனிமத்தின் தெரிவுநிலையை displayமாற்றுவதற்கு, அது மாற்றியமைக்கப்படவில்லை மற்றும் ஆவணத்தின் ஓட்டத்தை உறுப்பு இன்னும் பாதிக்கலாம், அதற்கு பதிலாக .invisibleவகுப்பைப் பயன்படுத்தவும்.