http://wiki.math.bme.hu/history/Informatics1-2018/Lab06?feed=atom&Informatics1-2018/Lab06 - Laptörténet2024-03-28T20:36:36ZAz oldal laptörténete a wikibenMediaWiki 1.18.1http://wiki.math.bme.hu/index.php?title=Informatics1-2018/Lab06&diff=13695&oldid=prevGaebor: /* Contents of a CSS file */2018-10-15T12:44:26Z<p><span class="autocomment">Contents of a CSS file</span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←Régebbi változat</td>
<td colspan='2' style="background-color: white; color:black;">A lap 2018. október 15., 12:44-kori változata</td>
</tr><tr><td colspan="2" class="diff-lineno">48. sor:</td>
<td colspan="2" class="diff-lineno">48. sor:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|black, red, #E0E0E0</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|black, red, #E0E0E0</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|-</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|-</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>!<del class="diffchange diffchange-inline">backround</del>-color</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>!<ins class="diffchange diffchange-inline">background</ins>-color</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|black, red, #E0E0E0</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|black, red, #E0E0E0</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|-</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>|-</div></td></tr>
</table>Gaeborhttp://wiki.math.bme.hu/index.php?title=Informatics1-2018/Lab06&diff=13693&oldid=prevGaebor, 2018. október 15., 10:04-n2018-10-15T10:04:41Z<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←Régebbi változat</td>
<td colspan='2' style="background-color: white; color:black;">A lap 2018. október 15., 10:04-kori változata</td>
</tr><tr><td colspan="2" class="diff-lineno">1. sor:</td>
<td colspan="2" class="diff-lineno">1. sor:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[Informatics1-2018/Lab05|Previous]] - [[Informatics1-2018#Labs|Up]] - [[Informatics1-2018/Lab07|Next]]</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>== CSS ==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>== CSS ==</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] is an optional formatting companion to [https://hu.wikipedia.org/wiki/HTML HTML]. We can make much better looking websites using CSS than just using HTML.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] is an optional formatting companion to [https://hu.wikipedia.org/wiki/HTML HTML]. We can make much better looking websites using CSS than just using HTML.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2" class="diff-lineno">194. sor:</td>
<td colspan="2" class="diff-lineno">197. sor:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div># Change the links, for example remove the underline, create different colors.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div># Change the links, for example remove the underline, create different colors.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div># Make your webpage nice looking.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div># Make your webpage nice looking.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">[[Informatics1-2018/Lab05|Previous]] - [[Informatics1-2018#Labs|Up]] - [[Informatics1-2018/Lab07|Next]]</ins></div></td></tr>
</table>Gaeborhttp://wiki.math.bme.hu/index.php?title=Informatics1-2018/Lab06&diff=13691&oldid=prevGaebor: Új oldal, tartalma: „== CSS == [https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] is an optional formatting companion to [https://hu.wikipedia.org/wiki/HTML HTML]. We can make much …”2018-10-15T10:02:52Z<p>Új oldal, tartalma: „== CSS == [https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] is an optional formatting companion to [https://hu.wikipedia.org/wiki/HTML HTML]. We can make much …”</p>
<p><b>Új lap</b></p><div>== CSS ==<br />
[https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] is an optional formatting companion to [https://hu.wikipedia.org/wiki/HTML HTML]. We can make much better looking websites using CSS than just using HTML.<br />
<br />
=== Creating the CSS file ===<br />
For an HTML to use CSS it has to conatin a link to a CSS file (<tt>.css</tt> extension), where the formatting is found. For example:<br />
public_html<br />
|<br />
+- index.html<br />
| <br />
+- style.css<br />
Where the contents of <tt>index.html</tt> is:<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<title>...</title><br />
<b><link type="text/css" rel="stylesheet" href="style.css"></b><br />
</head><br />
<body><br />
...<br />
</body><br />
</html><br />
<br />
Let's look at the webpage:<br />
* [http://math.bme.hu/~kkovacs/info1/css_sample.html css_sample.html]<br />
and the associated CSS file:<br />
* [http://math.bme.hu/~kkovacs/info1/style.css style.css]<br />
<br />
=== Contents of a CSS file ===<br />
In a CSS we can modify the attributes of any HTML tag:<br />
html{<br />
background: white;<br />
}<br />
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.<br />
a{<br />
color: blue;<br />
}<br />
This makes all <tt>a</tt> tags (links) blue.<br />
<br />
Some attributes:<br />
{| class="wikitable"<br />
!attribute<br />
!possible values<br />
|-<br />
!color<br />
|black, red, #E0E0E0<br />
|-<br />
!backround-color<br />
|black, red, #E0E0E0<br />
|-<br />
!font-size<br />
|small, large, 12px, 200%<br />
|-<br />
!text-align<br />
|center, left, right<br />
|-<br />
!font<br />
|Roman, Latin<br />
|-<br />
!font-style<br />
|italic<br />
|-<br />
!font-weight<br />
|bold<br />
|}<br />
<br />
=== Classes ===<br />
What if we only want to modify a specific line and not all tags of a kind?<br />
For example here:<br />
<pre><br />
<body><br />
<div>First line</div><br />
<div>Second line</div><br />
<div>Third line</div><br />
</body><br />
</pre><br />
Making only the second line pink:<br />
<pre><br />
<body><br />
<div>First line</div><br />
<div class="my_pink_style">Second line</div><br />
<div>Third line</div><br />
</body><br />
</pre><br />
And now the CSS file:<br />
div{<br />
color: black;<br />
}<br />
div.my_pink_style{<br />
color: pink;<br />
}<br />
We can create all kinds of <tt>div</tt>s, all with their own styles. And not only <tt>div</tt>s, we can use <tt>class</tt>es to format any tag:<br />
<pre><br />
<a class="small_link" href="index.hu">Index</a><br />
<a class="important_link" href="bme.hu" >BME</a><br />
</pre><br />
CSS:<br />
a.small_link{<br />
color: blue;<br />
font-size: small;<br />
}<br />
a.important_link{<br />
color: red;<br />
font-size: large;<br />
}<br />
<br />
Another method is to name tags and reference them in the CSS:<br />
<pre><br />
<div>First line</div><br />
<div id="first_pink">Second line</div><br />
<a id="pink_link" href="#something">a linkk</a><br />
</pre><br />
CSS::<br />
#pink_link{<br />
color: pink;<br />
text-decoration: underline;<br />
}<br />
#first_pink{<br />
color: pink;<br />
font-size: large;<br />
}<br />
When using classes we can create as many tags with the same class as we want, but ids are unique. For example only one tag may have the id <tt>pink_link</tt><br />
<br />
=== Tables ===<br />
Basic table in HTML:<br />
<pre><br />
<table><br />
<tr><th>First column</th><th>Second column</th></tr><br />
<tr><td>a</td><td>b</td></tr><br />
<tr><td class="center" colspan="2">2 wide data</td> </tr><br />
<tr><td rowspan="2">c</td><td>d</td></tr><br />
<tr> <td>d</td></tr><br />
</table><br />
</pre><br />
CSS:<br />
td, th {<br />
border: 1px solid black;<br />
}<br />
table {<br />
border-collapse: collapse;<br />
}<br />
td.center {<br />
text-align: center;<br />
}<br />
This way the table will have a border. Check out the center align as well.<br />
<br />
=== Selector ===<br />
A link can have more than one style, it looks different when it has already been visited, when the cursor is over the link and lastly when the mouse button is pressed over the link:<br />
a {text-decoration: underline;}<br />
a:active {color: red;}<br />
a:visited {color: grey;}<br />
a:link {color: blue;}<br />
a:hover {text-decoration: line-through;}<br />
This way every link is underlined, but the different states have different styles.<br />
<br />
We can specify a class that doesn't reference a given tag, but globally a class:<br />
.center {<br />
text-align: center;<br />
}<br />
Using it in HTML:<br />
<pre><br />
<h1 class="center">title centering</h1><br />
<div class="center">text centering</div><br />
<a class="center" href="math.bme.hu">link centering</a><br />
</pre><br />
<br />
=== Useful links ===<br />
* Check out the other students or teachers websites. Feel free to copy stuff that you like.<br />
* [http://www.w3schools.com/css/default.asp CSS documentation]<br />
* [http://jigsaw.w3.org/css-validator/ css validator]<br />
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]<br />
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]<br />
<br />
== If you don't have a webpage yet ==<br />
<br />
Save these files in your <tt>public_html</tt> folder:<br />
<br />
* [http://math.bme.hu/~kkovacs/info1/index.html index.html]<br />
* [http://math.bme.hu/~kkovacs/info1/orarend.html orarend.html]<br />
<br />
== Tasks ==<br />
<br />
Create a new file in the <tt>public_html</tt> folder named <tt>style.css</tt>, open this file and <tt>index.html</tt> as well.<br />
<br />
# First write an inline CSS code inside your index.html, change the font size somewhere ( style = "font-size:large" )<br />
# Create some <tt>span</tt>s in your index.html, give a class to some of them. ( class = "emphasize" )<br />
# Link the <tt>style.css</tt> into your index.html and your timetable.html as well. ( <link rel="stylesheet" href="style.css"> into the head tag )<br />
# Using the style.css make it so that the spans with the class <tt>emphasize</tt> are itallic.<br />
# Now let all text inside pharagraphs (p tags) be itallic.<br />
# Now there's no difference between the emphasized and the normal text, so change the emphasized class to be bold.<br />
# Try to align some tags, for example the title to the center. Use id for the title, since it will be unique anyway.<br />
# Now let's switch to the timetable. Create a significant margin for the talbe heads (<th> tag). (You might have to remove the border="1" from the html file.)<br />
# Create borders for your table, don't make it black, try out different looks.<br />
# Switch back to the index.html. Change the decoration of the lists, for example make the numbers roman numerals.<br />
# Change the links, for example remove the underline, create different colors.<br />
# Make your webpage nice looking.</div>Gaebor