Practical Session 2: CSS#

CSS (Cascading Style Sheets) is used in tandem with HTML5 to create modern web pages. Where HTML5 specifies the structure of a page, CSS specifies the visual properties. Older web pages used HTML to specify visual properties as well, but separating the two has several benefits, including making it easier to establish a fixed style for an entire web site and making web sites more accessible to users with visual disabilities.

Open a text editor, copy and paste the following into it, and open it in Chrome:

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>My CSS web page</title>
5
    </head>
6
    <body>
7
        <p>Hello <b>World!</b></p>
8
        <p>Here's another paragraph.</p>
9
        <table>
10
            <tr><th>System</th><th>Specifies</th></tr>
11
            <tr><td>HTML</td><td>Structure</td></tr>
12
            <tr><td>CSS</td><td>Aesthetics</td></tr>
13
        </table>
14
    </body>
15
</html>

There are three ways of adding CSS to an HTML file, but only two of them are commonly used. The first is inline CSS. Modify the first <p> of the Hello World paragraph to read: <p style="color: blue;"> Reload the HTML file in Chrome and note that the colour has changed. (Note that in CSS you must use the US spelling: color not colour.) Note how this works:

You create an inline style specification by adding a style attribute to an existing HTML tag.
The style attribute’s value must be the CSS specfication, in quotes.
CSS also has an attribute-based structure based on key and value pairs, but with a different structure:

HTML Attributes	CSS properties
Key is separated from value by an `=`	Key is separated from value by a `:`
Multiple attributes are separated by spaces	Multiple attributes are separated by `;`
Every value should be in quotes `" "`	No value needs to be in quotes unless it contains spaces (very unusual in CSS)

TIP

When setting a color in CSS, there are 3 ways:

Use a predefined name like blue, green, indigo, firebrick, purple, magenta, etc. eg: color: blue
Write a color specification in hex, eg: color: #66ccff
Write the color in numeric RB values between 0 and 255. eg: color: rgb(255, 87, 51)

When setting a color in CSS you can specify the color in several different ways. One way is to use a predefined name like blue above. Try changing the color name to some of the following other predefined CSS colours: green, indigo, firebrick, purple, magenta, royalblue, tomato.
The other way to specify a color is to write a color specification in hex, which has a syntax resembling #0000ff . The hash at the beginning is mandatory. The next digits are divided into three blocks of two (so here, 00 00 ff ), which represent the red, green, and blue levels in the target color written in hexadecimal. So 00 00 ff is no red, no green, and the highest possible blue (255), creating pure blue. Try using a hex color specification to color the text a) pure red; b) pure yellow; c) grey.
You can set the color of the text within any tag you like by using the style HTML attribute and the color CSS property. Change the color of the two table headers to pure red using CSS.
Change the style attribute of the first p element to read: style="color:red; background-color:black;" . See what effect this has.
Try using the background-color CSS property to change the background color of the table headers. Note how the result is different from changing the background of the p element.
Try adding a background-color CSS property to the b tag in Hello World to change the background of the bold text only. Note how the result is different again.

From last week you should remember the distinction between block elements and span elements in HTML. Block elements force the browser to create a new layout block on the page. Span elements do not; they just specify properties and attributes for a piece of text or other material that can be included in the ﬂow of an existing block.

p is a block tag, so when you changed the background-color you changed the background of the entire block. Since there is no limit on the horizontal size of a paragraph block, the entire line changed color.
th is also a block tag, but it does limit the horizontal size of the block, to create a table cell. When you changed the background of the block, only the small part within the block changed color.
b is a span tag. It does not create a block. When you changed the background of this span tag, only the background of the affected text changed.

You can change the background color of the entire page by setting a CSS background-color property on the body tag. Try doing this now by setting the background color of the whole page to black. This will make some of your text become invisible. We will fix this in a moment.

A more standard way of specifying the styling of a web page is to store the CSS in a separate file. The CSS file creates a standard appearance for given HTML tags and can be re-used on every page of a site to create a strong visual brand.

Create a new file in the same directory as your html file. Name it style.css and copy and paste the following into it:

1
p {
2
    color: white;
3
}

Add the following to the head section of your html file (note: not the body section. Ideally this should be added just above the title element). This tells the browser to fetch the CSS style for the page from the other file. If you called your file something other than style.css , change the name in the attribute below appropriately. (Note: the link element here doesn’t actually create a link in the sense of “something the user can click on”! Rather, it tells the web browser that the two files are intrinsically linked.)

1
<link rel="stylesheet" type="text/css" href="style.css">

Reload the page in Chrome. While the background is still black, notice that the text
Here's another paragraph is now in white, and visible.

When you create a separate CSS file, you write properties (like color: white; ) in the same way you do when using style tags. In order to specify which elements you want the property to apply to, you write a CSS selector followed by a block of properties inside { and } brackets. p here is a very simple CSS selector; it selects all p elements in the document.

Note however that the Hello World text, which you changed to red earlier, is still red - even though it is inside a p and by the new rule ought to be white. The term Cascading in Cascading Style Sheets is used to represent the system by which these are resolved, which will probably be more familiar to you by the name Inheritance as in Java and Python. Because Hello World has its own color property specified, it overrides the color property given for all p s by the CSS file.

INFO

CSS样式存在优先级。

内联样式 > 外部 css 文件

而 css 文件中，样式越靠下优先级越高

Try adding a new CSS selector and rule to make the text in all the table cells (not the headers) light blue. You can use the property color: cyan; and it will need to be in a new selector block which begins td { …

This is an important and useful reason why separate CSS files are used: you can restyle a substantial part of a page without having to add separate style attributes to every one of your elements.

With your CSS page open in Chrome, press Ctrl+Shift+I to open the Web Developer tools, then click on the Elements tab.
In the Chrome display of your source code, click on the p element that contains “Hello World”. Then, in the pane at the bottom of the Web Developer view, click on Styles if it is not already selected.

On the left side of the Styles pane, you will see all of the CSS that is affecting the appearance of the selected p element. Scroll down through the blocks:

The first block, labelled element.style, shows the settings applied by the style attribute in the HTML file.
The second block, labelled style.css, shows the settings applied by your CSS file. Note that they probably appear crossed out because they are being overridden by the style attribute.
The third block, labelled User Agent Stylesheet shows some properties you have not seen before. These are the default rules for laying out p tags in HTML and the Chrome browser.
The final block, labelled Inherited from HTML shows the default properties for all text in HTML files (ie, not just paragraphs). The color property here is crossed out because it is overridden by the setting in the style attribute.

In the Chrome display of your source code, click the small triangle next to the “Hello World” p element to open it, and then click on the internal b element.

Notice that there is now an additional User Agent Stylesheet block, which reads b { font- weight: bold; }. This is the built-in rule in HTML and Chrome which defines the style effect of the b tag. The b tag has no other effect; you can make any other tag behave the same as b by giving it the font-weight: bold; property in CSS.

By changing your HTML file and looking in Chrome’s Web Developer view, find out what the built-in CSS rules for the i , u and a tags are. (Note: the a tag will not be styled unless it contains an href attribute giving a link, although it is OK for it to be a broken link.)
Not every copy of a single tag has to be styled the same. Copy and paste the following into your HTML file, just before the table:

1
<p class="red">Red</p>
2
<p class="bold">Bold</p>
3
<p class="italic">Italic</p>

Now add the following to your CSS file:

1
p.red {
2
    color: red;
3
}

Reload your file in Chrome. The class attribute allows you to specify several different types (ie, “classes”) of a single HTML element for styling purposes. The selector p.red refers to “all p elements which are members of class red ”, and the class="red" attribute makes that p element a member of that class.
Add two more class-based rules to your CSS file to make the words Bold and Italic appear in bold and italic as before. You learned the CSS properties to create these effects in steps 16 and 17. Do not add b and i tags to the HTML.
Once you have the above working, try changing the class attribute of the appropriate p element from red to red bold. Notice what happens.

A single element can be a member of several classes, and if it is, all of the attributes from all of those classes are cascaded to it.

In order to structure your page, HTML5 provides a number of tags that describe parts of your page but have no default style rules. Instead, you create the style rules using CSS. These tags can also be used by screen readers and other accessibility aids to help users find parts of your page. These tags are: article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary and time. Create a nav element with two links in it, and then add a CSS rule to style it to have a blue background.
Sometimes you might want to style parts of your page freely without using any of the predefined tags. For this, HTML5 provides two tags, div and span. div is a block tag with no rules, and span is a span tag with no rules. You can use these together with the class attribute to style parts of a page however you like. Copy and paste the following into your HTML file before the table, and then create CSS rules (with selectors div.buybox and span.price ) to make the main text appear white on a purple background, and the price appear yellow.

1
<div class="buybox">
2
  It's just <span class="price">20 pounds</span>!
3
</div>

Click on the table element in Chrome’s web developer view, and notice the built-in rules for it. There are several that you will not have seen before.
Look at the lower right hand pane of the Web Developer view and you will see several nested rectangles labelled Margin, Border, and Padding. The innermost rectangle doesn’t have a label, but is called the Content box. This is called the CSS Box Model. Each block tag is assigned a rectangular area of the page which is divided into:
- Margin: the separation of the box from the edges of the larger box it’s within (or the page itself if there is no larger box)
- Border: as the name implies, the border of the box (most boxes in HTML do not have borders but you can specify one)
- Padding: the distance between the border and the content;
- Content: the actual text or other material inside the box (possibly including other boxes)
Mouse over the four boxes in the bottom right corner of the Web Developer view and observe that Chrome highlights the corresponding area of the actual page.
Add the following rule to your CSS file:

1
td {
2
    border: 10px solid white;
3
}

Reload the file and see that the border has been added to the table cells.

The border property in CSS is a shorthand property. There are a whole range of properties in CSS related to borders. border lets you specify the value of three particular properties that you can also specify one by one: border-width, border-style, and border-color. You can also adjust the border differently on all four sides. border-top, border-bottom, border-left and border-right act as shorthand properties for doing so, or similar individual properties (border-top-color etc) can be used.

Add the property padding: 20px to the CSS rule for td and reload. Note that the space between the content of the cells and the border expands.
Add the property margin: 20px to the CSS rule for td and reload. You will notice that nothing is changed! Individual table cells, as specified by td , do not support having margins apart from the table.
Add the following CSS rule to the file, and reload.

1
table {
2
    margin-left: 25%;
3
    margin-top: 10%;
4
}

Notice that the table is now closer to the middle of the page and pushed down. Percentage values for widths equate to the percentage of the size of the containing element. In this case, there is no containing element for the table, so the size of the browser screen is used (as it is the default horizontal size for a web page, and the only sensible measure of vertical size).

Try resizing the window displaying the web page and note how the position of the table changes.
CSS can also control the positioning of elements apart from the text ﬂow. Remove the two margin properties from table, and replace the block with:

1
table {
2
    position: absolute; top: 50%;
3
    left: 100px;
4
}

View the page in Chrome again. Notice that the table is now positioned around halfway down the screen. Resizing the window will cause it to move vertically, but not horizontally. The position: absolute property overrides the web browser’s automatic placement of text.

Specifying sizes and distances in percentages in CSS can be useful but must be done with care. In particular, you must make sure that any content in a block which is sized by percentage is able to expand properly. Otherwise you will be left with a lot of ugly blank space on your page.

Try adding the following blocks to your CSS file:

1
main {
2
    position: absolute; left: 10em;
3
    top: 10em;
4
}
5

6
nav {
7
    position: absolute; left: 0;
8
    top: 0; width: 10em;
9
    margin-right: 10px;
10
}
11

12
header {
13
    position: absolute; left: 10em;
14
    top: 0; height: 10em;
15
}

1em is equal to the size of one character in the current font. ( em doesn’t stand for anything; in typography the measurement was pronounced as “ems” because it is about the width of the letter M .)

Add main, nav and header elements to your HTML file, and place p or other elements (even tables) inside them to see these rules affect the layout. (Do not include duplicates of any of these elements.)
In your remaining practical time, visit https://www.w3schools.com/css/default.asp and view some of the other CSS properties and selectors. Pay particular attention to those which allow you to change the font of text, or to position text within a block (rather than positioning the block).

Reference Answer

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>My CSS web page</title>
5
        <!-- <link href="style.css" rel="stylesheet" type="text/css"/> -->
6
        <link rel="stylesheet" type="text/css" href="style.css">
7
    </head>
8
    <body>
9
        <header>
10
            <h1>Welcome to my CSS web page</h1>
11
        </header>
12
        <nav>
13
            <p>This is the navigation bar.</p>
14
        </nav>
15
        <br>
16
        <br>
17
        <p>Hello <b>World!</b></p>
18
        <p>Here's another paragraph.</p>
19
        <p class="red">Red</p>
20
        <p class="bold">Bold</p>
21
        <p class="italic">Italic</p>
22
        <div class="buybox">
23
            It's just <span class="price">20 pounds</span>!
24
        </div>
25
        <table>
26
            <tr><th>System</th><th>Specifies</th></tr>
27
            <tr><td>HTML</td><td>Structure</td></tr>
28
            <tr><td>CSS</td><td>Aesthetics</td></tr>
29
        </table>
30
        <main>
31
            <p>This is the main content of the page.</p>
32
        </main>
33
    </body>
34
</html>

1
body {
2
    background-color: lightblue;
3
}
4
/* p {
5
    color: red;
6
    font-size: 20px;
7
} */
8
p.red {
9
    color: red;
10
}
11
p.bold {
12
    font-weight: bold;
13
}
14
p.italic {
15
    font-style: italic;
16
}
17
div.buybox {
18
    border: 2px solid black;
19
    background-color: #6cf;
20
    width: 200px;
21
    padding: 10px;
22
}
23
span.price {
24
    color: white;
25
    font-weight: bold;
26
}
27
table, th, td {
28
    /* border: 1px solid black; */
29
    border: 1px dashed black;
30
    border-collapse: collapse;
31
    /* padding: 10px;
32
    padding-bottom: 10px;
33
    padding-left: 10px;
34
    padding-right: 10px;
35
    padding-top: 10px; */
36
    padding: 10px 10px 10px 10px;
37
}
38
td {
39
    color: greenyellow;
40
}
41
th, td {
42
    padding: 20px;
43
}
44
table {
45
    margin-left: 25%;
46
    margin-top: 10%;
47
    position: absolute; top: 50%;
48
    left: 100px;
49
}
50
main {
51
    position: absolute; left: 10em;
52
    top: 10em;
53
}
54
nav {
55
    position: absolute; left: 0;
56
    top: 0; width: 10em;
57
    margin-right: 10px;
58
}
59
header {
60
    position: absolute; left: 10em;
61
    top: 0; height: 10em;
62
}

音乐

音乐

Practical Session 2: CSS#

支持与分享

评论区

音乐

目录

音乐

音乐

Web Application Development Practical2: CSS

Practical Session 2: CSS#

支持与分享

评论区

音乐

目录