Notepad හැඩගැන්වීම CSS සමඟ වෙබ් පිටුව නිර්මාණය කරයි

10 න් 01

CSS ස්ටයිල් පත්රය සාදන්න

HTML සඳහා වෙනමම පෙළ ගොනුවක් සාදා ගත් ආකාරයටම, CSS සඳහා පෙළ ගොනුවක් සාදනු ඇත. ඔබට මෙම ක්රියාවලිය සඳහා රූප අවශ්ය නම් කරුණාකර පළමුවන නිබන්ධනය බලන්න. Notepad හි ඔබේ CSS ශෛල පත්රය සෑදීමට පියවර මෙහි දැක්වේ:

1. හිස් කවුළුවක් ලබා ගැනීම සඳහා Notepad ගොනුව තුල> නව තුල තෝරන්න
2. ගොනුව තෝරන්න ලෙස CSS ලෙස ගොනුව සුරකින්න ...
3. ඔබගේ දෘඪ තැටියේ My_website ෆෝල්ඩරය වෙත යන්න
4. "සියලු ආකාරයේ ලිපිගොනු" ලෙස වෙනස් කරන්න "වර්ගය ලෙස සුරකින්න"
5. ඔබේ ගොනුව "styles.css" යන්න (අත්පිටපත් අත්හැර) සුරකින්න ක්ලික් කරන්න

10 න් 02

ඔබගේ HTML හි CSS ස්ටයිල් පත්රය සම්බන්ධ කරන්න

ඔබේ වෙබ් අඩවියේ ශෛලිය පත්රයක් ලබා ගත් පසු, ඔබ එය වෙබ් පිටුවට එක් කිරීමට අවශ්ය වනු ඇත. මෙය කිරීමට ඔබ සබැඳි ටැගය භාවිතා කරයි. ඔබගේ සුරතලුන්ගේ ටැග් තුළ ඕනෑම තැනක පහත සබැඳිය ටැග් එක ලියන්න:

03 සිට 10 දක්වා

Page Margins

ඔබ වෙනත් බ්රවුසර් සඳහා XHTML ලියන විට, ඔබ ඉගෙන ගනු ඇති එක් දෙයක් වනුයේ, ඒවා සියල්ල ප්රදර්ශනය කරන ආකාරය පිළිබඳ විවිධ ආන්තික සහ නීති තිබේ. බොහෝ වෙබ් බ්රව්සර වල ඔබගේ වෙබ් අඩවිය සමාන බව සහතික කිරීමට හොඳම ක්රමය වන්නේ බ්රවුසරය වැනි දේවල් තෝරා ගැනීමට බ්රවුසරයේ තේරීමට.

පෙළපොත් වටා අමතර පැල්ලමක් හෝ මායිම් නොමැතිව ඉහළ වම් කෙළවරේ මගේ පිටු ආරම්භ කිරීමට මා කැමතිය. මම අන්තර්ගතයේ ඇලවීමට යන්නේ වුවද, මම ශුන්ය අගයට තැබූ අතර මම එම හිස් ස්ලයිට් එකෙන් ආරම්භ කරමි. මෙය සිදු කිරීම සඳහා, ඔබගේ styles වෙත පහත සඳහන් දෑ එකතු කරන්න: css ලේඛනය:

html, body {
ආන්තික: 0px;
වැටීම: 0px;
දේශසීමා: 0px;
වමේ: 0px;
ඉහළ: 0px;
}}

04 න් 10

පිටුවෙහි ඇති අකුරු වෙනස් කිරීම

ඔබට වෙබ් පිටුවකට මාරු කිරීමට ඔබට අවශ්ය වනු ඇත. වෙබ් පිටුවක පෙරනිමි ෆොන්ටය අවලස්සන විය හැකි අතර එය ඇත්ත වශයෙන්ම වෙබ් බ්රවුසරය වේ, එබැවින් ඔබට අකුරු නිර්වචනය නොකළහොත්, ඔබගේ පිටුව පෙනෙන පරිදි ඔබ සැබැවින්ම නොදන්නාහ.

සාමාන්යයෙන් ඔබට ඡේදවල අකුරු හෝ සමහර විට මුළු ලියවිල්ලම අකුරු මාරු කළ හැකිය. මෙම අඩවියේ ශීර්ෂය සහ ඡේදයේ මට්ටමේ අකුරු අර්ථ දක්වනු ලැබේ. ඔබේ ශෛලියට පහත සඳහන් දෑ එකතු කරන්න.

p, li {
අකුරු: 1em Arial, Helvetica, sans-serif;
}}
h1 {
අකුරු: 2em Arial, Helvetica, sans-serif;
}}
h2 {
අකුරු: 1.5em Arial, Helvetica, sans-serif;
}}
h3 {
අකුරු: 1.25em Arial, Helvetica, sans-serif;
}}

මම 1em සමඟ ඡේදයන් සහ ලැයිස්තු අයිතම සඳහා මගේ මූලික ප්රමාණය ලෙස ආරම්භ කර පසුව මගේ සිරස්තලය සඳහා විශාලත්වය නියම කිරීමට භාවිතා කළේය. H4 ට වඩා ශීර්ෂයට වඩා ශීර්ෂ පාඨයක් භාවිතා කිරීමට මා අපේක්ෂා නොකරනු ඇත. එහෙත් ඔබට එය සැලසුම් කිරීමට අවශ්ය වනු ඇත.

10 න් 05

ඔබේ සබදතා වඩාත් උනන්දුවීම

සබැඳි සඳහා පෙරනිමි වර්ණ නොපෙනෙන සහ සංචාරයට සම්බන්ධ වූ සම්බන්ධතා සඳහා නිල් සහ දම් වර්ණයන් වේ. මෙය සම්මතය වන නමුත්, ඔබගේ පිටු වල වර්ණ සංයුතිය ගැලපෙන්නේ නැති නිසා, එය වෙනස් කරන්න. ඔබගේ styles.css ගොනුවේ පහත දැක්වෙන ලෙස එක් කරන්න:

සබැඳියක් {
font-family: Arial, Helvetica, sans-serif;
වර්ණය: # FF9900;
පාඨමය අලංකාරය: යටි ඉරි;
}}
: {
වර්ණය: # FFCC66;
}}
: අසල {
පසුබිම: #FFFFCC;
font-weight: bold;
}}

මම සබැඳි මාදිලි තුනක් සකසා ඇත, a: පෙරනිමිය ලෙස පෙරනිමි, a: එය බැලූ විට බැලීමට ගිය විට, මම වර්ණය වෙනස් කරන්නෙමි: a. ඒ සමඟ: මෙම සබැඳිය පසුබිම් වර්ණය ලබා ඇති අතර එය ක්ලික් කළ යුතු සබැඳිය අවධාරණය කිරීමට නිර්භීතව යන්න.

10 න් 06

ගමනාගමන අංශය හැඩගැන්වීම

අපි යාන්ත්රණය (id = "nav") පළමු කොටසේ HTML එකෙහි තැබුවෙමු, අපි මුලින්ම එය විලාසිතාවට යොදවන්නෙමු. අපි එය පුළුල් කළ යුතු ආකාරය සහ දකුණු පස ඇති පුළුල් ආන්තිකයක් තැබිය යුතු අතර එය ප්රධාන පෙළට එය එරෙහිව නැගී සිටීමට නොහැකි වනු ඇත. මම එය වටේ මායිමක් ද තැබුවා.

ඔබගේ CSS වෙත පහත CSS එකතු කරන්න. CSS ලේඛනය:

#nav {
පළල: 225px;
තීරු-හරි: 15px;
මායිම්: මධ්යම solid # 000000;
}}
#nav li {
ලැයිස්තුව-style: none;
}}
ෆෝටර් {
font-size: .75em;
පැහැදිලි ය:
පළල: 100%;
පෙළ-align: මධ්ය;
}}

ලැයිස්තු-මාදිලියේ දේපළ නෞකාව තුල ලැයිස්තුගත කර ඇති ලැයිස්තුවේ කිසිදු උණ්ඩ හෝ සංඛ්යාවක් නොමැතිව, සහ .කූටරය කුඩා කොටසකට සීමා කර කේන්ද්රගත කොට ඇති.

07 සිට 10 දක්වා

ප්රධාන කොටස ස්ථානගත කිරීම

ඔබේ ප්රධාන කොටස නිරපේක්ෂ ස්ථානගත කිරීම සහිතව ස්ථානගත කිරීමෙන් ඔබට එය ඔබේ වෙබ් පිටුව මත රැඳී සිටීමට අවශ්ය ස්ථානයේම රැඳී සිටින බව සහතික විය හැකිය. විශාල අධීක්ෂකයන් සැපයිමට මා 800px පුරවා ඇති නමුත් කුඩා තිරයක් ඔබට තිබේ නම්, එම පටු පැත්තෙන් ඔබට අවශ්ය විය හැකිය.

ඔබේ ස්ටයිල්ස් තුළ පහත දැක්වෙන ලිපිගොනු ලියන්න:

#main {
පළල: 800px;
ඉහළ: 0px;
පිහිටීම: නිරපේක්ෂ
වමේ: 250px;
}}

10 න් 08

ඔබේ ඡේදවල හැඩගැසීම

මම දැනටමත් ඉහත අකුරු අකුරු සැකසූ බැවින්, සෑම ඡේදයකම එය වඩා හොඳින් කැපීමට එක් එක් ඡේදයට අමතර අමතර "කකුලක්" දෙන්න. රූපය පමණක් පමණක් නොව, ඡේදය ඉස්මතු කර ඇති ඉහළ කොටසක මායිමක් දමමින් මෙය සිදු කලේය.

ඔබේ ස්ටයිල්ස් තුළ පහත දැක්වෙන ලිපිගොනු ලියන්න:

පිතිකරු {
මායිම්-ඉහළ: ඝන ඝන # FFCC00;
}}

මම ඒ අනුව සියලු ඡේද නිශ්චිතව අර්ථ දැක්වීම වෙනුවට "උණුසුම" ලෙස එය කිරීමට එය තීරණය කළා. මේ ආකාරයෙන්, මම ඉහළ කහ රේඛාවකින් තොරව ඡේදයක් ලබා ගැනීමට අවශ්ය නම්, මම ඡේදයේ ටැග් එකේ class = "topline" අත්හැර දැමිය හැකි අතර එය ඉහළ මායිම නොලැබේ.

09 න් 10

රූප හැඩගැන්වීම

රූප සාමාන්යයෙන් ඒවා වටා මායිමක් ඇත, රූපය සබැඳියක් නො වේ නම් මෙය සැමවිටම නොපවතී, නමුත් ස්වයංක්රීයව මායිම ස්වයංක්රියවම ඉවත් කරනු ලැබේ. මෙම වර්ණ විලාසය සඳහා, මම "ශ්රේෂ්ඨතම" පංතිය නිර්මාණය කර ඇති අතර ලේඛනයේ ඇති බොහෝ ඡායාරූප මෙම පන්තියේ කොටසක් වේ.

මෙම පින්තූරයේ අනෙක් විශේෂ කොටස වන්නේ එහි පිටුවේ පිහිටීමයි. ඔවුන්ට අවශ්ය පරිදි ඒවාට පෙළගැස්මක් නොමැතිව ඔවුන් සිටි ඡේදයේ කොටසක් විය. මෙය කිරීමට සරලතම ක්රමය නම් float CSS දේපල භාවිතා කිරීමයි.

ඔබේ ස්ටයිල්ස් තුළ පහත දැක්වෙන ලිපිගොනු ලියන්න:

#main img {
float: වම්;
margin-right: 5px;
margin-bottom: 15px;
}}
. නොබෝර්ඩ් {
දේශසීමා: 0px කිසිවක්;
}}

ඔබට දැකිය හැකි පරිදි, ඡේදයන් අසල ඇති පාවෙන ලද අකුරු වලට ඒවා නොලැබෙන බවට වග බලා ගැනීම සඳහා රූප මත ඇති ආන්තික ගුණාංග ද තිබේ.

10 න් 10

දැන් ඔබේ සම්පූර්ණ පිටුව බලන්න

ඔබ CSS සුරක්ෂිත කරගත් පසු ඔබට ඔබගේ වෙබ් බ්රව්සරයේ සුරතල් සතුන්ගේ පිටු. මෙම පිටුවෙහි දැක්වෙන අයුරින් ඔබේ පිටුවට සමාන කළ යුතු අතර, පින්තූර පෙළ හා වම් පැත්තෙහි වම් පැත්තෙහි නිවැරදිව තැබිය යුතුය.

මෙම වෙබ් අඩවි සඳහා ඔබේ අභ්යන්තර පිටු සඳහා මෙම පියවර අනුගමනය කරන්න. ඔබගේ සංචාලනයේ සෑම පිටුවකටම එක් පිටුවක් තිබිය යුතුය.