Scribd Logo
Carica

Benvenuto in Scribd!

  • CSS Summary

    Caricato da

    Marlou Dy
    20 visualizzazioni5 pagine
    css codes

    Copyright

    © © All Rights Reserved

    Formati disponibili

    TXT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    css codes

    Copyright:

    © All Rights Reserved
    Scarica in formato TXT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    20 visualizzazioni5 pagine

    CSS Summary

    Caricato da

    Marlou Dy
    css codes

    Copyright:

    © All Rights Reserved
    Scarica in formato TXT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    http://www.onextrapixel.

    com/2013/10/25/40-stunning-website-designs-with-great-co
    lor-schemes/
    http://www.w3schools.com/tags/ref_colorpicker.asp?colorhex=191970
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    CSS SYNTAX
    h1- selector
    { color:blue; -declaration/value} open and close w/ curly brace.
    COMMENT IN XHTML
    <!-- -->
    COMMENT IN CSS
    /* */
    SELECTORS
    Element/ Id / Class/
    - Do not start with number as name for ID and Class.
    Grouping
    - in style sheets there are often elements with the same style:
    - h1, h2, p {
    text-align: center;
    color: red;}
    INSERTING CSS
    External style sheet
    - <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    Internal Style Sheet
    - <head>
    <style>
    body {
    background-color: linen;
    }
    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    Inline Styles
    - <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
    CASCADING ORDER
    - What style will be used when there is more than one style specified fo
    r an HTML element?
    Generally speaking we can say that all the styles will "cascade" into a
    new "virtual" style sheet by the following rules, where number four has t
    he highest priority:
    1. Browser default
    2. External style sheet
    3. Internal style sheet (in the head section)
    4. Inline style (inside an HTML element)
    CSS BACKGROUND
    CSS background properties are used to define the background effects of an elemen
    t.
    CSS properties used for background effects:
    background-color #6495ed;
    background-image url("paper.gif");
    background-repeat repeat-x; no-repeat
    background-attachment
    background-position right top;
    BACKGROUND SHORTCUT
    body {
    background: #ffffff url("img_tree.png") no-repeat right top;
    }
    CSS TEXT
    color:
    text-align: center; right; left; justify
    text-decoration: none; overline; line-thriugh; underline
    text-transform: upeercase; lowercase; capitalize;
    text-indent: 5opx
    CSS FONTS
    font-family:
    font-style: normal; italic; oblique
    font-size: Size With Em font-size: 2.5em; /* 40px/16=2.5em */
    body {
    font-size: 100%;
    }
    h1 {
    font-size: 2.5em;
    }
    h2 {
    font-size: 1.875em;
    }
    p {
    font-size: 0.875em;
    }
    CSS LINKS
    Styling Links
    Links can be styled with any CSS property (e.g. color, font-family, background,
    etc.).
    In addition, links can be styled differently depending on what state they are in
    .
    The four links states are:
    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked
    text-decotation:
    background-color:
    CSS LISTS
    The CSS list properties allow you to:
    Set different list item markers for ordered lists
    Set different list item markers for unordered lists
    Set an image as the list item marker
    In HTML, there are two types of lists:
    unordered lists - the list items are marked with bullets
    ordered lists - the list items are marked with numbers or letters
    List Item Markers
    list-style-type: circle; square; upper-roman; lower-alpha;
    An Image as The List Item Marker
    list-style-image: url('sqpurple.gif');
    list-style-position
    Specifies if the list-item markers should appear inside or outside the content f
    low
    list-style
    Sets all the properties for a list in one declaration
    ul {
    list-style: square url("sqpurple.gif");
    }
    Crossbrowser Solution
    ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }
    ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 14px;
    }

    Potrebbero piacerti anche