Informatics1-2019/Lab05

A MathWikiből
(Változatok közti eltérés)
(Új oldal, tartalma: „Previous - Up - Next == CSS == [https://hu.wikipedia.org/wiki/Cascading_Style_Sheet…”)
 
 
(egy szerkesztő egy közbeeső változata nincs mutatva)
25. sor: 25. sor:
  
 
Let's look at the webpage:
 
Let's look at the webpage:
* [http://math.bme.hu/~kkovacs/info1/css_sample.html css_sample.html]
+
* [http://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/css_sample.html css_sample.html]
 
and the associated CSS file:
 
and the associated CSS file:
* [http://math.bme.hu/~kkovacs/info1/style.css style.css]
+
* [http://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/style.css style.css]
  
 
=== Contents of a CSS file ===
 
=== Contents of a CSS file ===
165. sor: 165. sor:
 
<div class="center">text centering</div>
 
<div class="center">text centering</div>
 
<a  class="center" href="math.bme.hu">link centering</a>
 
<a  class="center" href="math.bme.hu">link centering</a>
 +
</pre>
 +
 +
=== Box-model ===
 +
Use <tt>div</tt>, <tt>p</tt> and <tt>span</tt> to format content. Using these tags, you can format specific parts differently. Example:
 +
<pre>
 +
  <div id="scissors">
 +
    This is <span class="paper">crazy</span>
 +
  </div>
 +
</pre>
 +
 +
And you can format each like this:
 +
<pre>
 +
#scissors { color: red; }
 +
span.paper{ color: blue; }
 +
</pre>
 +
 +
Every html tag have these attributes:
 +
<wikiframe src="http://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/box_model.png"/>
 +
[https://www.w3schools.com/Css/css_boxmodel.asp]
 +
 +
Example
 +
<pre>
 +
div {
 +
    padding: 25px;
 +
    border: 25px solid navy;
 +
}
 +
</pre>
 +
And also a <tt>-left, -right, -top, -bottom</tt> version:
 +
<pre>
 +
div {
 +
    padding: 25px;
 +
    padding-top: 20px;
 +
    border-top: 25px solid navy;
 +
    border-left: 25px solid navy;
 +
}
 
</pre>
 
</pre>
  

A lap jelenlegi, 2019. október 21., 14:06-kori változata

Previous - Up - Next

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
background-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>First line</div>
 <div class="my_pink_style">Second line</div>
 <div>Third line</div>
</body>

And now the CSS file:

div{
 color: black;
}
div.my_pink_style{
 color: pink;
}

We can create all kinds of divs, all with their own styles. And not only divs, we can use classes to format any tag:

 <a class="small_link"  href="index.hu">Index</a>
 <a class="important_link" href="bme.hu"  >BME</a>

CSS:

a.small_link{
 color: blue;
 font-size: small;
}
a.important_link{
 color: red;
 font-size: large;
}

Another method is to name tags and reference them in the CSS:

<div>First line</div>
<div id="first_pink">Second line</div>
<a   id="pink_link" href="#something">a linkk</a>

CSS::

#pink_link{
 color: pink;
 text-decoration: underline;
}
#first_pink{
 color: pink;
 font-size: large;
}

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 pink_link

Tables

Basic table in HTML:

<table>
 <tr><th>First column</th><th>Second column</th></tr>
 <tr><td>a</td><td>b</td></tr>
 <tr><td class="center" colspan="2">2 wide data</td> </tr>
 <tr><td rowspan="2">c</td><td>d</td></tr>
 <tr>	<td>d</td></tr>
</table>

CSS:

td, th {
 border: 1px solid black;
}
table {
 border-collapse: collapse;
}
td.center {
 text-align: center;
}

This way the table will have a border. Check out the center align as well.

Selector

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:

a {text-decoration: underline;}
a:active  {color: red;}
a:visited {color: grey;}
a:link    {color: blue;}
a:hover   {text-decoration: line-through;}

This way every link is underlined, but the different states have different styles.

We can specify a class that doesn't reference a given tag, but globally a class:

.center {
  text-align: center;
}

Using it in HTML:

<h1  class="center">title centering</h1>
<div class="center">text centering</div>
<a   class="center" href="math.bme.hu">link centering</a>

Box-model

Use div, p and span to format content. Using these tags, you can format specific parts differently. Example:

  <div id="scissors">
    This is <span class="paper">crazy</span>
  </div>

And you can format each like this:

#scissors { color: red; }
span.paper{ color: blue; }

Every html tag have these attributes: [1]

Example

div {
    padding: 25px;
    border: 25px solid navy;
}

And also a -left, -right, -top, -bottom version:

div {
    padding: 25px;
    padding-top: 20px;
    border-top: 25px solid navy;
    border-left: 25px solid navy;
}

Useful links

If you don't have a webpage yet

Save these files in your public_html folder:

Tasks

Create a new file in the public_html folder named style.css, open this file and index.html as well.

  1. First write an inline CSS code inside your index.html, change the font size somewhere ( style = "font-size:large" )
  2. Create some spans in your index.html, give a class to some of them. ( class = "emphasize" )
  3. Link the style.css into your index.html and your timetable.html as well. ( <link rel="stylesheet" href="style.css"> into the head tag )
  4. Using the style.css make it so that the spans with the class emphasize are itallic.
  5. Now let all text inside pharagraphs (p tags) be itallic.
  6. Now there's no difference between the emphasized and the normal text, so change the emphasized class to be bold.
  7. Try to align some tags, for example the title to the center. Use id for the title, since it will be unique anyway.
  8. 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.)
  9. Create borders for your table, don't make it black, try out different looks.
  10. Switch back to the index.html. Change the decoration of the lists, for example make the numbers roman numerals.
  11. Change the links, for example remove the underline, create different colors.
  12. Make your webpage nice looking.

Previous - Up - Next


Személyes eszközök