மறுதொடக்கம்
மறுதொடக்கம், ஒரு கோப்பில் உள்ள உறுப்பு-குறிப்பிட்ட CSS மாற்றங்களின் தொகுப்பு, கிக்ஸ்டார்ட் பூட்ஸ்டார்ப் ஒரு நேர்த்தியான, சீரான மற்றும் எளிமையான அடிப்படையை உருவாக்குவதற்கு வழங்குகிறது.
அணுகுமுறை
மறுதொடக்கம் இயல்பாக்கத்தின் மீது உருவாக்குகிறது, உறுப்பு தேர்வாளர்களை மட்டுமே பயன்படுத்தி ஓரளவு கருத்துடைய பாணிகளுடன் பல HTML கூறுகளை வழங்குகிறது. கூடுதல் ஸ்டைலிங் வகுப்புகளுடன் மட்டுமே செய்யப்படுகிறது. எடுத்துக்காட்டாக, <table>
எளிமையான அடிப்படைக்கு சில ஸ்டைல்களை மறுதொடக்கம் செய்து பின்னர் .table
, .table-bordered
, மற்றும் பலவற்றை வழங்குகிறோம்.
மறுதொடக்கத்தில் எதை மீற வேண்டும் என்பதைத் தேர்ந்தெடுப்பதற்கான எங்களின் வழிகாட்டுதல்கள் மற்றும் காரணங்கள் இங்கே:
- அளவிடக்கூடிய கூறு இடைவெளிக்கு
rem
sக்குப் பதிலாக s ஐப் பயன்படுத்த சில உலாவி இயல்புநிலை மதிப்புகளைப் புதுப்பிக்கவும் .em
- தவிர்க்கவும்
margin-top
. செங்குத்து விளிம்புகள் சரிந்து, எதிர்பாராத முடிவுகளைத் தரும். மிக முக்கியமாக, ஒற்றை திசையானதுmargin
எளிமையான மன மாதிரி. - சாதன அளவுகள் முழுவதும் எளிதாக அளவிடுவதற்கு, தொகுதி உறுப்புகள்
rem
sக்குmargin
s ஐப் பயன்படுத்த வேண்டும். - முடிந்தவரை பயன்படுத்தி , தொடர்புடைய சொத்துக்களின் அறிவிப்புகளை
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,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
எழுத்துரு அடுக்கில் ஈமோஜி எழுத்துருக்கள் இருப்பதால், பல பொதுவான சின்னம்/டிங்பேட் யூனிகோட் எழுத்துக்கள் பல வண்ண ஓவியங்களாக வழங்கப்படும். உலாவி/பிளாட்ஃபார்மின் சொந்த ஈமோஜி எழுத்துருவில் பயன்படுத்தப்படும் பாணியைப் பொறுத்து அவற்றின் தோற்றம் மாறுபடும், மேலும் அவை எந்த CSS color
பாணிகளாலும் பாதிக்கப்படாது.
இது பூட்ஸ்டார்ப் முழுவதும் உலகளாவிய ரீதியில் தானாகப் 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
.
- அனைத்து பட்டியல்களும் அவற்றின் மேல் விளிம்பு அகற்றப்பட்டுள்ளன
- மேலும் அவற்றின் கீழ் விளிம்பு இயல்பாக்கப்பட்டது
- உள்ளமைக்கப்பட்ட பட்டியல்களுக்கு கீழ் விளிம்பு இல்லை
- இந்த வழியில் அவர்கள் இன்னும் சீரான தோற்றத்தைக் கொண்டுள்ளனர்
- குறிப்பாக அதிகமான பட்டியல் உருப்படிகளைப் பின்தொடரும் போது
- இடது திணிப்பும் மீட்டமைக்கப்பட்டது
- ஆர்டர் செய்யப்பட்ட பட்டியல் இதோ
- சில பட்டியல் உருப்படிகளுடன்
- இது ஒட்டுமொத்த தோற்றத்தையும் கொண்டுள்ளது
- முந்தைய வரிசைப்படுத்தப்படாத பட்டியல்
எளிமையான ஸ்டைலிங், தெளிவான படிநிலை மற்றும் சிறந்த இடைவெளி ஆகியவற்றிற்கு, விளக்கப் பட்டியல்கள் புதுப்பிக்கப்பட்டுள்ளன margin
. க்கு <dd>
மீட்டமைத்து சேர்க்கவும் . கள் தடித்தவை .margin-left
0
margin-bottom: .5rem
<dt>
- விளக்க பட்டியல்கள்
- விதிமுறைகளை வரையறுக்க ஒரு விளக்கப் பட்டியல் சரியானது.
- கால
- கால வரையறை.
- அதே சொல்லுக்கான இரண்டாவது விளக்கம்.
- மற்றொரு சொல்
- இந்த மற்ற சொல்லுக்கான வரையறை.
முன் வடிவமைக்கப்பட்ட உரை
உறுப்பு அகற்றப்பட்டு அதன் அலகுகளைப் பயன்படுத்த <pre>
மீட்டமைக்கப்பட்டது .margin-top
rem
margin-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>
கிடைமட்ட மறுஅளவிடல் பெரும்பாலும் பக்க தளவமைப்பை "முறிக்கிறது" என்பதால் கள் செங்குத்தாக மட்டுமே மறுஅளவிடத்தக்கதாக மாற்றியமைக்கப்படுகின்றன.<button>
s மற்றும்<input>
பொத்தான் கூறுகள் எப்போதுcursor: pointer
இருக்கும்:not(:disabled)
.
இந்த மாற்றங்கள் மற்றும் பல, கீழே காட்டப்பட்டுள்ளன.
பொத்தான்களில் சுட்டிகள்
role="button"
மறுதொடக்கம் இயல்புநிலை கர்சரை மாற்றுவதற்கான மேம்பாட்டை உள்ளடக்கியது pointer
. கூறுகள் ஊடாடத்தக்கவை என்பதைக் குறிக்க உதவும் கூறுகளுடன் இந்தப் பண்புக்கூறைச் சேர்க்கவும். <button>
அவற்றின் சொந்த cursor
மாற்றத்தைப் பெறும் உறுப்புகளுக்கு இந்தப் பங்கு அவசியமில்லை .
<span role="button" tabindex="0">Non-button element button</span>
மற்ற கூறுகள்
முகவரி
இலிருந்து உலாவி இயல்புநிலையை மீட்டமைக்க <address>
உறுப்பு புதுப்பிக்கப்பட்டது font-style
. இப்போது மரபுரிமையாகவும் சேர்க்கப்பட்டுள்ளது. கள் அருகிலுள்ள மூதாதையருக்கான தொடர்புத் தகவலை வழங்குவதற்காக (அல்லது முழு வேலை அமைப்பு). உடன் வரிகளை முடிப்பதன் மூலம் வடிவமைப்பைப் பாதுகாக்கவும் .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 முழு பெயர்
[email protected]
தொகுதி மேற்கோள்
margin
பிளாக்கோட்களில் இயல்புநிலை , எனவே மற்ற உறுப்புகளுடன் மிகவும் சீரானதாக 1em 40px
அதை மீட்டமைக்கிறோம் .0 0 1rem
நன்கு அறியப்பட்ட மேற்கோள், தொகுதி மேற்கோள் உறுப்பில் உள்ளது.
இன்லைன் கூறுகள்
உறுப்பு <abbr>
பத்தி உரையில் தனித்து நிற்க அடிப்படை ஸ்டைலிங் பெறுகிறது.
சுருக்கம்
cursor
சுருக்கத்தின் இயல்புநிலை text
, எனவே pointer
உறுப்பைக் கிளிக் செய்வதன் மூலம் தொடர்பு கொள்ள முடியும் என்பதைத் தெரிவிக்க அதை மீட்டமைக்கிறோம்.
சில விவரங்கள்
விவரங்கள் பற்றிய கூடுதல் தகவல்.
இன்னும் கூடுதலான விவரங்கள்
விவரங்களைப் பற்றிய கூடுதல் விவரங்கள் இங்கே உள்ளன.
HTML5 [hidden]
பண்புக்கூறு
HTML5 ஆனது ஒரு புதிய உலகளாவிய பண்புக்கூறை[hidden]
சேர்க்கிறது , இது display: none
முன்னிருப்பாக வடிவமைக்கப்பட்டுள்ளது. PureCSS இலிருந்து ஒரு யோசனையைப் பெறுவது, தற்செயலாக மேலெழுதப்படுவதைத் [hidden] { display: none !important; }
தடுக்க உதவுவதன் மூலம் இந்த இயல்புநிலையை மேம்படுத்துகிறோம் . display
IE10 ஆல் பூர்வீகமாக ஆதரிக்கப்படவில்லை என்றாலும் [hidden]
, எங்கள் CSS இல் உள்ள வெளிப்படையான அறிவிப்பு அந்தச் சிக்கலைச் சமாளிக்கிறது.
<input type="text" hidden>
jQuery இணக்கமின்மை
[hidden]
$(...).hide()
jQuery மற்றும் $(...).show()
முறைகளுடன் இணங்கவில்லை . எனவே, தனிமங்களை [hidden]
நிர்வகிப்பதற்கான பிற நுட்பங்களை நாங்கள் தற்போது குறிப்பாக அங்கீகரிக்கவில்லை .display
ஒரு தனிமத்தின் தெரிவுநிலையை display
மாற்றுவதற்கு, அது மாற்றியமைக்கப்படவில்லை மற்றும் ஆவணத்தின் ஓட்டத்தை உறுப்பு இன்னும் பாதிக்கலாம், அதற்கு பதிலாக .invisible
வகுப்பைப் பயன்படுத்தவும்.