Scribd Logo
Загрузить

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

  • Css

    Загружено:

    Pravin Lakudzode
    35 просмотров26 страниц
    Web

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

    © © All Rights Reserved

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

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

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

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

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

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

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    35 просмотров26 страниц

    Css

    Загружено:

    Pravin Lakudzode
    Web

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

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 26

    CSS

    What is HTML?
     HTML is the language for describing the structure of Web pages.

     HTML gives authors the means to:

    1. Publish online documents with headings, text, tables, lists, photos,


    etc.
    2. Retrieve online information via hypertext links, at the click of a
    button.
    3. Include spread-sheets, video clips, sound clips, and other applications
    directly in their documents.
    What is CSS?
    1. CSS is an acronym for Cascading Style Sheets.
    2. CSS mainly does just one thing: it describes how web pages
    should look.
    3. It is a style sheet language which is used to describe the look
    and formatting of a document written in markup language.
    4. The cascading means that a style applied to a parent element
    will also apply to all children elements within the parent.
    5. For example, setting the color of body text will mean all
    headings and paragraphs within the body will also be the same
    color.

    1. Try it yourself
    2. https://www.w3schools.com/css/tryit.asp?filename=trycss_color
    Why CSS?
     The biggest problem in traditional classic (specially static) HTML
    pages is that the text of your web page and the formatting
    operations performed over it are all mixed inside one place / one
    file.

     Saves a lot of time

     Provide more attributes


    Advantages of CSS
     CSS saves time :
    You can write CSS once and then reuse same sheet in multiple HTML pages.
    You can define a style for each HTML element and apply it to as many Web
    pages as you want.
     Pages load faster :
    Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
    So less code means faster download times.
     Easy maintenance:
    To make a global change, simply change the style, and all elements in all the
    web pages will be updated automatically.
     Multiple Device Compatibility:
    Style sheets allow content to be optimized for more than one type of device.
    By using the same HTML document, different versions of a website can be
    presented for handheld devices such as PDAs and cell phones or for printing.
    Defining a Style
     A style is defined with two sections: one or more selectors and
    one or more declarations enclosed in {Curly Brackets}
     Each declaration is made up of a Property: Value; pair
     Syntax is given below

     The above image shows the use of one selector and two
    Declarations. Note the use of { } : ; which are essential.
    Defining a Style
     A simple style rule syntax with one selector and one declaration
    (property: value; pair}
    selector {property: value;}

     Example of defining
    p {font-size: 10pt}
    CSS SELECTORS
    Applying Style Sheets
     There are 3 types of style sheets. The difference is where the
    style is defined and the area where that style is applied.
    1. Inline style sheet within a tag. Applies only to that particular
    occurrence of that tag.

    2. Internal (also called Embedded) style sheet is defined within the


    head section of a page. Applies to that page only

    3. External style sheet defined in a separate, hence external, file.


    Applies to all pages that link to the external style sheet.
    Types of CSS

     Inline styles
     Embedded styles/Internal style
     External styles
    Inline style sheet
     Use for
    Inline style sheet are should only be used where a particular
    style is not going to be repeated elsewhere on the page/site

     Where to define
    The definition is defined within the HTML tag in the body
    section of the HTML code. It must be redefined every time it is
    required

     Syntax
    <element STYLE="property:value">
    Internal style sheet
     Use for
    It is ideal if only 1 page is going to be used for this style.
    The styles can then be used more than once throughout the page.
     Where to define
    The Internal style sheet is defined within the head section.
    <head>
    < style type="text/css">
    Your Style definitions go here
    < /style>
    < /head>
     Example:
    <head>
    < style type="text/css">
    Body {background-color: #3333FF; color: #000033;}
    p {margin-left: 6px}
    < /style>
    < /head>
    External style sheet

     Use for
    This is the best method if you wish to control the design of more
    that one page.
     Where to define
    The style definitions are only written once and saved into a file.
    Each page that wishes to use that file places a link to the file in
    the HEAD section.
    <head> Section of your pages
    Defining External style sheet

     There are two ways to create a CSS file.


     The first is to write the CSS code in Notepad and save it as
    a .css file,
     The second one is to directly add the style sheet in our
    Solution Explorer and direct Visual Studio to use it on our
    HTML page.
    Order of precedence
     If the same style is defined with different values in the
    different style sheets then the order of precedence is
    1. Inline Style Sheets
    2. Internal Style Sheets
    3. The last External Style sheet
    Element based style
     Use an element selector to define a set of properties that you
    want every instance of a particular HTML element to use in a
    web page.
     For example, to create a margin of 25 pixels around all
    paragraphs (content surrounded by <p> tags) in your web page,
    you create a style that uses the p element as its selector and
    contains declarations for margin properties, as shown in the
    following code.
     Example of a rule set for an element selector
    p { margin-left: 25px; margin-right: 25px }
    Class based style
     Use a class selector to define a set of properties that you want to
    use on one or more items in a web page.
     If you ever want to modify the style, you can edit the style's rule
    set and every item you've applied the style to will automatically
    reflect the changes.
     In the following example, "introduction" is the style's selector,
    and "font-size: small" is one property declaration, followed by a
    second property declaration.
     Example of a rule set for a class selector
    .introduction {font-size: small; color: white}
     Syntax
    .class {
    css declarations;
    }
    ID based styles
     Use an ID selector when you want to define a set of properties
    for a single item or block of items that you want to distinguish
    from all other content in one or more web pages.
     Use an ID selector when you want to style a single HTML
    element in a web page.
     Example of a rule set for an ID-based style
    #footer {background-color: #CCCCCC; margin: 15px}
    Website(2)
    HtML ol and ul

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