.


:

:



,



( , )

:

































 

 

 

 
FAQ

- .

4. CSS

: . -.

1

1. ( 1- , , ).

2

1. /css/

2. main.css

3. <LINK>.

4. (, <body>):

-

-

-

- (, Georgia)

5. .

6. ( main.css) .

3

1. (, <p> <p>):

-

-

-

2. .

3. ( main.css) .

4

1. :

-

-

-

- ,

2. .

3. ( main.css) .

(Cascading Style Sheets, CSS) , . HTML , .

, . : , , , , .

, .

-. , , : , , , . (inheritance), , , . , <div>, .

.

Cascading Style Sheets http://www.w3.org/Style/CSS/

 

CSS

 

(), . :

1 (Selector). , . , .

2 (Property). . : , , , ..

3 (Value). , .

4 (Declaration). .

5 (Rule). ( + ).

, - , , . :

[, [,...]] {: ;}

 

, .

CSS

 

, HTML. :

1. , 30px, () Serif, ( ) 14px:

p { text-align: justify; text-indent: 30px; font-family: Serif; font-size: 14px; }

<p>.

2. :

h1, h2, h3 { color: blue; /* , #0000FF */}

3. :

table, img {border: none;}

4. :

li a {text-decoration: none;}

5. (<div>), 10px :

div, th, td { padding-left: 10px; padding-right: 10px; background-color: yellow;}

6. , , .

a {color: black; font-weight: bold;}p a, li a {font-weight: normal; text-decoration: none;}p a:hover*, li a:hover { color: #00FF00; text-decoration: underline; }

* (a:hover) , ,

 

CSS . , , : .

, , . , :

p {margin-left: 0;}p.warn {margin-left: 40px; color: #FF00;}

class :

<p class=warn> </p>

 

:

._ {}

 

, , .

:

:

.solid_blue {color: blue;}

:

<p class=solid_blue> </p><li class=solid_blue> </li>

:

h1.bigsans {font-family: Sans; font-size: 1.5em;}h1.smallserif {font-family: Serif; font-size:.84em;}

:

<h1 class=bigsans>, </h1><h1 class=smallserif>, </h1>

 

, id. , , # (). :

div#content { position: absolute; top: 10px; left: 10%; right: 10%; border: solid 1px silver; }... <div id="content"></div>

, .

(grouping) . , . , :

div { margin-left: 10px; margin-top: 5px; margin-right: 40px; margin-bottom: 15px; }

:

div {margin: 5px 40px 15px 10px;} /*: top right bottom left*/

.

, margin, padding, font, border, background (. CSS)

 

HTML:

1 (Inline). HTML.

2 (Embedded). .

3 (Linked External). , .

-. HTML style :

<p style="font: 12pt Courier"> 12 Courier</P>

:

<div style="font-family: Garamond; font-size: 18 pt;>" 18 Garamond.<span style="color:#ff3300;"> .</span></div>

, -.

<style>, HTML- (<head>...</head>):

<html><head>... <style> CSS </style>...</head><body>...

(linked), (external) , . (, , .css). <link> , , :

<link rel=stylesheet href="sample.css" type="text/css">

, , , sample.css. , -, href .

-- HTML , , . . - , . , :

-> ->

. , - , / . (, ), , .

- .

(, , , ..). , :

@media print {/* */ BODY { font-size: 10pt; } }@media screen { /* */ BODY { font-size: 12pt; } } @media screen, print { BODY { line-height: 1.2; } }@media all { BODY { margin: 1pt; } }

, , @media, , , .

, <link>:

<link rel=stylesheet href="sample.css" type="text/css" media=screen >

CSS

CSS , CSS http://www.w3.org/Style/CSS:

 

 

- CSS

background [background-color || background-image || background-repeat || background-attachment || background-position] | inherit
background-color <color> | transparent | inherit
background-image <uri> | none | inherit
background-position [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit
border [ border-width || border-style || <color> ] | inherit
border-collapse collapse | separate | inherit /
border-color <color>{1,4} | transparent | inherit
border-style <border-style>{1,4} | inherit
border-top border-right border-bottom border-left [ border-top-width || border-style || <color> ] | inherit
border-width <border-width>{1,4} | inherit
bottom <length> | <percentage> | auto | inherit
clear none | left | right | both | inherit
clip <shape> | auto | inherit
color <color> | inherit
cursor [ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
display inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
empty-cells show | hide | inherit
float left | right | none | inherit
font [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
font-family [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit
font-style normal | italic | oblique | inherit
font-variant normal | small-caps | inherit
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
height <length> | <percentage> | auto | inherit
left <length> | <percentage> | auto | inherit
line-height normal | <number> | <length> | <percentage> | inherit
list-style [ list-style-type || list-style-position || list-style-image ] | inherit
margin <margin-width>{1,4} | inherit
margin-top margin-right margin-bottom margin-left <margin-width> | inherit
padding <padding-width>{1,4} | inherit
padding-top padding-right padding-bottom padding-left <padding-width> | inherit
position static | relative | absolute | fixed | inherit
right <length> | <percentage> | auto | inherit
text-align left | right | center | justify | <string> | inherit
text-decoration none | [ underline || overline || line-through || blink ] | inherit
text-indent <length> | <percentage> | inherit
text-transform capitalize | uppercase | lowercase | none | inherit
top <length> | <percentage> | auto | inherit
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> |
visibility visible | hidden | collapse | inherit
white-space normal | pre | nowrap | inherit
width <length> | <percentage> | auto | inherit
z-index auto | <integer> | inherit Tab

1. display:none visiblity:hidden?

2. - 200px. ?

3. - (, <p>) ?

<== | ==>
 |
:

: 2017-03-18; !; : 634 |

:

:

. .
==> ...

1412 - | 1376 -


© 2015-2024 lektsii.org - -

: 0.116 .