CSS
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Введение в css PowerPoint PPT Presentation


Введение в css

Download Presentation

Введение в css

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Css

CSS


Css

SS.

{ 1: ; 2: ;}


Css html

css html

  • <head> <link href="style.css" rel="stylesheet"></head>

  • <style></style>

    <style type="text/css">H1{ font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#336; }</style>

  • <h1 style="font-size: 20px; font-family: Verdana, Arial; color: #336;"></h1>


Css

.

. , , . < >. :

p { /* */}h1 { /* */}


Css

<p class="help"></p><p class="help error"></p>

help, help error.

: ._. :

.help { ... }.error { ... }


Css

CSS . :

  • ;

  • ;

  • ;

  • ;

  • : , , ;

  • .


Css

CSS

body {

background: #F6F1F1; /* */

}

.main /* main*/{

background: #418be2;

border-radius: 5px; /* */

box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* */

margin: 25px auto 25px; /* */

padding: 25px 50px; /* */

text-align: left;

font-family: arial; /**/

width: 900px; /* */

}


Css

CSS , .. : .

CSS-, , . , .


Css

/HMTL/

<p class="truth">-, , .</p>

<p>-, , .</p>

/CSS/

p {

outline: 2px solid rgba(0, 0, 0, 0.1);

padding: 10px;

}

.truth {

background-color: #dff0d8;

}


Css

CSS

CSS- , , . , :

  • CSS- style ,

  • id,

  • ,

  • .


Css

CSS.

p { padding: 10px; background-color: #dff0d8;} +.truth { background-color: #aaddff;} = { padding: 10px; background-color: #dff0d8; background-color: #aaddff;}


Css

<p class="blue nice-box"> .</p>

<p class="green nice-box">-, , .</p>

<p class="blue nice-box">-, , .</p>

/CSS/

.green {

background-color: #dff0d8;

}

.blue {

background-color: #aaddff;

}

.nice-box {

padding: 10px;

border-radius: 5px;

box-shadow: 1px 1px 5px #CCC;

}


Css

<p class="blue nice-box"> .</p>

<p class="green nice-box">-, , .</p>

<p class="blue nice-box">-, , .</p>

/CSS/

.green {

background-color: #dff0d8;

}

.blue {

background-color: #aaddff;

}

.nice-box {

padding: 10px;

border-radius: 5px;

box-shadow: 1px 1px 5px #CCC;

}


Css

<p class="blue nice-box"> .</p>

<p class="green nice-box">-, , .</p>

<p class="blue nice-box">-, , .</p>

/CSS/

.green {

background-color: #dff0d8;

}

.blue {

background-color: #aaddff;

}

.nice-box {

padding: 10px;

border-radius: 5px;

box-shadow: 1px 1px 5px #CCC;

}


Css

CSS . , ( ).

, body . body , .

: ul li. ul , li .

. . : , , , . , body , .


Css

, , :

/* strong p */

p strong { ... }

/* .hit ul */ul .hit { ... }

/* .menu, .footer */.footer .menu a { ... }


Css

, . . :

<ul> <li><span>...</span></li> <li><span>...</span></li></ul>

<ul><li> , <span> , .

, . . .

, >.

: ul > li ul > li > span.


Css

, .

c :, :. :

a:visited { ... }li:last-child { ... }.alert:hover { ... }


Hover

hover

hover .

.block{ ... }

.block:hover { ... } /* */


Css

, type .

: []. :

1. input[checked] { ... }2. input[type="text"] { ... }

, checked, , type text


Css

id

HTML-, . id (), #, , #some-id.

id , . id .

id . , , CSS


Css

htmlbook.ru - HTML/CSS

www.w3.org - ,

codepen.io - ,


  • Login