Scribd Logo
Importer

Bienvenue sur Scribd !

  • Jeffrey Miller, Ph.D. Jeffrey - Miller@usc - Edu: CSCI 201 Principles of Software Development

    Transféré par

    John Mathias
    43 vues13 pages
    CSCI 201

    Titre original

    Css

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    CSCI 201

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    43 vues13 pages

    Jeffrey Miller, Ph.D. Jeffrey - Miller@usc - Edu: CSCI 201 Principles of Software Development

    Transféré par

    John Mathias
    CSCI 201

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 13

    CSS

    CSCI 201
    Principles of Software Development

    Jeffrey Miller, Ph.D.


    jeffrey.miller@usc.edu
    Outline
    • CSS
    • Program

    USC CSCI 201L


    CSS
    ▪ Cascading Style Sheets (CSS) are used in
    conjunction with HTML to describe how HTML
    elements should be displayed
    ▪ CSS can be included in three ways
    1. Inline in an HTML element through
    the style attribute
    2. In the <style> tag in an HTML document
    3. In an external file that is included in an HTML
    document in the <link> tag
    • In the <head> tag, include
    <link rel=“stylesheet” type=“text/css” href=“test.css” />

    USC CSCI 201L 3/13


    HTML Page
    <!DOCTYPE html>
    <html>
    <head>
    <title>My First CSS</title>
    </head>
    <body>
    <h2>CSCI 201</h2>
    <h4>This class is learning about HTML and CSS.</h4>
    <table>
    <tr>
    <th>Prefix</th>
    <th>Number</th>
    </tr>
    <tr>
    <td>CSCI</td>
    <td>104</td>
    </tr>
    <tr>
    <td>CSCI</td>
    <td>201</td>
    </tr>
    <tr>
    <td>EE</td>
    <td>101</td>
    </tr>
    </table>
    </body>
    </html>

    USC CSCI 201L 4/13


    style Tag
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>My First CSS</title>
    5 <style>
    6 h2 {
    7 color: blue;
    8 }
    9 </style>
    10 </head>
    11 <body>
    12 <h2>CSCI 201</h2>
    13 <h4>This class is learning about HTML and CSS.</h4>
    14 <table>
    15 <tr>
    16 <th>Prefix</th>
    17 <th>Number</th>
    18 </tr>
    19 <tr>
    20 <td>CSCI</td>
    21 <td>104</td>
    22 </tr>
    23 <tr>
    24 <td>CSCI</td>
    25 <td>201</td>
    26 </tr>
    27 <tr>
    28 <td>EE</td>
    29 <td>101</td>
    30 </tr>
    31 </table>
    32 </body>
    33 </html>

    USC CSCI 201L 5/13


    id Attribute
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>My First CSS</title>
    5 <style>
    6 h2 {
    7 color: blue;
    8 }
    9 #point12 {
    10 font-size: 12pt; No point12 id
    11 }
    12 </style>
    13 </head>
    14 <body>
    15 <h2 id=“point12”>CSCI 201</h2>
    16 <h4>This class is learning about HTML and CSS.</h4>
    17 <table>
    18 <tr>
    19 <th>Prefix</th>
    20 <th>Number</th>
    21 </tr>
    22 <tr>
    23 <td>CSCI</td>
    24 <td>104</td>
    25 </tr>
    26 <tr>
    27
    28
    <td>CSCI</td>
    <td>201</td> With point12 id
    29 </tr>
    30 <tr>
    31 <td>EE</td>
    32 <td>101</td>
    33 </tr>
    34 </table>
    35 </body>
    36 </html>

    USC CSCI 201L 6/13


    class Attribute
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>My First CSS</title>
    5 <style>
    6 h2 {
    7 color: blue;
    8 }
    9 #point12 {
    10 font-size: 12pt;
    11 } No center class
    12 .center {
    13 text-align: center;
    14 }
    15 </style>
    16 </head>
    17 <body>
    18 <h2 id=“point12”>CSCI 201</h2>
    19 <h4 class=“center”>This class is learning about HTML and CSS.</h4>
    20 <table>
    21 <tr>
    22 <th>Prefix</th>
    23 <th>Number</th>
    24 </tr>
    25 <tr>
    26 <td>CSCI</td>
    27 <td>104</td>
    28 </tr>
    29
    30
    <tr>
    <td>CSCI</td> With center class
    31 <td>201</td>
    32 </tr>
    33 <tr>
    34 <td>EE</td>
    35 <td>101</td>
    36 </tr>
    37 </table>
    38 </body>
    39 </html>

    USC CSCI 201L 7/13


    HTML Block Tags
    ▪ div and span tags are often used with the style or class attribute
    › div is a block-level element
    › span is an inline element

    <!DOCTYPE html>
    <html>
    <head>
    <title>My First CSS</title>
    </head>
    <body>
    <h2>CSCI <span style="color:red">201</span></h2>
    <div style="background-color:blue; color:white">
    This class is learning about HTML and CSS.<br />
    Hopefully it will be fun.
    </div>
    </body>
    </html>

    USC CSCI 201L 8/13


    CSS Frameworks
    ▪ CSS Frameworks are very popular now to help programmers with
    some of the more common tasks, such as responsiveness (i.e. a
    web page that automatically resizes for different screen sizes)
    ▪ Bootstrap (https://getbootstrap.com/) is probably the most
    popular CSS Framework, though many others exist

    9/13
    More CSS
    ▪ For more information on CSS
    › Go to http://www.w3schools.com/css
    › Go to any web page and view the source (though you may need
    to find the stylesheet if it is external)

    10/13
    Outline
    • CSS
    • Program

    USC CSCI 201L


    Program
    ▪ Create one HTML page that is formatted in the following ways with different stylesheets.

    12/13
    Program
    ▪ Go to http://www.w3schools.com/css/css_form.asp and modify the form to be more
    aesthetic like modern web pages.
    ▪ Make the form look different for each page.

    13/13

    Vous aimerez peut-être aussi