Informatics1-2017/Practice5
| 26. sor: | 26. sor: | ||
* [http://math.bme.hu/~kkovacs/info1/style.css style.css] | * [http://math.bme.hu/~kkovacs/info1/style.css style.css] | ||
| − | === | + | === Contents of a CSS file === |
| − | + | In a CSS we can modify the attributes of any HTML tag: | |
html{ | html{ | ||
background: white; | background: white; | ||
} | } | ||
| − | + | What this means is for the HTML files where this CSS is linked, the <tt><html></tt> tag will have the <tt>background: white</tt> attribute. Thus the background of the webpage will be white. | |
a{ | a{ | ||
color: blue; | color: blue; | ||
} | } | ||
| − | + | This makes all <tt>a</tt> tags (links) blue. | |
| − | + | Some attributes: | |
{| class="wikitable" | {| class="wikitable" | ||
| − | ! | + | !attribute |
| − | ! | + | !possible values |
|- | |- | ||
!color | !color | ||
| 64. sor: | 64. sor: | ||
|} | |} | ||
| − | === | + | === Classes === |
| − | + | What if we only want to modify a specific line and not all tags of a kind? | |
| − | + | For example here: | |
<pre> | <pre> | ||
<body> | <body> | ||
| − | <div> | + | <div>First line</div> |
| − | <div> | + | <div>Second line</div> |
| − | <div> | + | <div>Third line</div> |
</body> | </body> | ||
</pre> | </pre> | ||
| − | + | Making only the second line pink: | |
<pre> | <pre> | ||
<body> | <body> | ||
A lap 2017. október 2., 04:03-kori változata
Tartalomjegyzék |
CSS
CSS is an optional formatting companion to HTML. We can make much better looking websites using CSS than just using HTML.
Creating the CSS file
For an HTML to use CSS it has to conatin a link to a CSS file (.css extension), where the formatting is found. For example:
public_html | +- index.html | +- style.css
Where the contents of index.html is:
<!DOCTYPE html> <html> <head> <title>...</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> ... </body> </html>
Let's look at the webpage:
and the associated CSS file:
Contents of a CSS file
In a CSS we can modify the attributes of any HTML tag:
html{
background: white;
}
What this means is for the HTML files where this CSS is linked, the <html> tag will have the background: white attribute. Thus the background of the webpage will be white.
a{
color: blue;
}
This makes all a tags (links) blue.
Some attributes:
| attribute | possible values |
|---|---|
| color | black, red, #E0E0E0 |
| backround-color | black, red, #E0E0E0 |
| font-size | small, large, 12px, 200% |
| text-align | center, left, right |
| font | Roman, Latin |
| font-style | italic |
| font-weight | bold |
Classes
What if we only want to modify a specific line and not all tags of a kind? For example here:
<body> <div>First line</div> <div>Second line</div> <div>Third line</div> </body>
Making only the second line pink:
<body> <div>Első sor</div> <div class="my_pink_style">Második sor</div> <div>Harmadik sor</div> </body>
Ezzel együtt a css fájlban:
div{
color: black;
}
div.my_pink_style{
color: pink;
}
Különböző div-elet definiálhatunk, mindegyiknek saját formátummal, és bármilyen tag-nek lehet többfajta formátuma, class-okkal megkülönböztetve:
<a class="kicsi_link" href="index.hu">Index</a> <a class="fontos_link" href="bme.hu" >BME</a>
Ahol a css fájlban:
a.kicsi_link{
color: blue;
font-size: small;
}
a.fontos_link{
color: red;
font-size: large;
}
Erre egy másik módszer, ha elnevezzük a tag-eket és azokkal hivatkozunk rájuk a css-ben:
<div>Első sor</div> <div id="first_pink">Második sor</div> <a id="pink_link" href="#valami">egy link</a>
és a css fájlban:
#pink_link{
color: pink;
text-decoration: underline;
}
#first_pink{
color: pink;
font-size: large;
}
Ha class-ként adjuk meg a stílust, akkor a div class="xyz" tag-ből több is lehet, mind a div.xyz-nek megfelelő stílusban. Míg az id egyedi, ez esetben csak az adott tag-et formázzuk vele.
Táblázatok
Nézzünk egy alap táblázatot html-ben:
<table> <tr><th>Ez az 1. oszlop</th><th>Ez meg a 2. oszlop</th></tr> <tr><td>a</td><td>b</td></tr> <tr><td class="kozepre" colspan="2"2 széles példa elem</td> </tr> <tr><td rowspan="2">c</td><td>d</td></tr> <tr> <td>d</td></tr> </table>
Ehhez a css-ben:
td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
td.kozepre {
text-align: center;
}
Így lesz szegélye a táblázatnak. Figyeljük meg a középre igazítást is.
Selector
Egy link többéle képen nézhet ki, más ha "friss" a link, vagy ha már egyszer rákattintottunk, vagy ha éppen rajta áll a kurzor. Ezt a következő képen formázhatjuk:
a {text-decoration: underline;}
a:active {color: red;}
a:visited {color: grey;}
a:link {color: blue;}
a:hover {text-decoration: line-through;}
Ekkor minden link alá lesz húzva, de azon belül több féle színű lehet és ha rajta van az egér, akkor át lesz húzva.
Lehet megadni olyan stílus osztályt, ami nem egy konkrét tag-re vonatkozik. A css fájlban:
.kozepre {
text-align: center;
}
Ekkor az index.html-ben így tudjuk használni:
<h1 class="kozepre">ez a cím középen van</h1> <div class="kozepre">ez a szöveg középen van</div> <a class="kozepre" href="math.bme.hu">ez a link is középen van</a>
Hasznos linkek
- Nézzük meg a többi hallgató vagy tanár oldalát, ha tetszik valamelyik honlap, akkor próbáljuk meg a forrás alapján lemásolni.
- leírás css-ről
- css validator
- CSS3 Cheat Sheet
- HTML5 Cheat Sheet
Ha még nincs oldalatok
A mai gyakorlat a múlthetire épít, így ha ez valakinek nincs meg, akkor mentse a kövektezõ file-okat a public_html mappájába:
Feladatok
Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.
- Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
- Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
- A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
- A style.css segítségével érjétek el, hogy a 2. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. (9. előadás)
- Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
- Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dõltek, legyenek félkövérek.
- Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t. (9. előadás)
- Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. (9. előadás)
- Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb. (9. előadás)
- Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölõk, vagy római számok a számok. (9. előadás)
- Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
- Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.
