Eisimpleir: Dealbh le teacsa ri thaobh
Ma tha thu airson
dealbh a chur air an duilleig, le teacsa ri thaobh, seo an dòigh
a chleachdas tu. Anns an eisimpleir seo chan eil sinn a' cleachdadh "border"
airson an dealbh. Tha "margin" ann eadar an dealbh agus an teacsa.
.img_right
{
float: right;
border-style: none;
margin-left: 20px;
}
<p><img class="img_right" src="beathach.jpg" alt="beathach">Ma tha thu airson dealbh a chur...</p>
Eisimpleir: Litir mhòr aig toiseach na h-earrainne
Tha e a' coimhead math nuair a tha litir mhòr
aig toiseach na h-earrainne. Feumar float:left
a chleachdadh airson gun ruith
na litrichean agus faclan eile air an taobh dheas.
.drop_cap {
float:left;
width:0.7em;
font-size:4em;
font-family:algerian,courier;
line-height:80%;
}
<p> <span class="drop_cap">T</span>ha e a' coimhead math...</p>
Eisimpleir: Clò ("font")
Tha "fonts" eadar-dhealaichte air an cleachdadh an seo.
.first_word {
font-size: 18px;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #0000AA;
background-color: yellow;
}
.italic_green {
font-style: italic;
color: green;
}
.courier_red {
font-size: 20px;
font-family: Courier, serif;
color: red;
}
.monospace_small_caps {
font-family: monospace;
font-variant: small-caps;
color: purple;
}
.bold_big {
font-weight: bold;
font-size: 20px;
}
<p><span class="first_word">Tha</span> "<span
class="italic_green">fonts</span>" <span
class="courier_red">eadar-dhealaichte</span> air an <span
class="monospace_small_caps">cleachdadh</span> <span
class="bold_big">an seo</span>.</p>
Eisimpleir: "Padding & Margins"
'S e "margin" an astar eadar dà rud a tha ri chèile. Tha "padding" am broinn an rud, m.e. an astar eadar colbh de theacsa agus am bocsa anns a bheil e.
<----padding-left--->Teacsa an seo<----padding-right---->
Eisimpleir: Co-thaobhadh ("alignment")
'S urrainn don theacsa a bhith ann an loidhne air an taobh chlì, air an taobh dheas, neo air an dà chuid. Tha an teacsa seo a tha thu a' leughadh a' cleachdadh text-align: justify Tha sin a' ciallachadh gu bheil na faclan ann an loidhne air gach taobh den duilleig. 'S iad na taghan eile: left, right agus center. Seo an dòigh a chleachdas tu airson text-align: justify a' chleachdadh:
p { text-align: justify; }
<p>'S urrainn don theacsa a bhith...</p>
agus seo an dòigh a chleachdas tu le text-align: center:
h1 { text-align: center; }
<h1>Earrann 1</h1>
Earrann 1
Eisimpleir: Dealbh aig cùl na duilleige
'S urrainn dhut dealbh a chur aig cùl na duilleige, "background image" mar a chanas iad. Seo an dòigh a chuireas tu e an àite:
body {
background-image: url('logo_cnag3.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
Tha an dealbh a' fuireach anns an aon àite nuair a tha an duilleag air a ghluasad ("scrolled"). Sin a chionn 's gu bheil background-attachment: fixed air a chleachdadh. Ma tha thu airson an duilleig a ghluasad leis an duilleig, cleachd background-attachment: scroll na àite.
Eisimpleir: Clàr-iùil air a dhèanamh le liosta & CSS
Tha e comasach clàr-iùil a chruthachadh le liosta agus CSS,
mar eisimpleir:
(ged nach eil an dath air a' chùlaibh a' coimhead ceart ann an Opera)
ul.menu
{
position:relative;
left:30px;
padding:0;
margin:0;
list-style-type:none;
width:100%;
}
a.menu
{
float:left;
text-decoration:none;
color:white;
background-color:green;
padding-top:0.2em;
padding-bottom:0.2em;
border-right:1px solid white;
width:100px;
text-align:center;
}
.menu li {display:inline;}
ul.menu li {
margin-top: 5px;
padding: 0px;
}
a.menu:hover {background-color:lime}
<ul class="menu">
<li class="menu"><a class="menu" href="http://www.cnag.org.uk/>CnaG</a></li>
<li class="menu"><a class="menu" href="http://www.cli.org.uk/">Clì</a></li>
<li class="menu"><a class="menu" href="http://www.storlann.co.uk/">Stòrlann</a></li>
<li class="menu"><a class="menu" href="http://www.bord-na-gaidhlig.org.uk/">BnaG</a></li>
</ul>
Eisimpleir: Clàr-iùil eile
Seo clàr-iùil eile air a dhèanamh le liosta agus CSS:
ul.menu2
{
position:relative;
left:55px;
padding:0px;
margin:0;
list-style-type:none;
}
ul.menu2 li {
margin: 2px;
padding: 3px;
width: 65px;
background-color:green;
}
a.menu2
{
float:none;
text-decoration:none;
color:white;
background-color:green;
padding-top:0.2em;
padding-bottom:0.2em;
}
a.menu2:hover {color:lime;}
<ul class="menu2">
<li><a class="menu2" href="http://www.cnag.org.uk/">CnaG</a></li>
<li><a class="menu2" href="http://www.cli.org.uk/">Clì</a></li>
<li><a class="menu2" href="http://www.storlann.co.uk/">Stòrlann</a></li>
<li><a class="menu2" href="http://www.bord-na-gaidhlig.org.uk/">BnaG</a></li>
</ul>
Eisimpleir: Suidheachadh: "absolute positioning"
Le "absolute positioning", tha rudeigin (dealbh, teacsa, m.s.a.a.) air gluasad gu àite eile, a' cleachdadh nan àireamhan a tha thu a' solarachadh bhon làimh chlì agus bhon uachdar.
Mar eisimpleir, ma tha thu airson dealbhan a chur aig 100 pixels bhon làimh chlì agus 75 pixels bhon uachdar, seo na tha thu ri dhèanamh.
Teacsa a' tòiseachadh aig 0px,0px
Teacsa a' tòiseachadh aig 100px, 75px
position: absolute;
left: 100px;
top: 75px;
color:red;
}
<p class="red_text"> Teacsa a' tòiseachadh aig 0px,0px</p>
<p class="offset_text_1">Teacsa a' tòiseachadh
aig 100px, 75px</p>
Eisimpleir: Suidheachadh: "relative positioning"
Le "relative positioning", tha rudeigin (dealbh, teacsa, m.s.a.a.) air gluasad gu àite eile, ach an turas seo tha an àite "relative to" an àite far a biodh e gu h-àbhaisteach. Faic an eisimpleir gu h-ìosal.
An àite àbhaisteach airson a' chiad earrann
An àite àbhaisteach airson an dàrna earrann
A' chiad earrann le r.p. 100px, 75px
An dàrna earrann le r.p. 0px, -15px
position: relative;
color:red;
}
.offset_text_2 {
left:100px;
top: 75px;
}
.offset_text_3 {
left: 0px;
top: -15px;
}
<div class="background_box2">
<p class="offset_text_2">A' chiad earrann le r.p. 100px, 75px</p>
<p class="offset_text_3">An dàrna earrann le r.p. 0px, -15px</p>
</div>
Eisimpleir: Dà cholbh ri chèile
Ma tha thu airson dà cholbh a chur air an duilleig, seo aon dòigh. Neo, b' urrainn dhut "relative positioning" neo "absolute positioning" a chleachdadh.
.left-column {
float: left;
width: 250px;
margin: 0px;
padding: 5px;
border: solid red 1px;
background-color:#cc99ff;
}
.right-column {
width: 350px;
margin: 0px;
margin-left: 300px;
padding: 0px;
border: solid red 1px;
background-color:#ffff99;
}
<div class="left-column">
Seo an teacsa san colbh air an làimh chlì. .............
</div>
<div class="right-column">
Seo an teacsa san colbh air an làimh dheas. .............
</div>
Eisimpleir: Ceanglaichean
'S urrainn dhut coltas eadar-dhealaichte a chur air ceanglaichean le CSS. Mar eisimpleir:
a.links {
font-size: 20px;
font-family: Courier, serif;
text-decoration: none;
background: yellow;
padding:3px;
}
a.links:hover {
color: red;
background-color: white;
}
<p><a class="links" href="http://www.scottish.parliament.uk/vli/language/gaelic/index.htm">
Parlamaid na h-Alba</a></p>
Eisimpleir: Z-index
'S urrainn dhut dealbh neo teacsa a chur air cùlaibh neo os cionn rudeigin eile. Bidh an rud leis an z-index as motha air an uachdar. Mar eisimpleir.
An seo, tha bratach na h-Alba os cionn bratach an Rìoghachd Aonaichte:
img.union_flag {
z-index: 1;
}
img.saltire {
z-index: 2;
position: relative;
left: -50px;
}
<img class="union_flag" src="union_flag.jpg"><img class="saltire" src="saltire.jpg">
An seo, tha bratach an Rìoghachd Aonaichte os cionn bratach na h-Alba:
img.union_flag2 {
z-index: 2;
}
img.saltire2 {
z-index: 1;
position: relative;
left: -50px;
}
<img class="union_flag2" src="union_flag.jpg"><img class="saltire2"
src="saltire.jpg">