Makala ya Masomo

Mafunzo ya Kibase ya CSS

• Mafunzo ya CSS
• Muhtasari wa CSS
• Marefu wa CSS
• Muhtasari wa Vichaguli wa CSS
• Matumizi ya CSS
• Mwongozo wa CSS
• Vichaguli wa rangi ya CSS
• Vichaguli wa RGB wa CSS
• Vichaguli wa HEX wa CSS
• Vichaguli wa HSL wa CSS
• Mabaki ya CSS
• Mabaki ya Mifungu ya CSS
• Urejeo wa Mabaki ya CSS
• Ukimbaji wa Mabaki ya CSS
• Marefu wa Mabaki ya CSS ya Kifungu
• Mabaki ya CSS
• Ukubwa wa Mabaki ya CSS
• Vichaguli wa rangi ya Mabaki ya CSS
• Vichaguli wa Mabaki ya CSS ya kila ukosa
• Marefu wa Mabaki ya CSS ya kila ukosa
• Mabaki ya Kigea ya CSS
• Ukubwa wa Mabaki ya CSS
• Ushirikiano wa Mabaki ya CSS
• Mabaki ya Kifungu ya CSS
• Heights/Widths ya CSS
• Makoa ya Kifungu
• Makoa ya Kifungu
• Ukubwa wa Makoa ya Kifungu
• Vichaguli wa rangi ya Makoa ya Kifungu
• Marefu wa Makoa ya Kifungu
• Ushirikiano wa Makoa ya Kifungu
• Mafunzo ya Mwongozo wa CSS
• Ukubwa wa Mwongozo wa CSS
• Mafunzo ya Mwongozo wa Mwongozo wa CSS
• Mafunzo ya Mwongozo wa Mwongozo wa CSS
• Mafunzo ya Mwongozo wa Mwongozo wa CSS
• Mafunzo ya Mwongozo wa Mwongozo wa CSS
• Mafunzo ya Fonti ya CSS
• Mafunzo ya Mwongozo wa Fonti ya CSS
• Mafunzo ya Ukubwa wa Fonti ya CSS
• Fonti ya Google ya CSS
• Marefu wa Fonti ya CSS
• Mafunzo ya Icon ya CSS
• Mafunzo ya Kiungo ya CSS
• Mafunzo ya Orodha ya CSS
• Mafunzo ya Taarifa ya CSS

Mafunzo ya Kivinjuku ya CSS

• CSS Display
• CSS max-width
• CSS Positioning
• CSS z-index
• CSS Overflow
• CSS Floating
• CSS Clear Float
• Makoa ya Kifungu - Mfano wa Uharibifu
• CSS inline-block
• CSS Alignment
• CSS Combinator
• Makoa ya Kifungu - Pseudo-class
• Makoa ya Kifungu - Pseudo-element
• Makoa ya Kifungu - Uhusiano wa Hali
• Makoa ya Kifungu - Bar ya Kifungu
• Makoa ya Kifungu - Bar ya Kifungu ya Kivunja
• Makoa ya Kifungu - Bar ya Kifungu ya Kivunja
• Makoa ya Kifungu - Menu ya Kifungu
• Makoa ya Kifungu - Mafunzo ya Picha
• Makoa ya Kifungu - Image Sprite
• Makoa ya Kifungu - Vichaguli wa Umoja wa Kifungu
• Makoa ya Kifungu - Fomu
• Makoa ya Kifungu - Kina ya Kina
• Makoa ya Kifungu - Mawaka ya Kifungu
• Makoa ya Kifungu - Viwango
• Makoa ya Kifungu - Uhusiano wa Kina
• CSS !important
• Makoa ya Kifungu - Functio ya Sifuri

Mafunzo ya Juu ya CSS3

• Makoa ya Kifungu - Kigea ya Kifungu
• Makoa ya Kifungu - Mabaki ya Kifungu ya Picha
• Mabaki ya CSS
• Vichaguli wa rangi ya CSS
• Makoa ya Kifungu - Maneno ya Kina
• Makoa ya Kifungu - Mafunzo ya Kina
• Makoa ya Kifungu - Kina ya Kina ya Kina
• Makoa ya Kifungu - Kina
• Makoa ya Kifungu - box-shadow
• Mafunzo ya Mwongozo wa Kifungu
• CSS Mafuatiko wa Mifano
• CSS Kichukio cha 2D
• CSS Kichukio cha 3D
• CSS Mabeghadho
• CSS Aniwisi
• CSS Mifano ya Kitambaa
• CSS Mifano ya Picha
• CSS object-fit
• CSS object-position
• CSS Kichwemo
• CSS Kifunguo
• CSS Tofauti
• CSS Vifaa vya Kifaa cha Mwanafunzi
• CSS User Interface
• CSS Muasi
• CSS Kifunzo cha Muasi
• CSS Variable - JavaScript
• CSS Variable - Media Query
• CSS @property
• CSS Box Sizing
• CSS Flexbox
• CSS Media Query
• CSS Media Query Mfano

Muundo wa kuzingatia wa CSS

• Mbinu ya RWD
• Viewport RWD
• Mingineo wa Grid RWD
• Media Query RWD
• Tupu RWD
• Video RWD

Mafunzo ya CSS Grid

• Moduli ya Mifano ya CSS Grid
• Kufungua Kwa Kifaa cha Mifano ya CSS
• Mfano wa Kifaa cha Mifano ya CSS

Mfano wa CSS

• Mfano wa CSS

Mfano wa CSS

• Mfano wa CSS

Mifano ya CSS

• Mifano ya CSS
• Mafuta ya Vifaa vya CSS
• Muhtasari wa Vichaguli wa CSS
• Funguo ya CSS
• Makoa ya Kifungu - Viwango
• Kilango cha CSS
• Mafuta ya Mifano ya Mifano ya Mifano
• Mafuta ya CSS
• Makoa ya Kifungu - Viwango
• Vichaguli wa rangi ya CSS
• Mifano ya rangi ya CSS
• Mifano ya Kichwa cha Mifano ya CSS
• Mifano ya CSS

Masomo ya kielekala

Tafadhali ingaa masomo

• Mfano wa Kibao cha CodeW3C.com

Je, hapa ni jiko la kuongeza ikoni

Chaguo cha kuzingatia ikoni kwenye ukurasa wa HTML kwa njia rahisi ni kutumia samada ya ikoni, kama Font Awesome.

Ongeza jina la kiklas la ikoni kwenye kila kiini cha HTML (kama <i> au <span>).

Mtaalamu wa ikoni zote katika samada ya ikoni hizi ni maelezo wa jumla, inaweza kutumiwa CSS kusajili (ukubwa, rangi, mbinu ya kushabikisha na hivyo.)

Font Awesome ikoni

Kuwa na kusaidia Font Awesome icons, nenda kwenye fontawesome.com, ingia na wakilisha kodi katika sehemu ya <head> ya picha ya HTML:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Sikia zaidi kuhusu matukio ya Font Awesome 5 katika mafunzo yetu ya Font Awesome.

Maelezo:Hapaa kudongwa au kudumu!

Mfano

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

Matokeo:

Jifunze Kwenye Mafunzo

Bootstrap icons

Kuwa na kusaidia Bootstrap glyphicons, ingia hii muhimu katika sehemu ya <head> ya picha ya HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Maelezo:Hapaa kudongwa au kudumu!

Mfano

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>

Matokeo:

Jifunze Kwenye Mafunzo

Google icons

Kuwa na kuwa na kusaidia Google icons, ingia hii muhimu katika sehemu ya <head> ya picha ya HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Maelezo:Hapaa kudongwa au kudumu!

Mfano

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>

Matokeo:

Jifunze Kwenye Mafunzo

Makina ya Kifaa

Mifano ya CSS

Mfano wa CSS

Mfano wa CSS

Mafano ya CSS ya Nyakati

Marejeo ya Wastani