Scribd Logo
Carica

Benvenuto in Scribd!

  • Css Tutorial

    Caricato da

    meraj121
    11 visualizzazioni8 pagine
    this is the this is the this is the this is the this is the this is the

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    this is the this is the this is the this is the this is the this is the

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    11 visualizzazioni8 pagine

    Css Tutorial

    Caricato da

    meraj121
    this is the this is the this is the this is the this is the this is the

    Copyright:

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

    CSS Selectors

    CSS selectors allow you to select and manipulate HTML element(s).


    CSS selectors are used to "find" (or select) HTML elements based on their id,
    classes, types, attributes, values of attributes and much more.

    The element Selector


    The element selector selects elements based on the element name.
    You can select all <p> elements on a page like this: (all <p> elements will be
    center-aligned, with a red text color)

    Example
    p{
    text-align: center;
    color: red;
    }

    The id Selector
    The id selector uses the id attribute of an HTML tag to find the specific element.
    An id should be unique within a page, so you should use the id selector when you
    want to find a single, unique element.
    To find an element with a specific id, write a hash character, followed by the id of
    the element.
    The style rule below will be applied to the HTML element with id="para1":

    Example
    #para1 {
    text-align: center;
    color: red;
    }

    The class Selector


    The class selector finds elements with the specific class.
    The class selector uses the HTML class attribute.
    To find elements with a specific class, write a period character, followed by the
    name of the class:
    In the example below, all HTML elements with class="center" will be centeraligned:

    Example
    .center {
    text-align: center;
    color: red;
    }
    You can also specify that only specific HTML elements should be affected by a
    class.
    In the example below, all p elements with class="center" will be center-aligned:

    Example
    p.center {
    text-align: center;
    color: red;
    }

    Grouping Selectors
    In style sheets there are often elements with the same style:

    Example
    h1 {
    text-align: center;

    color: red;
    }
    h2 {
    text-align: center;
    color: red;
    }
    p{
    text-align: center;
    color: red;
    }
    To minimize the code, you can group selectors.
    To group selectors, separate each selector with a comma.
    In the example below we have grouped the selectors from the code above:

    Example
    h1, h2, p {
    text-align: center;
    color: red;
    }
    CSS can be used to create an image gallery.

    Add a description of the image here


    The following image gallery is created with CSS:
    <html>
    <head>
    <style>
    div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;

    text-align: center; }
    div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff; }
    div.img a:hover img {
    border:1px solid #0000ff; }
    div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px; }
    </style>
    </head>
    <body>
    <div class="img">
    <a target="_blank" href="klematis_big.htm">
    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis2_big.htm">
    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis3_big.htm">
    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis4_big.htm">
    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    </body>
    </html>

    CSS Image Opacity / Transparency

    First we will show you how to create a transparent image with CSS.
    img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    }

    Example - Text in Transparent Box


    <html>
    <head>
    <style>
    div.background {
    width: 500px;
    height: 250px;
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
    }
    div.transbox {
    width: 400px;
    height: 180px;
    margin: 30px 50px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    }

    div.transbox p {
    margin: 30px 40px;
    font-weight: bold;
    color: #000000;
    }
    </style>
    </head>
    <body>
    <div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.</p>
    </div>
    </div>
    </body>
    </html>

    <!DOCTYPE html>
    <html><head><style>
    body {
    margin-left: 200px;
    background: #5d9ab2 url("img_tree.png") no-repeat top left;
    }
    .container {

    text-align: center;
    }
    .center_div {
    border: 1px solid gray;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #d0f0f6;
    text-align: left;
    padding: 8px;
    }
    </style></head>
    <body>
    <div class="container">
    <div class="center_div">
    <h1>Hello World!</h1>
    <p>This example contains some advanced CSS methods you may
    not have learned yet. But, we will explain these methods in a later
    chapter in the tutorial.</p>
    </div> </div>
    </body>
    </html>

    Potrebbero piacerti anche