Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Layout (CSS) : Cascading Style Sheets

    Загружено:

    Andz Bass
    31 просмотров14 страниц
    HTML CCS introduction

    Оригинальное название

    CSS intro

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PPTX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    HTML CCS introduction

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    31 просмотров14 страниц

    Layout (CSS) : Cascading Style Sheets

    Загружено:

    Andz Bass
    HTML CCS introduction

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 14

    Cascading Style Sheets

    Layout (CSS)
    What is CSS?

     CSS stands for Cascading Style Sheets


     Styles define how to display HTML elements
     Styles were added to HTML 4.0 to solve a
    problem
     External Style Sheets can save a lot of work
     External Style Sheets are stored in CSS files
     CSS Saves a Lot of Work!
     CSS defines HOW HTML elements are to be
    displayed.
     Styles are normally saved in external .css
    files. External style sheets enable you to
    change the appearance and layout of all the
    pages in a Web site, just by editing one single
    file!
    CSS Syntax
    A CSS rule has two main parts: a selector, and one or more declarations:

     The selector is normally the HTML element you want to style.


     Each declaration consists of a property and a value.
     The property is the style attribute you want to change. Each property
    has a value.
    CSS Comments
     Comments are used to explain your code, and may help you when you
    edit the source code at a later date. Comments are ignored by
    browsers.

     A CSS comment begins with "/*", and ends with "*/", like this:

    /*This is a comment*/
    p
    {
    text-align:center;
    /*This is another comment*/
    color:black;
    font-family:arial;
    }
    CSS is the better half of HTML. And in coding,
    there is no equality of status: HTML takes
    care of the rough stuff (the structure), while
    CSS gives it a nice touch (layout).
    One of the smart features of CSS is the
    possibility to manage your layout centrally.
    Instead of using the style attribute in each
    tag, you can tell the browser once how it
    must layout all the text on the page:
    <html>
    <head>
    <title>My first CSS page</title>
    <style type="text/css">
    h1 {font-size: 30px; font-family: arial;}
    h2 {font-size: 15px; font-family: courier;}
    p {font-size: 8px; font-family: "times new roman";}
    </style>
    </head>
    <body>
    <h1>My first CSS page</h1>
    <h2>Welcome to my first CSS page</h2>
    <p>Here you can see how CSS works </p>
    </body>
    </html>
    What else can I do with CSS?

     CSS can be used for much more than


    specifying font types and sizes. For example,
    you can add colours and backgrounds. Here
    are some examples for you to experiment
    with.
    <p style="color:green;">Green text</p>

    <h1 style="background-color: blue;">Heading on blue background</h1>

    <body style="background-image: url('http://www.html.net/logo.png');">


    Is CSS nothing but colours and font
    types?

    CSS can also be used to control the page


    setup and presentation (margins, float,
    alignment, width, height etc.). By regulating
    the different elements with CSS you are able
    to layout your pages elegantly and precisely.
    <p style="padding:25px;border:1px solid red;">I love CSS</p>

    Result

    I Love CSS
    With the property float an element can either be floated
    to the right or to the left.

    <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing


    elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation
    ullamcorper suscipit lobortis nisl ut aliquip ex ea
    commodo consequat...</p>

    Вам также может понравиться