Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML: Structure & Content CSS: Presentation & Style

    Cargado por

    cuteastig29
    22 vistas24 páginas
    html css

    Título original

    html css

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    html css

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    22 vistas24 páginas

    HTML: Structure & Content CSS: Presentation & Style

    Cargado por

    cuteastig29
    html css

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 24

    chapter4

    A CSS Primer
    html: structure & content
    CSS: presentation & style
    Deprecated elements
    Once deprecated, tags may well become
    obsolete
    <font></font>
    <b></b>
    <i></i>
    <u></u>
    <strike></strike>
    <center></center>

    Slide 4-2
    CSS terms
    style rule
    selector {property:value}

    examples
    h2 {color: red}
    h3 {color: #FF0000; text-align:center}
    p {color: navy; font-style:italic}
    h1,h2,h3,h4,h5,h6
{
color:
green
}

    Misc Resources folder/


    110 web resources/css

    Slide 4-3
    Styles are stored in Style Sheets
    external: separate file

    internal: <style> element in head section

    inline/local: style property in tag

    Slide 4-4
    internal style sheet
    <head>

    <style
type="text/css">

    


body
{background-color:
ivory;
color:
navy}
    


hr
{color:
sienna}

    


p
{font-family:”Verdana”}

    </style>

    </head>

    Slide 4-5
    Inline styles (a.k.a. local styles)

    <h2
style=“color:red”>
Local
Styles
</h2>


    <p
style="color:
sienna;
text-align:center">

    




x-ray
yankee
zulu

    </p>

    Slide 4-6
    External Style Sheet
    > Style
rules
stored
in
separate
file

    (eg)

/110/css/110.css

    > Connected
to
a
client
file
using
a
link

    element

    Slide 4-7
    External Style Sheet:
    /110/css/110.css
    external
style
sheets
may
contain
only

    > css
style
rules
    > css
comments
(for
documentation)
    > 
no
HTML
allowed
    
omit
<style>
element
    hr
{color:
sienna}

    p
{color:
sienna;
text-align:center}

    body
{background-image:





    url(“../images/back40.gif")}


    Slide 4-8
    Client File
    /110/about/contact.html
    clients connect to the style sheet using the
    <link> tag.

    The <link> tag goes inside the head section:

    <head>
    <link rel="stylesheet" type="text/css"
    href=“../css/110.css" />
    </head>

    Slide 4-9
    External Style Sheets
    CSS is a breakthrough in Web design:
     separates structure (html) from presentation
    (css)
     control the style of multiple Web pages all at
    once
     Define styles in an external style sheet and
    apply them to as many Web pages as you want
     To make a global change, simply change the
    style: all elements in the site are updated
    automatically

    Slide 4-10
    Cascading Style Sheets
    Multiple Styles Cascade Into One

    Styles can be specified

    o inline
    o local
    o external

    Even multiple external style sheets can be


    referenced inside a single HTML document
    Slide 4-11
    Cascading Order
    What style will be used when there is more than one style
    specified for an HTML element?

    Styles will "cascade" by the following rules


    (number 1 has the highest priority):

    4. Inline style
    5. Internal style sheet (<style> element in the <head>)
    6. External style sheet
    7. Browser default

    So, an inline style (inside an HTML element) has the highest


    priority, which means that it will override a style declared
    inside the <head> tag, in an external style sheet, or in a
    browser (a default value).

    Slide 4-12
    selectors:
    1. simple.

2.
class.

3.
id

    1.
simple: p
{font-family:”Verdana”}
    2.
class:




p.right
{text-align:
right}

    .center
{text-align:
center}

     <p
class="right">
This
paragraph
will
be

    right-aligned.
</p>

     <p
class="center">
This
paragraph
will
be

    center-aligned.
</p>

     <h2
class=“center”>
Zut
Alors!
</h2>

    Slide 4-13
    Selectors (cont.)

    3. id selector:

    h2#kermit
{color:
green}
    #alert
{color:
red}


    <h2 id=“kermit”> Bein’ Green! </h2>

    <p id=“alert”> Caveat Lector! </p>

    Slide 4-14
    Descendant selectors
    Problem: specify a CSS rule that “applies to
    EM elements that are contained by an H1
    element"

    Example:

    h1 { color: red }
    em { color: red }

    Slide 4-15
    4. Descendant selectors
    h1 { color: red }
    em { color: red }

    Although the intention of these rules is to


    add emphasis to text by changing its color,
    the effect will be lost in a case such as:

    <h1>This headline is <EM>very</EM>


    important</h1>

    Slide 4-16
    4. Descendant selectors
    Add a rule that sets the text color to blue
    whenever an em occurs anywhere within
    an h1

    h1 { color: red }
    em { color: red }
    h1 em { color: blue }

    Slide 4-17
    Descendant selectors
    Problem: specify a CSS rule that “applies to
    EM elements that are contained by an H1
    element"

    Example:

    h1 { color: red }
    em { color: red }

    Slide 4-18
    Classification of Elements:
    Block-level, Inline, List-item

    Block-Level Elements: Displayed on a line


    by itself
    p, h1, div, table, ol, ul, . . .

    Can only be contained by other block-level


    elements (with restrictions):
    —p can be in a div
    —p can not be in a p

    Slide 4-19
    Classification of Elements:
    Block-level, Inline, List-item

    Inline Elements: Do not begin on a new


    line

    a, em, span, img, …

    Can be children of any other element

    List-item Elements: appear in lists

    Slide 4-20
    CSS Display Property
    display

    values: block | inline | list-item | none


    applies to: all elements

    div#links a {display: block;}

    return to proj12

    Slide 4-21
    CSS Box Model
    > CSS assumes that every element is
    contained in an element box

    > E-M-B-P-C =
    Edge-Margin-Border-Padding-Content

    > The width of an element is the distance


    from the left side of the content to the
    right side of the content:

    Slide 4-22
    Example using a class selector

    div.duckBox {
    background-color:yellow; color:green;
    border-style:double; border-color: green;
    padding: 10px;
    /* text-align applies only to the inline content of
    a block-level element. To center the div itself,
    use the following three properties */
    margin-left:auto; margin-right:auto; width:50%;
    }

    Slide 4-23
    CSS Resources
    • W3Schools.com

    • Video: Beginner’s Guide to CSS

    • Quick Tutorials from WestCiv

    • Eric Meyer: CSS


    Author of CSS: The Definitive Guide

    Slide 4-24

    También podría gustarte