ዳግማይ ምጅማር

ሪቦት፡ እኩብ ባእታ-ፍሉይ CSS ለውጢ ኣብ ሓደ ፋይል፡ kickstart Bootstrap ንምህናጽ ውቁብ፡ ቅኑዕን ቀሊልን መበገሲ መስመር ንምሃብ።

ኣብዚ ገጽ

ቅረብ

Reboot ኣብ Normalize ይሃንጽ፣ ንብዙሓት HTML ባእታታት ብመጠኑ ርእይቶ ዘለዎም ቅዲታት ብመምረጺ ባእታታት ጥራይ ብምጥቃም ይህብ። ተወሳኺ ቅዲ ምስ ክፍልታት ጥራይ እዩ ዝግበር። ንኣብነት ገለ <table>ቅዲታት ንዝቐለለ መበገሲ መስመር ዳግማይ ንጅምር ድሒርና ድማ .table, .table-bordered, ካልእን ንህብ።

ኣብ ሪቦት እንታይ ክትግለጽ ከም ዘለና ዝመረጽናሉ መምርሕታትናን ምኽንያታትናን ኣብዚ ኣለዉ፤

remገለ ናይ መርበብ ሓበሬታ ነባሪ ክብርታት ኣብ ክንዲ ems ንዝተመጣጠነ ርሕቀት ኣካላት s ንምጥቃም ኣዘምን ።
ካብ margin-top. ቀጥታዊ ወሰን ክፈርስ ይኽእል እዩ፣ እዚ ድማ ዘይተጸበናዮ ውጽኢት ከስዕብ ይኽእል። ካብኡ ዝዓቢ ግን፡ ሓደ ኣንፈት ናይ marginዝቐለለ ኣእምሮኣዊ ሞዴል እዩ።
ንዝቐለለ ምዕባይ ኣብ መላእ ዓቐናት መሳርሒ፡ ብሎክ ባእታታት rems ን margins ክጥቀሙ ይግባእ።
ኣዋጃት ናይ font-ተዛመድቲ ንብረታት ኣብ ዝተሓተ ደረጃ ምሓዝ፣ inheritብዝተኻእለ መጠን ተጠቐም።

ገጽ ነባሪ ይኸውን

እቶም <html>and <body>ባእታታት ዝሓሸ ገጽ-ስፍሕ ዝበለ ነባሪ ንምሃብ ይመሓየሹ። ብዝያዳ ብፍሉይ፤

እቲ box-sizingብዓለም ደረጃ ኣብ ነፍሲ ወከፍ ባእታ ተቐሚጡ ኣሎ-ሓዊስካን *::before፣ *::afterናብ border-box. እዚ ድማ ብሰንኪ ፓዲንግ ወይ ዶብ ካብቲ ዝተኣወጀ ስፍሓት ባእታ ፈጺሙ ከምዘይሓልፍ የረጋግጽ።
- font-sizeኣብቲ ፣ ዝኾነ መሰረት ኣይእወጅን <html>፣ ግን 16pxይግመት (ናይ መርበብ ሓበሬታ ነባሪ)። ኣብ ልዕሊ እቲ ንቐሊል ምላሽ ዝህብ ዓይነት-ምዕባይ ብመንገዲ ናይ ሚድያ ሕቶታት ኣብ ርእሲኡ ምርጫታት ተጠቀምቲ ብምኽባርን ዝያዳ ተበጻሒ ኣገባብ ብምርግጋጽን font-size: 1remይትግበር ። እዚ ናይ መርበብ ሓበሬታ ነባሪ ነቲ ተለዋዋጢ <body>ብምቕያር ክግለጽ ይኽእል ።$font-size-root
እቲ <body>ውን ዓለማዊ font-family, font-weight, line-height, ከምኡውን color. እዚ ድሒሩ ብገለ ቅርጺ ባእታታት ይውረስ ምእንቲ ዘይምስምማዕ ቅርጺ ፊደላት ይከላኸል።
ንውሕስነት፡ እቲ <body>has a declared background-color, defaulting to #fff.

ተወላዲ ቅርጺ ፊደል ቁጽሪ

ቡትስትራፕ ኣብ ነፍሲ ወከፍ መሳርሒን ኦኤስን ንዝበለጸ ጽሑፍ ምቕራብ “native font stack” ወይ “system font stack” ይጥቀም። እዞም ናይ ስርዓት ቅርጺ ፊደላት ብፍሉይ ናይ ሎሚ መሳርሒታት ኣብ ግምት ብምእታው ዝተነድፉ ኮይኖም፡ ኣብ ስክሪናት ዝተመሓየሸ ኣቀራርባ፡ ተለዋዋጢ ቅርጺ ፊደላት ዝድግፉን ካልእን ሒዞም እዮም። ብዛዕባ ተወላዲ ቅርጺ ፊደላት ኣብዚ ጽሑፍ መጽሔት ስማሽን ዝያዳ ኣንብብ ።

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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;

ኣስተውዕል፡ እቲ ቁጽሪ ቅርጺ ፊደላት ኢሞጂ ቅርጺ ፊደላት ስለዘጠቓልል፡ ብዙሓት ልሙዳት ምልክት/ዲንግባት ዩኒኮድ ፊደላት ከም ብዙሕ ሕብሪ ዘለዎም ስእላዊ ስእልታት ክቐርቡ እዮም። መልክዖም ከከምቲ ኣብቲ ናይቲ መርበብ ሓበሬታ/መድረኽ ተወላዲ ኢሞጂ ቅርጺ ዝጥቀመሉ ቅዲ ክፈላለ እዩ፡ ብዝኾነ colorቅዲ CSS ድማ ኣይክጽለዉን እዮም።

እዚ ኣብቲን ብኣውቶማቲክ ብዓለም ደረጃ ኣብ ምሉእ ቡትስትራፕ ይውረስን font-family። <body>ነቲ global ንምቕያር font-family፣ $font-family-baseBootstrap ኣዘምንን ዳግማይ ኣጠቓልልን።

ኣርእስትታትን ሕጡበ-ጽሑፋትን

ኩሎም ናይ ርእሲ ባእታታት-ንኣብነት <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ሓደ margin-bottom: 1rem. ዝተሰቕሉ ዝርዝር margin-bottom. padding-leftነቲ on <ul>ን <ol>elements ን እውን ዳግማይ ኣቐሚጥናዮ ኣለና ።

ኩሎም ዝርዝራት ላዕለዋይ ወሰንኦም ተኣልዮም ኣለዉ።
ታሕተዋይ ወሰኖም ድማ ንቡር ኮይኑ
ዝተሰፍሩ ዝርዝር ታሕተዋይ ወሰን የብሎምን።
- በዚ መንገዲ እዚ ዝያዳ ምዕሩይ መልክዕ ኣለዎም።
- ብፍላይ ዝያዳ ዝርዝር ነገራት ምስ ዝስዕብ
እቲ ጸጋማይ መሸፈኒ እውን ዳግማይ ተሰሪዑ ኣሎ።

ስርዓት ዘለዎ ዝርዝር ኣብዚ ኣሎ።
ምስ ውሑዳት ዝርዝር ነገራት
ሓደ ዓይነት ሓፈሻዊ መልክዕ ኣለዎ።
ከምቲ ዝሓለፈ ዘይተሰርዐ ዝርዝር

ንዝቐለለ ቅዲ፡ ንጹር ስርዓተ-መሰረትን ዝሓሸ ርሕቀትን፡ ዝርዝር መግለጺታት ዝተመሓየሹ margins ኣለዎም። <dd>s margin-leftናብ ዳግማይ 0ምትካልን ምውሳኽን margin-bottom: .5rem. <dt>s ብድሙቕ ተጻሒፉ ኣሎ .

መግለጺ ዝርዝር: ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ቃል: ትርጉም ናይቲ ቃል።; ካልኣይ ትርጉም ናይ ተመሳሳሊ ቃል።
ካልእ ቃል: ትርጉም ናይዚ ካልእ ቃል።

ናይ ውሽጢ መስመር ኮድ

ኣብ ውሽጢ መስመር ዝርከቡ ቁንጣሮ ኮድ ብ <code>. ካብ ናይ HTML ኩርናዕ ቅንጥብጣብ ምህዳምካ ኣረጋግጽ።

ንኣብነት <section>ከም ውሽጢ መስመር ክጥቕለል ይግባእ።

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ኮድ ብሎክስ

<pre>ንብዙሓት መስመራት ኮድ s ተጠቐም ። ሕጂ’ውን፡ ንግቡእ ምቕራብ ኣብቲ ኮድ ካብ ዝኾነ ናይ ኩርናዕ ቅንጥብጣብ ምህዳምካ ኣረጋግጽ። እቲ <pre>ባእታ ናቱ ንምእላይን ን ናቱ ኣሃዱታት margin-topንምጥቃምን ዳግማይ ይስራዕ ።remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

ተለዋዋጢ ረቛሒታት

ንተለዋዋጢ ረቛሒታት ንምምልካት ነቲ <var>መለለዪ ተጠቐም።

y = m x + ለ ዝብል ጽሑፍ ኣሎ።

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ናይ ተጠቃሚ ምእታው

<kbd>ብተለምዶ ብመንገዲ ቁልፊ ሰሌዳ ዝኣቱ ምእታው ንምምልካት the ተጠቐም ።

ማህደራት ንምቕያር cd፡ ስም ናይቲ ማህደር ስዒቡ ጽሓፍ።
ቅጥዕታት ንምእራም፡ ንጽቀጥ ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

ናሙና ውጽኢት

ካብ ሓደ ፕሮግራም ዝመጽእ ናሙና ውጽኢት ንምምልካት ነቲ <samp>መለለዪ ተጠቐም።

እዚ ጽሑፍ እዚ ከም ናሙና ውጽኢት ካብ ፕሮግራም ኮምፒተር ክሕሰብ ዝዓለመ እዩ።

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ሰደቓታት

ሰደቓታት ቁሩብ ምስ ቅዲ <caption>s ይስተኻኸሉ፣ ዶባት ይፈርሱ፣ ኣብ text-alignምሉእ ድማ ቅኑዕነት የረጋግጹ። ተወሳኺ ለውጢ ንዶባት፡ መሸፈኒን ካልእን ምስቲ ክፍሊ .tableይመጽእ .

እዚ ኣብነት ዝኾነ ሰደቓ እዩ፣ እዚ ድማ ትሕዝቶኡ ንምግላጽ መግለጺኡ እዩ።
ኣርእስቲ ሰደቓ	ኣርእስቲ ሰደቓ	ኣርእስቲ ሰደቓ	ኣርእስቲ ሰደቓ
ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ
ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ
ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ	ዋህዮ ሰደቓ

ቅጥዕታት

ዝተፈላለዩ ናይ ቅጥዒ ባእታታት ንዝቐለሉ መሰረታዊ ቅዲታት ዳግማይ ተጀሚሮም ኣለዉ። ገለ ካብቶም ኣዝዮም ጐሊሖም ዝረኣዩ ለውጥታት እነሆ፤

<fieldset>s ዶባት፣ መሸፈኒ፣ ወይ ወሰን ስለዘይብሎም ብቐሊሉ ንውልቀ እታዎታት ወይ ንጉጅለ እታዎታት ከም መጠቕለሊ ክጥቀሙ ይኽእሉ።
<legend>s ከም ስብስባት ሜዳታት እውን ከም ኣርእስቲ ዓይነታት ንኽረኣዩ ዳግማይ ቅዲ ተገይሩሎም ኣሎ።
<label>s ንኽትግበር display: inline-blockንኽፍቀድ marginናብ ተቐሚጦም ኣለዉ።
<input>s, <select>s, <textarea>s, and <button>s ዝበዝሑ ብ Normalize እዮም ዝድህሰሱ፣ Reboot ግን ናቶምን ይሰርዖምን የወግድ margin፣ line-height: inheritንሱ እውን።
<textarea>s ብኣግማድ ምቕያር ዓቐን መብዛሕትኡ ግዜ ንኣቀማምጣ ገጽ “ዝሰብሮ” ስለዝኾነ ብቐጥታ ዓቐኑ ጥራይ ክኸውን ይቕየር።
<button>sን <input>መጠወቒን ባእታታት cursor: pointerመዓስ ኣለዎም :not(:disabled).

እዚ ለውጥታትን ካልእን ኣብ ታሕቲ ተገሊጹ ኣሎ።

ኣብነት ኣፈ ታሪኽ

ኣብነት ምእታው

ኣብነት ኢመይል

ኣብነት ቴሌፎን።

ኣብነት url

ኣብነት ቁጽሪ

ኣብነት ምድላይ

ኣብነት ደረጃ

ኣብነት ፋይል ምእታው

ኣብነት ምምራጽ

ነዚ ሳጹን ምልክት ግበር

ሓደ ኣማራጺ እዚን እቲን እዩ። ኣማራጺ ክልተ ካልእ ንሱ ውን ሱፐር ነዊሕ ኮይኑ ምጥቕላል ናይዞም ፋንሳዊ ቅጥዒ ቁጽጽር ንምግላጽ እዩ። ኣማራጺ ሰለስተ ተሰናኺሉ ኣሎ።

ኣብነት ናይ ጽሑፍ ከባቢ

ኣብነት ዕለት

ኣብነት ግዜ

ኣብነት ምልክት ቃል

ኣብነት ዕለትሰዓት-ከባብያዊ

ኣብነት ሰሙን

ኣብነት ወርሒ

ኣብነት ሕብሪ

ኣብነት ውጽኢት 100

ዕለት & ሕብሪ ምእታው ደገፍ

ዕለት ምእታው ብኹሎም ዳህሰስቲ ማለት ሳፋሪ ምሉእ ብምሉእ ከምዘይድገፉ ኣብ ግምት ኣእትዉ ።

ኣብ መጠወቒታት ዝርከቡ ጠቋሚታት

role="button"ዳግማይ ምጅማር ነቲ ነባሪ መመልከቲ ናብ ንምቕያር ዝሕግዝ ምምሕያሽ የጠቓልል pointer። ባእታታት መስተጋብራዊ ምዃኖም ንምምልካት ንምሕጋዝ ነዚ ባህሪ ኣብ ባእታታት ወስኸሉ። እዚ ተራ እዚ ንባእታታት ኣድላዪ ኣይኮነን <button>፣ ንሳቶም ድማ ናይ ገዛእ ርእሶም cursorለውጢ ይረኽቡ።

ዘይመጠወቒ ባእታ መጠወቒ

<span role="button" tabindex="0">Non-button element button</span>

ዝተፈላለዩ ባእታታት

አድራሻ

እቲ ባእታ ነቲ ናይ መርበብ ሓበሬታ ነባሪ ካብ ናብ <address>ዳግማይ ንምስራዕ ይመሓየሽ ። ሕጂ እውን ተወሪሱ ኣሎ፣ ተወሰኸ ድማ ኣሎ። s ንዝቐረበ ኣቦሓጎ (ወይ ምሉእ ኣካል ስራሕ) ርክብ ሓበሬታ ንምቕራብ እዮም። መስመራት ብ . ብምውዳእ ቅርጺ ምዕቃብ ።font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ትዊተር፡ ኢንክ
1355 ማርኬት ስትሪት፡ ሱት 900
ሳን ፍራንሲስኮ፡ ሲኤ 94103
ፒ ፡ (123) 456-7890

ምሉእ ስም
[email protected]

ብሎክኮት ምግባር

እቲ ነባሪ marginኣብ blockquotes እዩ ፣ ስለዚ ምስ ካልኦት ባእታታት ዝያዳ ዝሰማማዕ ነገር ንምርካብ 1em 40pxንሱ ናብ ዳግማይ ንሰርዖ።0 0 1rem

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

ኣብ ውሽጢ መስመር ዝርከቡ ባእታታት

እቲ <abbr>ባእታ ኣብ መንጎ ጽሑፋት ሕጡበ-ጽሑፍ ፍሉይ ንኽኸውን መሰረታዊ ቅዲ ይረክብ።

ኑላ ኣትሪ ቪታ ኤሊት ሊበሮ፡ ሓደ ፋሬትራ ኣውጉ።

መጠቃለሊ

እቲ ነባሪ cursorኣብ ጽማቕ text፣ ስለዚ pointerነቲ ባእታ ኣብ ልዕሊኡ ብምጥዋቕ ክራኸብ ከም ዝኽእል ንምሕላፍ ንሱ ናብ ዳግማይ ንሰርዖ።

ገለ ዝርዝራት

ተወሳኺ ሓበሬታ ብዛዕባ ዝርዝር።

ካብኡ ንላዕሊ ዝርዝራት

ብዛዕባ ዝርዝራት ዝያዳ ዝርዝር ሓበሬታ ኣብዚ ኣሎ።

HTML5 `[hidden]`ዝብል ባህሪ

HTML5 ሓድሽ ዓለማዊ ባህሪ[hidden]display: none ይውስኽ ፣ እዚ ድማ ከም ነባሪ ቅዲ ኣለዎ ። ካብ PureCSS ሓሳብ ተለቂሕና ፣ ብጌጋ ከይግለጽ [hidden] { display: none !important; }ንምክልኻል ንምሕጋዝ ብምግባር ነዚ ነባሪ ነመሓይሽ display።

<input type="text" hidden>

jQuery ዘይምስምማዕ

[hidden]$(...).hide()ምስ jQuery's ን $(...).show()ሜላታትን ዝሰማማዕ ኣይኮነን ። ስለዚ ኣብዚ እዋን እዚ ብፍላይ [hidden]ኣብ ልዕሊ ካልኦት ሜላታት ምምሕዳር displayናይ ባእታታት ኣይንድግፍን ኢና።

ርኡይነት ናይ ሓደ ባእታ ንምቕያር ጥራይ፣ ማለት ናቱ displayኣይተቐየረን እቲ ባእታ ጌና ንዋሕዚ ናይቲ ሰነድ ክጸልዎ ይኽእል እዩ፣ ኣብ ክንድኡ ነቲ .invisibleክፍሊ ተጠቐም ።