Scribd Logo
Загрузить

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

  • Css (Cascading Style Sheet)

    Загружено:

    Morad Alee
    18 просмотров6 страниц
    css

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

    © © All Rights Reserved

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

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

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

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

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

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

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

    Css (Cascading Style Sheet)

    Загружено:

    Morad Alee
    css

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

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

    CSS (CASCADING STYLE

    SHEET)

    Mostly used for designing/make-up of tags


    For good representation of our html pages/web pages
    There are different types of css styling to the html pages/web
    pages
    1. INLINECSS
    2. INTERNAL CSS
    3. EXTERNAL CSs
    Must be saved with .css extension
    CSS CONT….
     The id Selector:
     It uses the id attribute of an HTML element to select a specific element
     id of an element should be unique within a page, so the id selector is used to
    select one unique element!
     To select an element with a specific id, write a hash (#) character, followed by
    the id of the element.
     Example: <style>
     #p1{
     text-align: center;
     color: red;
     }
     </style>
     </head>
     <body>

     <p id=“p1">THIS IS CSS!</p>


     <p>THIS IS NORMAL PARAGRAPH WITHOUT ANY AFFECT.</p>
    CSS COLORS
     DIFFERENT COLORS

     SYNTAX : <TAG STYLE


    (KEYWORD)=“PROPERTIES=COLORNAME”
     COLOR VALUES: BY NAMES, HEXADECIMAL
    VALUES OR RGB(0,0,0)
     BORDER STYLES: BORDER:
    PX,SOLID,DASHED,DOTTED,COLOR
     HSL (HUE AND SATURATION LIGHTNESS <tag
    style=“properties (background
    color):hsl(0,100%,,0%);”>text</h1>
    COLORS CONT…
     HSLA Value
     HSLA color values are an extension of HSL color values with an alpha
    channel - which specifies the opacity for a color.
     An HSLA color value is specified with:
     hsla(hue, saturation, lightness, alpha)
     Examples:
     <h1 style="background-color:hsla(9, 100%, 64%, 0);">some
    Text</h1>
     <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">Some
    Text</h1>
    BACKGROUND COLORS AND
    IMAGES ETC
     BODY BACKGROUND COLORS
     TAGS BACKGROUND COLORS
     DIV BACKGROUND COLORS
     BACKGROUND IMAGES
     IMAGE AND PATH AND IMAGE PROPERTIES
     <style>
     body {
     background-image: url(“PATH");
     background-repeat: no-repeat;
     background-position: right top;
     margin-right: 200px;
     background-attachment: fixed;
     }
     OR
     body {
    background: #ffffff url("img_tree.png") no-repeat right top;
    }
     </style>
    BACKGROUND ORIGIN
     EXAMPLES:  #example3 {
     <style>  border: 10px double black;
     #example1 {  padding: 25px;
     border: 10px double black;  background: url(paper.gif);
     padding: 25px;  background-repeat: no-repeat;
     background: url(paper.gif);  background-origin: content-box;
     background-repeat: no-repeat;  }</style>
     background-origin: padding-box;  </head>
     }  <body>
     #example2 {  <h2>background-origin: padding-box
     border: 10px double black; (default):</h2>
     padding: 100px;  <div id="example1">
     background: url(paper.gif);  <h2>Hello World</h2>
     background-repeat: no-repeat;  <p>The background image starts from
    the upper left corner of the padding
     background-origin: border-box;
    edge.</p>
     }

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