Scribd
Upload
5 views25 pages

Webdesign 9a

Uploaded by

Shan boo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views25 pages

Webdesign 9a

Uploaded by

Shan boo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

1

Web Design
Web Design

HTML & CSS :


design and build websites
h t t p : / / w w w. h t m l a n d c s s b o o k . c o m

S
2

Introducing
CSS
Web Design

S
3

Understanding
CSS
THINKING INSIDE THE BOX

The key to understanding how CSS works is


to imagine that there is an invisible box
around every HTML element.
Web Design

CSS allows you to create rules that control


the way that each individual box (and the
contents of that box) is presented.

You can see a basic HTML page on the


right.

S
4

Understanding
CSS
THINKING INSIDE THE BOX

Here you can see the same HTML page, but


we have added outlines to each of the
elements so that you can see how CSS will
Web Design

treat each element as if it lives inside it own


box.

In this example, block elements have red


borders, and inline elements have green
borders.

S
5

Understanding
CSS
THINKING INSIDE THE BOX

Block elements look like they start on a


new line. Inline elements flow within the
text and do not start on a new line.
Web Design

Here the <body> element creates the first


box, then the <h1>,<h2>,<p>,<i>, and
<a> elements each create their own boxes
within it.

S
6

Understanding
CSS
THINKING INSIDE THE BOX

Using CSS, you could add a border around


any of the boxes, specify its width and
height, or add a background color. You
Web Design

could also control text inside a box , for


example, its color, size, and the typeface
used.

S
7

CSS associates style


rules with HTML
elements
THINKING INSIDE THE BOX SELECTOR

CSS works by associating rules with HTML p {


elements. These rules govern how the
content of specified elements should be
font-family: Arial; }
Web Design

displayed. A CSS rule contains two parts: a


selector and a declaration. DECLARATION
This rule indicates that all <p> elements
should be shown in the Arial typeface.

S
8

CSS associates style


rules with HTML
elements
THINKING INSIDE THE BOX SELECTOR

Selectors indicate which element the rule p {


applies to. The same rule can apply to more
than one element if you separate the element font-family: Arial; }
Web Design

names with commas.

Declarations indicate how the elements


DECLARATION
referred to in the selector should be styled.
Declarations are split into two parts (a
property and a value), and are separated by
colon.

S
9

CSS properties affect


how elements are
displayed
THINKING INSIDE THE BOX

CSS declarations sit inside curly brackets and h1,h2,h3 {


each is made up of two parts: a property and
a value, separated by a colon. You can specify
font-family: Arial;
Web Design

several properties in one declaration, each


separated by a semi-colon.
color: yellow;}
This rule indicates that all <h1>,<h2>,<h3>
PROPERTY VALUE
elements should be shown in the Arial
typeface, in a yellow color.

S
10

CSS properties affect


how elements are
displayed
THINKING INSIDE THE BOX

Properties indicate the aspects of the h1,h2,h3 {


element you want to change. For example,
color, font, width, height and borders.
font-family: Arial;
Web Design

Values specify the settings you want to use color: yellow;}


for the chosen properties. For example, if
you want to specify a color property then
PROPERTY VALUE
the value is the color you want the text in
these elements to be.

S
11

EXAMPLE

This example uses two documents: the


HTML file (example.html) and a separate
CSS file (example.css). The fifth line of
Web Design

HTML uses the <link> element to indicate


where the CSS file is located.

S
12

EXAMPLE

This example uses two documents: the


HTML file (example.html) and a separate
CSS file (example.css). The fifth line of
Web Design

HTML uses the <link> element to indicate


where the CSS file is located.

S
13

Using external
CSS

The <link> element can be used in an


HTML document to tell the browser where
to find the CSS file used to style the page.
Web Design

It is an empty element, and it lives inside


the <head> element. It should use three
attributes:

href; type; rel

S
14

Using external
CSS

href
This specifies the path to the CSS file

type
Web Design

This attribute specifies the type of document


being linked to. The value should be text/css

rel
This specifies the relationship between the HTML
page and the file it is linked to. The value should
be stylesheet when linking to a CSS file

S
15

Using Internal
CSS
<style>

You can also include CSS rules within an


HTML page by placing them inside <style>
element, which usually sits inside the
Web Design

<head> element of the page.

The <style> element should use the type


attribute to indicate that the styles are
specified in CSS. The value should be
text/css.

S
16

Using Internal
CSS
<style>

When building a site with more than one page,


you should use an external CSS style sheet. This:

● Allow all pages to use the same style


Web Design

rules(rather than repeating them in each page).

● Keeps the content separate from how the page


looks.

● Mean you can change the styles used across all


pages by altering just one file (rather than each
individual page).

S
17

CSS SELECTORS

There are many different types of CSS


selector that allow you to target rules to
specific elements in an HTML document.
Web Design

CSS selectors are case sensitive, so they


must match element names and attribute
values exactly.

S
18

CSS SELECTORS
SELECTOR MEANING EXAMPLE
UNIVERSAL SELECTOR Applies to all elements in the *{}
document Targets all elements on the page

TYPE SELECTOR Matches element names h1, h2, h3 { }


Web Design

Targets the <h1>,<h2>,<h3> elements

CLASS SELECTOR Matches an element whose .note { }


class attribute has a value that Targets any element whose class attribute has
matches the one specified after a value of note
the period p.note { }
Targets only <p> elements whose class
attribute has a value of note

S
19

CSS SELECTORS
SELECTOR MEANING EXAMPLE
ID SELECTOR Matches an element whose #introduction { }
id attribute has a value that Targets the element whose id attribute has a value
matches the one specified after of introduction
the pound or hash symbol
Web Design

CHILD SELECTOR Matches an element that is a li>a { }


direct child of another Targets any <a> elements that are children of an <li>
element (but not other <a> elements in the page)

DESCENDANT SELECTOR Matches an element that is a pa{}


descendant of another specified Targets any <a> elements that sit inside a <p> element,
element (not just direct child of even if there are other elements nested between them
that element)

S
20

How CSS rules


cascade

If there are two or more rules that apply to


the same element, it is important to
understand which will take precedence.
Web Design

Last Rule
If the two selectors are identical, the latter
of the two will take precedence. Here you
can see the second i selector takes
precedence over the first.

S
21

How CSS rules


cascade

Specificity
If one selector is more specific than the
others, the more specific rule will take
Web Design

precedence over more general ones. In this


example:
h1 is more specific than star (*)
p b is more specific than p
p#intro is more specific than p

S
22

How CSS rules


cascade

Important
you can add !important after any property
value to indicate that it should be
Web Design

considered more important than other


rules that apply to the same element.

S
23

Inheritance

You can force a lot of properties to inherit


values from their parent elements by using
inherit for the value of the properties. In
Web Design

this example, the <div> element with a


class called page inherits the padding size
from the CSS rule that applies to the
<body> element.

S
24

Assignment

1、Acquaint yourself with the sample code provided in the


courseware, and independently engage in hands-on practi
ce by writing and testing it on your own accord. (No submi
Web Design

ssion is necessary.)

2、Please create an external style sheet file (with self-


determined content, such as adjusting typeface, font size,
foreground color, background color, etc.), apply it to the
book introduction website made in Assignment 3, and
unify the display style of each web page.

S
25
Web Design

Thank You！
谢谢！

You might also like